diff options
Diffstat (limited to 'packages/client/src')
342 files changed, 1386 insertions, 1526 deletions
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts index 243aea68c4..10257b841f 100644 --- a/packages/client/src/account.ts +++ b/packages/client/src/account.ts @@ -146,7 +146,7 @@ export async function openAccountMenu(opts: { onChoose?: (account: misskey.entities.UserDetailed) => void; }, ev: MouseEvent) { function showSigninDialog() { - popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, { + popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { done: res => { addAccount(res.id, res.i); success(); @@ -155,7 +155,7 @@ export async function openAccountMenu(opts: { } function createAccount() { - popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, { + popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { done: res => { addAccount(res.id, res.i); switchAccountWithToken(res.i); diff --git a/packages/client/src/components/abuse-report.vue b/packages/client/src/components/MkAbuseReport.vue index 8c25df1107..9a3464b640 100644 --- a/packages/client/src/components/abuse-report.vue +++ b/packages/client/src/components/MkAbuseReport.vue @@ -36,9 +36,9 @@ </template> <script lang="ts" setup> -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkSwitch from '@/components/form/switch.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import { acct, userPage } from '@/filters/user'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/abuse-report-window.vue b/packages/client/src/components/MkAbuseReportWindow.vue index 6b8e36c4da..1862d0a0e4 100644 --- a/packages/client/src/components/abuse-report-window.vue +++ b/packages/client/src/components/MkAbuseReportWindow.vue @@ -25,9 +25,9 @@ <script setup lang="ts"> import { ref } from 'vue'; import * as Misskey from 'misskey-js'; -import XWindow from '@/components/ui/window.vue'; +import XWindow from '@/components/MkWindow.vue'; import MkTextarea from '@/components/form/textarea.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/MkAnalogClock.vue index b138bfcb46..40ef626aed 100644 --- a/packages/client/src/components/analog-clock.vue +++ b/packages/client/src/components/MkAnalogClock.vue @@ -26,6 +26,7 @@ </text> </template> + <!-- <line :x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))" :y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))" @@ -35,6 +36,20 @@ :stroke-width="thickness / 2" stroke-linecap="round" /> + --> + + <line + class="s" + :class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }" + :x1="5 - (0 * (sHandLengthRatio * handsTailLength))" + :y1="5 + (1 * (sHandLengthRatio * handsTailLength))" + :x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))" + :y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))" + :stroke="sHandColor" + :stroke-width="thickness / 2" + :style="`transform: rotateZ(${sAngle}rad)`" + stroke-linecap="round" + /> <line :x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))" @@ -59,7 +74,7 @@ </template> <script lang="ts" setup> -import { ref, computed, onMounted, onBeforeUnmount, shallowRef } from 'vue'; +import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue'; import tinycolor from 'tinycolor2'; import { globalEvents } from '@/events.js'; @@ -84,6 +99,7 @@ const props = withDefaults(defineProps<{ twentyfour?: boolean; graduations?: 'none' | 'dots' | 'numbers'; fadeGraduations?: boolean; + sAnimation?: 'none' | 'elastic' | 'easeOut'; }>(), { numbers: false, thickness: 0.1, @@ -91,6 +107,7 @@ const props = withDefaults(defineProps<{ twentyfour: false, graduations: 'dots', fadeGraduations: true, + sAnimation: 'elastic', }); const graduationsMajor = computed(() => { @@ -125,6 +142,8 @@ let s = $ref<number>(0); let hAngle = $ref<number>(0); let mAngle = $ref<number>(0); let sAngle = $ref<number>(0); +let disableSAnimate = $ref(false); +let sOneRound = false; function tick() { const now = new Date(); @@ -134,7 +153,21 @@ function tick() { h = now.getHours(); hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6); mAngle = Math.PI * (m + s / 60) / 30; - sAngle = Math.PI * s / 30; + if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない) + sAngle = Math.PI * 60 / 30; + window.setTimeout(() => { + disableSAnimate = true; + window.setTimeout(() => { + sAngle = 0; + window.setTimeout(() => { + disableSAnimate = false; + }, 100); + }, 100); + }, 700); + } else { + sAngle = Math.PI * s / 30; + } + sOneRound = s === 59; } tick(); @@ -175,5 +208,18 @@ onBeforeUnmount(() => { <style lang="scss" scoped> .mbcofsoe { display: block; + + > .s { + will-change: transform; + transform-origin: 50% 50%; + + &.animate.elastic { + transition: transform .2s cubic-bezier(.4,2.08,.55,.44); + } + + &.animate.easeOut { + transition: transform .7s cubic-bezier(0,.7,.3,1); + } + } } </style> diff --git a/packages/client/src/components/autocomplete.vue b/packages/client/src/components/MkAutocomplete.vue index 144281e3c3..144281e3c3 100644 --- a/packages/client/src/components/autocomplete.vue +++ b/packages/client/src/components/MkAutocomplete.vue diff --git a/packages/client/src/components/avatars.vue b/packages/client/src/components/MkAvatars.vue index 958e5db0a1..958e5db0a1 100644 --- a/packages/client/src/components/avatars.vue +++ b/packages/client/src/components/MkAvatars.vue diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/MkButton.vue index 350629bf08..a052f8f7a9 100644 --- a/packages/client/src/components/ui/button.vue +++ b/packages/client/src/components/MkButton.vue @@ -3,7 +3,7 @@ v-if="!link" class="bghgjjyj _button" :class="{ inline, primary, gradate, danger, rounded, full }" :type="type" - @click="$emit('click', $event)" + @click="emit('click', $event)" @mousedown="onMousedown" > <div ref="ripples" class="ripples"></div> @@ -24,114 +24,77 @@ </MkA> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { nextTick, onMounted } from 'vue'; -export default defineComponent({ - props: { - type: { - type: String, - required: false, - }, - primary: { - type: Boolean, - required: false, - default: false, - }, - gradate: { - type: Boolean, - required: false, - default: false, - }, - rounded: { - type: Boolean, - required: false, - default: true, - }, - inline: { - type: Boolean, - required: false, - default: false, - }, - link: { - type: Boolean, - required: false, - default: false, - }, - to: { - type: String, - required: false, - }, - autofocus: { - type: Boolean, - required: false, - default: false, - }, - wait: { - type: Boolean, - required: false, - default: false, - }, - danger: { - type: Boolean, - required: false, - default: false, - }, - full: { - type: Boolean, - required: false, - default: false, - }, - }, - emits: ['click'], - mounted() { - if (this.autofocus) { - this.$nextTick(() => { - this.$el.focus(); - }); - } - }, - methods: { - onMousedown(evt: MouseEvent) { - function distance(p, q) { - return Math.hypot(p.x - q.x, p.y - q.y); - } +const props = defineProps<{ + type?: 'button' | 'submit' | 'reset'; + primary?: boolean; + gradate?: boolean; + rounded?: boolean; + inline?: boolean; + link?: boolean; + to?: string; + autofocus?: boolean; + wait?: boolean; + danger?: boolean; + full?: boolean; +}>(); - function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY) { - const origin = { x: circleCenterX, y: circleCenterY }; - const dist1 = distance({ x: 0, y: 0 }, origin); - const dist2 = distance({ x: boxW, y: 0 }, origin); - const dist3 = distance({ x: 0, y: boxH }, origin); - const dist4 = distance({ x: boxW, y: boxH }, origin); - return Math.max(dist1, dist2, dist3, dist4) * 2; - } +const emit = defineEmits<{ + (ev: 'click', payload: MouseEvent): void; +}>(); - const rect = evt.target.getBoundingClientRect(); +let el = $ref<HTMLElement | null>(null); +let ripples = $ref<HTMLElement | null>(null); - const ripple = document.createElement('div'); - ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px'; - ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px'; +onMounted(() => { + if (props.autofocus) { + nextTick(() => { + el!.focus(); + }); + } +}); - this.$refs.ripples.appendChild(ripple); +function distance(p, q): number { + return Math.hypot(p.x - q.x, p.y - q.y); +} - const circleCenterX = evt.clientX - rect.left; - const circleCenterY = evt.clientY - rect.top; +function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number { + const origin = { x: circleCenterX, y: circleCenterY }; + const dist1 = distance({ x: 0, y: 0 }, origin); + const dist2 = distance({ x: boxW, y: 0 }, origin); + const dist3 = distance({ x: 0, y: boxH }, origin); + const dist4 = distance({ x: boxW, y: boxH }, origin); + return Math.max(dist1, dist2, dist3, dist4) * 2; +} - const scale = calcCircleScale(evt.target.clientWidth, evt.target.clientHeight, circleCenterX, circleCenterY); +function onMousedown(evt: MouseEvent): void { + const target = evt.target! as HTMLElement; + const rect = target.getBoundingClientRect(); - window.setTimeout(() => { - ripple.style.transform = 'scale(' + (scale / 2) + ')'; - }, 1); - window.setTimeout(() => { - ripple.style.transition = 'all 1s ease'; - ripple.style.opacity = '0'; - }, 1000); - window.setTimeout(() => { - if (this.$refs.ripples) this.$refs.ripples.removeChild(ripple); - }, 2000); - }, - }, -}); + const ripple = document.createElement('div'); + ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px'; + ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px'; + + ripples!.appendChild(ripple); + + const circleCenterX = evt.clientX - rect.left; + const circleCenterY = evt.clientY - rect.top; + + const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY); + + window.setTimeout(() => { + ripple.style.transform = 'scale(' + (scale / 2) + ')'; + }, 1); + window.setTimeout(() => { + ripple.style.transition = 'all 1s ease'; + ripple.style.opacity = '0'; + }, 1000); + window.setTimeout(() => { + if (ripples) ripples.removeChild(ripple); + }, 2000); +} </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/captcha.vue b/packages/client/src/components/MkCaptcha.vue index 7360734914..7360734914 100644 --- a/packages/client/src/components/captcha.vue +++ b/packages/client/src/components/MkCaptcha.vue diff --git a/packages/client/src/components/channel-follow-button.vue b/packages/client/src/components/MkChannelFollowButton.vue index dff02beec0..dff02beec0 100644 --- a/packages/client/src/components/channel-follow-button.vue +++ b/packages/client/src/components/MkChannelFollowButton.vue diff --git a/packages/client/src/components/channel-preview.vue b/packages/client/src/components/MkChannelPreview.vue index dd3794a657..dd3794a657 100644 --- a/packages/client/src/components/channel-preview.vue +++ b/packages/client/src/components/MkChannelPreview.vue diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/MkChart.vue index 31e95404fa..31e95404fa 100644 --- a/packages/client/src/components/chart.vue +++ b/packages/client/src/components/MkChart.vue diff --git a/packages/client/src/components/chart-tooltip.vue b/packages/client/src/components/MkChartTooltip.vue index 9b57a1b3d5..a92dd36b61 100644 --- a/packages/client/src/components/chart-tooltip.vue +++ b/packages/client/src/components/MkChartTooltip.vue @@ -14,7 +14,7 @@ <script lang="ts" setup> import { } from 'vue'; -import MkTooltip from './ui/tooltip.vue'; +import MkTooltip from './MkTooltip.vue'; const props = defineProps<{ showing: boolean; diff --git a/packages/client/src/components/code-core.vue b/packages/client/src/components/MkCode.core.vue index b074028821..b074028821 100644 --- a/packages/client/src/components/code-core.vue +++ b/packages/client/src/components/MkCode.core.vue diff --git a/packages/client/src/components/code.vue b/packages/client/src/components/MkCode.vue index d6478fd2f8..1640258d5b 100644 --- a/packages/client/src/components/code.vue +++ b/packages/client/src/components/MkCode.vue @@ -11,5 +11,5 @@ defineProps<{ inline?: boolean; }>(); -const XCode = defineAsyncComponent(() => import('./code-core.vue')); +const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')); </script> diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/MkContainer.vue index 4be59adc2a..4be59adc2a 100644 --- a/packages/client/src/components/ui/container.vue +++ b/packages/client/src/components/MkContainer.vue diff --git a/packages/client/src/components/ui/context-menu.vue b/packages/client/src/components/MkContextMenu.vue index 165c3db462..cfc9502b41 100644 --- a/packages/client/src/components/ui/context-menu.vue +++ b/packages/client/src/components/MkContextMenu.vue @@ -8,7 +8,7 @@ <script lang="ts" setup> import { onMounted, onBeforeUnmount } from 'vue'; -import MkMenu from './menu.vue'; +import MkMenu from './MkMenu.vue'; import { MenuItem } from './types/menu.vue'; import contains from '@/scripts/contains'; import * as os from '@/os'; diff --git a/packages/client/src/components/cropper-dialog.vue b/packages/client/src/components/MkCropperDialog.vue index c320b21d72..9a09834bf7 100644 --- a/packages/client/src/components/cropper-dialog.vue +++ b/packages/client/src/components/MkCropperDialog.vue @@ -30,7 +30,7 @@ import { nextTick, onMounted } from 'vue'; import * as misskey from 'misskey-js'; import Cropper from 'cropperjs'; import tinycolor from 'tinycolor2'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; import * as os from '@/os'; import { $i } from '@/account'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/components/cw-button.vue b/packages/client/src/components/MkCwButton.vue index dd906f9bf3..dd906f9bf3 100644 --- a/packages/client/src/components/cw-button.vue +++ b/packages/client/src/components/MkCwButton.vue diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/MkDateSeparatedList.vue index 085ef871e0..f63d9782b6 100644 --- a/packages/client/src/components/date-separated-list.vue +++ b/packages/client/src/components/MkDateSeparatedList.vue @@ -1,6 +1,6 @@ <script lang="ts"> import { defineComponent, h, PropType, TransitionGroup } from 'vue'; -import MkAd from '@/components/global/ad.vue'; +import MkAd from '@/components/global/MkAd.vue'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; @@ -13,22 +13,22 @@ export default defineComponent({ direction: { type: String, required: false, - default: 'down' + default: 'down', }, reversed: { type: Boolean, required: false, - default: false + default: false, }, noGap: { type: Boolean, required: false, - default: false + default: false, }, ad: { type: Boolean, required: false, - default: false + default: false, }, }, @@ -38,7 +38,7 @@ export default defineComponent({ const month = new Date(time).getMonth() + 1; return i18n.t('monthAndDay', { month: month.toString(), - day: date.toString() + day: date.toString(), }); } @@ -48,7 +48,7 @@ export default defineComponent({ if (!slots || !slots.default) return; const el = slots.default({ - item: item + item: item, })[0]; if (el.key == null && item.id) el.key = item.id; @@ -60,20 +60,20 @@ export default defineComponent({ class: 'separator', key: item.id + ':separator', }, h('p', { - class: 'date' + class: 'date', }, [ h('span', [ h('i', { class: 'fas fa-angle-up icon', }), - getDateText(item.createdAt) + getDateText(item.createdAt), ]), h('span', [ getDateText(props.items[i + 1].createdAt), h('i', { class: 'fas fa-angle-down icon', - }) - ]) + }), + ]), ])); return [el, separator]; @@ -93,16 +93,16 @@ export default defineComponent({ return () => h( defaultStore.state.animation ? TransitionGroup : 'div', defaultStore.state.animation ? { - class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''), - name: 'list', - tag: 'div', - 'data-direction': props.direction, - 'data-reversed': props.reversed ? 'true' : 'false', - } : { - class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''), - }, + class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''), + name: 'list', + tag: 'div', + 'data-direction': props.direction, + 'data-reversed': props.reversed ? 'true' : 'false', + } : { + class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''), + }, { default: renderChildren }); - } + }, }); </script> diff --git a/packages/client/src/components/dialog.vue b/packages/client/src/components/MkDialog.vue index b090f3cb4e..155473cd75 100644 --- a/packages/client/src/components/dialog.vue +++ b/packages/client/src/components/MkDialog.vue @@ -40,8 +40,8 @@ <script lang="ts" setup> import { onBeforeUnmount, onMounted, ref } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkModal from '@/components/MkModal.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/digital-clock.vue b/packages/client/src/components/MkDigitalClock.vue index 9ed8d63d19..9ed8d63d19 100644 --- a/packages/client/src/components/digital-clock.vue +++ b/packages/client/src/components/MkDigitalClock.vue diff --git a/packages/client/src/components/drive.file.vue b/packages/client/src/components/MkDrive.file.vue index aaf7ca3ca3..22916d5680 100644 --- a/packages/client/src/components/drive.file.vue +++ b/packages/client/src/components/MkDrive.file.vue @@ -1,5 +1,6 @@ <template> -<div class="ncvczrfv" +<div + class="ncvczrfv" :class="{ isSelected }" draggable="true" :title="title" @@ -34,7 +35,7 @@ import { computed, defineAsyncComponent, ref } from 'vue'; import * as Misskey from 'misskey-js'; import copyToClipboard from '@/scripts/copy-to-clipboard'; -import MkDriveFileThumbnail from './drive-file-thumbnail.vue'; +import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import bytes from '@/filters/bytes'; import * as os from '@/os'; import { i18n } from '@/i18n'; @@ -63,31 +64,31 @@ function getMenu() { return [{ text: i18n.ts.rename, icon: 'fas fa-i-cursor', - action: rename + action: rename, }, { text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash', - action: toggleSensitive + action: toggleSensitive, }, { text: i18n.ts.describeFile, icon: 'fas fa-i-cursor', - action: describe + action: describe, }, null, { text: i18n.ts.copyUrl, icon: 'fas fa-link', - action: copyUrl + action: copyUrl, }, { type: 'a', href: props.file.url, target: '_blank', text: i18n.ts.download, icon: 'fas fa-download', - download: props.file.name + download: props.file.name, }, null, { text: i18n.ts.delete, icon: 'fas fa-trash-alt', danger: true, - action: deleteFile + action: deleteFile, }]; } @@ -127,35 +128,35 @@ function rename() { if (canceled) return; os.api('drive/files/update', { fileId: props.file.id, - name: name + name: name, }); }); } function describe() { - os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), { title: i18n.ts.describeFile, input: { placeholder: i18n.ts.inputNewDescription, default: props.file.comment != null ? props.file.comment : '', }, - image: props.file + image: props.file, }, { done: result => { if (!result || result.canceled) return; let comment = result.result; os.api('drive/files/update', { fileId: props.file.id, - comment: comment.length === 0 ? null : comment + comment: comment.length === 0 ? null : comment, }); - } + }, }, 'closed'); } function toggleSensitive() { os.api('drive/files/update', { fileId: props.file.id, - isSensitive: !props.file.isSensitive + isSensitive: !props.file.isSensitive, }); } @@ -176,7 +177,7 @@ async function deleteFile() { if (canceled) return; os.api('drive/files/delete', { - fileId: props.file.id + fileId: props.file.id, }); } </script> diff --git a/packages/client/src/components/drive.folder.vue b/packages/client/src/components/MkDrive.folder.vue index 3ccb5d6219..e55fa4f0f2 100644 --- a/packages/client/src/components/drive.folder.vue +++ b/packages/client/src/components/MkDrive.folder.vue @@ -1,5 +1,6 @@ <template> -<div class="rghtznwe" +<div + class="rghtznwe" :class="{ draghover }" draggable="true" :title="title" @@ -123,7 +124,7 @@ function onDrop(ev: DragEvent) { emit('removeFile', file.id); os.api('drive/files/update', { fileId: file.id, - folderId: props.folder.id + folderId: props.folder.id, }); } //#endregion @@ -139,7 +140,7 @@ function onDrop(ev: DragEvent) { emit('removeFolder', folder.id); os.api('drive/folders/update', { folderId: folder.id, - parentId: props.folder.id + parentId: props.folder.id, }).then(() => { // noop }).catch(err => { @@ -147,13 +148,13 @@ function onDrop(ev: DragEvent) { case 'detected-circular-definition': os.alert({ title: i18n.ts.unableToProcess, - text: i18n.ts.circularReferenceFolder + text: i18n.ts.circularReferenceFolder, }); break; default: os.alert({ type: 'error', - text: i18n.ts.somethingHappened + text: i18n.ts.somethingHappened, }); } }); @@ -186,19 +187,19 @@ function rename() { os.inputText({ title: i18n.ts.renameFolder, placeholder: i18n.ts.inputNewFolderName, - default: props.folder.name + default: props.folder.name, }).then(({ canceled, result: name }) => { if (canceled) return; os.api('drive/folders/update', { folderId: props.folder.id, - name: name + name: name, }); }); } function deleteFolder() { os.api('drive/folders/delete', { - folderId: props.folder.id + folderId: props.folder.id, }).then(() => { if (defaultStore.state.uploadFolder === props.folder.id) { defaultStore.set('uploadFolder', null); @@ -209,13 +210,13 @@ function deleteFolder() { os.alert({ type: 'error', title: i18n.ts.unableToDelete, - text: i18n.ts.hasChildFilesOrFolders + text: i18n.ts.hasChildFilesOrFolders, }); break; default: os.alert({ type: 'error', - text: i18n.ts.unableToDelete + text: i18n.ts.unableToDelete, }); } }); @@ -230,11 +231,11 @@ function onContextmenu(ev: MouseEvent) { text: i18n.ts.openInWindow, icon: 'fas fa-window-restore', action: () => { - os.popup(defineAsyncComponent(() => import('./drive-window.vue')), { - initialFolder: props.folder + os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), { + initialFolder: props.folder, }, { }, 'closed'); - } + }, }, null, { text: i18n.ts.rename, icon: 'fas fa-i-cursor', diff --git a/packages/client/src/components/drive.nav-folder.vue b/packages/client/src/components/MkDrive.navFolder.vue index 5482703317..5482703317 100644 --- a/packages/client/src/components/drive.nav-folder.vue +++ b/packages/client/src/components/MkDrive.navFolder.vue diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/MkDrive.vue index 9e2ef1b930..002ca58d04 100644 --- a/packages/client/src/components/drive.vue +++ b/packages/client/src/components/MkDrive.vue @@ -90,10 +90,10 @@ <script lang="ts" setup> import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import * as Misskey from 'misskey-js'; -import XNavFolder from './drive.nav-folder.vue'; -import XFolder from './drive.folder.vue'; -import XFile from './drive.file.vue'; -import MkButton from './ui/button.vue'; +import MkButton from './MkButton.vue'; +import XNavFolder from '@/components/MkDrive.navFolder.vue'; +import XFolder from '@/components/MkDrive.folder.vue'; +import XFile from '@/components/MkDrive.file.vue'; import * as os from '@/os'; import { stream } from '@/stream'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/components/drive-file-thumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue index b346585cec..de65d2f25b 100644 --- a/packages/client/src/components/drive-file-thumbnail.vue +++ b/packages/client/src/components/MkDriveFileThumbnail.vue @@ -17,7 +17,7 @@ <script lang="ts" setup> import { computed } from 'vue'; import * as Misskey from 'misskey-js'; -import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; +import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; const props = defineProps<{ file: Misskey.entities.DriveFile; diff --git a/packages/client/src/components/drive-select-dialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue index 03974559d2..baab7f1324 100644 --- a/packages/client/src/components/drive-select-dialog.vue +++ b/packages/client/src/components/MkDriveSelectDialog.vue @@ -1,5 +1,6 @@ <template> -<XModalWindow ref="dialog" +<XModalWindow + ref="dialog" :width="800" :height="500" :with-ok-button="true" @@ -20,8 +21,8 @@ <script lang="ts" setup> import { ref } from 'vue'; import * as Misskey from 'misskey-js'; -import XDrive from './drive.vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import XDrive from '@/components/MkDrive.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; import number from '@/filters/number'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/drive-window.vue b/packages/client/src/components/MkDriveWindow.vue index 51ea2b5015..617200321b 100644 --- a/packages/client/src/components/drive-window.vue +++ b/packages/client/src/components/MkDriveWindow.vue @@ -1,5 +1,6 @@ <template> -<XWindow ref="window" +<XWindow + ref="window" :initial-width="800" :initial-height="500" :can-resize="true" @@ -15,8 +16,8 @@ <script lang="ts" setup> import { } from 'vue'; import * as Misskey from 'misskey-js'; -import XDrive from './drive.vue'; -import XWindow from '@/components/ui/window.vue'; +import XDrive from '@/components/MkDrive.vue'; +import XWindow from '@/components/MkWindow.vue'; import { i18n } from '@/i18n'; defineProps<{ diff --git a/packages/client/src/components/emoji-picker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue index e2a80d5466..e2a80d5466 100644 --- a/packages/client/src/components/emoji-picker.section.vue +++ b/packages/client/src/components/MkEmojiPicker.section.vue diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/MkEmojiPicker.vue index 4a46e0ecfb..3de0afbf50 100644 --- a/packages/client/src/components/emoji-picker.vue +++ b/packages/client/src/components/MkEmojiPicker.vue @@ -80,10 +80,10 @@ <script lang="ts" setup> import { ref, computed, watch, onMounted } from 'vue'; import * as Misskey from 'misskey-js'; -import XSection from './emoji-picker.section.vue'; +import XSection from '@/components/MkEmojiPicker.section.vue'; import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; -import Ripple from '@/components/ripple.vue'; +import Ripple from '@/components/MkRipple.vue'; import * as os from '@/os'; import { isTouchUsing } from '@/scripts/touch'; import { deviceKind } from '@/scripts/device-kind'; diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue index 2c0b2e9a8b..3b41f9d75b 100644 --- a/packages/client/src/components/emoji-picker-dialog.vue +++ b/packages/client/src/components/MkEmojiPickerDialog.vue @@ -27,8 +27,8 @@ <script lang="ts" setup> import { ref } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; -import MkEmojiPicker from '@/components/emoji-picker.vue'; +import MkModal from '@/components/MkModal.vue'; +import MkEmojiPicker from '@/components/MkEmojiPicker.vue'; import { defaultStore } from '@/store'; withDefaults(defineProps<{ diff --git a/packages/client/src/components/emoji-picker-window.vue b/packages/client/src/components/MkEmojiPickerWindow.vue index 610690d701..523e4ba695 100644 --- a/packages/client/src/components/emoji-picker-window.vue +++ b/packages/client/src/components/MkEmojiPickerWindow.vue @@ -13,8 +13,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkWindow from '@/components/ui/window.vue'; -import MkEmojiPicker from '@/components/emoji-picker.vue'; +import MkWindow from '@/components/MkWindow.vue'; +import MkEmojiPicker from '@/components/MkEmojiPicker.vue'; withDefaults(defineProps<{ src?: HTMLElement; diff --git a/packages/client/src/components/featured-photos.vue b/packages/client/src/components/MkFeaturedPhotos.vue index e58b5d2849..e58b5d2849 100644 --- a/packages/client/src/components/featured-photos.vue +++ b/packages/client/src/components/MkFeaturedPhotos.vue diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/MkFileListForAdmin.vue index 489c017a93..b6429eaf8d 100644 --- a/packages/client/src/components/file-list-for-admin.vue +++ b/packages/client/src/components/MkFileListForAdmin.vue @@ -35,8 +35,8 @@ import { computed } from 'vue'; import * as Acct from 'misskey-js/built/acct'; import MkSwitch from '@/components/ui/switch.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import bytes from '@/filters/bytes'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/file-type-icon.vue b/packages/client/src/components/MkFileTypeIcon.vue index 11d28188cc..11d28188cc 100644 --- a/packages/client/src/components/file-type-icon.vue +++ b/packages/client/src/components/MkFileTypeIcon.vue diff --git a/packages/client/src/components/ui/folder.vue b/packages/client/src/components/MkFolder.vue index 7daa82cbd3..7daa82cbd3 100644 --- a/packages/client/src/components/ui/folder.vue +++ b/packages/client/src/components/MkFolder.vue diff --git a/packages/client/src/components/follow-button.vue b/packages/client/src/components/MkFollowButton.vue index efee795e43..efee795e43 100644 --- a/packages/client/src/components/follow-button.vue +++ b/packages/client/src/components/MkFollowButton.vue diff --git a/packages/client/src/components/forgot-password.vue b/packages/client/src/components/MkForgotPassword.vue index 6ed89d45d7..1b55451c94 100644 --- a/packages/client/src/components/forgot-password.vue +++ b/packages/client/src/components/MkForgotPassword.vue @@ -33,8 +33,8 @@ <script lang="ts" setup> import { } from 'vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; -import MkButton from '@/components/ui/button.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import * as os from '@/os'; import { instance } from '@/instance'; diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/MkFormDialog.vue index f05dde16f8..b2bf76a8c7 100644 --- a/packages/client/src/components/form-dialog.vue +++ b/packages/client/src/components/MkFormDialog.vue @@ -61,9 +61,9 @@ import FormTextarea from './form/textarea.vue'; import FormSwitch from './form/switch.vue'; import FormSelect from './form/select.vue'; import FormRange from './form/range.vue'; -import MkButton from './ui/button.vue'; +import MkButton from './MkButton.vue'; import FormRadios from './form/radios.vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; export default defineComponent({ components: { diff --git a/packages/client/src/components/formula.vue b/packages/client/src/components/MkFormula.vue index 431b4e6c3e..65a2fee930 100644 --- a/packages/client/src/components/formula.vue +++ b/packages/client/src/components/MkFormula.vue @@ -1,5 +1,5 @@ <template> -<XFormula :formula="formula" :block="block" /> +<XFormula :formula="formula" :block="block"/> </template> <script lang="ts"> @@ -8,17 +8,17 @@ import * as os from '@/os'; export default defineComponent({ components: { - XFormula: defineAsyncComponent(() => import('./formula-core.vue')) + XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')), }, props: { formula: { type: String, - required: true + required: true, }, block: { type: Boolean, - required: true - } - } + required: true, + }, + }, }); </script> diff --git a/packages/client/src/components/formula-core.vue b/packages/client/src/components/MkFormulaCore.vue index 8db8932fcd..8db8932fcd 100644 --- a/packages/client/src/components/formula-core.vue +++ b/packages/client/src/components/MkFormulaCore.vue diff --git a/packages/client/src/components/gallery-post-preview.vue b/packages/client/src/components/MkGalleryPostPreview.vue index 8245902976..a133f6431b 100644 --- a/packages/client/src/components/gallery-post-preview.vue +++ b/packages/client/src/components/MkGalleryPostPreview.vue @@ -14,26 +14,15 @@ </MkA> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import { userName } from '@/filters/user'; -import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; +import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import * as os from '@/os'; -export default defineComponent({ - components: { - ImgWithBlurhash - }, - props: { - post: { - type: Object, - required: true - }, - }, - methods: { - userName - } -}); +const props = defineProps<{ + post: any; +}>(); </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/google.vue b/packages/client/src/components/MkGoogle.vue index bb4b439ee8..bb4b439ee8 100644 --- a/packages/client/src/components/google.vue +++ b/packages/client/src/components/MkGoogle.vue diff --git a/packages/client/src/components/image-viewer.vue b/packages/client/src/components/MkImageViewer.vue index 7bc88399ef..f074b1a2f2 100644 --- a/packages/client/src/components/image-viewer.vue +++ b/packages/client/src/components/MkImageViewer.vue @@ -17,7 +17,7 @@ import { } from 'vue'; import * as misskey from 'misskey-js'; import bytes from '@/filters/bytes'; import number from '@/filters/number'; -import MkModal from '@/components/ui/modal.vue'; +import MkModal from '@/components/MkModal.vue'; const props = withDefaults(defineProps<{ image: misskey.entities.DriveFile; diff --git a/packages/client/src/components/img-with-blurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue index 80d7c201a4..80d7c201a4 100644 --- a/packages/client/src/components/img-with-blurhash.vue +++ b/packages/client/src/components/MkImgWithBlurhash.vue diff --git a/packages/client/src/components/ui/info.vue b/packages/client/src/components/MkInfo.vue index 8f5986baf7..4fdfc5c5e6 100644 --- a/packages/client/src/components/ui/info.vue +++ b/packages/client/src/components/MkInfo.vue @@ -6,23 +6,12 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; -import * as os from '@/os'; +<script lang="ts" setup> +import { } from 'vue'; -export default defineComponent({ - props: { - warn: { - type: Boolean, - required: false, - default: false - }, - }, - data() { - return { - }; - } -}); +const props = defineProps<{ + warn?: boolean; +}>(); </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/MkInstanceCardMini.vue index 88621e72c2..f6e2f4eaa7 100644 --- a/packages/client/src/components/instance-card-mini.vue +++ b/packages/client/src/components/MkInstanceCardMini.vue @@ -11,7 +11,7 @@ <script lang="ts" setup> import * as misskey from 'misskey-js'; -import MkMiniChart from '@/components/mini-chart.vue'; +import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; const props = defineProps<{ diff --git a/packages/client/src/components/instance-stats.vue b/packages/client/src/components/MkInstanceStats.vue index 65465dd9a2..0437e05fad 100644 --- a/packages/client/src/components/instance-stats.vue +++ b/packages/client/src/components/MkInstanceStats.vue @@ -68,7 +68,7 @@ import { DoughnutController, } from 'chart.js'; import MkSelect from '@/components/form/select.vue'; -import MkChart from '@/components/chart.vue'; +import MkChart from '@/components/MkChart.vue'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/instance-ticker.vue b/packages/client/src/components/MkInstanceTicker.vue index d9f196f887..d9f196f887 100644 --- a/packages/client/src/components/instance-ticker.vue +++ b/packages/client/src/components/MkInstanceTicker.vue diff --git a/packages/client/src/components/key-value.vue b/packages/client/src/components/MkKeyValue.vue index 586f7a3f9d..586f7a3f9d 100644 --- a/packages/client/src/components/key-value.vue +++ b/packages/client/src/components/MkKeyValue.vue diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/MkLaunchPad.vue index 7891f61bf1..19283178c9 100644 --- a/packages/client/src/components/launch-pad.vue +++ b/packages/client/src/components/MkLaunchPad.vue @@ -21,7 +21,7 @@ <script lang="ts" setup> import { } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; +import MkModal from '@/components/MkModal.vue'; import { navbarItemDef } from '@/navbar'; import { instanceName } from '@/config'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/components/link.vue b/packages/client/src/components/MkLink.vue index 846a9a3a76..649523abc2 100644 --- a/packages/client/src/components/link.vue +++ b/packages/client/src/components/MkLink.vue @@ -26,7 +26,7 @@ const target = self ? null : '_blank'; const el = $ref(); useTooltip($$(el), (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { showing, url: props.url, source: el, diff --git a/packages/client/src/components/marquee.vue b/packages/client/src/components/MkMarquee.vue index 5ca04b0b48..5ca04b0b48 100644 --- a/packages/client/src/components/marquee.vue +++ b/packages/client/src/components/MkMarquee.vue diff --git a/packages/client/src/components/media-banner.vue b/packages/client/src/components/MkMediaBanner.vue index 5093f11e97..5093f11e97 100644 --- a/packages/client/src/components/media-banner.vue +++ b/packages/client/src/components/MkMediaBanner.vue diff --git a/packages/client/src/components/media-caption.vue b/packages/client/src/components/MkMediaCaption.vue index feed3854f9..c25755d762 100644 --- a/packages/client/src/components/media-caption.vue +++ b/packages/client/src/components/MkMediaCaption.vue @@ -30,8 +30,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { length } from 'stringz'; -import MkModal from '@/components/ui/modal.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkModal from '@/components/MkModal.vue'; +import MkButton from '@/components/MkButton.vue'; import bytes from '@/filters/bytes'; import number from '@/filters/number'; diff --git a/packages/client/src/components/media-image.vue b/packages/client/src/components/MkMediaImage.vue index 9d417bd99f..92f1bd2dbd 100644 --- a/packages/client/src/components/media-image.vue +++ b/packages/client/src/components/MkMediaImage.vue @@ -24,7 +24,7 @@ import { watch } from 'vue'; import * as misskey from 'misskey-js'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; -import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; +import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import { defaultStore } from '@/store'; const props = defineProps<{ diff --git a/packages/client/src/components/media-list.vue b/packages/client/src/components/MkMediaList.vue index 7e330575e1..c6f8612182 100644 --- a/packages/client/src/components/media-list.vue +++ b/packages/client/src/components/MkMediaList.vue @@ -18,9 +18,9 @@ import * as misskey from 'misskey-js'; import PhotoSwipeLightbox from 'photoswipe/lightbox'; import PhotoSwipe from 'photoswipe'; import 'photoswipe/style.css'; -import XBanner from './media-banner.vue'; -import XImage from './media-image.vue'; -import XVideo from './media-video.vue'; +import XBanner from '@/components/MkMediaBanner.vue'; +import XImage from '@/components/MkMediaImage.vue'; +import XVideo from '@/components/MkMediaVideo.vue'; import * as os from '@/os'; import { FILE_TYPE_BROWSERSAFE } from '@/const'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/components/media-video.vue b/packages/client/src/components/MkMediaVideo.vue index 5c38691e69..5c38691e69 100644 --- a/packages/client/src/components/media-video.vue +++ b/packages/client/src/components/MkMediaVideo.vue diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/MkMention.vue index 3091b435e4..3091b435e4 100644 --- a/packages/client/src/components/mention.vue +++ b/packages/client/src/components/MkMention.vue diff --git a/packages/client/src/components/ui/menu.child.vue b/packages/client/src/components/MkMenu.child.vue index b67224d3e1..3ada4afbdc 100644 --- a/packages/client/src/components/ui/menu.child.vue +++ b/packages/client/src/components/MkMenu.child.vue @@ -7,7 +7,7 @@ <script lang="ts" setup> import { on } from 'events'; import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'; -import MkMenu from './menu.vue'; +import MkMenu from './MkMenu.vue'; import { MenuItem } from '@/types/menu'; import * as os from '@/os'; diff --git a/packages/client/src/components/ui/menu.vue b/packages/client/src/components/MkMenu.vue index 60b68954d6..578e736c83 100644 --- a/packages/client/src/components/ui/menu.vue +++ b/packages/client/src/components/MkMenu.vue @@ -63,7 +63,7 @@ import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu'; import * as os from '@/os'; import { i18n } from '@/i18n'; -const XChild = defineAsyncComponent(() => import('./menu.child.vue')); +const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue')); const props = defineProps<{ items: MenuItem[]; diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/MkMiniChart.vue index c64ce163f9..c64ce163f9 100644 --- a/packages/client/src/components/mini-chart.vue +++ b/packages/client/src/components/MkMiniChart.vue diff --git a/packages/client/src/components/ui/modal.vue b/packages/client/src/components/MkModal.vue index 2305a02794..2305a02794 100644 --- a/packages/client/src/components/ui/modal.vue +++ b/packages/client/src/components/MkModal.vue diff --git a/packages/client/src/components/modal-page-window.vue b/packages/client/src/components/MkModalPageWindow.vue index 2fed0d35e8..cc3f4c96cc 100644 --- a/packages/client/src/components/modal-page-window.vue +++ b/packages/client/src/components/MkModalPageWindow.vue @@ -22,7 +22,7 @@ <script lang="ts" setup> import { ComputedRef, provide } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; +import MkModal from '@/components/MkModal.vue'; import { popout as _popout } from '@/scripts/popout'; import copyToClipboard from '@/scripts/copy-to-clipboard'; import { url } from '@/config'; diff --git a/packages/client/src/components/ui/modal-window.vue b/packages/client/src/components/MkModalWindow.vue index b29ea4fd81..5acd8c921f 100644 --- a/packages/client/src/components/ui/modal-window.vue +++ b/packages/client/src/components/MkModalWindow.vue @@ -18,7 +18,7 @@ <script lang="ts" setup> import { onMounted, onUnmounted } from 'vue'; -import MkModal from './modal.vue'; +import MkModal from './MkModal.vue'; const props = withDefaults(defineProps<{ withOkButton: boolean; diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/MkNote.vue index 0279f014c6..efe786ba4b 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/MkNote.vue @@ -106,17 +106,17 @@ import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue'; import * as mfm from 'mfm-js'; import * as misskey from 'misskey-js'; -import MkNoteSub from './MkNoteSub.vue'; -import XNoteHeader from './note-header.vue'; -import XNoteSimple from './note-simple.vue'; -import XReactionsViewer from './reactions-viewer.vue'; -import XMediaList from './media-list.vue'; -import XCwButton from './cw-button.vue'; -import XPoll from './poll.vue'; -import XRenoteButton from './renote-button.vue'; -import MkUrlPreview from '@/components/url-preview.vue'; -import MkInstanceTicker from '@/components/instance-ticker.vue'; -import MkVisibility from '@/components/visibility.vue'; +import MkNoteSub from '@/components/MkNoteSub.vue'; +import XNoteHeader from '@/components/MkNoteHeader.vue'; +import XNoteSimple from '@/components/MkNoteSimple.vue'; +import XReactionsViewer from '@/components/MkReactionsViewer.vue'; +import XMediaList from '@/components/MkMediaList.vue'; +import XCwButton from '@/components/MkCwButton.vue'; +import XPoll from '@/components/MkPoll.vue'; +import XRenoteButton from '@/components/MkRenoteButton.vue'; +import MkUrlPreview from '@/components/MkUrlPreview.vue'; +import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; +import MkVisibility from '@/components/MkVisibility.vue'; import { pleaseLogin } from '@/scripts/please-login'; import { focusPrev, focusNext } from '@/scripts/focus'; import { checkWordMute } from '@/scripts/check-word-mute'; diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/MkNoteDetailed.vue index 1e0625b6c9..0bf8f330ba 100644 --- a/packages/client/src/components/note-detailed.vue +++ b/packages/client/src/components/MkNoteDetailed.vue @@ -117,16 +117,16 @@ import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue'; import * as mfm from 'mfm-js'; import * as misskey from 'misskey-js'; -import MkNoteSub from './MkNoteSub.vue'; -import XNoteSimple from './note-simple.vue'; -import XReactionsViewer from './reactions-viewer.vue'; -import XMediaList from './media-list.vue'; -import XCwButton from './cw-button.vue'; -import XPoll from './poll.vue'; -import XRenoteButton from './renote-button.vue'; -import MkUrlPreview from '@/components/url-preview.vue'; -import MkInstanceTicker from '@/components/instance-ticker.vue'; -import MkVisibility from '@/components/visibility.vue'; +import MkNoteSub from '@/components/MkNoteSub.vue'; +import XNoteSimple from '@/components/MkNoteSimple.vue'; +import XReactionsViewer from '@/components/MkReactionsViewer.vue'; +import XMediaList from '@/components/MkMediaList.vue'; +import XCwButton from '@/components/MkCwButton.vue'; +import XPoll from '@/components/MkPoll.vue'; +import XRenoteButton from '@/components/MkRenoteButton.vue'; +import MkUrlPreview from '@/components/MkUrlPreview.vue'; +import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; +import MkVisibility from '@/components/MkVisibility.vue'; import { pleaseLogin } from '@/scripts/please-login'; import { checkWordMute } from '@/scripts/check-word-mute'; import { userPage } from '@/filters/user'; diff --git a/packages/client/src/components/note-header.vue b/packages/client/src/components/MkNoteHeader.vue index 0b05498566..333c3ddbd9 100644 --- a/packages/client/src/components/note-header.vue +++ b/packages/client/src/components/MkNoteHeader.vue @@ -17,7 +17,7 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import MkVisibility from '@/components/visibility.vue'; +import MkVisibility from '@/components/MkVisibility.vue'; import { notePage } from '@/filters/note'; import { userPage } from '@/filters/user'; diff --git a/packages/client/src/components/note-preview.vue b/packages/client/src/components/MkNotePreview.vue index a78b499654..a78b499654 100644 --- a/packages/client/src/components/note-preview.vue +++ b/packages/client/src/components/MkNotePreview.vue diff --git a/packages/client/src/components/note-simple.vue b/packages/client/src/components/MkNoteSimple.vue index b813b9a2b9..1bbbe0e1a6 100644 --- a/packages/client/src/components/note-simple.vue +++ b/packages/client/src/components/MkNoteSimple.vue @@ -9,7 +9,7 @@ <XCwButton v-model="showContent" :note="note"/> </p> <div v-show="note.cw == null || showContent" class="content"> - <MkNoteSubNoteContent class="text" :note="note"/> + <MkSubNoteContent class="text" :note="note"/> </div> </div> </div> @@ -19,9 +19,9 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import XNoteHeader from './note-header.vue'; -import MkNoteSubNoteContent from './sub-note-content.vue'; -import XCwButton from './cw-button.vue'; +import XNoteHeader from '@/components/MkNoteHeader.vue'; +import MkSubNoteContent from '@/components/MkSubNoteContent.vue'; +import XCwButton from '@/components/MkCwButton.vue'; const props = defineProps<{ note: misskey.entities.Note; diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 9ae773bfb6..a69336f8a1 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -10,7 +10,7 @@ <XCwButton v-model="showContent" :note="note"/> </p> <div v-show="note.cw == null || showContent" class="content"> - <MkNoteSubNoteContent class="text" :note="note"/> + <MkSubNoteContent class="text" :note="note"/> </div> </div> </div> @@ -27,9 +27,9 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import XNoteHeader from './note-header.vue'; -import MkNoteSubNoteContent from './sub-note-content.vue'; -import XCwButton from './cw-button.vue'; +import XNoteHeader from '@/components/MkNoteHeader.vue'; +import MkSubNoteContent from '@/components/MkSubNoteContent.vue'; +import XCwButton from '@/components/MkCwButton.vue'; import { notePage } from '@/filters/note'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/MkNotes.vue index e351a76eb5..5abcdc2298 100644 --- a/packages/client/src/components/notes.vue +++ b/packages/client/src/components/MkNotes.vue @@ -19,9 +19,9 @@ <script lang="ts" setup> import { ref } from 'vue'; -import XNote from '@/components/note.vue'; -import XList from '@/components/date-separated-list.vue'; -import MkPagination, { Paging } from '@/components/ui/pagination.vue'; +import XNote from '@/components/MkNote.vue'; +import XList from '@/components/MkDateSeparatedList.vue'; +import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { i18n } from '@/i18n'; const props = defineProps<{ diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/MkNotification.vue index 9589970a44..c00e9fbf42 100644 --- a/packages/client/src/components/notification.vue +++ b/packages/client/src/components/MkNotification.vue @@ -75,9 +75,9 @@ <script lang="ts" setup> import { ref, onMounted, onUnmounted, watch } from 'vue'; import * as misskey from 'misskey-js'; -import XReactionIcon from './reaction-icon.vue'; -import MkFollowButton from './follow-button.vue'; -import XReactionTooltip from './reaction-tooltip.vue'; +import XReactionIcon from '@/components/MkReactionIcon.vue'; +import MkFollowButton from '@/components/MkFollowButton.vue'; +import XReactionTooltip from '@/components/MkReactionTooltip.vue'; import { getNoteSummary } from '@/scripts/get-note-summary'; import { notePage } from '@/filters/note'; import { userPage } from '@/filters/user'; diff --git a/packages/client/src/components/notification-setting-window.vue b/packages/client/src/components/MkNotificationSettingWindow.vue index bf0a148f59..75bea2976c 100644 --- a/packages/client/src/components/notification-setting-window.vue +++ b/packages/client/src/components/MkNotificationSettingWindow.vue @@ -31,9 +31,9 @@ import { } from 'vue'; import { notificationTypes } from 'misskey-js'; import MkSwitch from './form/switch.vue'; -import MkInfo from './ui/info.vue'; -import MkButton from './ui/button.vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import MkInfo from './MkInfo.vue'; +import MkButton from './MkButton.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; import { i18n } from '@/i18n'; const emit = defineEmits<{ diff --git a/packages/client/src/components/notification-toast.vue b/packages/client/src/components/MkNotificationToast.vue index b808647bb4..398f64d544 100644 --- a/packages/client/src/components/notification-toast.vue +++ b/packages/client/src/components/MkNotificationToast.vue @@ -8,7 +8,7 @@ <script lang="ts" setup> import { onMounted } from 'vue'; -import XNotification from './notification.vue'; +import XNotification from '@/components/MkNotification.vue'; import * as os from '@/os'; defineProps<{ diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/MkNotifications.vue index baac2fdca2..0e1cc06743 100644 --- a/packages/client/src/components/notifications.vue +++ b/packages/client/src/components/MkNotifications.vue @@ -19,10 +19,10 @@ <script lang="ts" setup> import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue'; import { notificationTypes } from 'misskey-js'; -import MkPagination, { Paging } from '@/components/ui/pagination.vue'; -import XNotification from '@/components/notification.vue'; -import XList from '@/components/date-separated-list.vue'; -import XNote from '@/components/note.vue'; +import MkPagination, { Paging } from '@/components/MkPagination.vue'; +import XNotification from '@/components/MkNotification.vue'; +import XList from '@/components/MkDateSeparatedList.vue'; +import XNote from '@/components/MkNote.vue'; import * as os from '@/os'; import { stream } from '@/stream'; import { $i } from '@/account'; diff --git a/packages/client/src/components/number-diff.vue b/packages/client/src/components/MkNumberDiff.vue index e7d4a5472a..e7d4a5472a 100644 --- a/packages/client/src/components/number-diff.vue +++ b/packages/client/src/components/MkNumberDiff.vue diff --git a/packages/client/src/components/object-view.value.vue b/packages/client/src/components/MkObjectView.value.vue index 0c7230d783..0c7230d783 100644 --- a/packages/client/src/components/object-view.value.vue +++ b/packages/client/src/components/MkObjectView.value.vue diff --git a/packages/client/src/components/object-view.vue b/packages/client/src/components/MkObjectView.vue index db66049fce..55578a37f6 100644 --- a/packages/client/src/components/object-view.vue +++ b/packages/client/src/components/MkObjectView.vue @@ -6,7 +6,7 @@ <script lang="ts" setup> import { } from 'vue'; -import XValue from './object-view.value.vue'; +import XValue from './MkObjectView.value.vue'; const props = defineProps<{ value: Record<string, unknown>; diff --git a/packages/client/src/components/page-preview.vue b/packages/client/src/components/MkPagePreview.vue index 009582e540..009582e540 100644 --- a/packages/client/src/components/page-preview.vue +++ b/packages/client/src/components/MkPagePreview.vue diff --git a/packages/client/src/components/page-window.vue b/packages/client/src/components/MkPageWindow.vue index 43d75b0cf9..d58b914036 100644 --- a/packages/client/src/components/page-window.vue +++ b/packages/client/src/components/MkPageWindow.vue @@ -25,8 +25,8 @@ <script lang="ts" setup> import { ComputedRef, inject, provide } from 'vue'; -import RouterView from './global/router-view.vue'; -import XWindow from '@/components/ui/window.vue'; +import RouterView from '@/components/global/RouterView.vue'; +import XWindow from '@/components/MkWindow.vue'; import { popout as _popout } from '@/scripts/popout'; import copyToClipboard from '@/scripts/copy-to-clipboard'; import { url } from '@/config'; diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/MkPagination.vue index 7650c5b33a..291409171a 100644 --- a/packages/client/src/components/ui/pagination.vue +++ b/packages/client/src/components/MkPagination.vue @@ -36,7 +36,7 @@ import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, import * as misskey from 'misskey-js'; import * as os from '@/os'; import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; const SECOND_FETCH_LIMIT = 30; diff --git a/packages/client/src/components/poll.vue b/packages/client/src/components/MkPoll.vue index d90af1cfee..d90af1cfee 100644 --- a/packages/client/src/components/poll.vue +++ b/packages/client/src/components/MkPoll.vue diff --git a/packages/client/src/components/poll-editor.vue b/packages/client/src/components/MkPollEditor.vue index 6c1a4cc89f..3b08a63535 100644 --- a/packages/client/src/components/poll-editor.vue +++ b/packages/client/src/components/MkPollEditor.vue @@ -52,7 +52,7 @@ import { ref, watch } from 'vue'; import MkInput from './form/input.vue'; import MkSelect from './form/select.vue'; import MkSwitch from './form/switch.vue'; -import MkButton from './ui/button.vue'; +import MkButton from './MkButton.vue'; import { formatDateTimeString } from '@/scripts/format-time-string'; import { addTime } from '@/scripts/time'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/ui/popup-menu.vue b/packages/client/src/components/MkPopupMenu.vue index c29aff45e7..f04c7f5618 100644 --- a/packages/client/src/components/ui/popup-menu.vue +++ b/packages/client/src/components/MkPopupMenu.vue @@ -6,8 +6,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkModal from './modal.vue'; -import MkMenu from './menu.vue'; +import MkModal from './MkModal.vue'; +import MkMenu from './MkMenu.vue'; import { MenuItem } from '@/types/menu'; defineProps<{ diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/MkPostForm.vue index 6dfb2edcb8..0c57a5a57a 100644 --- a/packages/client/src/components/post-form.vue +++ b/packages/client/src/components/MkPostForm.vue @@ -71,10 +71,10 @@ import { length } from 'stringz'; import { toASCII } from 'punycode/'; import * as Acct from 'misskey-js/built/acct'; import { throttle } from 'throttle-debounce'; -import XNoteSimple from './note-simple.vue'; -import XNotePreview from './note-preview.vue'; -import XPostFormAttaches from './post-form-attaches.vue'; -import XPollEditor from './poll-editor.vue'; +import XNoteSimple from '@/components/MkNoteSimple.vue'; +import XNotePreview from '@/components/MkNotePreview.vue'; +import XPostFormAttaches from '@/components/MkPostFormAttaches.vue'; +import XPollEditor from '@/components/MkPollEditor.vue'; import { host, url } from '@/config'; import { erase, unique } from '@/scripts/array'; import { extractMentions } from '@/scripts/extract-mentions'; @@ -84,7 +84,7 @@ import * as os from '@/os'; import { stream } from '@/stream'; import { selectFiles } from '@/scripts/select-file'; import { defaultStore, notePostInterruptors, postFormActions } from '@/store'; -import MkInfo from '@/components/ui/info.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { i18n } from '@/i18n'; import { instance } from '@/instance'; import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account'; @@ -384,7 +384,7 @@ function setVisibility() { return; } - os.popup(defineAsyncComponent(() => import('./visibility-picker.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), { currentVisibility: visibility, currentLocalOnly: localOnly, src: visibilityButton, diff --git a/packages/client/src/components/post-form-attaches.vue b/packages/client/src/components/MkPostFormAttaches.vue index 98bf2df09a..a8ec8c33ba 100644 --- a/packages/client/src/components/post-form-attaches.vue +++ b/packages/client/src/components/MkPostFormAttaches.vue @@ -16,7 +16,7 @@ <script lang="ts"> import { defineComponent, defineAsyncComponent } from 'vue'; -import MkDriveFileThumbnail from './drive-file-thumbnail.vue'; +import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import * as os from '@/os'; export default defineComponent({ @@ -88,7 +88,7 @@ export default defineComponent({ }, async describe(file) { - os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), { title: this.$ts.describeFile, input: { placeholder: this.$ts.inputNewDescription, diff --git a/packages/client/src/components/post-form-dialog.vue b/packages/client/src/components/MkPostFormDialog.vue index dc4e842059..6dabb1db14 100644 --- a/packages/client/src/components/post-form-dialog.vue +++ b/packages/client/src/components/MkPostFormDialog.vue @@ -6,8 +6,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; -import MkPostForm from '@/components/post-form.vue'; +import MkModal from '@/components/MkModal.vue'; +import MkPostForm from '@/components/MkPostForm.vue'; export default defineComponent({ components: { diff --git a/packages/client/src/components/reaction-icon.vue b/packages/client/src/components/MkReactionIcon.vue index 5638c9a816..5638c9a816 100644 --- a/packages/client/src/components/reaction-icon.vue +++ b/packages/client/src/components/MkReactionIcon.vue diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/MkReactionTooltip.vue index b53061df48..2da97cf4f3 100644 --- a/packages/client/src/components/reaction-tooltip.vue +++ b/packages/client/src/components/MkReactionTooltip.vue @@ -9,8 +9,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkTooltip from './ui/tooltip.vue'; -import XReactionIcon from './reaction-icon.vue'; +import MkTooltip from './MkTooltip.vue'; +import XReactionIcon from '@/components/MkReactionIcon.vue'; const props = defineProps<{ reaction: string; diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue index eaebc3541a..8c423807ba 100644 --- a/packages/client/src/components/reactions-viewer.details.vue +++ b/packages/client/src/components/MkReactionsViewer.details.vue @@ -18,8 +18,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkTooltip from './ui/tooltip.vue'; -import XReactionIcon from './reaction-icon.vue'; +import MkTooltip from './MkTooltip.vue'; +import XReactionIcon from '@/components/MkReactionIcon.vue'; const props = defineProps<{ reaction: string; diff --git a/packages/client/src/components/reactions-viewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue index c29bd46400..31342b0b48 100644 --- a/packages/client/src/components/reactions-viewer.reaction.vue +++ b/packages/client/src/components/MkReactionsViewer.reaction.vue @@ -15,8 +15,8 @@ <script lang="ts" setup> import { computed, onMounted, ref, watch } from 'vue'; import * as misskey from 'misskey-js'; -import XDetails from '@/components/reactions-viewer.details.vue'; -import XReactionIcon from '@/components/reaction-icon.vue'; +import XDetails from '@/components/MkReactionsViewer.details.vue'; +import XReactionIcon from '@/components/MkReactionIcon.vue'; import * as os from '@/os'; import { useTooltip } from '@/scripts/use-tooltip'; import { $i } from '@/account'; diff --git a/packages/client/src/components/reactions-viewer.vue b/packages/client/src/components/MkReactionsViewer.vue index a9bf51f65f..a88311efa1 100644 --- a/packages/client/src/components/reactions-viewer.vue +++ b/packages/client/src/components/MkReactionsViewer.vue @@ -8,7 +8,7 @@ import { computed } from 'vue'; import * as misskey from 'misskey-js'; import { $i } from '@/account'; -import XReaction from './reactions-viewer.reaction.vue'; +import XReaction from '@/components/MkReactionsViewer.reaction.vue'; const props = defineProps<{ note: misskey.entities.Note; diff --git a/packages/client/src/components/remote-caution.vue b/packages/client/src/components/MkRemoteCaution.vue index e9461197ca..e9461197ca 100644 --- a/packages/client/src/components/remote-caution.vue +++ b/packages/client/src/components/MkRemoteCaution.vue diff --git a/packages/client/src/components/renote-button.vue b/packages/client/src/components/MkRenoteButton.vue index d267f30403..413f3406a4 100644 --- a/packages/client/src/components/renote-button.vue +++ b/packages/client/src/components/MkRenoteButton.vue @@ -16,7 +16,7 @@ <script lang="ts" setup> import { computed, ref } from 'vue'; import * as misskey from 'misskey-js'; -import XDetails from '@/components/users-tooltip.vue'; +import XDetails from '@/components/MkUsersTooltip.vue'; import { pleaseLogin } from '@/scripts/please-login'; import * as os from '@/os'; import { $i } from '@/account'; diff --git a/packages/client/src/components/ripple.vue b/packages/client/src/components/MkRipple.vue index 401e78e304..9d93211d5f 100644 --- a/packages/client/src/components/ripple.vue +++ b/packages/client/src/components/MkRipple.vue @@ -1,8 +1,9 @@ <template> -<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }"> +<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"> <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"> <circle fill="none" cx="64" cy="64"> - <animate attributeName="r" + <animate + attributeName="r" begin="0s" dur="0.5s" values="4; 32" calcMode="spline" @@ -10,7 +11,8 @@ keySplines="0.165, 0.84, 0.44, 1" repeatCount="1" /> - <animate attributeName="stroke-width" + <animate + attributeName="stroke-width" begin="0s" dur="0.5s" values="16; 0" calcMode="spline" @@ -21,7 +23,8 @@ </circle> <g fill="none" fill-rule="evenodd"> <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color"> - <animate attributeName="r" + <animate + attributeName="r" begin="0s" dur="0.8s" :values="`${particle.size}; 0`" calcMode="spline" @@ -29,7 +32,8 @@ keySplines="0.165, 0.84, 0.44, 1" repeatCount="1" /> - <animate attributeName="cx" + <animate + attributeName="cx" begin="0s" dur="0.8s" :values="`${particle.xA}; ${particle.xB}`" calcMode="spline" @@ -37,7 +41,8 @@ keySplines="0.3, 0.61, 0.355, 1" repeatCount="1" /> - <animate attributeName="cy" + <animate + attributeName="cy" begin="0s" dur="0.8s" :values="`${particle.yA}; ${particle.yB}`" calcMode="spline" @@ -51,59 +56,47 @@ </div> </template> -<script lang="ts"> -import { defineComponent, onMounted } from 'vue'; +<script lang="ts" setup> +import { onMounted } from 'vue'; import * as os from '@/os'; -export default defineComponent({ - props: { - x: { - type: Number, - required: true - }, - y: { - type: Number, - required: true - }, - particle: { - type: Boolean, - required: false, - default: true, - } - }, - emits: ['end'], - setup(props, context) { - const particles = []; - const origin = 64; - const colors = ['#FF1493', '#00FFFF', '#FFE202']; +const props = withDefaults(defineProps<{ + x: number; + y: number; + particle?: boolean; +}>(), { + particle: true, +}); - if (props.particle) { - for (let i = 0; i < 12; i++) { - const angle = Math.random() * (Math.PI * 2); - const pos = Math.random() * 16; - const velocity = 16 + (Math.random() * 48); - particles.push({ - size: 4 + (Math.random() * 8), - xA: origin + (Math.sin(angle) * pos), - yA: origin + (Math.cos(angle) * pos), - xB: origin + (Math.sin(angle) * (pos + velocity)), - yB: origin + (Math.cos(angle) * (pos + velocity)), - color: colors[Math.floor(Math.random() * colors.length)] - }); - } - } +const emit = defineEmits<{ + (ev: 'end'): void; +}>(); - onMounted(() => { - window.setTimeout(() => { - context.emit('end'); - }, 1100); +const particles = []; +const origin = 64; +const colors = ['#FF1493', '#00FFFF', '#FFE202']; +const zIndex = os.claimZIndex('high'); + +if (props.particle) { + for (let i = 0; i < 12; i++) { + const angle = Math.random() * (Math.PI * 2); + const pos = Math.random() * 16; + const velocity = 16 + (Math.random() * 48); + particles.push({ + size: 4 + (Math.random() * 8), + xA: origin + (Math.sin(angle) * pos), + yA: origin + (Math.cos(angle) * pos), + xB: origin + (Math.sin(angle) * (pos + velocity)), + yB: origin + (Math.cos(angle) * (pos + velocity)), + color: colors[Math.floor(Math.random() * colors.length)], }); + } +} - return { - particles, - zIndex: os.claimZIndex('high'), - }; - }, +onMounted(() => { + window.setTimeout(() => { + emit('end'); + }, 1100); }); </script> diff --git a/packages/client/src/components/sample.vue b/packages/client/src/components/MkSample.vue index f80b9c96b7..1169654d09 100644 --- a/packages/client/src/components/sample.vue +++ b/packages/client/src/components/MkSample.vue @@ -29,7 +29,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkSwitch from '@/components/form/switch.vue'; import MkTextarea from '@/components/form/textarea.vue'; diff --git a/packages/client/src/components/signin.vue b/packages/client/src/components/MkSignin.vue index dacc610165..5613e5cf02 100644 --- a/packages/client/src/components/signin.vue +++ b/packages/client/src/components/MkSignin.vue @@ -51,9 +51,9 @@ <script lang="ts" setup> import { defineAsyncComponent } from 'vue'; import { toUnicode } from 'punycode/'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { apiUrl, host as configHost } from '@/config'; import { byteify, hexify } from '@/scripts/2fa'; import * as os from '@/os'; @@ -237,7 +237,7 @@ function loginFailed(err) { } function resetPassword() { - os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, { + os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, { }, 'closed'); } </script> diff --git a/packages/client/src/components/signin-dialog.vue b/packages/client/src/components/MkSigninDialog.vue index ec68668a7f..fd27244516 100644 --- a/packages/client/src/components/signin-dialog.vue +++ b/packages/client/src/components/MkSigninDialog.vue @@ -14,8 +14,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkSignin from './signin.vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import MkSignin from '@/components/MkSignin.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; import { i18n } from '@/i18n'; const props = withDefaults(defineProps<{ diff --git a/packages/client/src/components/signup.vue b/packages/client/src/components/MkSignup.vue index f8e39985bc..a324bb6f5a 100644 --- a/packages/client/src/components/signup.vue +++ b/packages/client/src/components/MkSignup.vue @@ -67,10 +67,10 @@ import { } from 'vue'; import getPasswordStrength from 'syuilo-password-strength'; import { toUnicode } from 'punycode/'; -import MkButton from './ui/button.vue'; -import MkCaptcha from './captcha.vue'; +import MkButton from './MkButton.vue'; import MkInput from './form/input.vue'; import MkSwitch from './form/switch.vue'; +import MkCaptcha from '@/components/MkCaptcha.vue'; import * as config from '@/config'; import * as os from '@/os'; import { login } from '@/account'; diff --git a/packages/client/src/components/signup-dialog.vue b/packages/client/src/components/MkSignupDialog.vue index c5f933f6b3..d6d4553bc6 100644 --- a/packages/client/src/components/signup-dialog.vue +++ b/packages/client/src/components/MkSignupDialog.vue @@ -18,8 +18,8 @@ <script lang="ts" setup> import { } from 'vue'; -import XSignup from './signup.vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import XSignup from '@/components/MkSignup.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; import { i18n } from '@/i18n'; const props = withDefaults(defineProps<{ diff --git a/packages/client/src/components/sparkle.vue b/packages/client/src/components/MkSparkle.vue index cdeaf9c417..cdeaf9c417 100644 --- a/packages/client/src/components/sparkle.vue +++ b/packages/client/src/components/MkSparkle.vue diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/MkSubNoteContent.vue index 25ab883f40..237f4cf228 100644 --- a/packages/client/src/components/sub-note-content.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -24,8 +24,8 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import XPoll from './poll.vue'; -import XMediaList from './media-list.vue'; +import XMediaList from '@/components/MkMediaList.vue'; +import XPoll from '@/components/MkPoll.vue'; import { i18n } from '@/i18n'; const props = defineProps<{ diff --git a/packages/client/src/components/ui/super-menu.vue b/packages/client/src/components/MkSuperMenu.vue index 8ce2dc5dc2..8ce2dc5dc2 100644 --- a/packages/client/src/components/ui/super-menu.vue +++ b/packages/client/src/components/MkSuperMenu.vue diff --git a/packages/client/src/components/tab.vue b/packages/client/src/components/MkTab.vue index 669e9e2e11..669e9e2e11 100644 --- a/packages/client/src/components/tab.vue +++ b/packages/client/src/components/MkTab.vue diff --git a/packages/client/src/components/tag-cloud.vue b/packages/client/src/components/MkTagCloud.vue index 2dfd26edb0..2dfd26edb0 100644 --- a/packages/client/src/components/tag-cloud.vue +++ b/packages/client/src/components/MkTagCloud.vue diff --git a/packages/client/src/components/timeline.vue b/packages/client/src/components/MkTimeline.vue index a3fa27ab78..831a194ce3 100644 --- a/packages/client/src/components/timeline.vue +++ b/packages/client/src/components/MkTimeline.vue @@ -4,7 +4,7 @@ <script lang="ts" setup> import { ref, computed, provide, onUnmounted } from 'vue'; -import XNotes from './notes.vue'; +import XNotes from '@/components/MkNotes.vue'; import * as os from '@/os'; import { stream } from '@/stream'; import * as sound from '@/scripts/sound'; @@ -59,10 +59,10 @@ let connection2; if (props.src === 'antenna') { endpoint = 'antennas/notes'; query = { - antennaId: props.antenna + antennaId: props.antenna, }; connection = stream.useChannel('antenna', { - antennaId: props.antenna + antennaId: props.antenna, }); connection.on('note', prepend); } else if (props.src === 'home') { @@ -92,7 +92,7 @@ if (props.src === 'antenna') { } else if (props.src === 'directs') { endpoint = 'notes/mentions'; query = { - visibility: 'specified' + visibility: 'specified', }; const onNote = note => { if (note.visibility === 'specified') { @@ -104,10 +104,10 @@ if (props.src === 'antenna') { } else if (props.src === 'list') { endpoint = 'notes/user-list-timeline'; query = { - listId: props.list + listId: props.list, }; connection = stream.useChannel('userList', { - listId: props.list + listId: props.list, }); connection.on('note', prepend); connection.on('userAdded', onUserAdded); @@ -115,10 +115,10 @@ if (props.src === 'antenna') { } else if (props.src === 'channel') { endpoint = 'channels/timeline'; query = { - channelId: props.channel + channelId: props.channel, }; connection = stream.useChannel('channel', { - channelId: props.channel + channelId: props.channel, }); connection.on('note', prepend); } diff --git a/packages/client/src/components/toast.vue b/packages/client/src/components/MkToast.vue index c9fad64eb6..c9fad64eb6 100644 --- a/packages/client/src/components/toast.vue +++ b/packages/client/src/components/MkToast.vue diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue new file mode 100644 index 0000000000..b846034a24 --- /dev/null +++ b/packages/client/src/components/MkTokenGenerateWindow.vue @@ -0,0 +1,90 @@ +<template> +<XModalWindow + ref="dialog" + :width="400" + :height="450" + :with-ok-button="true" + :ok-button-disabled="false" + :can-close="false" + @close="dialog.close()" + @closed="$emit('closed')" + @ok="ok()" +> + <template #header>{{ title || $ts.generateAccessToken }}</template> + <div v-if="information" class="_section"> + <MkInfo warn>{{ information }}</MkInfo> + </div> + <div class="_section"> + <MkInput v-model="name"> + <template #label>{{ $ts.name }}</template> + </MkInput> + </div> + <div class="_section"> + <div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div> + <MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton> + <MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton> + <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> + </div> +</XModalWindow> +</template> + +<script lang="ts" setup> +import { } from 'vue'; +import { permissions as kinds } from 'misskey-js'; +import MkInput from './form/input.vue'; +import MkSwitch from './form/switch.vue'; +import MkButton from './MkButton.vue'; +import MkInfo from './MkInfo.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; + +const props = withDefaults(defineProps<{ + title?: string | null; + information?: string | null; + initialName?: string | null; + initialPermissions?: string[] | null; +}>(), { + title: null, + information: null, + initialName: null, + initialPermissions: null, +}); + +const emit = defineEmits<{ + (ev: 'closed'): void; + (ev: 'done', result: { name: string | null, permissions: string[] }): void; +}>(); + +const dialog = $ref<InstanceType<typeof XModalWindow>>(); +let name = $ref(props.initialName); +let permissions = $ref({}); + +if (props.initialPermissions) { + for (const kind of props.initialPermissions) { + permissions[kind] = true; + } +} else { + for (const kind of kinds) { + permissions[kind] = false; + } +} + +function ok(): void { + emit('done', { + name: name, + permissions: Object.keys(permissions).filter(p => permissions[p]), + }); + dialog.close(); +} + +function disableAll(): void { + for (const p in permissions) { + permissions[p] = false; + } +} + +function enableAll(): void { + for (const p in permissions) { + permissions[p] = true; + } +} +</script> diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/MkTooltip.vue index 4c6258d245..4c6258d245 100644 --- a/packages/client/src/components/ui/tooltip.vue +++ b/packages/client/src/components/MkTooltip.vue diff --git a/packages/client/src/components/updated.vue b/packages/client/src/components/MkUpdated.vue index 1c1e5f4aed..48aeb30224 100644 --- a/packages/client/src/components/updated.vue +++ b/packages/client/src/components/MkUpdated.vue @@ -11,9 +11,9 @@ <script lang="ts" setup> import { ref } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkSparkle from '@/components/sparkle.vue'; +import MkModal from '@/components/MkModal.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkSparkle from '@/components/MkSparkle.vue'; import { version } from '@/config'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/MkUrlPreview.vue index df4b0e53b8..9b2a785351 100644 --- a/packages/client/src/components/url-preview.vue +++ b/packages/client/src/components/MkUrlPreview.vue @@ -68,7 +68,7 @@ let tweetHeight = $ref(150); const requestUrl = new URL(props.url); -if (requestUrl.hostname === 'twitter.com') { +if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com') { const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/); if (m) tweetId = m[1]; } diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue new file mode 100644 index 0000000000..f343c6d8a6 --- /dev/null +++ b/packages/client/src/components/MkUrlPreviewPopup.vue @@ -0,0 +1,45 @@ +<template> +<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> + <transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')"> + <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> + </transition> +</div> +</template> + +<script lang="ts" setup> +import { onMounted } from 'vue'; +import MkUrlPreview from '@/components/MkUrlPreview.vue'; +import * as os from '@/os'; + +const props = defineProps<{ + showing: boolean; + url: string; + source: HTMLElement; +}>(); + +const emit = defineEmits<{ + (ev: 'closed'): void; +}>(); + +const zIndex = os.claimZIndex('middle'); +let top = $ref(0); +let left = $ref(0); + +onMounted(() => { + const rect = props.source.getBoundingClientRect(); + const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset; + const y = rect.top + props.source.offsetHeight + window.pageYOffset; + + top = y; + left = x; +}); +</script> + +<style lang="scss" scoped> +.fgmtyycl { + position: absolute; + width: 500px; + max-width: calc(90vw - 12px); + pointer-events: none; +} +</style> diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/MkUserCardMini.vue index 732adf7f5b..1a4c494987 100644 --- a/packages/client/src/components/user-card-mini.vue +++ b/packages/client/src/components/MkUserCardMini.vue @@ -11,7 +11,7 @@ <script lang="ts" setup> import * as misskey from 'misskey-js'; -import MkMiniChart from '@/components/mini-chart.vue'; +import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; import { acct } from '@/filters/user'; diff --git a/packages/client/src/components/user-info.vue b/packages/client/src/components/MkUserInfo.vue index 1cd275a6df..4670def564 100644 --- a/packages/client/src/components/user-info.vue +++ b/packages/client/src/components/MkUserInfo.vue @@ -29,7 +29,7 @@ <script lang="ts" setup> import * as misskey from 'misskey-js'; -import MkFollowButton from './follow-button.vue'; +import MkFollowButton from '@/components/MkFollowButton.vue'; import { userPage } from '@/filters/user'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/user-list.vue b/packages/client/src/components/MkUserList.vue index fe30d371fe..e1f47c7673 100644 --- a/packages/client/src/components/user-list.vue +++ b/packages/client/src/components/MkUserList.vue @@ -17,8 +17,8 @@ <script lang="ts" setup> import { ref } from 'vue'; -import MkUserInfo from '@/components/user-info.vue'; -import MkPagination, { Paging } from '@/components/ui/pagination.vue'; +import MkUserInfo from '@/components/MkUserInfo.vue'; +import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { userPage } from '@/filters/user'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/user-online-indicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue index a4f6f80383..a4f6f80383 100644 --- a/packages/client/src/components/user-online-indicator.vue +++ b/packages/client/src/components/MkUserOnlineIndicator.vue diff --git a/packages/client/src/components/user-preview.vue b/packages/client/src/components/MkUserPreview.vue index f80947f75a..4de2e8baa2 100644 --- a/packages/client/src/components/user-preview.vue +++ b/packages/client/src/components/MkUserPreview.vue @@ -1,8 +1,10 @@ <template> -<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="$emit('closed')"> - <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }"> - <div v-if="fetched" class="info"> - <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> +<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')"> + <div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }"> + <div v-if="user != null" class="info"> + <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"> + <span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span> + </div> <MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> <div class="title"> <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> @@ -31,71 +33,51 @@ </transition> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { onMounted } from 'vue'; import * as Acct from 'misskey-js/built/acct'; -import MkFollowButton from './follow-button.vue'; +import * as misskey from 'misskey-js'; +import MkFollowButton from '@/components/MkFollowButton.vue'; import { userPage } from '@/filters/user'; import * as os from '@/os'; -export default defineComponent({ - components: { - MkFollowButton - }, - - props: { - showing: { - type: Boolean, - required: true - }, - q: { - type: String, - required: true - }, - source: { - required: true - } - }, +const props = defineProps<{ + showing: boolean; + q: string; + source: HTMLElement; +}>(); - emits: ['closed', 'mouseover', 'mouseleave'], +const emit = defineEmits<{ + (ev: 'closed'): void; + (ev: 'mouseover'): void; + (ev: 'mouseleave'): void; +}>(); - data() { - return { - user: null, - fetched: false, - top: 0, - left: 0, - zIndex: os.claimZIndex('middle'), - }; - }, +const zIndex = os.claimZIndex('middle'); +let user = $ref<misskey.entities.UserDetailed | null>(null); +let top = $ref(0); +let left = $ref(0); - mounted() { - if (typeof this.q === 'object') { - this.user = this.q; - this.fetched = true; - } else { - const query = this.q.startsWith('@') ? - Acct.parse(this.q.substr(1)) : - { userId: this.q }; - - os.api('users/show', query).then(user => { - if (!this.showing) return; - this.user = user; - this.fetched = true; - }); - } +onMounted(() => { + if (typeof props.q === 'object') { + user = props.q; + } else { + const query = props.q.startsWith('@') ? + Acct.parse(props.q.substr(1)) : + { userId: props.q }; - const rect = this.source.getBoundingClientRect(); - const x = ((rect.left + (this.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset; - const y = rect.top + this.source.offsetHeight + window.pageYOffset; + os.api('users/show', query).then(res => { + if (!props.showing) return; + user = res; + }); + } - this.top = y; - this.left = x; - }, + const rect = props.source.getBoundingClientRect(); + const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset; + const y = rect.top + props.source.offsetHeight + window.pageYOffset; - methods: { - userPage - } + top = y; + left = x; }); </script> @@ -120,6 +102,16 @@ export default defineComponent({ background-color: rgba(0, 0, 0, 0.1); background-size: cover; background-position: center; + > .followed { + position: absolute; + top: 12px; + left: 12px; + padding: 4px 8px; + color: #fff; + background: rgba(0, 0, 0, 0.7); + font-size: 0.7em; + border-radius: 6px; + } } > .avatar { diff --git a/packages/client/src/components/user-select-dialog.vue b/packages/client/src/components/MkUserSelectDialog.vue index 4d8e427a72..07caedfe3a 100644 --- a/packages/client/src/components/user-select-dialog.vue +++ b/packages/client/src/components/MkUserSelectDialog.vue @@ -56,7 +56,7 @@ import { nextTick, onMounted } from 'vue'; import * as misskey from 'misskey-js'; import MkInput from '@/components/form/input.vue'; import FormSplit from '@/components/form/split.vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/users-tooltip.vue b/packages/client/src/components/MkUsersTooltip.vue index 2df19bcd3f..4ccc44b47e 100644 --- a/packages/client/src/components/users-tooltip.vue +++ b/packages/client/src/components/MkUsersTooltip.vue @@ -12,7 +12,7 @@ <script lang="ts" setup> import { } from 'vue'; -import MkTooltip from './ui/tooltip.vue'; +import MkTooltip from './MkTooltip.vue'; const props = defineProps<{ users: any[]; // TODO diff --git a/packages/client/src/components/visibility.vue b/packages/client/src/components/MkVisibility.vue index b41c950331..739720bf91 100644 --- a/packages/client/src/components/visibility.vue +++ b/packages/client/src/components/MkVisibility.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { ref } from 'vue'; -import XDetails from '@/components/users-tooltip.vue'; +import XDetails from '@/components/MkUsersTooltip.vue'; import * as os from '@/os'; import { useTooltip } from '@/scripts/use-tooltip'; diff --git a/packages/client/src/components/visibility-picker.vue b/packages/client/src/components/MkVisibilityPicker.vue index f4830cd2c6..ecc022eca0 100644 --- a/packages/client/src/components/visibility-picker.vue +++ b/packages/client/src/components/MkVisibilityPicker.vue @@ -45,7 +45,7 @@ <script lang="ts" setup> import { nextTick, watch } from 'vue'; import * as misskey from 'misskey-js'; -import MkModal from '@/components/ui/modal.vue'; +import MkModal from '@/components/MkModal.vue'; import { i18n } from '@/i18n'; const modal = $ref<InstanceType<typeof MkModal>>(); diff --git a/packages/client/src/components/waiting-dialog.vue b/packages/client/src/components/MkWaitingDialog.vue index 9e631b55b1..77b664d3b1 100644 --- a/packages/client/src/components/waiting-dialog.vue +++ b/packages/client/src/components/MkWaitingDialog.vue @@ -10,7 +10,7 @@ <script lang="ts" setup> import { watch, ref } from 'vue'; -import MkModal from '@/components/ui/modal.vue'; +import MkModal from '@/components/MkModal.vue'; const modal = ref<InstanceType<typeof MkModal>>(); diff --git a/packages/client/src/components/widgets.vue b/packages/client/src/components/MkWidgets.vue index 54d4c57af3..fcb0d11af4 100644 --- a/packages/client/src/components/widgets.vue +++ b/packages/client/src/components/MkWidgets.vue @@ -34,7 +34,7 @@ import { defineAsyncComponent, reactive, ref, computed } from 'vue'; import { v4 as uuid } from 'uuid'; import MkSelect from '@/components/form/select.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { widgets as widgetDefs } from '@/widgets'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/MkWindow.vue index 758d4d47b6..758d4d47b6 100644 --- a/packages/client/src/components/ui/window.vue +++ b/packages/client/src/components/MkWindow.vue diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue index fb5c82bb48..bd56c9c7ea 100644 --- a/packages/client/src/components/form/checkbox.vue +++ b/packages/client/src/components/form/checkbox.vue @@ -23,7 +23,7 @@ <script lang="ts" setup> import { toRefs, Ref } from 'vue'; import * as os from '@/os'; -import Ripple from '@/components/ripple.vue'; +import Ripple from '@/components/MkRipple.vue'; import { i18n } from '@/i18n'; const props = defineProps<{ diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue index 1c9fee8c77..382b2ed528 100644 --- a/packages/client/src/components/form/input.vue +++ b/packages/client/src/components/form/input.vue @@ -36,7 +36,7 @@ <script lang="ts" setup> import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue'; import { debounce } from 'throttle-debounce'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { useInterval } from '@/scripts/use-interval'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue index 8301d27830..db21c35717 100644 --- a/packages/client/src/components/form/range.vue +++ b/packages/client/src/components/form/range.vue @@ -1,5 +1,5 @@ <template> -<div class="timctyfi" :class="{ disabled }"> +<div class="timctyfi" :class="{ disabled, easing }"> <div class="label"><slot name="label"></slot></div> <div v-adaptive-border class="body"> <div ref="containerEl" class="container"> @@ -28,9 +28,11 @@ const props = withDefaults(defineProps<{ step?: number; textConverter?: (value: number) => string, showTicks?: boolean; + easing?: boolean; }>(), { step: 1, textConverter: (v) => v.toString(), + easing: false, }); const emit = defineEmits<{ @@ -96,7 +98,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { ev.preventDefault(); const tooltipShowing = ref(true); - os.popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { showing: tooltipShowing, text: computed(() => { return props.textConverter(finalValue.value); @@ -198,7 +200,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { height: 100%; background: var(--accent); opacity: 0.5; - //transition: width 0.2s cubic-bezier(0,0,0,1); } } @@ -231,7 +232,6 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { cursor: grab; background: var(--accent); border-radius: 999px; - //transition: left 0.2s cubic-bezier(0,0,0,1); &:hover { background: var(--accentLighten); @@ -239,5 +239,21 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => { } } } + + &.easing { + > .body { + > .container { + > .track { + > .highlight { + transition: width 0.2s cubic-bezier(0,0,0,1); + } + } + + > .thumb { + transition: left 0.2s cubic-bezier(0,0,0,1); + } + } + } + } } </style> diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue index 70db2dbae3..313ba41cd3 100644 --- a/packages/client/src/components/form/select.vue +++ b/packages/client/src/components/form/select.vue @@ -28,7 +28,7 @@ <script lang="ts" setup> import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue index d031b2effc..79ce8fe51f 100644 --- a/packages/client/src/components/form/slot.vue +++ b/packages/client/src/components/form/slot.vue @@ -8,12 +8,12 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; -export default defineComponent({ - -}); +function focus() { + // TODO +} </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue index 2ad55dacae..132eafd138 100644 --- a/packages/client/src/components/form/suspense.vue +++ b/packages/client/src/components/form/suspense.vue @@ -17,7 +17,7 @@ <script lang="ts"> import { defineComponent, PropType, ref, watch } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; export default defineComponent({ components: { diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue index 73633399de..ca57aa62a5 100644 --- a/packages/client/src/components/form/textarea.vue +++ b/packages/client/src/components/form/textarea.vue @@ -29,7 +29,7 @@ <script lang="ts"> import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue'; import { debounce } from 'throttle-debounce'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; export default defineComponent({ diff --git a/packages/client/src/components/global/a.vue b/packages/client/src/components/global/MkA.vue index 67bf54def8..67bf54def8 100644 --- a/packages/client/src/components/global/a.vue +++ b/packages/client/src/components/global/MkA.vue diff --git a/packages/client/src/components/global/acct.vue b/packages/client/src/components/global/MkAcct.vue index c3e806b5fb..c3e806b5fb 100644 --- a/packages/client/src/components/global/acct.vue +++ b/packages/client/src/components/global/MkAcct.vue diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue new file mode 100644 index 0000000000..8161ef3792 --- /dev/null +++ b/packages/client/src/components/global/MkAd.vue @@ -0,0 +1,186 @@ +<template> +<div v-if="chosen" class="qiivuoyo"> + <div v-if="!showMenu" class="main" :class="chosen.place"> + <a :href="chosen.url" target="_blank"> + <img :src="chosen.imageUrl"> + <button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button> + </a> + </div> + <div v-else class="menu"> + <div class="body"> + <div>Ads by {{ host }}</div> + <!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>--> + <MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton> + <button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button> + </div> + </div> +</div> +<div v-else></div> +</template> + +<script lang="ts" setup> +import { ref } from 'vue'; +import { instance } from '@/instance'; +import { host } from '@/config'; +import MkButton from '@/components/MkButton.vue'; +import { defaultStore } from '@/store'; +import * as os from '@/os'; + +type Ad = (typeof instance)['ads'][number]; + +const props = defineProps<{ + prefer: string[]; + specify?: Ad; +}>(); + +const showMenu = ref(false); +const toggleMenu = (): void => { + showMenu.value = !showMenu.value; +}; + +const choseAd = (): Ad | null => { + if (props.specify) { + return props.specify; + } + + const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? { + ...ad, + ratio: 0, + } : ad); + + let ads = allAds.filter(ad => props.prefer.includes(ad.place)); + + if (ads.length === 0) { + ads = allAds.filter(ad => ad.place === 'square'); + } + + const lowPriorityAds = ads.filter(ad => ad.ratio === 0); + ads = ads.filter(ad => ad.ratio !== 0); + + if (ads.length === 0) { + if (lowPriorityAds.length !== 0) { + return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)]; + } else { + return null; + } + } + + const totalFactor = ads.reduce((a, b) => a + b.ratio, 0); + const r = Math.random() * totalFactor; + + let stackedFactor = 0; + for (const ad of ads) { + if (r >= stackedFactor && r <= stackedFactor + ad.ratio) { + return ad; + } else { + stackedFactor += ad.ratio; + } + } + + return null; +}; + +const chosen = ref(choseAd()); + +function reduceFrequency(): void { + if (chosen.value == null) return; + if (defaultStore.state.mutedAds.includes(chosen.value.id)) return; + defaultStore.push('mutedAds', chosen.value.id); + os.success(); + chosen.value = choseAd(); + showMenu.value = false; +} +</script> + +<style lang="scss" scoped> +.qiivuoyo { + background-size: auto auto; + background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px ); + + > .main { + text-align: center; + + > a { + display: inline-block; + position: relative; + vertical-align: bottom; + + &:hover { + > img { + filter: contrast(120%); + } + } + + > img { + display: block; + object-fit: contain; + margin: auto; + border-radius: 5px; + } + + > .menu { + position: absolute; + top: 1px; + right: 1px; + + > .info-circle { + border: 3px solid var(--panel); + border-radius: 50%; + background: var(--panel); + } + } + } + + &.square { + > a , + > a > img { + max-width: min(300px, 100%); + max-height: 300px; + } + } + + &.horizontal { + padding: 8px; + + > a , + > a > img { + max-width: min(600px, 100%); + max-height: 80px; + } + } + + &.horizontal-big { + padding: 8px; + + > a , + > a > img { + max-width: min(600px, 100%); + max-height: 250px; + } + } + + &.vertical { + > a , + > a > img { + max-width: min(100px, 100%); + } + } + } + + > .menu { + padding: 8px; + text-align: center; + + > .body { + padding: 8px; + margin: 0 auto; + max-width: 400px; + border: solid 1px var(--divider); + + > .button { + margin: 8px auto; + } + } + } +} +</style> diff --git a/packages/client/src/components/global/avatar.vue b/packages/client/src/components/global/MkAvatar.vue index 4868896c99..5f3e3c176d 100644 --- a/packages/client/src/components/global/avatar.vue +++ b/packages/client/src/components/global/MkAvatar.vue @@ -15,7 +15,7 @@ import * as misskey from 'misskey-js'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash'; import { acct, userPage } from '@/filters/user'; -import MkUserOnlineIndicator from '@/components/user-online-indicator.vue'; +import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue'; import { defaultStore } from '@/store'; const props = withDefaults(defineProps<{ diff --git a/packages/client/src/components/global/ellipsis.vue b/packages/client/src/components/global/MkEllipsis.vue index 0a46f486d6..0a46f486d6 100644 --- a/packages/client/src/components/global/ellipsis.vue +++ b/packages/client/src/components/global/MkEllipsis.vue diff --git a/packages/client/src/components/global/emoji.vue b/packages/client/src/components/global/MkEmoji.vue index 106778aee2..106778aee2 100644 --- a/packages/client/src/components/global/emoji.vue +++ b/packages/client/src/components/global/MkEmoji.vue diff --git a/packages/client/src/components/global/error.vue b/packages/client/src/components/global/MkError.vue index 4e2ba07d30..6e75a69ec3 100644 --- a/packages/client/src/components/global/error.vue +++ b/packages/client/src/components/global/MkError.vue @@ -9,7 +9,7 @@ </template> <script lang="ts" setup> -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; </script> diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/MkLoading.vue index bcc6dfac01..bcf5925234 100644 --- a/packages/client/src/components/global/loading.vue +++ b/packages/client/src/components/global/MkLoading.vue @@ -44,7 +44,7 @@ const props = withDefaults(defineProps<{ text-align: center; cursor: wait; - --size: 40px; + --size: 38px; &.colored { color: var(--accent); diff --git a/packages/client/src/components/global/misskey-flavored-markdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue index 70d0108e9f..70d0108e9f 100644 --- a/packages/client/src/components/global/misskey-flavored-markdown.vue +++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/MkPageHeader.vue index 106e216b9b..ba75b2446b 100644 --- a/packages/client/src/components/global/page-header.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -1,5 +1,8 @@ <template> <div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick"> + <div v-if="narrow" class="buttons left"> + <MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/> + </div> <template v-if="metadata"> <div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup"> <MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/> @@ -41,6 +44,7 @@ import { scrollToTop } from '@/scripts/scroll'; import { i18n } from '@/i18n'; import { globalEvents } from '@/events'; import { injectPageMetadata } from '@/scripts/page-metadata'; +import { $i } from '@/account'; type Tab = { key?: string | null; @@ -59,6 +63,7 @@ const props = defineProps<{ handler: (ev: MouseEvent) => void; }[]; thin?: boolean; + displayMyAvatar?: boolean; }>(); const emit = defineEmits<{ @@ -197,7 +202,6 @@ onUnmounted(() => { > .titleContainer { flex: 1; margin: 0 auto; - margin-left: var(--height); > *:first-child { margin-left: auto; @@ -213,9 +217,24 @@ onUnmounted(() => { --margin: 8px; display: flex; align-items: center; + min-width: var(--height); height: var(--height); margin: 0 var(--margin); + &.left { + margin-right: auto; + + > .avatar { + $size: 32px; + display: inline-block; + width: $size; + height: $size; + vertical-align: bottom; + margin: 0 8px; + pointer-events: none; + } + } + &.right { margin-left: auto; } diff --git a/packages/client/src/components/global/spacer.vue b/packages/client/src/components/global/MkSpacer.vue index 53adf07771..53adf07771 100644 --- a/packages/client/src/components/global/spacer.vue +++ b/packages/client/src/components/global/MkSpacer.vue diff --git a/packages/client/src/components/global/sticky-container.vue b/packages/client/src/components/global/MkStickyContainer.vue index 44f4f065a6..44f4f065a6 100644 --- a/packages/client/src/components/global/sticky-container.vue +++ b/packages/client/src/components/global/MkStickyContainer.vue diff --git a/packages/client/src/components/global/time.vue b/packages/client/src/components/global/MkTime.vue index f72b153f56..f72b153f56 100644 --- a/packages/client/src/components/global/time.vue +++ b/packages/client/src/components/global/MkTime.vue diff --git a/packages/client/src/components/global/url.vue b/packages/client/src/components/global/MkUrl.vue index dc79a20649..37c0212eaa 100644 --- a/packages/client/src/components/global/url.vue +++ b/packages/client/src/components/global/MkUrl.vue @@ -18,54 +18,39 @@ </component> </template> -<script lang="ts"> -import { defineAsyncComponent, defineComponent, ref } from 'vue'; +<script lang="ts" setup> +import { defineAsyncComponent, ref } from 'vue'; import { toUnicode as decodePunycode } from 'punycode/'; import { url as local } from '@/config'; import * as os from '@/os'; import { useTooltip } from '@/scripts/use-tooltip'; import { safeURIDecode } from '@/scripts/safe-uri-decode'; -export default defineComponent({ - props: { - url: { - type: String, - required: true, - }, - rel: { - type: String, - required: false, - default: null, - }, - }, - setup(props) { - const self = props.url.startsWith(local); - const url = new URL(props.url); - const el = ref(); - - useTooltip(el, (showing) => { - os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), { - showing, - url: props.url, - source: el.value, - }, {}, 'closed'); - }); +const props = defineProps<{ + url: string; + rel?: string; +}>(); - return { - local, - schema: url.protocol, - hostname: decodePunycode(url.hostname), - port: url.port, - pathname: safeURIDecode(url.pathname), - query: safeURIDecode(url.search), - hash: safeURIDecode(url.hash), - self: self, - attr: self ? 'to' : 'href', - target: self ? null : '_blank', - el, - }; - }, +const self = props.url.startsWith(local); +const url = new URL(props.url); +const el = ref(); + +useTooltip(el, (showing) => { + os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), { + showing, + url: props.url, + source: el.value, + }, {}, 'closed'); }); + +const schema = url.protocol; +const hostname = decodePunycode(url.hostname); +const port = url.port; +const pathname = safeURIDecode(url.pathname); +const query = safeURIDecode(url.search); +const hash = safeURIDecode(url.hash); +const attr = self ? 'to' : 'href'; +const target = self ? null : '_blank'; </script> <style lang="scss" scoped> diff --git a/packages/client/src/components/global/user-name.vue b/packages/client/src/components/global/MkUserName.vue index 090de3df30..090de3df30 100644 --- a/packages/client/src/components/global/user-name.vue +++ b/packages/client/src/components/global/MkUserName.vue diff --git a/packages/client/src/components/global/router-view.vue b/packages/client/src/components/global/RouterView.vue index 1d841e050c..e21a57471c 100644 --- a/packages/client/src/components/global/router-view.vue +++ b/packages/client/src/components/global/RouterView.vue @@ -4,7 +4,7 @@ <component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/> <template #fallback> - Loading... + <MkLoading/> </template> </Suspense> </KeepAlive> diff --git a/packages/client/src/components/global/ad.vue b/packages/client/src/components/global/ad.vue deleted file mode 100644 index 7725f776a9..0000000000 --- a/packages/client/src/components/global/ad.vue +++ /dev/null @@ -1,206 +0,0 @@ -<template> -<div v-if="ad" class="qiivuoyo"> - <div v-if="!showMenu" class="main" :class="ad.place"> - <a :href="ad.url" target="_blank"> - <img :src="ad.imageUrl"> - <button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button> - </a> - </div> - <div v-else class="menu"> - <div class="body"> - <div>Ads by {{ host }}</div> - <!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>--> - <MkButton v-if="ad.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton> - <button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button> - </div> - </div> -</div> -<div v-else></div> -</template> - -<script lang="ts"> -import { defineComponent, ref } from 'vue'; -import { instance } from '@/instance'; -import { host } from '@/config'; -import MkButton from '@/components/ui/button.vue'; -import { defaultStore } from '@/store'; -import * as os from '@/os'; - -export default defineComponent({ - components: { - MkButton - }, - - props: { - prefer: { - type: Array, - required: true - }, - specify: { - type: Object, - required: false - }, - }, - - setup(props) { - const showMenu = ref(false); - const toggleMenu = () => { - showMenu.value = !showMenu.value; - }; - - const choseAd = (): (typeof instance)['ads'][number] | null => { - if (props.specify) { - return props.specify as (typeof instance)['ads'][number]; - } - - const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? { - ...ad, - ratio: 0 - } : ad); - - let ads = allAds.filter(ad => props.prefer.includes(ad.place)); - - if (ads.length === 0) { - ads = allAds.filter(ad => ad.place === 'square'); - } - - const lowPriorityAds = ads.filter(ad => ad.ratio === 0); - ads = ads.filter(ad => ad.ratio !== 0); - - if (ads.length === 0) { - if (lowPriorityAds.length !== 0) { - return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)]; - } else { - return null; - } - } - - const totalFactor = ads.reduce((a, b) => a + b.ratio, 0); - const r = Math.random() * totalFactor; - - let stackedFactor = 0; - for (const ad of ads) { - if (r >= stackedFactor && r <= stackedFactor + ad.ratio) { - return ad; - } else { - stackedFactor += ad.ratio; - } - } - - return null; - }; - - const chosen = ref(choseAd()); - - const reduceFrequency = () => { - if (chosen.value == null) return; - if (defaultStore.state.mutedAds.includes(chosen.value.id)) return; - defaultStore.push('mutedAds', chosen.value.id); - os.success(); - chosen.value = choseAd(); - showMenu.value = false; - }; - - return { - ad: chosen, - showMenu, - toggleMenu, - host, - reduceFrequency, - }; - } -}); -</script> - -<style lang="scss" scoped> -.qiivuoyo { - background-size: auto auto; - background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px ); - - > .main { - text-align: center; - - > a { - display: inline-block; - position: relative; - vertical-align: bottom; - - &:hover { - > img { - filter: contrast(120%); - } - } - - > img { - display: block; - object-fit: contain; - margin: auto; - border-radius: 5px; - } - - > .menu { - position: absolute; - top: 1px; - right: 1px; - - > .info-circle { - border: 3px solid var(--panel); - border-radius: 50%; - background: var(--panel); - } - } - } - - &.square { - > a , - > a > img { - max-width: min(300px, 100%); - max-height: 300px; - } - } - - &.horizontal { - padding: 8px; - - > a , - > a > img { - max-width: min(600px, 100%); - max-height: 80px; - } - } - - &.horizontal-big { - padding: 8px; - - > a , - > a > img { - max-width: min(600px, 100%); - max-height: 250px; - } - } - - &.vertical { - > a , - > a > img { - max-width: min(100px, 100%); - } - } - } - - > .menu { - padding: 8px; - text-align: center; - - > .body { - padding: 8px; - margin: 0 auto; - max-width: 400px; - border: solid 1px var(--divider); - - > .button { - margin: 8px auto; - } - } - } -} -</style> diff --git a/packages/client/src/components/global/i18n.ts b/packages/client/src/components/global/i18n.ts index abf0c96856..1fd293ba10 100644 --- a/packages/client/src/components/global/i18n.ts +++ b/packages/client/src/components/global/i18n.ts @@ -30,7 +30,7 @@ export default defineComponent({ } else { if (nextBracketOpen > 0) parsed.push(str.substr(0, nextBracketOpen)); parsed.push({ - arg: str.substring(nextBracketOpen + 1, nextBracketClose) + arg: str.substring(nextBracketOpen + 1, nextBracketClose), }); } @@ -38,5 +38,5 @@ export default defineComponent({ } return h(this.tag, parsed.map(x => typeof x === 'string' ? (this.textTag ? h(this.textTag, x) : x) : this.$slots[x.arg]())); - } + }, }); diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts index aa8a591e51..8639257003 100644 --- a/packages/client/src/components/index.ts +++ b/packages/client/src/components/index.ts @@ -1,22 +1,22 @@ import { App } from 'vue'; -import Mfm from './global/misskey-flavored-markdown.vue'; -import MkA from './global/a.vue'; -import MkAcct from './global/acct.vue'; -import MkAvatar from './global/avatar.vue'; -import MkEmoji from './global/emoji.vue'; -import MkUserName from './global/user-name.vue'; -import MkEllipsis from './global/ellipsis.vue'; -import MkTime from './global/time.vue'; -import MkUrl from './global/url.vue'; +import Mfm from './global/MkMisskeyFlavoredMarkdown.vue'; +import MkA from './global/MkA.vue'; +import MkAcct from './global/MkAcct.vue'; +import MkAvatar from './global/MkAvatar.vue'; +import MkEmoji from './global/MkEmoji.vue'; +import MkUserName from './global/MkUserName.vue'; +import MkEllipsis from './global/MkEllipsis.vue'; +import MkTime from './global/MkTime.vue'; +import MkUrl from './global/MkUrl.vue'; import I18n from './global/i18n'; -import RouterView from './global/router-view.vue'; -import MkLoading from './global/loading.vue'; -import MkError from './global/error.vue'; -import MkAd from './global/ad.vue'; -import MkPageHeader from './global/page-header.vue'; -import MkSpacer from './global/spacer.vue'; -import MkStickyContainer from './global/sticky-container.vue'; +import RouterView from './global/RouterView.vue'; +import MkLoading from './global/MkLoading.vue'; +import MkError from './global/MkError.vue'; +import MkAd from './global/MkAd.vue'; +import MkPageHeader from './global/MkPageHeader.vue'; +import MkSpacer from './global/MkSpacer.vue'; +import MkStickyContainer from './global/MkStickyContainer.vue'; export default function(app: App) { app.component('I18n', I18n); diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index 16ae45bfe1..688857a499 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -1,15 +1,15 @@ import { VNode, defineComponent, h } from 'vue'; import * as mfm from 'mfm-js'; -import MkUrl from '@/components/global/url.vue'; -import MkLink from '@/components/link.vue'; -import MkMention from '@/components/mention.vue'; -import MkEmoji from '@/components/global/emoji.vue'; +import MkUrl from '@/components/global/MkUrl.vue'; +import MkLink from '@/components/MkLink.vue'; +import MkMention from '@/components/MkMention.vue'; +import MkEmoji from '@/components/global/MkEmoji.vue'; import { concat } from '@/scripts/array'; -import MkFormula from '@/components/formula.vue'; -import MkCode from '@/components/code.vue'; -import MkGoogle from '@/components/google.vue'; -import MkSparkle from '@/components/sparkle.vue'; -import MkA from '@/components/global/a.vue'; +import MkFormula from '@/components/MkFormula.vue'; +import MkCode from '@/components/MkCode.vue'; +import MkGoogle from '@/components/MkGoogle.vue'; +import MkSparkle from '@/components/MkSparkle.vue'; +import MkA from '@/components/global/MkA.vue'; import { host } from '@/config'; import { MFM_TAGS } from '@/scripts/mfm-tags'; diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/page.button.vue index a87f6e9f02..e8878df8de 100644 --- a/packages/client/src/components/page/page.button.vue +++ b/packages/client/src/components/page/page.button.vue @@ -6,7 +6,7 @@ <script lang="ts"> import { defineComponent, PropType, unref } from 'vue'; -import MkButton from '../ui/button.vue'; +import MkButton from '../MkButton.vue'; import * as os from '@/os'; import { ButtonBlock } from '@/scripts/hpml/block'; import { Hpml } from '@/scripts/hpml/evaluator'; diff --git a/packages/client/src/components/page/page.counter.vue b/packages/client/src/components/page/page.counter.vue index b1af8954b0..6eeef71431 100644 --- a/packages/client/src/components/page/page.counter.vue +++ b/packages/client/src/components/page/page.counter.vue @@ -6,7 +6,7 @@ <script lang="ts"> import { computed, defineComponent, PropType } from 'vue'; -import MkButton from '../ui/button.vue'; +import MkButton from '../MkButton.vue'; import * as os from '@/os'; import { CounterVarBlock } from '@/scripts/hpml/block'; import { Hpml } from '@/scripts/hpml/evaluator'; diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue index 6e38a9f424..8ba70c5855 100644 --- a/packages/client/src/components/page/page.image.vue +++ b/packages/client/src/components/page/page.image.vue @@ -6,7 +6,7 @@ <script lang="ts" setup> import { defineComponent, PropType } from 'vue'; -import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; +import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import * as os from '@/os'; import { ImageBlock } from '@/scripts/hpml/block'; import { Hpml } from '@/scripts/hpml/evaluator'; diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue index 3bb338b095..431f0b08df 100644 --- a/packages/client/src/components/page/page.note.vue +++ b/packages/client/src/components/page/page.note.vue @@ -7,8 +7,8 @@ <script lang="ts"> import { defineComponent, onMounted, PropType, Ref, ref } from 'vue'; -import XNote from '@/components/note.vue'; -import XNoteDetailed from '@/components/note-detailed.vue'; +import XNote from '@/components/MkNote.vue'; +import XNoteDetailed from '@/components/MkNoteDetailed.vue'; import * as os from '@/os'; import { NoteBlock } from '@/scripts/hpml/block'; diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue index 3401f945bd..f655196359 100644 --- a/packages/client/src/components/page/page.post.vue +++ b/packages/client/src/components/page/page.post.vue @@ -11,7 +11,7 @@ <script lang="ts"> import { defineComponent, PropType } from 'vue'; import MkTextarea from '../form/textarea.vue'; -import MkButton from '../ui/button.vue'; +import MkButton from '../MkButton.vue'; import { apiUrl } from '@/config'; import * as os from '@/os'; import { PostBlock } from '@/scripts/hpml/block'; diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue index 8d2955466d..b4abe82840 100644 --- a/packages/client/src/components/page/page.text.vue +++ b/packages/client/src/components/page/page.text.vue @@ -14,7 +14,7 @@ import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm'; export default defineComponent({ components: { - MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')), + MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')), }, props: { block: { diff --git a/packages/client/src/components/token-generate-window.vue b/packages/client/src/components/token-generate-window.vue deleted file mode 100644 index bf5775d4d8..0000000000 --- a/packages/client/src/components/token-generate-window.vue +++ /dev/null @@ -1,117 +0,0 @@ -<template> -<XModalWindow ref="dialog" - :width="400" - :height="450" - :with-ok-button="true" - :ok-button-disabled="false" - :can-close="false" - @close="$refs.dialog.close()" - @closed="$emit('closed')" - @ok="ok()" -> - <template #header>{{ title || $ts.generateAccessToken }}</template> - <div v-if="information" class="_section"> - <MkInfo warn>{{ information }}</MkInfo> - </div> - <div class="_section"> - <MkInput v-model="name"> - <template #label>{{ $ts.name }}</template> - </MkInput> - </div> - <div class="_section"> - <div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div> - <MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton> - <MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton> - <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> - </div> -</XModalWindow> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import { permissions } from 'misskey-js'; -import XModalWindow from '@/components/ui/modal-window.vue'; -import MkInput from './form/input.vue'; -import MkTextarea from './form/textarea.vue'; -import MkSwitch from './form/switch.vue'; -import MkButton from './ui/button.vue'; -import MkInfo from './ui/info.vue'; - -export default defineComponent({ - components: { - XModalWindow, - MkInput, - MkTextarea, - MkSwitch, - MkButton, - MkInfo, - }, - - props: { - title: { - type: String, - required: false, - default: null - }, - information: { - type: String, - required: false, - default: null - }, - initialName: { - type: String, - required: false, - default: null - }, - initialPermissions: { - type: Array, - required: false, - default: null - } - }, - - emits: ['done', 'closed'], - - data() { - return { - name: this.initialName, - permissions: {}, - kinds: permissions - }; - }, - - created() { - if (this.initialPermissions) { - for (const kind of this.initialPermissions) { - this.permissions[kind] = true; - } - } else { - for (const kind of this.kinds) { - this.permissions[kind] = false; - } - } - }, - - methods: { - ok() { - this.$emit('done', { - name: this.name, - permissions: Object.keys(this.permissions).filter(p => this.permissions[p]) - }); - this.$refs.dialog.close(); - }, - - disableAll() { - for (const p in this.permissions) { - this.permissions[p] = false; - } - }, - - enableAll() { - for (const p in this.permissions) { - this.permissions[p] = true; - } - } - } -}); -</script> diff --git a/packages/client/src/components/ui/hr.vue b/packages/client/src/components/ui/hr.vue deleted file mode 100644 index 0cb5b48875..0000000000 --- a/packages/client/src/components/ui/hr.vue +++ /dev/null @@ -1,17 +0,0 @@ -<template> -<div class="evrzpitu"></div> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import * as os from '@/os'; - -export default defineComponent({}); -</script> - -<style lang="scss" scoped> -.evrzpitu - margin 16px 0 - border-bottom solid var(--lineWidth) var(--faceDivider) - -</style> diff --git a/packages/client/src/components/url-preview-popup.vue b/packages/client/src/components/url-preview-popup.vue deleted file mode 100644 index 5f3717ab91..0000000000 --- a/packages/client/src/components/url-preview-popup.vue +++ /dev/null @@ -1,60 +0,0 @@ -<template> -<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> - <transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="$emit('closed')"> - <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> - </transition> -</div> -</template> - -<script lang="ts"> -import { defineComponent } from 'vue'; -import MkUrlPreview from './url-preview.vue'; -import * as os from '@/os'; - -export default defineComponent({ - components: { - MkUrlPreview - }, - - props: { - url: { - type: String, - required: true - }, - source: { - required: true - }, - showing: { - type: Boolean, - required: true - }, - }, - - data() { - return { - u: null, - top: 0, - left: 0, - zIndex: os.claimZIndex('middle'), - }; - }, - - mounted() { - const rect = this.source.getBoundingClientRect(); - const x = Math.max((rect.left + (this.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset; - const y = rect.top + this.source.offsetHeight + window.pageYOffset; - - this.top = y; - this.left = x; - }, -}); -</script> - -<style lang="scss" scoped> -.fgmtyycl { - position: absolute; - width: 500px; - max-width: calc(90vw - 12px); - pointer-events: none; -} -</style> diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts index f1d41ddb0e..5329d021fb 100644 --- a/packages/client/src/directives/ripple.ts +++ b/packages/client/src/directives/ripple.ts @@ -1,4 +1,4 @@ -import Ripple from '@/components/ripple.vue'; +import Ripple from '@/components/MkRipple.vue'; import { popup } from '@/os'; export default { diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts index 8b68771cad..5d13497b5f 100644 --- a/packages/client/src/directives/tooltip.ts +++ b/packages/client/src/directives/tooltip.ts @@ -46,7 +46,7 @@ export default { if (self.text == null) return; const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/ui/tooltip.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), { showing, text: self.text, asMfm: binding.modifiers.mfm, diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts index 9d18a69877..c461676624 100644 --- a/packages/client/src/directives/user-preview.ts +++ b/packages/client/src/directives/user-preview.ts @@ -24,7 +24,7 @@ export class UserPreview { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/user-preview.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), { showing, q: this.user, source: this.el diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 94e7f9f6b3..737c044e61 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -14,7 +14,7 @@ if (localStorage.getItem('accounts') != null) { //#endregion import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue'; -import compareVersions from 'compare-versions'; +import { compareVersions } from 'compare-versions'; import JSON5 from 'json5'; import widgets from '@/widgets'; @@ -241,7 +241,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id'; if (lastVersion != null && compareVersions(version, lastVersion) === 1) { // ログインしてる場合だけ if ($i) { - popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed'); + popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed'); } } } catch (err) { diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts index 00dae867d6..515fc47819 100644 --- a/packages/client/src/os.ts +++ b/packages/client/src/os.ts @@ -5,8 +5,8 @@ import { EventEmitter } from 'eventemitter3'; import insertTextAtCursor from 'insert-text-at-cursor'; import * as Misskey from 'misskey-js'; import { apiUrl, url } from '@/config'; -import MkPostFormDialog from '@/components/post-form-dialog.vue'; -import MkWaitingDialog from '@/components/waiting-dialog.vue'; +import MkPostFormDialog from '@/components/MkPostFormDialog.vue'; +import MkWaitingDialog from '@/components/MkWaitingDialog.vue'; import { MenuItem } from '@/types/menu'; import { $i } from '@/account'; @@ -187,19 +187,19 @@ export async function popup(component: Component, props: Record<string, any>, ev } export function pageWindow(path: string) { - popup(defineAsyncComponent(() => import('@/components/page-window.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkPageWindow.vue')), { initialPath: path, }, {}, 'closed'); } export function modalPageWindow(path: string) { - popup(defineAsyncComponent(() => import('@/components/modal-page-window.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkModalPageWindow.vue')), { initialPath: path, }, {}, 'closed'); } export function toast(message: string) { - popup(defineAsyncComponent(() => import('@/components/toast.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkToast.vue')), { message, }, {}, 'closed'); } @@ -210,7 +210,7 @@ export function alert(props: { text?: string | null; }): Promise<void> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, { + popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), props, { done: result => { resolve(); }, @@ -224,7 +224,7 @@ export function confirm(props: { text?: string | null; }): Promise<{ canceled: boolean }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { ...props, showCancelButton: true, }, { @@ -245,7 +245,7 @@ export function inputText(props: { canceled: false; result: string; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { title: props.title, text: props.text, input: { @@ -270,7 +270,7 @@ export function inputNumber(props: { canceled: false; result: number; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { title: props.title, text: props.text, input: { @@ -295,7 +295,7 @@ export function inputDate(props: { canceled: false; result: Date; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { title: props.title, text: props.text, input: { @@ -332,7 +332,7 @@ export function select<C = any>(props: { canceled: false; result: C; }> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), { title: props.title, text: props.text, select: { @@ -354,7 +354,7 @@ export function success() { window.setTimeout(() => { showing.value = false; }, 1000); - popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { success: true, showing: showing, }, { @@ -366,7 +366,7 @@ export function success() { export function waiting() { return new Promise((resolve, reject) => { const showing = ref(true); - popup(defineAsyncComponent(() => import('@/components/waiting-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), { success: false, showing: showing, }, { @@ -377,7 +377,7 @@ export function waiting() { export function form(title, form) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/form-dialog.vue')), { title, form }, { + popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form }, { done: result => { resolve(result); }, @@ -387,7 +387,7 @@ export function form(title, form) { export async function selectUser() { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/user-select-dialog.vue')), {}, { + popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {}, { ok: user => { resolve(user); }, @@ -397,7 +397,7 @@ export async function selectUser() { export async function selectDriveFile(multiple: boolean) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { type: 'file', multiple, }, { @@ -412,7 +412,7 @@ export async function selectDriveFile(multiple: boolean) { export async function selectDriveFolder(multiple: boolean) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/drive-select-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { type: 'folder', multiple, }, { @@ -427,7 +427,7 @@ export async function selectDriveFolder(multiple: boolean) { export async function pickEmoji(src: HTMLElement | null, opts) { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { src, ...opts, }, { @@ -442,7 +442,7 @@ export async function cropImage(image: Misskey.entities.DriveFile, options: { aspectRatio: number; }): Promise<Misskey.entities.DriveFile> { return new Promise((resolve, reject) => { - popup(defineAsyncComponent(() => import('@/components/cropper-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), { file: image, aspectRatio: options.aspectRatio, }, { @@ -492,7 +492,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: characterData: false, }); - openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/emoji-picker-window.vue')), { + openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), { src, ...opts, }, { @@ -514,7 +514,7 @@ export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement }) { return new Promise((resolve, reject) => { let dispose; - popup(defineAsyncComponent(() => import('@/components/ui/popup-menu.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkPopupMenu.vue')), { items, src, width: options?.width, @@ -535,7 +535,7 @@ export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent) ev.preventDefault(); return new Promise((resolve, reject) => { let dispose; - popup(defineAsyncComponent(() => import('@/components/ui/context-menu.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkContextMenu.vue')), { items, ev, }, { diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue index 6ac1f4297a..a90a023cb6 100644 --- a/packages/client/src/pages/_error_.vue +++ b/packages/client/src/pages/_error_.vue @@ -20,7 +20,7 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { version } from '@/config'; import * as os from '@/os'; import { unisonReload } from '@/scripts/unison-reload'; diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue index fd7b5f936d..7bcccea98f 100644 --- a/packages/client/src/pages/about-misskey.vue +++ b/packages/client/src/pages/about-misskey.vue @@ -67,8 +67,8 @@ import { nextTick, onBeforeUnmount } from 'vue'; import { version } from '@/config'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkLink from '@/components/link.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkLink from '@/components/MkLink.vue'; import { physics } from '@/scripts/physics'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue index 6d915c5843..df64378c01 100644 --- a/packages/client/src/pages/about.emojis.vue +++ b/packages/client/src/pages/about.emojis.vue @@ -30,14 +30,14 @@ <script lang="ts"> import { defineComponent, computed } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import XEmoji from './emojis.emoji.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; -import MkFolder from '@/components/ui/folder.vue'; -import MkTab from '@/components/tab.vue'; +import MkFolder from '@/components/MkFolder.vue'; +import MkTab from '@/components/MkTab.vue'; import * as os from '@/os'; import { emojiCategories, emojiTags } from '@/instance'; -import XEmoji from './emojis.emoji.vue'; export default defineComponent({ components: { @@ -66,7 +66,7 @@ export default defineComponent({ handler() { this.search(); }, - deep: true + deep: true, }, }, @@ -90,8 +90,8 @@ export default defineComponent({ } else { this.selectedTags.add(tag); } - } - } + }, + }, }); </script> diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue index 8d93908725..c501a77582 100644 --- a/packages/client/src/pages/about.federation.vue +++ b/packages/client/src/pages/about.federation.vue @@ -48,11 +48,11 @@ <script lang="ts" setup> import { computed } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkInstanceCardMini from '@/components/instance-card-mini.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue'; import FormSplit from '@/components/form/split.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index ff50ba8452..33c55fecef 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -88,8 +88,8 @@ import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; import FormSuspense from '@/components/form/suspense.vue'; import FormSplit from '@/components/form/split.vue'; -import MkKeyValue from '@/components/key-value.vue'; -import MkInstanceStats from '@/components/instance-stats.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; +import MkInstanceStats from '@/components/MkInstanceStats.vue'; import * as os from '@/os'; import number from '@/filters/number'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue index f96a41a7ea..a62e0f630f 100644 --- a/packages/client/src/pages/admin-file.vue +++ b/packages/client/src/pages/admin-file.vue @@ -63,14 +63,14 @@ <script lang="ts" setup> import { computed } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkSwitch from '@/components/form/switch.vue'; -import MkObjectView from '@/components/object-view.vue'; -import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkObjectView from '@/components/MkObjectView.vue'; +import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import FormSection from '@/components/form/section.vue'; -import MkUserCardMini from '@/components/user-card-mini.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkUserCardMini from '@/components/MkUserCardMini.vue'; +import MkInfo from '@/components/MkInfo.vue'; import bytes from '@/filters/bytes'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue index b2c33fdc95..bdb41b2d2c 100644 --- a/packages/client/src/pages/admin/_header_.vue +++ b/packages/client/src/pages/admin/_header_.vue @@ -33,7 +33,7 @@ import tinycolor from 'tinycolor2'; import { popupMenu } from '@/os'; import { url } from '@/config'; import { scrollToTop } from '@/scripts/scroll'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; import { globalEvents } from '@/events'; import { injectPageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue index 9c718ab9e4..9907d4d235 100644 --- a/packages/client/src/pages/admin/abuses.vue +++ b/packages/client/src/pages/admin/abuses.vue @@ -52,8 +52,8 @@ import { computed } from 'vue'; import XHeader from './_header_.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import XAbuseReport from '@/components/abuse-report.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import XAbuseReport from '@/components/MkAbuseReport.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue index 21feafc0bb..9a28d2ad61 100644 --- a/packages/client/src/pages/admin/ads.vue +++ b/packages/client/src/pages/admin/ads.vue @@ -49,7 +49,7 @@ <script lang="ts" setup> import { } from 'vue'; import XHeader from './_header_.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkTextarea from '@/components/form/textarea.vue'; import FormRadios from '@/components/form/radios.vue'; diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue index 5107c2f302..f10693314a 100644 --- a/packages/client/src/pages/admin/announcements.vue +++ b/packages/client/src/pages/admin/announcements.vue @@ -29,7 +29,7 @@ <script lang="ts" setup> import { } from 'vue'; import XHeader from './_header_.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkTextarea from '@/components/form/textarea.vue'; import * as os from '@/os'; diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue index cf2cdea92b..72d5e379de 100644 --- a/packages/client/src/pages/admin/bot-protection.vue +++ b/packages/client/src/pages/admin/bot-protection.vue @@ -47,14 +47,14 @@ import { defineAsyncComponent } from 'vue'; import FormRadios from '@/components/form/radios.vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormSuspense from '@/components/form/suspense.vue'; import FormSlot from '@/components/form/slot.vue'; import * as os from '@/os'; import { fetchInstance } from '@/instance'; import { i18n } from '@/i18n'; -const MkCaptcha = defineAsyncComponent(() => import('@/components/captcha.vue')); +const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue')); let provider = $ref(null); let hcaptchaSiteKey: string | null = $ref(null); diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue index ca8718ef63..1c2656b8f5 100644 --- a/packages/client/src/pages/admin/database.vue +++ b/packages/client/src/pages/admin/database.vue @@ -13,7 +13,7 @@ <script lang="ts" setup> import { } from 'vue'; import FormSuspense from '@/components/form/suspense.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import * as os from '@/os'; import bytes from '@/filters/bytes'; import number from '@/filters/number'; diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue index 46cfd3db72..64137f0c3e 100644 --- a/packages/client/src/pages/admin/email-settings.vue +++ b/packages/client/src/pages/admin/email-settings.vue @@ -50,7 +50,7 @@ import { } from 'vue'; import XHeader from './_header_.vue'; import FormSwitch from '@/components/form/switch.vue'; import FormInput from '@/components/form/input.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormSuspense from '@/components/form/suspense.vue'; import FormSplit from '@/components/form/split.vue'; import FormSection from '@/components/form/section.vue'; diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue index af91044e7d..090dd9afc1 100644 --- a/packages/client/src/pages/admin/emoji-edit-dialog.vue +++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue @@ -30,8 +30,8 @@ <script lang="ts" setup> import { } from 'vue'; -import XModalWindow from '@/components/ui/modal-window.vue'; -import MkButton from '@/components/ui/button.vue'; +import XModalWindow from '@/components/MkModalWindow.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import * as os from '@/os'; import { unique } from '@/scripts/array'; diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue index 51ecd1b794..94f152d7db 100644 --- a/packages/client/src/pages/admin/emojis.vue +++ b/packages/client/src/pages/admin/emojis.vue @@ -70,10 +70,10 @@ <script lang="ts" setup> import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue'; import XHeader from './_header_.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkTab from '@/components/tab.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkTab from '@/components/MkTab.vue'; import MkSwitch from '@/components/form/switch.vue'; import FormSplit from '@/components/form/split.vue'; import { selectFile, selectFiles } from '@/scripts/select-file'; diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue index 2614a6b8d9..2e3a807ba6 100644 --- a/packages/client/src/pages/admin/files.vue +++ b/packages/client/src/pages/admin/files.vue @@ -36,10 +36,10 @@ import { computed, defineAsyncComponent } from 'vue'; import * as Acct from 'misskey-js/built/acct'; import XHeader from './_header_.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; -import MkFileListForAdmin from '@/components/file-list-for-admin.vue'; +import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue'; import bytes from '@/filters/bytes'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue index 154b854809..9200b5d547 100644 --- a/packages/client/src/pages/admin/index.vue +++ b/packages/client/src/pages/admin/index.vue @@ -25,8 +25,8 @@ <script lang="ts" setup> import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, watch } from 'vue'; import { i18n } from '@/i18n'; -import MkSuperMenu from '@/components/ui/super-menu.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkSuperMenu from '@/components/MkSuperMenu.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { scroll } from '@/scripts/scroll'; import { instance } from '@/instance'; import * as os from '@/os'; diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue index 6d479e8f0d..94b740a4d5 100644 --- a/packages/client/src/pages/admin/instance-block.vue +++ b/packages/client/src/pages/admin/instance-block.vue @@ -17,7 +17,7 @@ <script lang="ts" setup> import { } from 'vue'; import XHeader from './_header_.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue index eff318dc17..0ab6ecbb4f 100644 --- a/packages/client/src/pages/admin/integrations.discord.vue +++ b/packages/client/src/pages/admin/integrations.discord.vue @@ -28,8 +28,8 @@ import { } from 'vue'; import FormSwitch from '@/components/form/switch.vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormButton from '@/components/MkButton.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; import { fetchInstance } from '@/instance'; diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue index f6e56e1ed3..34761e9a7b 100644 --- a/packages/client/src/pages/admin/integrations.github.vue +++ b/packages/client/src/pages/admin/integrations.github.vue @@ -28,8 +28,8 @@ import { } from 'vue'; import FormSwitch from '@/components/form/switch.vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormButton from '@/components/MkButton.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; import { fetchInstance } from '@/instance'; diff --git a/packages/client/src/pages/admin/integrations.twitter.vue b/packages/client/src/pages/admin/integrations.twitter.vue index 48da4648f4..a870d76a4d 100644 --- a/packages/client/src/pages/admin/integrations.twitter.vue +++ b/packages/client/src/pages/admin/integrations.twitter.vue @@ -28,8 +28,8 @@ import { defineComponent } from 'vue'; import FormSwitch from '@/components/form/switch.vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormButton from '@/components/MkButton.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; import { fetchInstance } from '@/instance'; diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue index 7e5f5bb094..e0e47e667f 100644 --- a/packages/client/src/pages/admin/metrics.vue +++ b/packages/client/src/pages/admin/metrics.vue @@ -67,11 +67,11 @@ import { Tooltip, SubTitle } from 'chart.js'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkSelect from '@/components/form/select.vue'; import MkInput from '@/components/form/input.vue'; -import MkContainer from '@/components/ui/container.vue'; -import MkFolder from '@/components/ui/folder.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkFolder from '@/components/MkFolder.vue'; import MkwFederation from '../../widgets/federation.vue'; import { version, url } from '@/config'; import bytes from '@/filters/bytes'; diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue index 6c99cad33c..e8cb5867a7 100644 --- a/packages/client/src/pages/admin/overview.federation.vue +++ b/packages/client/src/pages/admin/overview.federation.vue @@ -16,7 +16,7 @@ <script lang="ts" setup> import { onMounted, onUnmounted, ref } from 'vue'; -import MkMiniChart from '@/components/mini-chart.vue'; +import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue index d70336f3c2..0dd4a749ba 100644 --- a/packages/client/src/pages/admin/overview.user.vue +++ b/packages/client/src/pages/admin/overview.user.vue @@ -11,7 +11,7 @@ <script lang="ts" setup> import * as misskey from 'misskey-js'; -import MkMiniChart from '@/components/mini-chart.vue'; +import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; import { acct } from '@/filters/user'; diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue index c186df15a7..e532a908f1 100644 --- a/packages/client/src/pages/admin/overview.vue +++ b/packages/client/src/pages/admin/overview.vue @@ -165,8 +165,8 @@ import XFederation from './overview.federation.vue'; import XQueueChart from './overview.queue-chart.vue'; import XUser from './overview.user.vue'; import XPie from './overview.pie.vue'; -import MkNumberDiff from '@/components/number-diff.vue'; -import MkTagCloud from '@/components/tag-cloud.vue'; +import MkNumberDiff from '@/components/MkNumberDiff.vue'; +import MkTagCloud from '@/components/MkTagCloud.vue'; import { version, url } from '@/config'; import number from '@/filters/number'; import * as os from '@/os'; @@ -176,7 +176,7 @@ import { definePageMetadata } from '@/scripts/page-metadata'; import 'chartjs-adapter-date-fns'; import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; -import MkFileListForAdmin from '@/components/file-list-for-admin.vue'; +import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue'; Chart.register( ArcElement, diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue index 0951d26c24..fe61909e80 100644 --- a/packages/client/src/pages/admin/proxy-account.vue +++ b/packages/client/src/pages/admin/proxy-account.vue @@ -15,9 +15,9 @@ <script lang="ts" setup> import { } from 'vue'; -import MkKeyValue from '@/components/key-value.vue'; -import FormButton from '@/components/ui/button.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; +import FormButton from '@/components/MkButton.vue'; +import MkInfo from '@/components/MkInfo.vue'; import FormSuspense from '@/components/form/suspense.vue'; import * as os from '@/os'; import { fetchInstance } from '@/instance'; diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue index 6ccb464d17..a6fc75aea8 100644 --- a/packages/client/src/pages/admin/queue.vue +++ b/packages/client/src/pages/admin/queue.vue @@ -12,7 +12,7 @@ import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue'; import XQueue from './queue.chart.vue'; import XHeader from './_header_.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import * as config from '@/config'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue index 42347c0e7d..e6f7f4ead1 100644 --- a/packages/client/src/pages/admin/relays.vue +++ b/packages/client/src/pages/admin/relays.vue @@ -19,7 +19,7 @@ <script lang="ts" setup> import { } from 'vue'; import XHeader from './_header_.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue index 07ee412f3e..c36cedb312 100644 --- a/packages/client/src/pages/admin/security.vue +++ b/packages/client/src/pages/admin/security.vue @@ -107,11 +107,11 @@ import XHeader from './_header_.vue'; import FormFolder from '@/components/form/folder.vue'; import FormRadios from '@/components/form/radios.vue'; import FormSwitch from '@/components/form/switch.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormSuspense from '@/components/form/suspense.vue'; import FormRange from '@/components/form/range.vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { fetchInstance } from '@/instance'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue index 496eb46ea4..cf6b1f17e9 100644 --- a/packages/client/src/pages/admin/settings.vue +++ b/packages/client/src/pages/admin/settings.vue @@ -153,7 +153,7 @@ import XHeader from './_header_.vue'; import FormSwitch from '@/components/form/switch.vue'; import FormInput from '@/components/form/input.vue'; import FormTextarea from '@/components/form/textarea.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormSection from '@/components/form/section.vue'; import FormSplit from '@/components/form/split.vue'; import FormSuspense from '@/components/form/suspense.vue'; diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue index 6bc569f246..eeb335a430 100644 --- a/packages/client/src/pages/admin/users.vue +++ b/packages/client/src/pages/admin/users.vue @@ -57,12 +57,12 @@ import { computed } from 'vue'; import XHeader from './_header_.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkPagination from '@/components/MkPagination.vue'; import * as os from '@/os'; import { lookupUser } from '@/scripts/lookup-user'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; -import MkUserCardMini from '@/components/user-card-mini.vue'; +import MkUserCardMini from '@/components/MkUserCardMini.vue'; let paginationComponent = $ref<InstanceType<typeof MkPagination>>(); diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue index aeb85b6557..5f66596997 100644 --- a/packages/client/src/pages/announcements.vue +++ b/packages/client/src/pages/announcements.vue @@ -20,8 +20,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue index 1865781a0e..500cb3a7c5 100644 --- a/packages/client/src/pages/antenna-timeline.vue +++ b/packages/client/src/pages/antenna-timeline.vue @@ -19,7 +19,7 @@ <script lang="ts" setup> import { computed, inject, watch } from 'vue'; -import XTimeline from '@/components/timeline.vue'; +import XTimeline from '@/components/MkTimeline.vue'; import { scroll } from '@/scripts/scroll'; import * as os from '@/os'; import { useRouter } from '@/router'; diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue index 2f8eeadff1..0064e4c3f1 100644 --- a/packages/client/src/pages/api-console.vue +++ b/packages/client/src/pages/api-console.vue @@ -32,7 +32,7 @@ import { ref } from 'vue'; import JSON5 from 'json5'; import { Endpoints } from 'misskey-js'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkTextarea from '@/components/form/textarea.vue'; import MkSwitch from '@/components/form/switch.vue'; diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue index 5feff0149a..024a7a2c5b 100644 --- a/packages/client/src/pages/auth.form.vue +++ b/packages/client/src/pages/auth.form.vue @@ -21,7 +21,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; export default defineComponent({ diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue index 9457cd6b2f..bb55881a22 100644 --- a/packages/client/src/pages/auth.vue +++ b/packages/client/src/pages/auth.vue @@ -31,7 +31,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import XForm from './auth.form.vue'; -import MkSignin from '@/components/signin.vue'; +import MkSignin from '@/components/MkSignin.vue'; import * as os from '@/os'; import { login } from '@/account'; diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue index 5b5d0454f9..3e94b5f041 100644 --- a/packages/client/src/pages/channel-editor.vue +++ b/packages/client/src/pages/channel-editor.vue @@ -29,7 +29,7 @@ <script lang="ts" setup> import { computed, inject, watch } from 'vue'; import MkTextarea from '@/components/form/textarea.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import { selectFile } from '@/scripts/select-file'; import * as os from '@/os'; diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue index 4a3c97cdae..380c3efc8e 100644 --- a/packages/client/src/pages/channel.vue +++ b/packages/client/src/pages/channel.vue @@ -33,10 +33,10 @@ <script lang="ts" setup> import { computed, inject, watch } from 'vue'; -import MkContainer from '@/components/ui/container.vue'; -import XPostForm from '@/components/post-form.vue'; -import XTimeline from '@/components/timeline.vue'; -import XChannelFollowButton from '@/components/channel-follow-button.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import XPostForm from '@/components/MkPostForm.vue'; +import XTimeline from '@/components/MkTimeline.vue'; +import XChannelFollowButton from '@/components/MkChannelFollowButton.vue'; import * as os from '@/os'; import { useRouter } from '@/router'; import { $i } from '@/account'; diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index 63612bc57f..56ea98d15e 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -24,9 +24,9 @@ <script lang="ts" setup> import { computed, defineComponent, inject } from 'vue'; -import MkChannelPreview from '@/components/channel-preview.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkChannelPreview from '@/components/MkChannelPreview.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; import { useRouter } from '@/router'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue index 608e4ba7ee..5b56651bdd 100644 --- a/packages/client/src/pages/clip.vue +++ b/packages/client/src/pages/clip.vue @@ -21,7 +21,7 @@ <script lang="ts" setup> import { computed, watch, provide } from 'vue'; import * as misskey from 'misskey-js'; -import XNotes from '@/components/notes.vue'; +import XNotes from '@/components/MkNotes.vue'; import { $i } from '@/account'; import { i18n } from '@/i18n'; import * as os from '@/os'; diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue index 988a1bf3df..088f0eacdc 100644 --- a/packages/client/src/pages/drive.vue +++ b/packages/client/src/pages/drive.vue @@ -6,7 +6,7 @@ <script lang="ts" setup> import { computed } from 'vue'; -import XDrive from '@/components/drive.vue'; +import XDrive from '@/components/MkDrive.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue index 0f32804b72..18a371a086 100644 --- a/packages/client/src/pages/explore.featured.vue +++ b/packages/client/src/pages/explore.featured.vue @@ -10,8 +10,8 @@ </template> <script lang="ts" setup> -import XNotes from '@/components/notes.vue'; -import MkTab from '@/components/tab.vue'; +import XNotes from '@/components/MkNotes.vue'; +import MkTab from '@/components/MkTab.vue'; import { i18n } from '@/i18n'; const paginationForNotes = { diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue index ed5ee3b791..e16e40b8ed 100644 --- a/packages/client/src/pages/explore.users.vue +++ b/packages/client/src/pages/explore.users.vue @@ -59,9 +59,9 @@ <script lang="ts" setup> import { computed, watch } from 'vue'; -import XUserList from '@/components/user-list.vue'; -import MkFolder from '@/components/ui/folder.vue'; -import MkTab from '@/components/tab.vue'; +import XUserList from '@/components/MkUserList.vue'; +import MkFolder from '@/components/MkFolder.vue'; +import MkTab from '@/components/MkTab.vue'; import number from '@/filters/number'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue index 4725278ab6..279960d139 100644 --- a/packages/client/src/pages/explore.vue +++ b/packages/client/src/pages/explore.vue @@ -33,7 +33,7 @@ import { computed, watch } from 'vue'; import XFeatured from './explore.featured.vue'; import XUsers from './explore.users.vue'; -import MkFolder from '@/components/ui/folder.vue'; +import MkFolder from '@/components/MkFolder.vue'; import MkInput from '@/components/form/input.vue'; import MkRadios from '@/components/form/radios.vue'; import number from '@/filters/number'; @@ -41,7 +41,7 @@ import * as os from '@/os'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; import { instance } from '@/instance'; -import XUserList from '@/components/user-list.vue'; +import XUserList from '@/components/MkUserList.vue'; const props = defineProps<{ tag?: string; diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue index 203dc4a51b..32a1dbf592 100644 --- a/packages/client/src/pages/favorites.vue +++ b/packages/client/src/pages/favorites.vue @@ -22,9 +22,9 @@ <script lang="ts" setup> import { ref } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import XNote from '@/components/note.vue'; -import XList from '@/components/date-separated-list.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import XNote from '@/components/MkNote.vue'; +import XList from '@/components/MkDateSeparatedList.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue index f87bcbf24b..82d7164260 100644 --- a/packages/client/src/pages/follow-requests.vue +++ b/packages/client/src/pages/follow-requests.vue @@ -36,7 +36,7 @@ <script lang="ts" setup> import { ref, computed } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkPagination from '@/components/MkPagination.vue'; import { userPage, acct } from '@/filters/user'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue index 0c1cb7733b..828246d678 100644 --- a/packages/client/src/pages/follow.vue +++ b/packages/client/src/pages/follow.vue @@ -3,63 +3,60 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import * as Acct from 'misskey-js/built/acct'; import * as os from '@/os'; import { mainRouter } from '@/router'; +import { i18n } from '@/i18n'; -export default defineComponent({ - created() { - const acct = new URL(location.href).searchParams.get('acct'); - if (acct == null) return; +async function follow(user): Promise<void> { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.t('followConfirm', { name: user.name || user.username }), + }); - let promise; + if (canceled) { + window.close(); + return; + } + + os.apiWithDialog('following/create', { + userId: user.id, + }); +} - if (acct.startsWith('https://')) { - promise = os.api('ap/show', { - uri: acct, - }); - promise.then(res => { - if (res.type === 'User') { - this.follow(res.object); - } else if (res.type === 'Note') { - mainRouter.push(`/notes/${res.object.id}`); - } else { - os.alert({ - type: 'error', - text: 'Not a user', - }).then(() => { - window.close(); - }); - } - }); - } else { - promise = os.api('users/show', Acct.parse(acct)); - promise.then(user => { - this.follow(user); - }); - } +const acct = new URL(location.href).searchParams.get('acct'); +if (acct == null) { + throw new Error('acct required'); +} - os.promiseDialog(promise, null, null, this.$ts.fetchingAsApObject); - }, +let promise; - methods: { - async follow(user) { - const { canceled } = await os.confirm({ - type: 'question', - text: this.$t('followConfirm', { name: user.name || user.username }), - }); - - if (canceled) { +if (acct.startsWith('https://')) { + promise = os.api('ap/show', { + uri: acct, + }); + promise.then(res => { + if (res.type === 'User') { + follow(res.object); + } else if (res.type === 'Note') { + mainRouter.push(`/notes/${res.object.id}`); + } else { + os.alert({ + type: 'error', + text: 'Not a user', + }).then(() => { window.close(); - return; - } - - os.apiWithDialog('following/create', { - userId: user.id, }); - }, - }, -}); + } + }); +} else { + promise = os.api('users/show', Acct.parse(acct)); + promise.then(user => { + follow(user); + }); +} + +os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); </script> diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue index 2e0e5063e9..8f716d9eb3 100644 --- a/packages/client/src/pages/gallery/edit.vue +++ b/packages/client/src/pages/gallery/edit.vue @@ -32,7 +32,7 @@ <script lang="ts" setup> import { computed, inject, watch } from 'vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormInput from '@/components/form/input.vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormSwitch from '@/components/form/switch.vue'; diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue index fba8b96bda..598383217e 100644 --- a/packages/client/src/pages/gallery/index.vue +++ b/packages/client/src/pages/gallery/index.vue @@ -43,13 +43,13 @@ <script lang="ts" setup> import { computed, defineComponent, watch } from 'vue'; -import XUserList from '@/components/user-list.vue'; -import MkFolder from '@/components/ui/folder.vue'; +import XUserList from '@/components/MkUserList.vue'; +import MkFolder from '@/components/MkFolder.vue'; import MkInput from '@/components/form/input.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkTab from '@/components/tab.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkGalleryPostPreview from '@/components/gallery-post-preview.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkTab from '@/components/MkTab.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue'; import number from '@/filters/number'; import * as os from '@/os'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue index a3a11d9a65..3804bcdcf5 100644 --- a/packages/client/src/pages/gallery/post.vue +++ b/packages/client/src/pages/gallery/post.vue @@ -56,13 +56,13 @@ <script lang="ts" setup> import { computed, defineComponent, inject, watch } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; -import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkGalleryPostPreview from '@/components/gallery-post-preview.vue'; -import MkFollowButton from '@/components/follow-button.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue'; +import MkFollowButton from '@/components/MkFollowButton.vue'; import { url } from '@/config'; import { useRouter } from '@/router'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue index eaa9b2b319..6e8560ef42 100644 --- a/packages/client/src/pages/instance-info.vue +++ b/packages/client/src/pages/instance-info.vue @@ -117,13 +117,13 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import MkChart from '@/components/chart.vue'; -import MkObjectView from '@/components/object-view.vue'; +import MkChart from '@/components/MkChart.vue'; +import MkObjectView from '@/components/MkObjectView.vue'; import FormLink from '@/components/form/link.vue'; -import MkLink from '@/components/link.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkLink from '@/components/MkLink.vue'; +import MkButton from '@/components/MkButton.vue'; import FormSection from '@/components/form/section.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import MkSelect from '@/components/form/select.vue'; import FormSwitch from '@/components/form/switch.vue'; import * as os from '@/os'; @@ -132,8 +132,8 @@ import bytes from '@/filters/bytes'; import { iAmModerator } from '@/account'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; -import MkUserCardMini from '@/components/user-card-mini.vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkUserCardMini from '@/components/MkUserCardMini.vue'; +import MkPagination from '@/components/MkPagination.vue'; const props = defineProps<{ host: string; diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue index 7df4c846fb..56d852fe3d 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -45,7 +45,7 @@ <script lang="ts" setup> import { defineAsyncComponent, defineComponent, inject, markRaw, onMounted, onUnmounted } from 'vue'; import * as Acct from 'misskey-js/built/acct'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { acct } from '@/filters/user'; import * as os from '@/os'; import { stream } from '@/stream'; diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue index 393d2a17b2..2b5a9569a1 100644 --- a/packages/client/src/pages/messaging/messaging-room.message.vue +++ b/packages/client/src/pages/messaging/messaging-room.message.vue @@ -40,7 +40,7 @@ import { } from 'vue'; import * as mfm from 'mfm-js'; import * as Misskey from 'misskey-js'; import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm'; -import MkUrlPreview from '@/components/url-preview.vue'; +import MkUrlPreview from '@/components/MkUrlPreview.vue'; import * as os from '@/os'; import { $i } from '@/account'; diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue index fe1590b240..a9da89ed95 100644 --- a/packages/client/src/pages/messaging/messaging-room.vue +++ b/packages/client/src/pages/messaging/messaging-room.vue @@ -55,8 +55,8 @@ import * as Misskey from 'misskey-js'; import * as Acct from 'misskey-js/built/acct'; import XMessage from './messaging-room.message.vue'; import XForm from './messaging-room.form.vue'; -import XList from '@/components/date-separated-list.vue'; -import MkPagination, { Paging } from '@/components/ui/pagination.vue'; +import XList from '@/components/MkDateSeparatedList.vue'; +import MkPagination, { Paging } from '@/components/MkPagination.vue'; import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll'; import * as os from '@/os'; import { stream } from '@/stream'; diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue index cbdf6b2832..5de072cbfa 100644 --- a/packages/client/src/pages/miauth.vue +++ b/packages/client/src/pages/miauth.vue @@ -40,8 +40,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkSignin from '@/components/signin.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkSignin from '@/components/MkSignin.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { $i, login } from '@/account'; import { appendQuery, query } from '@/scripts/url'; diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue index 32027846cc..054053fbfb 100644 --- a/packages/client/src/pages/my-antennas/editor.vue +++ b/packages/client/src/pages/my-antennas/editor.vue @@ -47,7 +47,7 @@ <script lang="ts" setup> import { watch } from 'vue'; import * as Acct from 'misskey-js/built/acct'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import MkTextarea from '@/components/form/textarea.vue'; import MkSelect from '@/components/form/select.vue'; diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue index 70e444da52..dc73ba674e 100644 --- a/packages/client/src/pages/my-antennas/index.vue +++ b/packages/client/src/pages/my-antennas/index.vue @@ -17,8 +17,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue index 5e5454b729..68330d6db4 100644 --- a/packages/client/src/pages/my-clips/index.vue +++ b/packages/client/src/pages/my-clips/index.vue @@ -18,8 +18,8 @@ <script lang="ts" setup> import { } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue index 144cba684f..9af7c0d105 100644 --- a/packages/client/src/pages/my-lists/index.vue +++ b/packages/client/src/pages/my-lists/index.vue @@ -18,9 +18,9 @@ <script lang="ts" setup> import { } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkAvatars from '@/components/avatars.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkAvatars from '@/components/MkAvatars.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue index 8b23c667dc..d90453526e 100644 --- a/packages/client/src/pages/my-lists/list.vue +++ b/packages/client/src/pages/my-lists/list.vue @@ -39,7 +39,7 @@ <script lang="ts" setup> import { computed, watch } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { mainRouter } from '@/router'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue index 240a0d4eb7..6509cb306e 100644 --- a/packages/client/src/pages/note.vue +++ b/packages/client/src/pages/note.vue @@ -43,11 +43,11 @@ <script lang="ts" setup> import { computed, defineComponent, watch } from 'vue'; import * as misskey from 'misskey-js'; -import XNote from '@/components/note.vue'; -import XNoteDetailed from '@/components/note-detailed.vue'; -import XNotes from '@/components/notes.vue'; -import MkRemoteCaution from '@/components/remote-caution.vue'; -import MkButton from '@/components/ui/button.vue'; +import XNote from '@/components/MkNote.vue'; +import XNoteDetailed from '@/components/MkNoteDetailed.vue'; +import XNotes from '@/components/MkNotes.vue'; +import MkRemoteCaution from '@/components/MkRemoteCaution.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue index acf338c2c2..dd57060fda 100644 --- a/packages/client/src/pages/notifications.vue +++ b/packages/client/src/pages/notifications.vue @@ -18,8 +18,8 @@ <script lang="ts" setup> import { computed } from 'vue'; import { notificationTypes } from 'misskey-js'; -import XNotifications from '@/components/notifications.vue'; -import XNotes from '@/components/notes.vue'; +import XNotifications from '@/components/MkNotifications.vue'; +import XNotes from '@/components/MkNotes.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue index b22bf1cb34..4d471e7b94 100644 --- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue +++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue @@ -18,7 +18,7 @@ /* eslint-disable vue/no-mutating-props */ import { onMounted } from 'vue'; import XContainer from '../page-editor.container.vue'; -import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue'; +import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import * as os from '@/os'; const props = withDefaults(defineProps<{ diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue index 27f9f961f3..5e494ee23b 100644 --- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue +++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue @@ -22,8 +22,8 @@ import { watch } from 'vue'; import XContainer from '../page-editor.container.vue'; import MkInput from '@/components/form/input.vue'; import MkSwitch from '@/components/form/switch.vue'; -import XNote from '@/components/note.vue'; -import XNoteDetailed from '@/components/note-detailed.vue'; +import XNote from '@/components/MkNote.vue'; +import XNoteDetailed from '@/components/MkNoteDetailed.vue'; import * as os from '@/os'; const props = withDefaults(defineProps<{ diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue index aaa61e6e36..591d13053a 100644 --- a/packages/client/src/pages/page-editor/page-editor.vue +++ b/packages/client/src/pages/page-editor/page-editor.vue @@ -93,7 +93,7 @@ import { v4 as uuid } from 'uuid'; import XVariable from './page-editor.script-block.vue'; import XBlocks from './page-editor.blocks.vue'; import MkTextarea from '@/components/form/textarea.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import MkSelect from '@/components/form/select.vue'; import MkSwitch from '@/components/form/switch.vue'; import MkInput from '@/components/form/input.vue'; diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index 02fd61f58b..fb0e6a4914 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -65,13 +65,13 @@ <script lang="ts" setup> import { computed, watch } from 'vue'; import XPage from '@/components/page/page.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { url } from '@/config'; -import MkFollowButton from '@/components/follow-button.vue'; -import MkContainer from '@/components/ui/container.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkPagePreview from '@/components/page-preview.vue'; +import MkFollowButton from '@/components/MkFollowButton.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkPagePreview from '@/components/MkPagePreview.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue index 62c675e41e..02b05c57ba 100644 --- a/packages/client/src/pages/pages.vue +++ b/packages/client/src/pages/pages.vue @@ -26,9 +26,9 @@ <script lang="ts" setup> import { computed, inject } from 'vue'; -import MkPagePreview from '@/components/page-preview.vue'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagePreview from '@/components/MkPagePreview.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; import { useRouter } from '@/router'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue index 8f211081dd..efbe53a523 100644 --- a/packages/client/src/pages/preview.vue +++ b/packages/client/src/pages/preview.vue @@ -6,7 +6,7 @@ <script lang="ts" setup> import { computed } from 'vue'; -import MkSample from '@/components/sample.vue'; +import MkSample from '@/components/MkSample.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue index ae500386dd..ac586b4e72 100644 --- a/packages/client/src/pages/registry.keys.vue +++ b/packages/client/src/pages/registry.keys.vue @@ -33,8 +33,8 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import FormSplit from '@/components/form/split.vue'; const props = defineProps<{ diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue index 562f9df884..b6f3d73bb6 100644 --- a/packages/client/src/pages/registry.value.vue +++ b/packages/client/src/pages/registry.value.vue @@ -45,11 +45,11 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormSplit from '@/components/form/split.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormInfo from '@/components/MkInfo.vue'; const props = defineProps<{ path: string; diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue index f022a0d688..80a44d5589 100644 --- a/packages/client/src/pages/registry.vue +++ b/packages/client/src/pages/registry.vue @@ -22,7 +22,7 @@ import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; let scopes = $ref(null); diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue index 10c41f2d21..38f2cf289d 100644 --- a/packages/client/src/pages/reset-password.vue +++ b/packages/client/src/pages/reset-password.vue @@ -17,7 +17,7 @@ <script lang="ts" setup> import { defineAsyncComponent, onMounted } from 'vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { mainRouter } from '@/router'; @@ -39,7 +39,7 @@ async function save() { onMounted(() => { if (props.token == null) { - os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {}, 'closed'); + os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed'); mainRouter.push('/'); } }); diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue index d437601475..12b5d78b27 100644 --- a/packages/client/src/pages/scratchpad.vue +++ b/packages/client/src/pages/scratchpad.vue @@ -28,8 +28,8 @@ import 'prismjs/themes/prism-okaidia.css'; import { PrismEditor } from 'vue-prism-editor'; import 'vue-prism-editor/dist/prismeditor.min.css'; import { AiScript, parse, utils } from '@syuilo/aiscript'; -import MkContainer from '@/components/ui/container.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkButton from '@/components/MkButton.vue'; import { createAiScriptEnv } from '@/scripts/aiscript/api'; import * as os from '@/os'; import { $i } from '@/account'; diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue index 404b9e3dbd..fdcbb57e44 100644 --- a/packages/client/src/pages/search.vue +++ b/packages/client/src/pages/search.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { computed } from 'vue'; -import XNotes from '@/components/notes.vue'; +import XNotes from '@/components/MkNotes.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue index d72d3e2060..89d8178dc6 100644 --- a/packages/client/src/pages/settings/2fa.vue +++ b/packages/client/src/pages/settings/2fa.vue @@ -68,8 +68,8 @@ import { ref } from 'vue'; import { hostname } from '@/config'; import { byteify, hexify, stringify } from '@/scripts/2fa'; -import MkButton from '@/components/ui/button.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkInfo from '@/components/MkInfo.vue'; import MkInput from '@/components/form/input.vue'; import MkSwitch from '@/components/form/switch.vue'; import * as os from '@/os'; diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue index 65b6233693..93e65d55b1 100644 --- a/packages/client/src/pages/settings/account-info.vue +++ b/packages/client/src/pages/settings/account-info.vue @@ -129,7 +129,7 @@ <script lang="ts" setup> import { onMounted, ref } from 'vue'; import FormSection from '@/components/form/section.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import * as os from '@/os'; import number from '@/filters/number'; import bytes from '@/filters/bytes'; diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue index d1e71c4548..e16931a9ca 100644 --- a/packages/client/src/pages/settings/accounts.vue +++ b/packages/client/src/pages/settings/accounts.vue @@ -23,7 +23,7 @@ <script lang="ts" setup> import { defineAsyncComponent, ref } from 'vue'; import FormSuspense from '@/components/form/suspense.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account'; import { i18n } from '@/i18n'; @@ -75,7 +75,7 @@ function removeAccount(account) { } function addExistingAccount() { - os.popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, { + os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, { done: res => { addAccounts(res.id, res.i); os.success(); @@ -84,7 +84,7 @@ function addExistingAccount() { } function createAccount() { - os.popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, { + os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, { done: res => { addAccounts(res.id, res.i); switchAccountWithToken(res.i); diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue index b8a2dedb5a..7165089e39 100644 --- a/packages/client/src/pages/settings/api.vue +++ b/packages/client/src/pages/settings/api.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { defineAsyncComponent, ref } from 'vue'; import FormLink from '@/components/form/link.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; @@ -17,7 +17,7 @@ import { definePageMetadata } from '@/scripts/page-metadata'; const isDesktop = ref(window.innerWidth >= 1100); function generateToken() { - os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {}, { + os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, { done: async result => { const { name, permissions } = result; const { token } = await os.api('miauth/gen-token', { diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue index 10ecbc795d..8b345c8e9f 100644 --- a/packages/client/src/pages/settings/apps.vue +++ b/packages/client/src/pages/settings/apps.vue @@ -39,7 +39,7 @@ <script lang="ts" setup> import { ref } from 'vue'; -import FormPagination from '@/components/ui/pagination.vue'; +import FormPagination from '@/components/MkPagination.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue index d5000d3973..2992906e6d 100644 --- a/packages/client/src/pages/settings/custom-css.vue +++ b/packages/client/src/pages/settings/custom-css.vue @@ -11,7 +11,7 @@ <script lang="ts" setup> import { ref, watch } from 'vue'; import FormTextarea from '@/components/form/textarea.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormInfo from '@/components/MkInfo.vue'; import * as os from '@/os'; import { unisonReload } from '@/scripts/unison-reload'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue index 3c4ea716ce..851a857fed 100644 --- a/packages/client/src/pages/settings/delete-account.vue +++ b/packages/client/src/pages/settings/delete-account.vue @@ -8,8 +8,8 @@ </template> <script lang="ts" setup> -import FormInfo from '@/components/ui/info.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormInfo from '@/components/MkInfo.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { signout } from '@/account'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue index c8c78f2923..a10e2d9f7d 100644 --- a/packages/client/src/pages/settings/drive.vue +++ b/packages/client/src/pages/settings/drive.vue @@ -49,12 +49,12 @@ import tinycolor from 'tinycolor2'; import FormLink from '@/components/form/link.vue'; import FormSwitch from '@/components/form/switch.vue'; import FormSection from '@/components/form/section.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import FormSplit from '@/components/form/split.vue'; import * as os from '@/os'; import bytes from '@/filters/bytes'; import { defaultStore } from '@/store'; -import MkChart from '@/components/chart.vue'; +import MkChart from '@/components/MkChart.vue'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; import { $i } from '@/account'; diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index cd2bcc581a..9072bcefc9 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -81,7 +81,7 @@ <option value="force">{{ i18n.ts._nsfw.force }}</option> </FormSelect> - <FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" class="_formBlock"> + <FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock"> <template #label>{{ i18n.ts.numberOfPageCache }}</template> <template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template> </FormRange> @@ -100,7 +100,7 @@ import FormRadios from '@/components/form/radios.vue'; import FormRange from '@/components/form/range.vue'; import FormSection from '@/components/form/section.vue'; import FormLink from '@/components/form/link.vue'; -import MkLink from '@/components/link.vue'; +import MkLink from '@/components/MkLink.vue'; import { langs } from '@/config'; import { defaultStore } from '@/store'; import * as os from '@/os'; diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue index 13c2b7fc85..d3d155894e 100644 --- a/packages/client/src/pages/settings/import-export.vue +++ b/packages/client/src/pages/settings/import-export.vue @@ -71,7 +71,7 @@ <script lang="ts" setup> import { ref } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import FormSection from '@/components/form/section.vue'; import FormFolder from '@/components/form/folder.vue'; import FormSwitch from '@/components/form/switch.vue'; diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue index 862435eb3f..73407ff5fb 100644 --- a/packages/client/src/pages/settings/index.vue +++ b/packages/client/src/pages/settings/index.vue @@ -24,8 +24,8 @@ <script setup lang="ts"> import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue'; import { i18n } from '@/i18n'; -import MkInfo from '@/components/ui/info.vue'; -import MkSuperMenu from '@/components/ui/super-menu.vue'; +import MkInfo from '@/components/MkInfo.vue'; +import MkSuperMenu from '@/components/MkSuperMenu.vue'; import { scroll } from '@/scripts/scroll'; import { signout , $i } from '@/account'; import { unisonReload } from '@/scripts/unison-reload'; diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue index d0ca85adca..5a0d48b82e 100644 --- a/packages/client/src/pages/settings/instance-mute.vue +++ b/packages/client/src/pages/settings/instance-mute.vue @@ -12,8 +12,8 @@ <script lang="ts" setup> import { ref, watch } from 'vue'; import FormTextarea from '@/components/form/textarea.vue'; -import MkInfo from '@/components/ui/info.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkInfo from '@/components/MkInfo.vue'; +import MkButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { $i } from '@/account'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue index ccb02e08a2..c8219519f8 100644 --- a/packages/client/src/pages/settings/integration.vue +++ b/packages/client/src/pages/settings/integration.vue @@ -27,7 +27,7 @@ import { computed, onMounted, ref, watch } from 'vue'; import { apiUrl } from '@/config'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { $i } from '@/account'; import { instance } from '@/instance'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue index 495d52d4d3..3832933cf9 100644 --- a/packages/client/src/pages/settings/mute-block.vue +++ b/packages/client/src/pages/settings/mute-block.vue @@ -29,9 +29,9 @@ <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'; +import MkPagination from '@/components/MkPagination.vue'; +import MkTab from '@/components/MkTab.vue'; +import FormInfo from '@/components/MkInfo.vue'; import FormLink from '@/components/form/link.vue'; import { userPage } from '@/filters/user'; import * as os from '@/os'; diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue index 534112c3e0..6c501e9f2f 100644 --- a/packages/client/src/pages/settings/navbar.vue +++ b/packages/client/src/pages/settings/navbar.vue @@ -21,7 +21,7 @@ import { computed, ref, watch } from 'vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormRadios from '@/components/form/radios.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue index d2a363965a..5703e0c6b6 100644 --- a/packages/client/src/pages/settings/notifications.vue +++ b/packages/client/src/pages/settings/notifications.vue @@ -12,7 +12,7 @@ <script lang="ts" setup> import { defineAsyncComponent } from 'vue'; import { notificationTypes } from 'misskey-js'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; import * as os from '@/os'; @@ -34,7 +34,7 @@ async function readAllNotifications() { function configure() { const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x)); - os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), { includingTypes, showGlobalToggle: false, }, { diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue index a4cab4b7a4..e259bbeb3a 100644 --- a/packages/client/src/pages/settings/plugin.install.vue +++ b/packages/client/src/pages/settings/plugin.install.vue @@ -18,8 +18,8 @@ import { AiScript, parse } from '@syuilo/aiscript'; import { serialize } from '@syuilo/aiscript/built/serializer'; import { v4 as uuid } from 'uuid'; import FormTextarea from '@/components/form/textarea.vue'; -import FormButton from '@/components/ui/button.vue'; -import FormInfo from '@/components/ui/info.vue'; +import FormButton from '@/components/MkButton.vue'; +import FormInfo from '@/components/MkInfo.vue'; import * as os from '@/os'; import { ColdDeviceStorage } from '@/store'; import { unisonReload } from '@/scripts/unison-reload'; @@ -79,7 +79,7 @@ async function install() { } const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => { - os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), { title: i18n.ts.tokenRequested, information: i18n.ts.pluginTokenRequestedDescription, initialName: name, diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue index 8e773b7990..8ce6fe4445 100644 --- a/packages/client/src/pages/settings/plugin.vue +++ b/packages/client/src/pages/settings/plugin.vue @@ -36,8 +36,8 @@ import { nextTick, ref } from 'vue'; import FormLink from '@/components/form/link.vue'; import FormSwitch from '@/components/form/switch.vue'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import * as os from '@/os'; import { ColdDeviceStorage } from '@/store'; import { unisonReload } from '@/scripts/unison-reload'; diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue index 991bb7902d..fac67185bc 100644 --- a/packages/client/src/pages/settings/preferences-backups.vue +++ b/packages/client/src/pages/settings/preferences-backups.vue @@ -33,8 +33,8 @@ import { computed, onMounted, onUnmounted, useCssModule } from 'vue'; import { v4 as uuid } from 'uuid'; import FormSection from '@/components/form/section.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkInfo from '@/components/MkInfo.vue'; import * as os from '@/os'; import { ColdDeviceStorage, defaultStore } from '@/store'; import { unisonReload } from '@/scripts/unison-reload'; diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue index 5bb3273b3f..aaf60c8d55 100644 --- a/packages/client/src/pages/settings/profile.vue +++ b/packages/client/src/pages/settings/profile.vue @@ -61,7 +61,7 @@ <script lang="ts" setup> import { reactive, watch } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import FormInput from '@/components/form/input.vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormSwitch from '@/components/form/switch.vue'; diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue index 170124eacd..c23c1c2375 100644 --- a/packages/client/src/pages/settings/reaction.vue +++ b/packages/client/src/pages/settings/reaction.vue @@ -59,7 +59,7 @@ import XDraggable from 'vuedraggable'; import FormInput from '@/components/form/input.vue'; import FormRadios from '@/components/form/radios.vue'; import FromSlot from '@/components/form/slot.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormSection from '@/components/form/section.vue'; import FormSwitch from '@/components/form/switch.vue'; import * as os from '@/os'; @@ -88,7 +88,7 @@ function remove(reaction, ev: MouseEvent) { } function preview(ev: MouseEvent) { - os.popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { asReactionPicker: true, src: ev.currentTarget ?? ev.target, }, {}, 'closed'); diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue index d926acce5d..d109a4ba7c 100644 --- a/packages/client/src/pages/settings/security.vue +++ b/packages/client/src/pages/settings/security.vue @@ -41,8 +41,8 @@ import X2fa from './2fa.vue'; import FormSection from '@/components/form/section.vue'; import FormSlot from '@/components/form/slot.vue'; -import FormButton from '@/components/ui/button.vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import FormButton from '@/components/MkButton.vue'; +import MkPagination from '@/components/MkPagination.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue index f29c9eb049..2729609522 100644 --- a/packages/client/src/pages/settings/sounds.vue +++ b/packages/client/src/pages/settings/sounds.vue @@ -20,7 +20,7 @@ <script lang="ts" setup> import { computed, ref } from 'vue'; import FormRange from '@/components/form/range.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; import * as os from '@/os'; @@ -90,7 +90,7 @@ async function edit(type) { }, volume: { type: 'range', - mim: 0, + min: 0, max: 1, step: 0.05, textConverter: (v) => `${Math.floor(v * 100)}%`, diff --git a/packages/client/src/pages/settings/statusbar.statusbar.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue index 2f0c6fc1ee..98a1825b95 100644 --- a/packages/client/src/pages/settings/statusbar.statusbar.vue +++ b/packages/client/src/pages/settings/statusbar.statusbar.vue @@ -86,7 +86,7 @@ import FormSelect from '@/components/form/select.vue'; import MkInput from '@/components/form/input.vue'; import MkSwitch from '@/components/form/switch.vue'; import FormRadios from '@/components/form/radios.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormRange from '@/components/form/range.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue index 3f23ed470c..9dbf182142 100644 --- a/packages/client/src/pages/settings/statusbar.vue +++ b/packages/client/src/pages/settings/statusbar.vue @@ -15,7 +15,7 @@ import { v4 as uuid } from 'uuid'; import XStatusbar from './statusbar.statusbar.vue'; import FormRadios from '@/components/form/radios.vue'; import FormFolder from '@/components/form/folder.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; import { unisonReload } from '@/scripts/unison-reload'; diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue index 2994d8fb1a..34f8384d87 100644 --- a/packages/client/src/pages/settings/theme.install.vue +++ b/packages/client/src/pages/settings/theme.install.vue @@ -15,7 +15,7 @@ import { } from 'vue'; import JSON5 from 'json5'; import FormTextarea from '@/components/form/textarea.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import { applyTheme, validateTheme } from '@/scripts/theme'; import * as os from '@/os'; import { addTheme, getThemes } from '@/theme-store'; diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue index 9d28b4a316..792bb15e5d 100644 --- a/packages/client/src/pages/settings/theme.manage.vue +++ b/packages/client/src/pages/settings/theme.manage.vue @@ -31,7 +31,7 @@ import JSON5 from 'json5'; import FormTextarea from '@/components/form/textarea.vue'; import FormSelect from '@/components/form/select.vue'; import FormInput from '@/components/form/input.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import { Theme, getBuiltinThemesRef } from '@/scripts/theme'; import copyToClipboard from '@/scripts/copy-to-clipboard'; import * as os from '@/os'; diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue index cc869699a6..6571a881a9 100644 --- a/packages/client/src/pages/settings/theme.vue +++ b/packages/client/src/pages/settings/theme.vue @@ -72,7 +72,7 @@ import FormSwitch from '@/components/form/switch.vue'; import FormSelect from '@/components/form/select.vue'; import FormSection from '@/components/form/section.vue'; import FormLink from '@/components/form/link.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import { getBuiltinThemesRef } from '@/scripts/theme'; import { selectFile } from '@/scripts/select-file'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue index e36e1d7540..35f3cb1dab 100644 --- a/packages/client/src/pages/settings/webhook.edit.vue +++ b/packages/client/src/pages/settings/webhook.edit.vue @@ -38,7 +38,7 @@ import { } from 'vue'; import FormInput from '@/components/form/input.vue'; import FormSection from '@/components/form/section.vue'; import FormSwitch from '@/components/form/switch.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue index fa96c5fa4b..fcf1329ff6 100644 --- a/packages/client/src/pages/settings/webhook.new.vue +++ b/packages/client/src/pages/settings/webhook.new.vue @@ -36,7 +36,7 @@ import { } from 'vue'; import FormInput from '@/components/form/input.vue'; import FormSection from '@/components/form/section.vue'; import FormSwitch from '@/components/form/switch.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue index 868d273ce4..1a7e73940c 100644 --- a/packages/client/src/pages/settings/webhook.vue +++ b/packages/client/src/pages/settings/webhook.vue @@ -29,7 +29,7 @@ <script lang="ts" setup> import { } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkPagination from '@/components/MkPagination.vue'; import FormSection from '@/components/form/section.vue'; import FormLink from '@/components/form/link.vue'; import { userPage } from '@/filters/user'; diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue index 5fee7cd35a..e297379568 100644 --- a/packages/client/src/pages/settings/word-mute.vue +++ b/packages/client/src/pages/settings/word-mute.vue @@ -31,10 +31,10 @@ <script lang="ts" setup> import { ref, watch } from 'vue'; import FormTextarea from '@/components/form/textarea.vue'; -import MkKeyValue from '@/components/key-value.vue'; -import MkButton from '@/components/ui/button.vue'; -import MkInfo from '@/components/ui/info.vue'; -import MkTab from '@/components/tab.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; +import MkButton from '@/components/MkButton.vue'; +import MkInfo from '@/components/MkInfo.vue'; +import MkTab from '@/components/MkTab.vue'; import * as os from '@/os'; import number from '@/filters/number'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue index f4b6f66fa6..69d22ed632 100644 --- a/packages/client/src/pages/share.vue +++ b/packages/client/src/pages/share.vue @@ -28,8 +28,8 @@ import { } from 'vue'; import { noteVisibilities } from 'misskey-js'; import * as Acct from 'misskey-js/built/acct'; import * as Misskey from 'misskey-js'; -import MkButton from '@/components/ui/button.vue'; -import XPostForm from '@/components/post-form.vue'; +import MkButton from '@/components/MkButton.vue'; +import XPostForm from '@/components/MkPostForm.vue'; import * as os from '@/os'; import { mainRouter } from '@/router'; import { definePageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue index 950d26a72e..5498c2999d 100644 --- a/packages/client/src/pages/tag.vue +++ b/packages/client/src/pages/tag.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { computed } from 'vue'; -import XNotes from '@/components/notes.vue'; +import XNotes from '@/components/MkNotes.vue'; import { definePageMetadata } from '@/scripts/page-metadata'; const props = defineProps<{ diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue index 548e60614b..7dfeee16ed 100644 --- a/packages/client/src/pages/theme-editor.vue +++ b/packages/client/src/pages/theme-editor.vue @@ -74,7 +74,7 @@ import tinycolor from 'tinycolor2'; import { v4 as uuid } from 'uuid'; import JSON5 from 'json5'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormFolder from '@/components/form/folder.vue'; diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue index f69bf58100..7f08ccc2a1 100644 --- a/packages/client/src/pages/timeline.tutorial.vue +++ b/packages/client/src/pages/timeline.tutorial.vue @@ -67,7 +67,7 @@ <script lang="ts" setup> import { computed } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index f62ab95b5b..9d42997025 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -1,6 +1,6 @@ <template> <MkStickyContainer> - <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs"/></template> + <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> <MkSpacer :content-max="800"> <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/> @@ -23,8 +23,8 @@ <script lang="ts" setup> import { defineAsyncComponent, computed, watch } from 'vue'; -import XTimeline from '@/components/timeline.vue'; -import XPostForm from '@/components/post-form.vue'; +import XTimeline from '@/components/MkTimeline.vue'; +import XPostForm from '@/components/MkPostForm.vue'; import { scroll } from '@/scripts/scroll'; import * as os from '@/os'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue index 9154c7348e..d376f11c58 100644 --- a/packages/client/src/pages/user-info.vue +++ b/packages/client/src/pages/user-info.vue @@ -154,21 +154,21 @@ <script lang="ts" setup> import { computed, watch } from 'vue'; import * as misskey from 'misskey-js'; -import MkChart from '@/components/chart.vue'; -import MkObjectView from '@/components/object-view.vue'; +import MkChart from '@/components/MkChart.vue'; +import MkObjectView from '@/components/MkObjectView.vue'; import FormTextarea from '@/components/form/textarea.vue'; import FormSwitch from '@/components/form/switch.vue'; import FormLink from '@/components/form/link.vue'; import FormSection from '@/components/form/section.vue'; -import FormButton from '@/components/ui/button.vue'; +import FormButton from '@/components/MkButton.vue'; import FormInput from '@/components/form/input.vue'; import FormSplit from '@/components/form/split.vue'; import FormFolder from '@/components/form/folder.vue'; -import MkKeyValue from '@/components/key-value.vue'; +import MkKeyValue from '@/components/MkKeyValue.vue'; import MkSelect from '@/components/form/select.vue'; import FormSuspense from '@/components/form/suspense.vue'; -import MkFileListForAdmin from '@/components/file-list-for-admin.vue'; -import MkInfo from '@/components/ui/info.vue'; +import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue'; +import MkInfo from '@/components/MkInfo.vue'; import * as os from '@/os'; import number from '@/filters/number'; import bytes from '@/filters/bytes'; diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue index c1f4569a02..4a534e47ba 100644 --- a/packages/client/src/pages/user-list-timeline.vue +++ b/packages/client/src/pages/user-list-timeline.vue @@ -19,7 +19,7 @@ <script lang="ts" setup> import { computed, watch, inject } from 'vue'; -import XTimeline from '@/components/timeline.vue'; +import XTimeline from '@/components/MkTimeline.vue'; import { scroll } from '@/scripts/scroll'; import * as os from '@/os'; import { useRouter } from '@/router'; diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue index 870e6f7174..50a5d4b818 100644 --- a/packages/client/src/pages/user/clips.vue +++ b/packages/client/src/pages/user/clips.vue @@ -9,40 +9,22 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; -import MkPagination from '@/components/ui/pagination.vue'; +<script lang="ts" setup> +import { computed } from 'vue'; +import * as misskey from 'misskey-js'; +import MkPagination from '@/components/MkPagination.vue'; -export default defineComponent({ - components: { - MkPagination, - }, +const props = defineProps<{ + user: misskey.entities.User; +}>(); - props: { - user: { - type: Object, - required: true - }, - }, - - data() { - return { - pagination: { - endpoint: 'users/clips' as const, - limit: 20, - params: { - userId: this.user.id, - } - }, - }; - }, - - watch: { - user() { - this.$refs.list.reload(); - } - }, -}); +const pagination = { + endpoint: 'users/clips' as const, + limit: 20, + params: computed(() => ({ + userId: props.user.id, + })), +}; </script> <style lang="scss" scoped> diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue index e84b7ff57e..d42acd838f 100644 --- a/packages/client/src/pages/user/follow-list.vue +++ b/packages/client/src/pages/user/follow-list.vue @@ -11,8 +11,8 @@ <script lang="ts" setup> import { computed } from 'vue'; import * as misskey from 'misskey-js'; -import MkUserInfo from '@/components/user-info.vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkUserInfo from '@/components/MkUserInfo.vue'; +import MkPagination from '@/components/MkPagination.vue'; const props = defineProps<{ user: misskey.entities.User; diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue index 6af28d455b..3b6768e64a 100644 --- a/packages/client/src/pages/user/gallery.vue +++ b/packages/client/src/pages/user/gallery.vue @@ -11,8 +11,8 @@ <script lang="ts" setup> import { computed } from 'vue'; import * as misskey from 'misskey-js'; -import MkGalleryPostPreview from '@/components/gallery-post-preview.vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue'; +import MkPagination from '@/components/MkPagination.vue'; const props = withDefaults(defineProps<{ user: misskey.entities.User; diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue index fa72a995b3..352db4616e 100644 --- a/packages/client/src/pages/user/home.vue +++ b/packages/client/src/pages/user/home.vue @@ -112,13 +112,13 @@ import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } import calcAge from 's-age'; import * as misskey from 'misskey-js'; import XUserTimeline from './index.timeline.vue'; -import XNote from '@/components/note.vue'; -import MkFollowButton from '@/components/follow-button.vue'; -import MkContainer from '@/components/ui/container.vue'; -import MkFolder from '@/components/ui/folder.vue'; -import MkRemoteCaution from '@/components/remote-caution.vue'; -import MkTab from '@/components/tab.vue'; -import MkInfo from '@/components/ui/info.vue'; +import XNote from '@/components/MkNote.vue'; +import MkFollowButton from '@/components/MkFollowButton.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkFolder from '@/components/MkFolder.vue'; +import MkRemoteCaution from '@/components/MkRemoteCaution.vue'; +import MkTab from '@/components/MkTab.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { getScrollPosition } from '@/scripts/scroll'; import { getUserMenu } from '@/scripts/get-user-menu'; import number from '@/filters/number'; diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue index 8a7a86e0f1..43c2ed8b04 100644 --- a/packages/client/src/pages/user/index.activity.vue +++ b/packages/client/src/pages/user/index.activity.vue @@ -16,8 +16,8 @@ <script lang="ts" setup> import { } from 'vue'; import * as misskey from 'misskey-js'; -import MkContainer from '@/components/ui/container.vue'; -import MkChart from '@/components/chart.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkChart from '@/components/MkChart.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue index 79dd1726e1..5c9a73dcb7 100644 --- a/packages/client/src/pages/user/index.photos.vue +++ b/packages/client/src/pages/user/index.photos.vue @@ -4,12 +4,13 @@ <div class="ujigsodd"> <MkLoading v-if="fetching"/> <div v-if="!fetching && images.length > 0" class="stream"> - <MkA v-for="image in images" - :key="image.id" + <MkA + v-for="image in images" + :key="image.note.id + image.file.id" class="img" :to="notePage(image.note)" > - <ImgWithBlurhash :hash="image.blurhash" :src="thumbnail(image.file)" :alt="image.name" :title="image.name"/> + <ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/> </MkA> </div> <p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p> @@ -17,64 +18,56 @@ </MkContainer> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { onMounted } from 'vue'; +import * as misskey from 'misskey-js'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import { notePage } from '@/filters/note'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; -import ImgWithBlurhash from '@/components/img-with-blurhash.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; +import { defaultStore } from '@/store'; -export default defineComponent({ - components: { - MkContainer, - ImgWithBlurhash, - }, - props: { - user: { - type: Object, - required: true - }, - }, - data() { - return { - fetching: true, - images: [], - }; - }, - mounted() { - const image = [ - 'image/jpeg', - 'image/png', - 'image/gif', - 'image/apng', - 'image/vnd.mozilla.apng', - ]; - os.api('users/notes', { - userId: this.user.id, - fileType: image, - excludeNsfw: this.$store.state.nsfw !== 'ignore', - limit: 10, - }).then(notes => { - for (const note of notes) { - for (const file of note.files) { - this.images.push({ - note, - file - }); - } +const props = defineProps<{ + user: misskey.entities.UserDetailed; +}>(); + +let fetching = $ref(true); +let images = $ref<{ + note: misskey.entities.Note; + file: misskey.entities.DriveFile; +}[]>([]); + +function thumbnail(image: misskey.entities.DriveFile): string { + return defaultStore.state.disableShowingAnimatedImages + ? getStaticImageUrl(image.thumbnailUrl) + : image.thumbnailUrl; +} + +onMounted(() => { + const image = [ + 'image/jpeg', + 'image/png', + 'image/gif', + 'image/apng', + 'image/vnd.mozilla.apng', + ]; + os.api('users/notes', { + userId: props.user.id, + fileType: image, + excludeNsfw: defaultStore.state.nsfw !== 'ignore', + limit: 10, + }).then(notes => { + for (const note of notes) { + for (const file of note.files) { + images.push({ + note, + file, + }); } - this.fetching = false; - }); - }, - methods: { - thumbnail(image: any): string { - return this.$store.state.disableShowingAnimatedImages - ? getStaticImageUrl(image.thumbnailUrl) - : image.thumbnailUrl; - }, - notePage - }, + } + fetching = false; + }); }); </script> diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue index 0345978b8d..41983a5ae8 100644 --- a/packages/client/src/pages/user/index.timeline.vue +++ b/packages/client/src/pages/user/index.timeline.vue @@ -14,8 +14,8 @@ <script lang="ts" setup> import { ref, computed } from 'vue'; import * as misskey from 'misskey-js'; -import XNotes from '@/components/notes.vue'; -import MkTab from '@/components/tab.vue'; +import XNotes from '@/components/MkNotes.vue'; +import MkTab from '@/components/MkTab.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue index ad101158e0..bd16c46681 100644 --- a/packages/client/src/pages/user/pages.vue +++ b/packages/client/src/pages/user/pages.vue @@ -9,8 +9,8 @@ <script lang="ts" setup> import { computed } from 'vue'; import * as misskey from 'misskey-js'; -import MkPagePreview from '@/components/page-preview.vue'; -import MkPagination from '@/components/ui/pagination.vue'; +import MkPagePreview from '@/components/MkPagePreview.vue'; +import MkPagination from '@/components/MkPagination.vue'; const props = defineProps<{ user: misskey.entities.User; diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue index d2c1f92ebb..7e84e100a4 100644 --- a/packages/client/src/pages/user/reactions.vue +++ b/packages/client/src/pages/user/reactions.vue @@ -16,9 +16,9 @@ <script lang="ts" setup> import { computed } from 'vue'; import * as misskey from 'misskey-js'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkNote from '@/components/note.vue'; -import MkReactionIcon from '@/components/reaction-icon.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkNote from '@/components/MkNote.vue'; +import MkReactionIcon from '@/components/MkReactionIcon.vue'; const props = defineProps<{ user: misskey.entities.User; diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue index 240177c9d9..827162a0c0 100644 --- a/packages/client/src/pages/welcome.entrance.a.vue +++ b/packages/client/src/pages/welcome.entrance.a.vue @@ -49,12 +49,12 @@ import { } from 'vue'; import { toUnicode } from 'punycode/'; import XTimeline from './welcome.timeline.vue'; -import MarqueeText from '@/components/marquee.vue'; -import XSigninDialog from '@/components/signin-dialog.vue'; -import XSignupDialog from '@/components/signup-dialog.vue'; -import MkButton from '@/components/ui/button.vue'; -import XNote from '@/components/note.vue'; -import MkFeaturedPhotos from '@/components/featured-photos.vue'; +import MarqueeText from '@/components/MkMarquee.vue'; +import XSigninDialog from '@/components/MkSigninDialog.vue'; +import XSignupDialog from '@/components/MkSignupDialog.vue'; +import MkButton from '@/components/MkButton.vue'; +import XNote from '@/components/MkNote.vue'; +import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue'; import { host, instanceName } from '@/config'; import * as os from '@/os'; import number from '@/filters/number'; diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue index 344dc9aed9..4bf117590a 100644 --- a/packages/client/src/pages/welcome.entrance.b.vue +++ b/packages/client/src/pages/welcome.entrance.b.vue @@ -38,11 +38,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { toUnicode } from 'punycode/'; -import XSigninDialog from '@/components/signin-dialog.vue'; -import XSignupDialog from '@/components/signup-dialog.vue'; -import MkButton from '@/components/ui/button.vue'; -import XNote from '@/components/note.vue'; -import MkFeaturedPhotos from '@/components/featured-photos.vue'; +import XSigninDialog from '@/components/MkSigninDialog.vue'; +import XSignupDialog from '@/components/MkSignupDialog.vue'; +import MkButton from '@/components/MkButton.vue'; +import XNote from '@/components/MkNote.vue'; +import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue'; import XTimeline from './welcome.timeline.vue'; import { host, instanceName } from '@/config'; import * as os from '@/os'; diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue index d583c5df35..a590834a4c 100644 --- a/packages/client/src/pages/welcome.entrance.c.vue +++ b/packages/client/src/pages/welcome.entrance.c.vue @@ -58,11 +58,11 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { toUnicode } from 'punycode/'; -import XSigninDialog from '@/components/signin-dialog.vue'; -import XSignupDialog from '@/components/signup-dialog.vue'; -import MkButton from '@/components/ui/button.vue'; -import XNote from '@/components/note.vue'; -import MkFeaturedPhotos from '@/components/featured-photos.vue'; +import XSigninDialog from '@/components/MkSigninDialog.vue'; +import XSignupDialog from '@/components/MkSignupDialog.vue'; +import MkButton from '@/components/MkButton.vue'; +import XNote from '@/components/MkNote.vue'; +import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue'; import XTimeline from './welcome.timeline.vue'; import { host, instanceName } from '@/config'; import * as os from '@/os'; diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue index 4892ab6ea2..d25651e2a3 100644 --- a/packages/client/src/pages/welcome.setup.vue +++ b/packages/client/src/pages/welcome.setup.vue @@ -21,50 +21,37 @@ </form> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; -import MkButton from '@/components/ui/button.vue'; +<script lang="ts" setup> +import { } from 'vue'; +import MkButton from '@/components/MkButton.vue'; import MkInput from '@/components/form/input.vue'; import { host } from '@/config'; import * as os from '@/os'; import { login } from '@/account'; +import { i18n } from '@/i18n'; -export default defineComponent({ - components: { - MkButton, - MkInput, - }, +let username = $ref(''); +let password = $ref(''); +let submitting = $ref(false); - data() { - return { - username: '', - password: '', - submitting: false, - host, - }; - }, +function submit() { + if (submitting) return; + submitting = true; - methods: { - submit() { - if (this.submitting) return; - this.submitting = true; + os.api('admin/accounts/create', { + username: username, + password: password, + }).then(res => { + return login(res.token); + }).catch(() => { + submitting = false; - os.api('admin/accounts/create', { - username: this.username, - password: this.password, - }).then(res => { - return login(res.token); - }).catch(() => { - this.submitting = false; - - os.alert({ - type: 'error', - text: this.$ts.somethingHappened - }); - }); - } - } -}); + os.alert({ + type: 'error', + text: i18n.ts.somethingHappened, + }); + }); +} </script> <style lang="scss" scoped> diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue index bec9481ffd..e19ebac3ed 100644 --- a/packages/client/src/pages/welcome.timeline.vue +++ b/packages/client/src/pages/welcome.timeline.vue @@ -23,9 +23,9 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import XReactionsViewer from '@/components/reactions-viewer.vue'; -import XMediaList from '@/components/media-list.vue'; -import XPoll from '@/components/poll.vue'; +import XReactionsViewer from '@/components/MkReactionsViewer.vue'; +import XMediaList from '@/components/MkMediaList.vue'; +import XPoll from '@/components/MkPoll.vue'; import * as os from '@/os'; export default defineComponent({ diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts index 37a8fd3dc5..111b15e0a6 100644 --- a/packages/client/src/router.ts +++ b/packages/client/src/router.ts @@ -134,6 +134,10 @@ export const routes = [{ name: 'api', component: page(() => import('./pages/settings/api.vue')), }, { + path: '/apps', + name: 'api', + component: page(() => import('./pages/settings/apps.vue')), + }, { path: '/webhook/edit/:webhookId', name: 'webhook', component: page(() => import('./pages/settings/webhook.edit.vue')), @@ -158,6 +162,10 @@ export const routes = [{ name: 'general', component: page(() => import('./pages/settings/custom-css.vue')), }, { + path: '/accounts', + name: 'profile', + component: page(() => import('./pages/settings/accounts.vue')), + }, { path: '/account-info', name: 'other', component: page(() => import('./pages/settings/account-info.vue')), diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts index 3ef6224175..206724de9e 100644 --- a/packages/client/src/scripts/autocomplete.ts +++ b/packages/client/src/scripts/autocomplete.ts @@ -157,7 +157,7 @@ export class Autocomplete { const _y = ref(y); const _q = ref(q); - const { dispose } = await popup(defineAsyncComponent(() => import('@/components/autocomplete.vue')), { + const { dispose } = await popup(defineAsyncComponent(() => import('@/components/MkAutocomplete.vue')), { textarea: this.textarea, close: this.close, type: type, diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts index 632143f514..a5cf982066 100644 --- a/packages/client/src/scripts/get-note-menu.ts +++ b/packages/client/src/scripts/get-note-menu.ts @@ -289,7 +289,7 @@ export function getNoteMenu(props: { text: i18n.ts.reportAbuse, action: () => { const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`; - os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), { user: appearNote.user, initialComment: `Note: ${u}\n-----\n`, }, {}, 'closed'); diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts index c609fddd51..4a5a2d42f0 100644 --- a/packages/client/src/scripts/get-user-menu.ts +++ b/packages/client/src/scripts/get-user-menu.ts @@ -129,7 +129,7 @@ export function getUserMenu(user, router: Router = mainRouter) { } function reportAbuse() { - os.popup(defineAsyncComponent(() => import('@/components/abuse-report-window.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), { user: user, }, {}, 'closed'); } diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts index 1f38061841..3323968f71 100644 --- a/packages/client/src/scripts/please-login.ts +++ b/packages/client/src/scripts/please-login.ts @@ -6,7 +6,7 @@ import { popup } from '@/os'; export function pleaseLogin(path?: string) { if ($i) return; - popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), { autoSet: true, message: i18n.ts.signinRequired }, { diff --git a/packages/client/src/scripts/reaction-picker.ts b/packages/client/src/scripts/reaction-picker.ts index b7699cae4a..a6d0940a40 100644 --- a/packages/client/src/scripts/reaction-picker.ts +++ b/packages/client/src/scripts/reaction-picker.ts @@ -12,7 +12,7 @@ class ReactionPicker { } public async init() { - await popup(defineAsyncComponent(() => import('@/components/emoji-picker-dialog.vue')), { + await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), { src: this.src, asReactionPicker: true, manualShowing: this.manualShowing diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts index 02ac77b59d..3f55d9ae86 100644 --- a/packages/client/src/scripts/theme.ts +++ b/packages/client/src/scripts/theme.ts @@ -57,6 +57,8 @@ export function applyTheme(theme: Theme, persist = true) { document.documentElement.classList.remove('_themeChanging_'); }, 1000); + const colorSchema = theme.base === 'dark' ? 'dark' : 'light'; + // Deep copy const _theme = JSON.parse(JSON.stringify(theme)); @@ -78,8 +80,11 @@ export function applyTheme(theme: Theme, persist = true) { document.documentElement.style.setProperty(`--${k}`, v.toString()); } + document.documentElement.style.setProperty('color-schema', colorSchema); + if (persist) { localStorage.setItem('theme', JSON.stringify(props)); + localStorage.setItem('colorSchema', colorSchema); } // 色計算など再度行えるようにクライアント全体に通知 diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts index ab57165694..91c27585f3 100644 --- a/packages/client/src/scripts/use-chart-tooltip.ts +++ b/packages/client/src/scripts/use-chart-tooltip.ts @@ -1,6 +1,6 @@ import { onUnmounted, ref } from 'vue'; import * as os from '@/os'; -import MkChartTooltip from '@/components/chart-tooltip.vue'; +import MkChartTooltip from '@/components/MkChartTooltip.vue'; export function useChartTooltip() { const tooltipShowing = ref(false); diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue index f32cd3fe0d..1ea59dd260 100644 --- a/packages/client/src/ui/_common_/common.vue +++ b/packages/client/src/ui/_common_/common.vue @@ -38,7 +38,7 @@ const onNotification = notification => { id: notification.id, }); - popup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), { + popup(defineAsyncComponent(() => import('@/components/MkNotificationToast.vue')), { notification, }, {}, 'closed'); } diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue index 2bac239d41..de000447ad 100644 --- a/packages/client/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue @@ -123,7 +123,7 @@ function openInstanceMenu(ev: MouseEvent) { } function more() { - os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, { + os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, { }, 'closed'); } </script> diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue index 30837ed287..0c46e89412 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -146,7 +146,7 @@ function openInstanceMenu(ev: MouseEvent) { } function more(ev: MouseEvent) { - os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, }, { }, 'closed'); diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue index 7cf6b1f973..7d4f0d6166 100644 --- a/packages/client/src/ui/_common_/statusbar-federation.vue +++ b/packages/client/src/ui/_common_/statusbar-federation.vue @@ -22,7 +22,7 @@ <script lang="ts" setup> import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue'; import * as misskey from 'misskey-js'; -import MarqueeText from '@/components/marquee.vue'; +import MarqueeText from '@/components/MkMarquee.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; import { getNoteSummary } from '@/scripts/get-note-summary'; diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue index 635b875ca1..e75e13bb48 100644 --- a/packages/client/src/ui/_common_/statusbar-rss.vue +++ b/packages/client/src/ui/_common_/statusbar-rss.vue @@ -17,7 +17,7 @@ <script lang="ts" setup> import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue'; -import MarqueeText from '@/components/marquee.vue'; +import MarqueeText from '@/components/MkMarquee.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; import { shuffle } from '@/scripts/shuffle'; diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue index 490c8a096e..f4d989c387 100644 --- a/packages/client/src/ui/_common_/statusbar-user-list.vue +++ b/packages/client/src/ui/_common_/statusbar-user-list.vue @@ -22,7 +22,7 @@ <script lang="ts" setup> import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue'; import * as misskey from 'misskey-js'; -import MarqueeText from '@/components/marquee.vue'; +import MarqueeText from '@/components/MkMarquee.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; import { getNoteSummary } from '@/scripts/get-note-summary'; diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue index 131767c0e3..306d32c597 100644 --- a/packages/client/src/ui/classic.header.vue +++ b/packages/client/src/ui/classic.header.vue @@ -45,7 +45,7 @@ import { search } from '@/scripts/search'; import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; export default defineComponent({ components: { @@ -101,7 +101,7 @@ export default defineComponent({ }, more(ev) { - os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, anchor: { x: 'center', y: 'bottom' }, }, { diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue index 172401f420..7479c1c9c6 100644 --- a/packages/client/src/ui/classic.sidebar.vue +++ b/packages/client/src/ui/classic.sidebar.vue @@ -47,7 +47,7 @@ import { search } from '@/scripts/search'; import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { StickySidebar } from '@/scripts/sticky-sidebar'; //import MisskeyLogo from '@assets/client/misskey.svg'; @@ -121,7 +121,7 @@ export default defineComponent({ }, more(ev) { - os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), { src: ev.currentTarget ?? ev.target, }, {}, 'closed'); }, diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue index 6f9d18bde5..ca8e3f4dbc 100644 --- a/packages/client/src/ui/classic.widgets.vue +++ b/packages/client/src/ui/classic.widgets.vue @@ -10,7 +10,7 @@ <script lang="ts"> import { defineComponent, defineAsyncComponent } from 'vue'; -import XWidgets from '@/components/widgets.vue'; +import XWidgets from '@/components/MkWidgets.vue'; export default defineComponent({ components: { diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index f8263b1b9e..3c0c2a44b6 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -79,7 +79,7 @@ import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, delete import DeckColumnCore from '@/ui/deck/column-core.vue'; import XSidebar from '@/ui/_common_/navbar.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; import { getScrollContainer } from '@/scripts/scroll'; import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue index 6268c357eb..df9539617c 100644 --- a/packages/client/src/ui/deck/antenna-column.vue +++ b/packages/client/src/ui/deck/antenna-column.vue @@ -12,7 +12,7 @@ import { onMounted } from 'vue'; import XColumn from './column.vue'; import { updateColumn, Column } from './deck-store'; -import XTimeline from '@/components/timeline.vue'; +import XTimeline from '@/components/MkTimeline.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/ui/deck/column-core.vue b/packages/client/src/ui/deck/column-core.vue index 2667b6d745..30c0dc5e1c 100644 --- a/packages/client/src/ui/deck/column-core.vue +++ b/packages/client/src/ui/deck/column-core.vue @@ -31,14 +31,4 @@ defineProps<{ const emit = defineEmits<{ (ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void; }>(); - -/* -export default defineComponent({ - methods: { - focus() { - this.$children[0].focus(); - } - } -}); -*/ </script> diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue index 4837c0ce38..104f781b35 100644 --- a/packages/client/src/ui/deck/direct-column.vue +++ b/packages/client/src/ui/deck/direct-column.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { } from 'vue'; import XColumn from './column.vue'; -import XNotes from '@/components/notes.vue'; +import XNotes from '@/components/MkNotes.vue'; import { Column } from './deck-store'; defineProps<{ diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue index 6fbb9f0e6c..8fdf19cabb 100644 --- a/packages/client/src/ui/deck/list-column.vue +++ b/packages/client/src/ui/deck/list-column.vue @@ -12,7 +12,7 @@ import { } from 'vue'; import XColumn from './column.vue'; import { updateColumn, Column } from './deck-store'; -import XTimeline from '@/components/timeline.vue'; +import XTimeline from '@/components/MkTimeline.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; @@ -52,20 +52,6 @@ const menu = [{ text: i18n.ts.selectList, action: setList, }]; - -/* -function focus() { - timeline.focus(); -} - -export default defineComponent({ - watch: { - mediaOnly() { - (this.$refs.timeline as any).reload(); - } - } -}); -*/ </script> <style lang="scss" scoped> diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue index 0b6ca3a239..18055215d2 100644 --- a/packages/client/src/ui/deck/mentions-column.vue +++ b/packages/client/src/ui/deck/mentions-column.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { } from 'vue'; import XColumn from './column.vue'; -import XNotes from '@/components/notes.vue'; +import XNotes from '@/components/MkNotes.vue'; import { Column } from './deck-store'; defineProps<{ diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue index 34132f2e9f..b02118ee56 100644 --- a/packages/client/src/ui/deck/notifications-column.vue +++ b/packages/client/src/ui/deck/notifications-column.vue @@ -10,7 +10,7 @@ import { defineAsyncComponent } from 'vue'; import XColumn from './column.vue'; import { updateColumn , Column } from './deck-store'; -import XNotifications from '@/components/notifications.vue'; +import XNotifications from '@/components/MkNotifications.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; @@ -24,7 +24,7 @@ const emit = defineEmits<{ }>(); function func() { - os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), { includingTypes: props.column.includingTypes, }, { done: async (res) => { diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue index 6ea8e1a8aa..e64ed852b2 100644 --- a/packages/client/src/ui/deck/tl-column.vue +++ b/packages/client/src/ui/deck/tl-column.vue @@ -23,7 +23,7 @@ import { onMounted } from 'vue'; import XColumn from './column.vue'; import { removeColumn, updateColumn, Column } from './deck-store'; -import XTimeline from '@/components/timeline.vue'; +import XTimeline from '@/components/MkTimeline.vue'; import * as os from '@/os'; import { $i } from '@/account'; import { instance } from '@/instance'; @@ -102,22 +102,6 @@ const menu = [{ text: i18n.ts.timeline, action: setType, }]; - -/* -export default defineComponent({ - watch: { - mediaOnly() { - (this.$refs.timeline as any).reload(); - } - }, - - methods: { - focus() { - (this.$refs.timeline as any).focus(); - } - } -}); -*/ </script> <style lang="scss" scoped> diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue index 3661dda59f..2c97009b3b 100644 --- a/packages/client/src/ui/deck/widgets-column.vue +++ b/packages/client/src/ui/deck/widgets-column.vue @@ -13,7 +13,7 @@ import { } from 'vue'; import XColumn from './column.vue'; import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store'; -import XWidgets from '@/components/widgets.vue'; +import XWidgets from '@/components/MkWidgets.vue'; import { i18n } from '@/i18n'; const props = defineProps<{ diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 0ef0da70b5..140c23a35c 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -91,7 +91,6 @@ const widgetsShowing = $ref(false); provide('router', mainRouter); provideMetadataReceiver((info) => { - console.log(info); pageMetadata = info; if (pageMetadata.value) { document.title = `${pageMetadata.value.title} | ${instanceName}`; diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue index 7aed083886..179f8a6baa 100644 --- a/packages/client/src/ui/universal.widgets.vue +++ b/packages/client/src/ui/universal.widgets.vue @@ -9,7 +9,7 @@ <script lang="ts" setup> import { onMounted } from 'vue'; -import XWidgets from '@/components/widgets.vue'; +import XWidgets from '@/components/MkWidgets.vue'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue index 2473af549a..f8db7a9d09 100644 --- a/packages/client/src/ui/visitor/a.vue +++ b/packages/client/src/ui/visitor/a.vue @@ -42,8 +42,8 @@ import XHeader from './header.vue'; import { host, instanceName } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import MkPagination from '@/components/ui/pagination.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import MkButton from '@/components/MkButton.vue'; import { ColdDeviceStorage } from '@/store'; import { mainRouter } from '@/router'; diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue index 09be12d689..3c308cfe5b 100644 --- a/packages/client/src/ui/visitor/b.vue +++ b/packages/client/src/ui/visitor/b.vue @@ -52,10 +52,10 @@ import XKanban from './kanban.vue'; import { host, instanceName } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import MkPagination from '@/components/ui/pagination.vue'; -import XSigninDialog from '@/components/signin-dialog.vue'; -import XSignupDialog from '@/components/signup-dialog.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import XSigninDialog from '@/components/MkSigninDialog.vue'; +import XSignupDialog from '@/components/MkSignupDialog.vue'; +import MkButton from '@/components/MkButton.vue'; import { ColdDeviceStorage, defaultStore } from '@/store'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue index c39dc65777..e2b9034851 100644 --- a/packages/client/src/ui/visitor/header.vue +++ b/packages/client/src/ui/visitor/header.vue @@ -41,8 +41,8 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import XSigninDialog from '@/components/signin-dialog.vue'; -import XSignupDialog from '@/components/signup-dialog.vue'; +import XSigninDialog from '@/components/MkSigninDialog.vue'; +import XSignupDialog from '@/components/MkSignupDialog.vue'; import * as os from '@/os'; import { search } from '@/scripts/search'; diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue index 44b5557259..51e47f277d 100644 --- a/packages/client/src/ui/visitor/kanban.vue +++ b/packages/client/src/ui/visitor/kanban.vue @@ -41,10 +41,10 @@ import { defineComponent, defineAsyncComponent } from 'vue'; import { host, instanceName } from '@/config'; import * as os from '@/os'; -import MkPagination from '@/components/ui/pagination.vue'; -import XSigninDialog from '@/components/signin-dialog.vue'; -import XSignupDialog from '@/components/signup-dialog.vue'; -import MkButton from '@/components/ui/button.vue'; +import MkPagination from '@/components/MkPagination.vue'; +import XSigninDialog from '@/components/MkSigninDialog.vue'; +import XSignupDialog from '@/components/MkSignupDialog.vue'; +import MkButton from '@/components/MkButton.vue'; export default defineComponent({ components: { @@ -93,16 +93,16 @@ export default defineComponent({ methods: { signin() { os.popup(XSigninDialog, { - autoSet: true + autoSet: true, }, {}, 'closed'); }, signup() { os.popup(XSignupDialog, { - autoSet: true + autoSet: true, }, {}, 'closed'); - } - } + }, + }, }); </script> diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue index 97e354e1bb..acca21bff6 100644 --- a/packages/client/src/widgets/activity.vue +++ b/packages/client/src/widgets/activity.vue @@ -20,7 +20,7 @@ import XCalendar from './activity.calendar.vue'; import XChart from './activity.chart.vue'; import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { $i } from '@/account'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue index 6ae1a9877b..cb6d29cd99 100644 --- a/packages/client/src/widgets/aiscript.vue +++ b/packages/client/src/widgets/aiscript.vue @@ -18,7 +18,7 @@ import { AiScript, parse, utils } from '@syuilo/aiscript'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { createAiScriptEnv } from '@/scripts/aiscript/api'; import { $i } from '@/account'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/button.vue b/packages/client/src/widgets/button.vue index ee4e9c6423..f0148d7f4e 100644 --- a/packages/client/src/widgets/button.vue +++ b/packages/client/src/widgets/button.vue @@ -8,13 +8,13 @@ <script lang="ts" setup> import { onMounted, onUnmounted, ref, watch } from 'vue'; -import { GetFormResultType } from '@/scripts/form'; +import { AiScript, parse, utils } from '@syuilo/aiscript'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; +import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; -import { AiScript, parse, utils } from '@syuilo/aiscript'; import { createAiScriptEnv } from '@/scripts/aiscript/api'; import { $i } from '@/account'; -import MkButton from '@/components/ui/button.vue'; +import MkButton from '@/components/MkButton.vue'; const name = 'button'; @@ -67,7 +67,7 @@ const run = async () => { }, log: (type, params) => { // nop - } + }, }); let ast; diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue index 7d78b05f84..dc99b6631e 100644 --- a/packages/client/src/widgets/clock.vue +++ b/packages/client/src/widgets/clock.vue @@ -9,6 +9,7 @@ :graduations="widgetProps.graduations" :fade-graduations="widgetProps.fadeGraduations" :twentyfour="widgetProps.twentyFour" + :s-animation="widgetProps.sAnimation" /> <MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/> <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div> @@ -20,9 +21,9 @@ import { } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; -import MkContainer from '@/components/ui/container.vue'; -import MkAnalogClock from '@/components/analog-clock.vue'; -import MkDigitalClock from '@/components/digital-clock.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkAnalogClock from '@/components/MkAnalogClock.vue'; +import MkDigitalClock from '@/components/MkDigitalClock.vue'; import { timezones } from '@/scripts/timezones'; import { i18n } from '@/i18n'; @@ -70,6 +71,17 @@ const widgetPropsDef = { type: 'boolean' as const, default: true, }, + sAnimation: { + type: 'radio' as const, + default: 'elastic', + options: [{ + value: 'none', label: 'None', + }, { + value: 'elastic', label: 'Elastic', + }, { + value: 'easeOut', label: 'Ease out', + }], + }, twentyFour: { type: 'boolean' as const, default: false, diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue index 387fad9b62..d2bfd523f3 100644 --- a/packages/client/src/widgets/digital-clock.vue +++ b/packages/client/src/widgets/digital-clock.vue @@ -13,7 +13,7 @@ import { onUnmounted, ref, watch } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; import { timezones } from '@/scripts/timezones'; -import MkDigitalClock from '@/components/digital-clock.vue'; +import MkDigitalClock from '@/components/MkDigitalClock.vue'; const name = 'digitalClock'; diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue index 9619aa53ee..e07cab5bfa 100644 --- a/packages/client/src/widgets/federation.vue +++ b/packages/client/src/widgets/federation.vue @@ -22,8 +22,8 @@ import { onMounted, onUnmounted, ref } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; -import MkContainer from '@/components/ui/container.vue'; -import MkMiniChart from '@/components/mini-chart.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue index 597ce0e824..f8e463ee33 100644 --- a/packages/client/src/widgets/instance-cloud.vue +++ b/packages/client/src/widgets/instance-cloud.vue @@ -16,8 +16,8 @@ import { } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; -import MkContainer from '@/components/ui/container.vue'; -import MkTagCloud from '@/components/tag-cloud.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkTagCloud from '@/components/MkTagCloud.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue index 14cc2a4e4a..92c4168fff 100644 --- a/packages/client/src/widgets/memo.vue +++ b/packages/client/src/widgets/memo.vue @@ -14,7 +14,7 @@ import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue index 05b24e5cba..2729c310a0 100644 --- a/packages/client/src/widgets/notifications.vue +++ b/packages/client/src/widgets/notifications.vue @@ -13,8 +13,8 @@ import { defineAsyncComponent } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; -import MkContainer from '@/components/ui/container.vue'; -import XNotifications from '@/components/notifications.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import XNotifications from '@/components/MkNotifications.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; @@ -51,7 +51,7 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name, ); const configureNotification = () => { - os.popup(defineAsyncComponent(() => import('@/components/notification-setting-window.vue')), { + os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), { includingTypes: widgetProps.includingTypes, }, { done: async (res) => { diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue index 41bec5dc56..e891bd6a7d 100644 --- a/packages/client/src/widgets/photos.vue +++ b/packages/client/src/widgets/photos.vue @@ -22,7 +22,7 @@ import { GetFormResultType } from '@/scripts/form'; import { stream } from '@/stream'; import { getStaticImageUrl } from '@/scripts/get-static-image-url'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue index b542913357..f1708775ba 100644 --- a/packages/client/src/widgets/post-form.vue +++ b/packages/client/src/widgets/post-form.vue @@ -6,7 +6,7 @@ import { } from 'vue'; import { GetFormResultType } from '@/scripts/form'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; -import XPostForm from '@/components/post-form.vue'; +import XPostForm from '@/components/MkPostForm.vue'; const name = 'postForm'; diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue index c692c0c4ff..58c16983c8 100644 --- a/packages/client/src/widgets/rss-ticker.vue +++ b/packages/client/src/widgets/rss-ticker.vue @@ -21,10 +21,10 @@ <script lang="ts" setup> import { onMounted, onUnmounted, ref, watch } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; -import MarqueeText from '@/components/marquee.vue'; +import MarqueeText from '@/components/MkMarquee.vue'; import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { useInterval } from '@/scripts/use-interval'; import { shuffle } from '@/scripts/shuffle'; diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue index 72f6249820..3258b6c028 100644 --- a/packages/client/src/widgets/rss.vue +++ b/packages/client/src/widgets/rss.vue @@ -17,7 +17,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { useInterval } from '@/scripts/use-interval'; const name = 'rss'; diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue index 3350620ad8..cf4accfa2c 100644 --- a/packages/client/src/widgets/server-metric/index.vue +++ b/packages/client/src/widgets/server-metric/index.vue @@ -21,7 +21,7 @@ import XNet from './net.vue'; import XCpu from './cpu.vue'; import XMemory from './mem.vue'; import XDisk from './disk.vue'; -import MkContainer from '@/components/ui/container.vue'; +import MkContainer from '@/components/MkContainer.vue'; import { GetFormResultType } from '@/scripts/form'; import * as os from '@/os'; import { stream } from '@/stream'; diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue index 3bcad1ae29..718162667d 100644 --- a/packages/client/src/widgets/timeline.vue +++ b/packages/client/src/widgets/timeline.vue @@ -24,8 +24,8 @@ import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'; import { GetFormResultType } from '@/scripts/form'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import * as os from '@/os'; -import MkContainer from '@/components/ui/container.vue'; -import XTimeline from '@/components/timeline.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import XTimeline from '@/components/MkTimeline.vue'; import { $i } from '@/account'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue index 8d11b69cb8..a783c04215 100644 --- a/packages/client/src/widgets/trends.vue +++ b/packages/client/src/widgets/trends.vue @@ -21,8 +21,8 @@ import { onMounted, onUnmounted, ref } from 'vue'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { GetFormResultType } from '@/scripts/form'; -import MkContainer from '@/components/ui/container.vue'; -import MkMiniChart from '@/components/mini-chart.vue'; +import MkContainer from '@/components/MkContainer.vue'; +import MkMiniChart from '@/components/MkMiniChart.vue'; import * as os from '@/os'; import { useInterval } from '@/scripts/use-interval'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/unix-clock.vue index c9e2b4b92a..cf85ac782c 100644 --- a/packages/client/src/widgets/unix-clock.vue +++ b/packages/client/src/widgets/unix-clock.vue @@ -1,6 +1,6 @@ <template> <div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }"> - <div v-if="widgetProps.showLabel" class="label">UNIX time</div> + <div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div> <div class="time"> <span v-text="ss"></span> <span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span> |