graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 01:13:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-19 16:20:53 +09:00
parent 56d4658b36
commit 95470a40a7
74 changed files with 310 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
packages/frontend/src/pages/_error_.vue
View file

@ -1,18 +1,20 @@
<template> <template>
<MkLoading v-if="!loaded"/> <MkLoading v-if="!loaded"/>
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear> <Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear>
<div v-show="loaded" class="mjndxjch"> <div v-show="loaded" :class="$style.root">
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <img src="https://xn--931a.moe/assets/error.jpg" class="_ghost" :class="$style.img"/>
<p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p> <div class="_gaps">
<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p> <p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p> <p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
<template v-else> <p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
<p>{{ i18n.ts.newVersionOfClientAvailable }}</p> <template v-else>
<p>{{ i18n.ts.youShouldUpgradeClient }}</p> <p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
<MkButton class="button primary" @click="reload">{{ i18n.ts.reload }}</MkButton> <p>{{ i18n.ts.youShouldUpgradeClient }}</p>
</template> <MkButton style="margin: 8px auto;" @click="reload">{{ i18n.ts.reload }}</MkButton>
<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p> </template>
<p v-if="error" class="error">ERROR: {{ error }}</p> <p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p>
<p v-if="error" style="opacity: 0.7;">ERROR: {{ error }}</p>
</div>
</div> </div>
</Transition> </Transition>
</template> </template>
@ -64,28 +66,16 @@ definePageMetadata({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.mjndxjch { .root {
padding: 32px; padding: 32px;
text-align: center; text-align: center;
}
> p { .img {
margin: 0 0 12px 0; vertical-align: bottom;
} height: 128px;
margin-bottom: 24px;
> .button { border-radius: 16px;
margin: 8px auto;
}
> img {
vertical-align: bottom;
height: 128px;
margin-bottom: 24px;
border-radius: 16px;
}
> .error {
opacity: 0.7;
}
} }
</style> </style>

6
packages/frontend/src/pages/about-misskey.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<div style="overflow: clip;"> <div style="overflow: clip;">
<MkSpacer :content-max="600" :margin-min="20"> <MkSpacer :contentMax="600" :marginMin="20">
<div class="_gaps_m znqjceqz"> <div class="_gaps_m znqjceqz">
<div v-panel class="about"> <div v-panel class="about">
<div ref="containerEl" class="container" :class="{ playing: easterEggEngine != null }"> <div ref="containerEl" class="container" :class="{ playing: easterEggEngine != null }">
@ -10,8 +10,8 @@
<div class="misskey">Misskey</div> <div class="misskey">Misskey</div>
<div class="version">v{{ version }}</div> <div class="version">v{{ version }}</div>
<span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }"> <span v-for="emoji in easterEggEmojis" :key="emoji.id" class="emoji" :data-physics-x="emoji.left" :data-physics-y="emoji.top" :class="{ _physics_circle_: !emoji.emoji.startsWith(':') }">
<MkCustomEmoji v-if="emoji.emoji[0] === ':'" class="emoji" :name="emoji.emoji" :normal="true" :no-style="true"/> <MkCustomEmoji v-if="emoji.emoji[0] === ':'" class="emoji" :name="emoji.emoji" :normal="true" :noStyle="true"/>
<MkEmoji v-else class="emoji" :emoji="emoji.emoji" :normal="true" :no-style="true"/> <MkEmoji v-else class="emoji" :emoji="emoji.emoji" :normal="true" :noStyle="true"/>
</span> </span>
</div> </div>
<button v-if="thereIsTreasure" class="_button treasure" @click="getTreasure"><img src="/fluent-emoji/1f3c6.png" class="treasureImg"></button> <button v-if="thereIsTreasure" class="_button treasure" @click="getTreasure"><img src="/fluent-emoji/1f3c6.png" class="treasureImg"></button>

52
packages/frontend/src/pages/about.emojis.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="driuhtrh _gaps"> <div class="_gaps">
<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton> <MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton>
<div class="query"> <div class="query">
@ -14,17 +14,17 @@
--> -->
</div> </div>
<MkFoldableSection v-if="searchEmojis" class="emojis"> <MkFoldableSection v-if="searchEmojis">
<template #header>{{ i18n.ts.searchResult }}</template> <template #header>{{ i18n.ts.searchResult }}</template>
<div class="zuvgdzyt"> <div :class="$style.emojis">
<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/> <XEmoji v-for="emoji in searchEmojis" :key="emoji.name" :emoji="emoji"/>
</div> </div>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category" class="emojis"> <MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
<template #header>{{ category || i18n.ts.other }}</template> <template #header>{{ category || i18n.ts.other }}</template>
<div class="zuvgdzyt"> <div :class="$style.emojis">
<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/> <XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" :emoji="emoji"/>
</div> </div>
</MkFoldableSection> </MkFoldableSection>
</div> </div>
@ -57,7 +57,7 @@ function search() {
if (queryarry) { if (queryarry) {
searchEmojis = customEmojis.value.filter(emoji => searchEmojis = customEmojis.value.filter(emoji =>
queryarry.includes(`:${emoji.name}:`) queryarry.includes(`:${emoji.name}:`),
); );
} else { } else {
searchEmojis = customEmojis.value.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q)); searchEmojis = customEmojis.value.filter(emoji => emoji.name.includes(q) || emoji.aliases.includes(q));
@ -84,36 +84,10 @@ watch($$(selectedTags), () => {
}, { deep: true }); }, { deep: true });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.driuhtrh { .emojis {
background: var(--bg); display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
> .query { grid-gap: 12px;
background: var(--bg);
> .tags {
> .tag {
display: inline-block;
margin: 8px 8px 0 0;
padding: 4px 8px;
font-size: 0.9em;
background: var(--accentedBg);
border-radius: 5px;
&.active {
background: var(--accent);
color: var(--fgOnAccent);
}
}
}
}
> .emojis {
.zuvgdzyt {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
grid-gap: 12px;
}
}
} }
</style> </style>

25
packages/frontend/src/pages/about.federation.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="taeiyria"> <div>
<div class="query"> <div>
<MkInput v-model="host" :debounce="true" class=""> <MkInput v-model="host" :debounce="true" class="">
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
<template #label>{{ i18n.ts.host }}</template> <template #label>{{ i18n.ts.host }}</template>
@ -35,8 +35,8 @@
</div> </div>
<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination"> <MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
<div class="dqokceoi"> <div :class="$style.items">
<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`"> <MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" :class="$style.item" :to="`/instance-info/${instance.host}`">
<MkInstanceCardMini :instance="instance"/> <MkInstanceCardMini :instance="instance"/>
</MkA> </MkA>
</div> </div>
@ -82,21 +82,14 @@ function getStatus(instance) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.taeiyria { .items {
> .query {
background: var(--bg);
margin-bottom: 16px;
}
}
.dqokceoi {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
grid-gap: 12px; grid-gap: 12px;
}
> .instance:hover { .item:hover {
text-decoration: none; text-decoration: none;
}
} }
</style> </style>

8
packages/frontend/src/pages/about.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="tab === 'overview'" :content-max="600" :margin-min="20"> <MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
<div class="_gaps_m"> <div class="_gaps_m">
<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }"> <div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
<div style="overflow: clip;"> <div style="overflow: clip;">
@ -80,13 +80,13 @@
</FormSection> </FormSection>
</div> </div>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'emojis'" :content-max="1000" :margin-min="20"> <MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
<XEmojis/> <XEmojis/>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'federation'" :content-max="1000" :margin-min="20"> <MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
<XFederation/> <XFederation/>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'charts'" :content-max="1000" :margin-min="20"> <MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
<MkInstanceStats/> <MkInstanceStats/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

2
packages/frontend/src/pages/achievements.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :content-max="1200"> <MkSpacer :contentMax="1200">
<MkAchievements :user="$i"/> <MkAchievements :user="$i"/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

4
packages/frontend/src/pages/admin-file.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="file" :content-max="600" :margin-min="16" :margin-max="32"> <MkSpacer v-if="file" :contentMax="600" :marginMin="16" :marginMax="32">
<div v-if="tab === 'overview'" class="cxqhhsmd _gaps_m"> <div v-if="tab === 'overview'" class="cxqhhsmd _gaps_m">
<a class="thumbnail" :href="file.url" target="_blank"> <a class="thumbnail" :href="file.url" target="_blank">
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/> <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@ -32,7 +32,7 @@
<MkUserCardMini :user="file.user"/> <MkUserCardMini :user="file.user"/>
</MkA> </MkA>
<div> <div>
<MkSwitch v-model="isSensitive" @update:model-value="toggleIsSensitive">NSFW</MkSwitch> <MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
</div> </div>
<div> <div>

2
packages/frontend/src/pages/ads.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :content-max="500"> <MkSpacer :contentMax="500">
<div class="_gaps"> <div class="_gaps">
<MkAd v-for="ad in instance.ads" :key="ad.id" :specify="ad"/> <MkAd v-for="ad in instance.ads" :key="ad.id" :specify="ad"/>
</div> </div>

2
packages/frontend/src/pages/announcements.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m"> <MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
<section v-for="(announcement, i) in items" :key="announcement.id" class="announcement _panel"> <section v-for="(announcement, i) in items" :key="announcement.id" class="announcement _panel">
<div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div> <div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>

4
packages/frontend/src/pages/api-console.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<div class="_gaps_m"> <div class="_gaps_m">
<div class="_gaps_m"> <div class="_gaps_m">
<MkInput v-model="endpoint" :datalist="endpoints" @update:model-value="onEndpointChange()"> <MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
<template #label>Endpoint</template> <template #label>Endpoint</template>
</MkInput> </MkInput>
<MkTextarea v-model="body" code> <MkTextarea v-model="body" code>

2
packages/frontend/src/pages/auth.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="500"> <MkSpacer :contentMax="500">
<div v-if="state == 'fetch-session-error'"> <div v-if="state == 'fetch-session-error'">
<p>{{ i18n.ts.somethingHappened }}</p> <p>{{ i18n.ts.somethingHappened }}</p>
</div> </div>

6
packages/frontend/src/pages/channel-editor.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<div v-if="channelId == null || channel != null" class="_gaps_m"> <div v-if="channelId == null || channel != null" class="_gaps_m">
<MkInput v-model="name"> <MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template> <template #label>{{ i18n.ts.name }}</template>
@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.pinnedNotes }}</template> <template #label>{{ i18n.ts.pinnedNotes }}</template>
<div class="_gaps"> <div class="_gaps">
@ -31,7 +31,7 @@
<Sortable <Sortable
v-model="pinnedNotes" v-model="pinnedNotes"
item-key="id" itemKey="id"
:handle="'.' + $style.pinnedNoteHandle" :handle="'.' + $style.pinnedNoteHandle"
:animation="150" :animation="150"
> >

8
packages/frontend/src/pages/channel.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700" :class="$style.main"> <MkSpacer :contentMax="700" :class="$style.main">
<div v-if="channel && tab === 'overview'" class="_gaps"> <div v-if="channel && tab === 'overview'" class="_gaps">
<div class="_panel" :class="$style.bannerContainer"> <div class="_panel" :class="$style.bannerContainer">
<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/> <XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" as-like class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton> <MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" as-like class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ti ti-star"></i></MkButton> <MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ti ti-star"></i></MkButton>
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" :class="$style.banner"> <div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" :class="$style.banner">
<div :class="$style.bannerStatus"> <div :class="$style.bannerStatus">
<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div> <div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
@ -51,7 +51,7 @@
</MkSpacer> </MkSpacer>
<template #footer> <template #footer>
<div :class="$style.footer"> <div :class="$style.footer">
<MkSpacer :content-max="700" :margin-min="16" :margin-max="16"> <MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div class="_buttonsCenter"> <div class="_buttonsCenter">
<MkButton inline rounded primary gradate @click="openPostForm()"><i class="ti ti-pencil"></i> {{ i18n.ts.postToTheChannel }}</MkButton> <MkButton inline rounded primary gradate @click="openPostForm()"><i class="ti ti-pencil"></i> {{ i18n.ts.postToTheChannel }}</MkButton>
</div> </div>

4
packages/frontend/src/pages/channels.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<div v-if="tab === 'search'"> <div v-if="tab === 'search'">
<div class="_gaps"> <div class="_gaps">
<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search"> <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search">
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
</MkInput> </MkInput>
<MkRadios v-model="searchType" @update:model-value="search()"> <MkRadios v-model="searchType" @update:modelValue="search()">
<option value="nameAndDescription">{{ i18n.ts._channel.nameAndDescription }}</option> <option value="nameAndDescription">{{ i18n.ts._channel.nameAndDescription }}</option>
<option value="nameOnly">{{ i18n.ts._channel.nameOnly }}</option> <option value="nameOnly">{{ i18n.ts._channel.nameOnly }}</option>
</MkRadios> </MkRadios>

2
packages/frontend/src/pages/clicker.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkClickerGame/> <MkClickerGame/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

6
packages/frontend/src/pages/clip.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions"/></template> <template #header><MkPageHeader :actions="headerActions"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<div v-if="clip"> <div v-if="clip">
<div class="okzinsic _panel"> <div class="okzinsic _panel">
<div v-if="clip.description" class="description"> <div v-if="clip.description" class="description">
<Mfm :text="clip.description" :isNote="false" :i="$i"/> <Mfm :text="clip.description" :isNote="false" :i="$i"/>
</div> </div>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" as-like class="button" rounded primary @click="unfavorite()"><i class="ti ti-heart"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton> <MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary @click="unfavorite()"><i class="ti ti-heart"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" as-like class="button" rounded @click="favorite()"><i class="ti ti-heart"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton> <MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded @click="favorite()"><i class="ti ti-heart"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<div class="user"> <div class="user">
<MkAvatar :user="clip.user" class="avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> <MkAvatar :user="clip.user" class="avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/>
</div> </div>

54
packages/frontend/src/pages/emojis.emoji.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<button class="zuvgdzyu _button" @click="menu"> <button class="_button" :class="$style.root" @click="menu">
<img :src="emoji.url" class="img" loading="lazy"/> <img :src="emoji.url" :class="$style.img" loading="lazy"/>
<div class="body"> <div :class="$style.body">
<div class="name _monospace">{{ emoji.name }}</div> <div :class="$style.name" class="_monospace">{{ emoji.name }}</div>
<div class="info">{{ emoji.aliases.join(' ') }}</div> <div :class="$style.info">{{ emoji.aliases.join(' ') }}</div>
</div> </div>
</button> </button>
</template> </template>
@ -49,8 +49,8 @@ function menu(ev) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.zuvgdzyu { .root {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
@ -61,29 +61,29 @@ function menu(ev) {
&:hover { &:hover {
border-color: var(--accent); border-color: var(--accent);
} }
}
> .img { .img {
width: 42px; width: 42px;
height: 42px; height: 42px;
object-fit: contain; object-fit: contain;
} }
> .body { .body {
padding: 0 0 0 8px; padding: 0 0 0 8px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
}
> .name { .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
> .info { .info {
opacity: 0.5; opacity: 0.5;
font-size: 0.9em; font-size: 0.9em;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
}
}
} }
</style> </style>

2
packages/frontend/src/pages/explore.featured.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkTab v-model="tab" style="margin-bottom: var(--margin);"> <MkTab v-model="tab" style="margin-bottom: var(--margin);">
<option value="notes">{{ i18n.ts.notes }}</option> <option value="notes">{{ i18n.ts.notes }}</option>
<option value="polls">{{ i18n.ts.poll }}</option> <option value="polls">{{ i18n.ts.poll }}</option>

4
packages/frontend/src/pages/explore.roles.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<div class="_gaps_s"> <div class="_gaps_s">
<MkRolePreview v-for="role in roles" :key="role.id" :role="role" :for-moderation="false"/> <MkRolePreview v-for="role in roles" :key="role.id" :role="role" :forModeration="false"/>
</div> </div>
</MkSpacer> </MkSpacer>
</template> </template>

10
packages/frontend/src/pages/explore.users.vue
View file

@ -1,24 +1,24 @@
<template> <template>
<MkSpacer :content-max="1200"> <MkSpacer :contentMax="1200">
<MkTab v-model="origin" style="margin-bottom: var(--margin);"> <MkTab v-model="origin" style="margin-bottom: var(--margin);">
<option value="local">{{ i18n.ts.local }}</option> <option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option> <option value="remote">{{ i18n.ts.remote }}</option>
</MkTab> </MkTab>
<div v-if="origin === 'local'"> <div v-if="origin === 'local'">
<template v-if="tag == null"> <template v-if="tag == null">
<MkFoldableSection class="_margin" persist-key="explore-pinned-users"> <MkFoldableSection class="_margin" persistKey="explore-pinned-users">
<template #header><i class="ti ti-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template> <template #header><i class="ti ti-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
<MkUserList :pagination="pinnedUsers"/> <MkUserList :pagination="pinnedUsers"/>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection class="_margin" persist-key="explore-popular-users"> <MkFoldableSection class="_margin" persistKey="explore-popular-users">
<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template> <template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
<MkUserList :pagination="popularUsers"/> <MkUserList :pagination="popularUsers"/>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection class="_margin" persist-key="explore-recently-updated-users"> <MkFoldableSection class="_margin" persistKey="explore-recently-updated-users">
<template #header><i class="ti ti-message ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template> <template #header><i class="ti ti-message ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
<MkUserList :pagination="recentlyUpdatedUsers"/> <MkUserList :pagination="recentlyUpdatedUsers"/>
</MkFoldableSection> </MkFoldableSection>
<MkFoldableSection class="_margin" persist-key="explore-recently-registered-users"> <MkFoldableSection class="_margin" persistKey="explore-recently-registered-users">
<template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template> <template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
<MkUserList :pagination="recentlyRegisteredUsers"/> <MkUserList :pagination="recentlyRegisteredUsers"/>
</MkFoldableSection> </MkFoldableSection>

4
packages/frontend/src/pages/favorites.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkPagination :pagination="pagination"> <MkPagination :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
@ -11,7 +11,7 @@
</template> </template>
<template #default="{ items }"> <template #default="{ items }">
<MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false"> <MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
<MkNote :key="item.id" :note="item.note" :class="$style.note"/> <MkNote :key="item.id" :note="item.note" :class="$style.note"/>
</MkDateSeparatedList> </MkDateSeparatedList>
</template> </template>

2
packages/frontend/src/pages/follow-requests.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkPagination ref="paginationComponent" :pagination="pagination"> <MkPagination ref="paginationComponent" :pagination="pagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">

2
packages/frontend/src/pages/follow.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-follow-page"> <div>
</div> </div>
</template> </template>

6
packages/frontend/src/pages/instance-info.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32"> <MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
<div v-if="tab === 'overview'" class="_gaps_m"> <div v-if="tab === 'overview'" class="_gaps_m">
<div class="fnfelxur"> <div class="fnfelxur">
<img :src="faviconUrl" alt="" class="icon"/> <img :src="faviconUrl" alt="" class="icon"/>
@ -29,8 +29,8 @@
<FormSection v-if="iAmModerator"> <FormSection v-if="iAmModerator">
<template #label>Moderation</template> <template #label>Moderation</template>
<div class="_gaps_s"> <div class="_gaps_s">
<MkSwitch v-model="suspended" @update:model-value="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</MkSwitch> <MkSwitch v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</MkSwitch>
<MkSwitch v-model="isBlocked" @update:model-value="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch> <MkSwitch v-model="isBlocked" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton> <MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
</div> </div>
</FormSection> </FormSection>

8
packages/frontend/src/pages/list.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MKSpacer v-if="!(typeof error === 'undefined')" :content-max="1200"> <MKSpacer v-if="!(typeof error === 'undefined')" :contentMax="1200">
<div :class="$style.root"> <div :class="$style.root">
<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p :class="$style.text"> <p :class="$style.text">
@ -10,7 +10,7 @@
</p> </p>
</div> </div>
</MKSpacer> </MKSpacer>
<MkSpacer v-else-if="list" :content-max="700" :class="$style.main"> <MkSpacer v-else-if="list" :contentMax="700" :class="$style.main">
<div v-if="list" class="members _margin"> <div v-if="list" class="members _margin">
<div :class="$style.member_text">{{ i18n.ts.members }}</div> <div :class="$style.member_text">{{ i18n.ts.members }}</div>
<div class="_gaps_s"> <div class="_gaps_s">
@ -21,8 +21,8 @@
</div> </div>
</div> </div>
</div> </div>
<MkButton v-if="list.isLiked" v-tooltip="i18n.ts.unlike" inline :class="$style.button" as-like primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="list.likedCount > 0" class="count">{{ list.likedCount }}</span></MkButton> <MkButton v-if="list.isLiked" v-tooltip="i18n.ts.unlike" inline :class="$style.button" asLike primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="list.likedCount > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton v-if="!list.isLiked" v-tooltip="i18n.ts.like" inline :class="$style.button" as-like @click="like()"><i class="ti ti-heart"></i><span v-if="1 > 0" class="count">{{ list.likedCount }}</span></MkButton> <MkButton v-if="!list.isLiked" v-tooltip="i18n.ts.like" inline :class="$style.button" asLike @click="like()"><i class="ti ti-heart"></i><span v-if="1 > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton inline @click="create()"><i class="ti ti-download" :class="$style.import"></i>{{ i18n.ts.import }}</MkButton> <MkButton inline @click="create()"><i class="ti ti-download" :class="$style.import"></i>{{ i18n.ts.import }}</MkButton>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

2
packages/frontend/src/pages/miauth.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<div v-if="$i"> <div v-if="$i">
<div v-if="state == 'waiting'"> <div v-if="state == 'waiting'">
<MkLoading/> <MkLoading/>

2
packages/frontend/src/pages/not-found.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="ipledcug"> <div>
<div class="_fullinfo"> <div class="_fullinfo">
<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/> <img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
<div>{{ i18n.ts.notFoundDescription }}</div> <div>{{ i18n.ts.notFoundDescription }}</div>

72
packages/frontend/src/pages/note.vue
View file

@ -1,33 +1,33 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<div class="fcuexfpr"> <div>
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> <Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note"> <div v-if="note">
<div v-if="showNext" class="_margin"> <div v-if="showNext" class="_margin">
<MkNotes class="" :pagination="nextPagination" :no-gap="true"/> <MkNotes class="" :pagination="nextPagination" :noGap="true"/>
</div> </div>
<div class="main _margin"> <div class="_margin">
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton> <MkButton v-if="!showNext && hasNext" :class="$style.loadNext" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton>
<div class="note _margin _gaps_s"> <div class="_margin _gaps_s">
<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/> <MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
<MkNoteDetailed :key="note.id" v-model:note="note" class="note"/> <MkNoteDetailed :key="note.id" v-model:note="note" :class="$style.note"/>
</div> </div>
<div v-if="clips && clips.length > 0" class="clips _margin"> <div v-if="clips && clips.length > 0" class="_margin">
<div class="title">{{ i18n.ts.clip }}</div> <div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
<div class="_gaps"> <div class="_gaps">
<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`"> <MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`">
<MkClipPreview :clip="item"/> <MkClipPreview :clip="item"/>
</MkA> </MkA>
</div> </div>
</div> </div>
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ti ti-chevron-down"></i></MkButton> <MkButton v-if="!showPrev && hasPrev" :class="$style.loadPrev" @click="showPrev = true"><i class="ti ti-chevron-down"></i></MkButton>
</div> </div>
<div v-if="showPrev" class="_margin"> <div v-if="showPrev" class="_margin">
<MkNotes class="" :pagination="prevPagination" :no-gap="true"/> <MkNotes class="" :pagination="prevPagination" :noGap="true"/>
</div> </div>
</div> </div>
<MkError v-else-if="error" @retry="fetchNote()"/> <MkError v-else-if="error" @retry="fetchNote()"/>
@ -137,7 +137,7 @@ definePageMetadata(computed(() => note ? {
} : null)); } : null));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.125s ease; transition: opacity 0.125s ease;
@ -147,39 +147,23 @@ definePageMetadata(computed(() => note ? {
opacity: 0; opacity: 0;
} }
.fcuexfpr { .loadNext,
background: var(--bg); .loadPrev {
min-width: 0;
margin: 0 auto;
border-radius: 999px;
}
> .note { .loadNext {
> .main { margin-bottom: var(--margin);
> .load { }
min-width: 0;
margin: 0 auto;
border-radius: 999px;
&.next { .loadPrev {
margin-bottom: var(--margin); margin-top: var(--margin);
} }
&.prev { .note {
margin-top: var(--margin); border-radius: var(--radius);
} background: var(--panel);
}
> .note {
> .note {
border-radius: var(--radius);
background: var(--panel);
}
}
> .clips {
> .title {
font-weight: bold;
padding: 12px;
}
}
}
}
} }
</style> </style>

4
packages/frontend/src/pages/notifications.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<div v-if="tab === 'all'"> <div v-if="tab === 'all'">
<XNotifications class="notifications" :include-types="includeTypes"/> <XNotifications class="notifications" :includeTypes="includeTypes"/>
</div> </div>
<div v-else-if="tab === 'mentions'"> <div v-else-if="tab === 'mentions'">
<MkNotes :pagination="mentionsPagination"/> <MkNotes :pagination="mentionsPagination"/>

6
packages/frontend/src/pages/page.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> <Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" class="xcukqgmh"> <div v-if="page" :key="page.id" class="xcukqgmh">
<div class="main"> <div class="main">
@ -18,8 +18,8 @@
</div> </div>
<div class="actions"> <div class="actions">
<div class="like"> <div class="like">
<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" as-like primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton> <MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" asLike primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" as-like @click="like()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton> <MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" asLike @click="like()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
</div> </div>
<div class="other"> <div class="other">
<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button> <button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>

2
packages/frontend/src/pages/pages.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :contentMax="700">
<div v-if="tab === 'featured'" class="rknalgpo"> <div v-if="tab === 'featured'" class="rknalgpo">
<MkPagination v-slot="{items}" :pagination="featuredPagesPagination"> <MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>

2
packages/frontend/src/pages/registry.keys.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="600" :margin-min="16"> <MkSpacer :contentMax="600" :marginMin="16">
<div class="_gaps_m"> <div class="_gaps_m">
<FormSplit> <FormSplit>
<MkKeyValue> <MkKeyValue>

2
packages/frontend/src/pages/registry.value.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="600" :margin-min="16"> <MkSpacer :contentMax="600" :marginMin="16">
<div class="_gaps_m"> <div class="_gaps_m">
<FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo> <FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo>

2
packages/frontend/src/pages/registry.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="600" :margin-min="16"> <MkSpacer :contentMax="600" :marginMin="16">
<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton> <MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
<FormSection v-if="scopes"> <FormSection v-if="scopes">

2
packages/frontend/src/pages/reset-password.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="token" :content-max="700" :margin-min="16" :margin-max="32"> <MkSpacer v-if="token" :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_gaps_m"> <div class="_gaps_m">
<MkInput v-model="password" type="password"> <MkInput v-model="password" type="password">
<template #prefix><i class="ti ti-lock"></i></template> <template #prefix><i class="ti ti-lock"></i></template>

8
packages/frontend/src/pages/role.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
<MKSpacer v-if="!(typeof error === 'undefined')" :content-max="1200"> <MKSpacer v-if="!(typeof error === 'undefined')" :contentMax="1200">
<div :class="$style.root"> <div :class="$style.root">
<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> <img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p :class="$style.text"> <p :class="$style.text">
@ -10,17 +10,18 @@
</p> </p>
</div> </div>
</MKSpacer> </MKSpacer>
<MkSpacer v-else-if="tab === 'users'" :content-max="1200"> <MkSpacer v-else-if="tab === 'users'" :contentMax="1200">
<div class="_gaps_s"> <div class="_gaps_s">
<div v-if="role">{{ role.description }}</div> <div v-if="role">{{ role.description }}</div>
<MkUserList :pagination="users" :extractor="(item) => item.user"/> <MkUserList :pagination="users" :extractor="(item) => item.user"/>
</div> </div>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'timeline'" :content-max="700"> <MkSpacer v-else-if="tab === 'timeline'" :contentMax="700">
<MkTimeline ref="timeline" src="role" :role="props.role"/> <MkTimeline ref="timeline" src="role" :role="props.role"/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, watch } from 'vue'; import { computed, watch } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
@ -80,6 +81,7 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-badge', icon: 'ti ti-badge',
}))); })));
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.root { .root {
padding: 32px; padding: 32px;

4
packages/frontend/src/pages/scratchpad.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<div :class="$style.root"> <div :class="$style.root">
<div :class="$style.editor" class="_panel"> <div :class="$style.editor" class="_panel">
<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/> <PrismEditor v-model="code" class="_code code" :highlight="highlighter" :lineNumbers="false"/>
<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton> <MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
</div> </div>

2
packages/frontend/src/pages/search.user.vue
View file

@ -4,7 +4,7 @@
<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search"> <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search">
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
</MkInput> </MkInput>
<MkRadios v-model="searchOrigin" @update:model-value="search()"> <MkRadios v-model="searchOrigin" @update:modelValue="search()">
<option value="combined">{{ i18n.ts.all }}</option> <option value="combined">{{ i18n.ts.all }}</option>
<option value="local">{{ i18n.ts.local }}</option> <option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option> <option value="remote">{{ i18n.ts.remote }}</option>

4
packages/frontend/src/pages/search.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="tab === 'note'" :content-max="800"> <MkSpacer v-if="tab === 'note'" :contentMax="800">
<div v-if="notesSearchAvailable"> <div v-if="notesSearchAvailable">
<XNote/> <XNote/>
</div> </div>
@ -11,7 +11,7 @@
</div> </div>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'user'" :content-max="800"> <MkSpacer v-else-if="tab === 'user'" :contentMax="800">
<XUser/> <XUser/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

12
packages/frontend/src/pages/share.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkPostForm <MkPostForm
v-if="state === 'writing'" v-if="state === 'writing'"
fixed fixed
:instant="true" :instant="true"
:initial-text="initialText" :initialText="initialText"
:initial-visibility="visibility" :initialVisibility="visibility"
:initial-files="files" :initialFiles="files"
:initial-local-only="localOnly" :initialLocalOnly="localOnly"
:reply="reply" :reply="reply"
:renote="renote" :renote="renote"
:initial-visible-users="visibleUsers" :initialVisibleUsers="visibleUsers"
class="_panel" class="_panel"
@posted="state = 'posted'" @posted="state = 'posted'"
/> />

2
packages/frontend/src/pages/tag.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<MkNotes class="" :pagination="pagination"/> <MkNotes class="" :pagination="pagination"/>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

12
packages/frontend/src/pages/theme-editor.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32"> <MkSpacer :contentMax="800" :marginMin="16" :marginMax="32">
<div class="cwepdizn _gaps_m"> <div class="cwepdizn _gaps_m">
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.backgroundColor }}</template> <template #label>{{ i18n.ts.backgroundColor }}</template>
<div class="cwepdizn-colors"> <div class="cwepdizn-colors">
<div class="row"> <div class="row">
@ -19,7 +19,7 @@
</div> </div>
</MkFolder> </MkFolder>
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.accentColor }}</template> <template #label>{{ i18n.ts.accentColor }}</template>
<div class="cwepdizn-colors"> <div class="cwepdizn-colors">
<div class="row"> <div class="row">
@ -30,7 +30,7 @@
</div> </div>
</MkFolder> </MkFolder>
<MkFolder :default-open="true"> <MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.textColor }}</template> <template #label>{{ i18n.ts.textColor }}</template>
<div class="cwepdizn-colors"> <div class="cwepdizn-colors">
<div class="row"> <div class="row">
@ -41,7 +41,7 @@
</div> </div>
</MkFolder> </MkFolder>
<MkFolder :default-open="false"> <MkFolder :defaultOpen="false">
<template #icon><i class="ti ti-code"></i></template> <template #icon><i class="ti ti-code"></i></template>
<template #label>{{ i18n.ts.editCode }}</template> <template #label>{{ i18n.ts.editCode }}</template>
@ -53,7 +53,7 @@
</div> </div>
</MkFolder> </MkFolder>
<MkFolder :default-open="false"> <MkFolder :defaultOpen="false">
<template #label>{{ i18n.ts.addDescription }}</template> <template #label>{{ i18n.ts.addDescription }}</template>
<div class="_gaps_m"> <div class="_gaps_m">

4
packages/frontend/src/pages/timeline.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :display-my-avatar="true"/></template> <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
<MkSpacer :content-max="800"> <MkSpacer :contentMax="800">
<div ref="rootEl" v-hotkey.global="keymap"> <div ref="rootEl" v-hotkey.global="keymap">
<XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/> <XTutorial v-if="$i && defaultStore.reactiveState.timelineTutorial.value != -1" class="_panel" style="margin-bottom: var(--margin);"/>
<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> <MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>

10
packages/frontend/src/pages/user-info.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="600" :margin-min="16" :margin-max="32"> <MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<FormSuspense :p="init"> <FormSuspense :p="init">
<div v-if="tab === 'overview'" class="_gaps_m"> <div v-if="tab === 'overview'" class="_gaps_m">
<div class="aeakzknw"> <div class="aeakzknw">
@ -88,7 +88,7 @@
</div> </div>
<div v-else-if="tab === 'moderation'" class="_gaps_m"> <div v-else-if="tab === 'moderation'" class="_gaps_m">
<MkSwitch v-model="suspended" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch> <MkSwitch v-model="suspended" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
<div> <div>
<MkButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton> <MkButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
@ -112,7 +112,7 @@
<MkButton v-if="user.host == null && iAmModerator" primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton> <MkButton v-if="user.host == null && iAmModerator" primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>
<div v-for="role in info.roles" :key="role.id" :class="$style.roleItem"> <div v-for="role in info.roles" :key="role.id" :class="$style.roleItem">
<MkRolePreview :class="$style.role" :role="role" :for-moderation="true"/> <MkRolePreview :class="$style.role" :role="role" :forModeration="true"/>
<button v-if="role.target === 'manual'" class="_button" :class="$style.roleUnassign" @click="unassignRole(role, $event)"><i class="ti ti-x"></i></button> <button v-if="role.target === 'manual'" class="_button" :class="$style.roleUnassign" @click="unassignRole(role, $event)"><i class="ti ti-x"></i></button>
<button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button> <button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button>
</div> </div>
@ -135,10 +135,10 @@
<MkFolder> <MkFolder>
<template #icon><i class="ti ti-cloud"></i></template> <template #icon><i class="ti ti-cloud"></i></template>
<template #label>{{ i18n.ts.files }}</template> <template #label>{{ i18n.ts.files }}</template>
<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/> <MkFileListForAdmin :pagination="filesPagination" viewMode="grid"/>
</MkFolder> </MkFolder>
<MkTextarea v-model="moderationNote" manual-save> <MkTextarea v-model="moderationNote" manualSave>
<template #label>Moderation note</template> <template #label>Moderation note</template>
</MkTextarea> </MkTextarea>
</div> </div>

2
packages/frontend/src/pages/user-tag.vue
View file

@ -2,7 +2,7 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader/></template> <template #header><MkPageHeader/></template>
<MkSpacer :content-max="1200"> <MkSpacer :contentMax="1200">
<div class="_gaps_s"> <div class="_gaps_s">
<MkUserList :pagination="tagUsers"/> <MkUserList :pagination="tagUsers"/>
</div> </div>

10
packages/frontend/src/pages/welcome.entrance.a.vue
View file

@ -6,11 +6,11 @@
<div class="shape2"></div> <div class="shape2"></div>
<img src="/client-assets/misskey.svg" class="misskey"/> <img src="/client-assets/misskey.svg" class="misskey"/>
<div class="emojis"> <div class="emojis">
<MkEmoji :normal="true" :no-style="true" emoji="👍"/> <MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
<MkEmoji :normal="true" :no-style="true" emoji="❤"/> <MkEmoji :normal="true" :noStyle="true" emoji="❤"/>
<MkEmoji :normal="true" :no-style="true" emoji="😆"/> <MkEmoji :normal="true" :noStyle="true" emoji="😆"/>
<MkEmoji :normal="true" :no-style="true" emoji="🎉"/> <MkEmoji :normal="true" :noStyle="true" emoji="🎉"/>
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/> <MkEmoji :normal="true" :noStyle="true" emoji="🍮"/>
</div> </div>
<div class="contents"> <div class="contents">
<MkVisitorDashboard/> <MkVisitorDashboard/>

4
packages/frontend/src/pages/welcome.timeline.vue
View file

@ -9,10 +9,10 @@
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> <MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div> </div>
<div v-if="note.files.length > 0" :class="$style.richcontent"> <div v-if="note.files.length > 0" :class="$style.richcontent">
<MkMediaList :media-list="note.files"/> <MkMediaList :mediaList="note.files"/>
</div> </div>
<div v-if="note.poll"> <div v-if="note.poll">
<MkPoll :note="note" :read-only="true"/> <MkPoll :note="note" :readOnly="true"/>
</div> </div>
</div> </div>
<MkReactionsViewer ref="reactionsViewer" :note="note"/> <MkReactionsViewer ref="reactionsViewer" :note="note"/>

18
packages/frontend/src/widgets/WidgetActivity.calendar.vue
View file

@ -1,25 +1,31 @@
<template> <template>
<svg viewBox="0 0 21 7"> <svg viewBox="0 0 21 7">
<rect v-for="record in activity" class="day" <rect
v-for="record in activity" class="day"
width="1" height="1" width="1" height="1"
:x="record.x" :y="record.date.weekday" :x="record.x" :y="record.date.weekday"
rx="1" ry="1" rx="1" ry="1"
fill="transparent"> fill="transparent"
>
<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title> <title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
</rect> </rect>
<rect v-for="record in activity" class="day" <rect
v-for="record in activity" class="day"
:width="record.v" :height="record.v" :width="record.v" :height="record.v"
:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)" :x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
rx="1" ry="1" rx="1" ry="1"
:fill="record.color" :fill="record.color"
style="pointer-events: none;"/> style="pointer-events: none;"
<rect class="today" />
<rect
class="today"
width="1" height="1" width="1" height="1"
:x="activity[0].x" :y="activity[0].date.weekday" :x="activity[0].x" :y="activity[0].date.weekday"
rx="1" ry="1" rx="1" ry="1"
fill="none" fill="none"
stroke-width="0.1" stroke-width="0.1"
stroke="#f73520"/> stroke="#f73520"
/>
</svg> </svg>
</template> </template>

11
packages/frontend/src/widgets/WidgetActivity.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" data-cy-mkw-activity class="mkw-activity"> <MkContainer :showHeader="widgetProps.showHeader" :naked="widgetProps.transparent" data-cy-mkw-activity class="mkw-activity">
<template #icon><i class="ti ti-chart-line"></i></template> <template #icon><i class="ti ti-chart-line"></i></template>
<template #header>{{ i18n.ts._widgets.activity }}</template> <template #header>{{ i18n.ts._widgets.activity }}</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template> <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
@ -16,7 +16,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import XCalendar from './WidgetActivity.calendar.vue'; import XCalendar from './WidgetActivity.calendar.vue';
import XChart from './WidgetActivity.chart.vue'; import XChart from './WidgetActivity.chart.vue';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
@ -45,11 +45,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetAichan.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :show-header="false" data-cy-mkw-aichan class="mkw-aichan"> <MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-aichan class="mkw-aichan">
<iframe ref="live2d" :class="$style.root" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe> <iframe ref="live2d" :class="$style.root" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
</MkContainer> </MkContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, shallowRef } from 'vue'; import { onMounted, onUnmounted, shallowRef } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
const name = 'ai'; const name = 'ai';
@ -20,11 +20,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetAiscript.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" data-cy-mkw-aiscript class="mkw-aiscript"> <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-aiscript class="mkw-aiscript">
<template #icon><i class="ti ti-terminal-2"></i></template> <template #icon><i class="ti ti-terminal-2"></i></template>
<template #header>{{ i18n.ts._widgets.aiscript }}</template> <template #header>{{ i18n.ts._widgets.aiscript }}</template>
@ -16,7 +16,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { Interpreter, Parser, utils } from '@syuilo/aiscript'; import { Interpreter, Parser, utils } from '@syuilo/aiscript';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os'; import * as os from '@/os';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
@ -41,11 +41,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

13
packages/frontend/src/widgets/WidgetAiscriptApp.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscriptApp"> <MkContainer :showHeader="widgetProps.showHeader" class="mkw-aiscriptApp">
<template #header>App</template> <template #header>App</template>
<div :class="$style.root"> <div :class="$style.root">
<MkAsUi v-if="root" :component="root" :components="components" size="small"/> <MkAsUi v-if="root" :component="root" :components="components" size="small"/>
@ -10,7 +10,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, Ref, ref, watch } from 'vue'; import { onMounted, Ref, ref, watch } from 'vue';
import { Interpreter, Parser } from '@syuilo/aiscript'; import { Interpreter, Parser } from '@syuilo/aiscript';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os'; import * as os from '@/os';
import { createAiScriptEnv } from '@/scripts/aiscript/api'; import { createAiScriptEnv } from '@/scripts/aiscript/api';
@ -35,12 +35,9 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
props, props,

9
packages/frontend/src/widgets/WidgetButton.vue
View file

@ -8,7 +8,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Interpreter, Parser } from '@syuilo/aiscript'; import { Interpreter, Parser } from '@syuilo/aiscript';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os'; import * as os from '@/os';
import { createAiScriptEnv } from '@/scripts/aiscript/api'; import { createAiScriptEnv } from '@/scripts/aiscript/api';
@ -35,11 +35,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetCalendar.vue
View file

@ -34,7 +34,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { useInterval } from '@/scripts/use-interval'; import { useInterval } from '@/scripts/use-interval';
@ -50,11 +50,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

13
packages/frontend/src/widgets/WidgetClicker.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-clicker"> <MkContainer :showHeader="widgetProps.showHeader" class="mkw-clicker">
<template #icon><i class="ti ti-cookie"></i></template> <template #icon><i class="ti ti-cookie"></i></template>
<template #header>Clicker</template> <template #header>Clicker</template>
<MkClickerGame/> <MkClickerGame/>
@ -7,7 +7,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkClickerGame from '@/components/MkClickerGame.vue'; import MkClickerGame from '@/components/MkClickerGame.vue';
@ -23,12 +23,9 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
props, props,

17
packages/frontend/src/widgets/WidgetClock.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :show-header="false" data-cy-mkw-clock class="mkw-clock"> <MkContainer :naked="widgetProps.transparent" :showHeader="false" data-cy-mkw-clock class="mkw-clock">
<div class="vubelbmv" :class="widgetProps.size"> <div class="vubelbmv" :class="widgetProps.size">
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div> <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
<MkAnalogClock <MkAnalogClock
@ -7,11 +7,11 @@
:thickness="widgetProps.thickness" :thickness="widgetProps.thickness"
:offset="tzOffset" :offset="tzOffset"
:graduations="widgetProps.graduations" :graduations="widgetProps.graduations"
:fade-graduations="widgetProps.fadeGraduations" :fadeGraduations="widgetProps.fadeGraduations"
:twentyfour="widgetProps.twentyFour" :twentyfour="widgetProps.twentyFour"
:s-animation="widgetProps.sAnimation" :sAnimation="widgetProps.sAnimation"
/> />
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/> <MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :showS="false" :offset="tzOffset"/>
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div> <div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
</div> </div>
</MkContainer> </MkContainer>
@ -19,7 +19,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkAnalogClock from '@/components/MkAnalogClock.vue'; import MkAnalogClock from '@/components/MkAnalogClock.vue';
@ -114,11 +114,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetDigitalClock.vue
View file

@ -2,14 +2,14 @@
<div data-cy-mkw-digitalClock class="_monospace" :class="[$style.root, { _panel: !widgetProps.transparent }]" :style="{ fontSize: `${widgetProps.fontSize}em` }"> <div data-cy-mkw-digitalClock class="_monospace" :class="[$style.root, { _panel: !widgetProps.transparent }]" :style="{ fontSize: `${widgetProps.fontSize}em` }">
<div v-if="widgetProps.showLabel" :class="$style.label">{{ tzAbbrev }}</div> <div v-if="widgetProps.showLabel" :class="$style.label">{{ tzAbbrev }}</div>
<div> <div>
<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/> <MkDigitalClock :showMs="widgetProps.showMs" :offset="tzOffset"/>
</div> </div>
<div v-if="widgetProps.showLabel" :class="$style.label">{{ tzOffsetLabel }}</div> <div v-if="widgetProps.showLabel" :class="$style.label">{{ tzOffsetLabel }}</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import { timezones } from '@/scripts/timezones'; import { timezones } from '@/scripts/timezones';
import MkDigitalClock from '@/components/MkDigitalClock.vue'; import MkDigitalClock from '@/components/MkDigitalClock.vue';
@ -49,11 +49,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetFederation.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" data-cy-mkw-federation class="mkw-federation"> <MkContainer :showHeader="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" data-cy-mkw-federation class="mkw-federation">
<template #icon><i class="ti ti-whirl"></i></template> <template #icon><i class="ti ti-whirl"></i></template>
<template #header>{{ i18n.ts._widgets.federation }}</template> <template #header>{{ i18n.ts._widgets.federation }}</template>
@ -21,7 +21,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkMiniChart from '@/components/MkMiniChart.vue'; import MkMiniChart from '@/components/MkMiniChart.vue';
@ -42,11 +42,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetInstanceCloud.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud"> <MkContainer :naked="widgetProps.transparent" :showHeader="false" class="mkw-instance-cloud">
<div class=""> <div class="">
<MkTagCloud v-if="activeInstances"> <MkTagCloud v-if="activeInstances">
<li v-for="instance in activeInstances" :key="instance.id"> <li v-for="instance in activeInstances" :key="instance.id">
@ -14,7 +14,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkTagCloud from '@/components/MkTagCloud.vue'; import MkTagCloud from '@/components/MkTagCloud.vue';
@ -33,11 +33,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetInstanceInfo.vue
View file

@ -15,7 +15,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import { host } from '@/config'; import { host } from '@/config';
import { instance } from '@/instance'; import { instance } from '@/instance';
@ -27,11 +27,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetJobQueue.vue
View file

@ -47,7 +47,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onUnmounted, reactive } from 'vue'; import { onUnmounted, reactive } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import { useStream } from '@/stream'; import { useStream } from '@/stream';
import number from '@/filters/number'; import number from '@/filters/number';
@ -69,11 +69,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetMemo.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" data-cy-mkw-memo class="mkw-memo"> <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-memo class="mkw-memo">
<template #icon><i class="ti ti-note"></i></template> <template #icon><i class="ti ti-note"></i></template>
<template #header>{{ i18n.ts._widgets.memo }}</template> <template #header>{{ i18n.ts._widgets.memo }}</template>
@ -12,7 +12,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -33,11 +33,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

15
packages/frontend/src/widgets/WidgetNotifications.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" data-cy-mkw-notifications class="mkw-notifications"> <MkContainer :style="`height: ${widgetProps.height}px;`" :showHeader="widgetProps.showHeader" :scrollable="true" data-cy-mkw-notifications class="mkw-notifications">
<template #icon><i class="ti ti-bell"></i></template> <template #icon><i class="ti ti-bell"></i></template>
<template #header>{{ i18n.ts.notifications }}</template> <template #header>{{ i18n.ts.notifications }}</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button></template> <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
<div> <div>
<XNotifications :include-types="widgetProps.includingTypes"/> <XNotifications :includeTypes="widgetProps.includingTypes"/>
</div> </div>
</MkContainer> </MkContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import XNotifications from '@/components/MkNotifications.vue'; import XNotifications from '@/components/MkNotifications.vue';
@ -39,12 +39,9 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,
props, props,

9
packages/frontend/src/widgets/WidgetOnlineUsers.vue
View file

@ -8,7 +8,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os'; import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval'; import { useInterval } from '@/scripts/use-interval';
@ -26,11 +26,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetPhotos.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" data-cy-mkw-photos class="mkw-photos"> <MkContainer :showHeader="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" data-cy-mkw-photos class="mkw-photos">
<template #icon><i class="ti ti-camera"></i></template> <template #icon><i class="ti ti-camera"></i></template>
<template #header>{{ i18n.ts._widgets.photos }}</template> <template #header>{{ i18n.ts._widgets.photos }}</template>
@ -18,7 +18,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onUnmounted, ref } from 'vue'; import { onUnmounted, ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import { useStream } from '@/stream'; import { useStream } from '@/stream';
import { getStaticImageUrl } from '@/scripts/media-proxy'; import { getStaticImageUrl } from '@/scripts/media-proxy';
@ -42,11 +42,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetPostForm.vue
View file

@ -4,7 +4,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkPostForm from '@/components/MkPostForm.vue'; import MkPostForm from '@/components/MkPostForm.vue';
@ -15,11 +15,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetProfile.vue
View file

@ -17,7 +17,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import { $i } from '@/account'; import { $i } from '@/account';
import { userPage } from '@/filters/user'; import { userPage } from '@/filters/user';
@ -29,11 +29,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetRss.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" data-cy-mkw-rss class="mkw-rss"> <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-rss class="mkw-rss">
<template #icon><i class="ti ti-rss"></i></template> <template #icon><i class="ti ti-rss"></i></template>
<template #header>RSS</template> <template #header>RSS</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template> <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
@ -19,7 +19,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed } from 'vue'; import { ref, watch, computed } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import { url as base } from '@/config'; import { url as base } from '@/config';
@ -49,11 +49,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetRssTicker.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker"> <MkContainer :naked="widgetProps.transparent" :showHeader="widgetProps.showHeader" class="mkw-rss-ticker">
<template #icon><i class="ti ti-rss"></i></template> <template #icon><i class="ti ti-rss"></i></template>
<template #header>RSS</template> <template #header>RSS</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template> <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
@ -23,7 +23,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed } from 'vue'; import { ref, watch, computed } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import MarqueeText from '@/components/MkMarquee.vue'; import MarqueeText from '@/components/MkMarquee.vue';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
@ -73,11 +73,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetSlideshow.vue
View file

@ -13,7 +13,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, shallowRef } from 'vue'; import { onMounted, ref, shallowRef } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os'; import * as os from '@/os';
import { useInterval } from '@/scripts/use-interval'; import { useInterval } from '@/scripts/use-interval';
@ -35,11 +35,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetTimeline.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" data-cy-mkw-timeline class="mkw-timeline"> <MkContainer :showHeader="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" data-cy-mkw-timeline class="mkw-timeline">
<template #icon> <template #icon>
<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i> <i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
<i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i> <i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
@ -30,7 +30,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import * as os from '@/os'; import * as os from '@/os';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
@ -71,11 +71,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetTrends.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" data-cy-mkw-trends class="mkw-trends"> <MkContainer :showHeader="widgetProps.showHeader" data-cy-mkw-trends class="mkw-trends">
<template #icon><i class="ti ti-hash"></i></template> <template #icon><i class="ti ti-hash"></i></template>
<template #header>{{ i18n.ts._widgets.trends }}</template> <template #header>{{ i18n.ts._widgets.trends }}</template>
@ -20,7 +20,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkMiniChart from '@/components/MkMiniChart.vue'; import MkMiniChart from '@/components/MkMiniChart.vue';
@ -40,11 +40,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

9
packages/frontend/src/widgets/WidgetUnixClock.vue
View file

@ -12,7 +12,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue'; import { onUnmounted, ref, watch } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
const name = 'unixClock'; const name = 'unixClock';
@ -39,11 +39,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name, const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,

11
packages/frontend/src/widgets/WidgetUserList.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList"> <MkContainer :showHeader="widgetProps.showHeader" class="mkw-userList">
<template #icon><i class="ti ti-users"></i></template> <template #icon><i class="ti ti-users"></i></template>
<template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template> <template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ti ti-settings"></i></button></template> <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ti ti-settings"></i></button></template>
@ -19,7 +19,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form'; import { GetFormResultType } from '@/scripts/form';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import * as os from '@/os'; import * as os from '@/os';
@ -43,11 +43,8 @@ const widgetPropsDef = {
type WidgetProps = GetFormResultType<typeof widgetPropsDef>; type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const props = defineProps<WidgetComponentProps<WidgetProps>>(); const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure, save } = useWidgetPropsManager(name, const { widgetProps, configure, save } = useWidgetPropsManager(name,
widgetPropsDef, widgetPropsDef,