From db7abd17fb0b476dfa6bc3a2f4c753fa2e6f02b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=91=E3=81=A3=E3=81=A1?= <kokt@sim1222.com>
Date: Fri, 6 May 2022 22:42:04 +0900
Subject: [PATCH] emojigen wip30

---
 packages/client/src/pages/admin/emojigen.vue | 115 ++++++++++---------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/packages/client/src/pages/admin/emojigen.vue b/packages/client/src/pages/admin/emojigen.vue
index ac2bcc474..9c41a7cb9 100644
--- a/packages/client/src/pages/admin/emojigen.vue
+++ b/packages/client/src/pages/admin/emojigen.vue
@@ -1,81 +1,83 @@
 <template>
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<div class="cwepdizn _formRoot">
-		<FormInput v-model="emojiName" class="_formBlock">
-			<template #label>{{ $ts.emojiName }}</template>
-		</FormInput>
+	<FormSuspense>
+		<div class="cwepdizn _formRoot">
+			<FormInput v-model="emojiName" class="_formBlock">
+				<template #label>{{ $ts.emojiName }}</template>
+			</FormInput>
 
-		<FormTextarea v-model="text" class="_formBlock">
-			<template #label>{{ $ts.text }}</template>
-		</FormTextarea>
+			<FormTextarea v-model="text" class="_formBlock">
+				<template #label>{{ $ts.text }}</template>
+			</FormTextarea>
 
-		<FormRadios v-model="emojiAlign" class="_formBlock">
-			<template #label>{{ $ts.emojiAlign }}</template>
-			<option value="left"><i class="fa-solid fa-align-left"/></option>
-			<option value="center"><i class="fa-solid fa-align-center"></i></option>
-			<option value="right"><i class="fa-solid fa-align-right"/></option>
-		</FormRadios>
+			<FormRadios v-model="emojiAlign" class="_formBlock">
+				<template #label>{{ $ts.emojiAlign }}</template>
+				<option value="left"><i class="fa-solid fa-align-left"/></option>
+				<option value="center"><i class="fa-solid fa-align-center"></i></option>
+				<option value="right"><i class="fa-solid fa-align-right"/></option>
+			</FormRadios>
 
-		<FormSection>
-			<template #label>{{ $ts.emojiSizeSetting }}</template>
-			<FormSwitch v-model="emojiSizeFixed" class="_formBlock">
-				<template #label>{{ $ts.emojiSizeFixed }}</template>
-			</FormSwitch>
+			<FormSection>
+				<template #label>{{ $ts.emojiSizeSetting }}</template>
+				<FormSwitch v-model="emojiSizeFixed" class="_formBlock">
+					<template #label>{{ $ts.emojiSizeFixed }}</template>
+				</FormSwitch>
 
-			<FormSwitch v-model="emojiStretch" class="_formBlock">
-				<template #label>{{ $ts.emojiStretch }}</template>
-			</FormSwitch>
-		</FormSection>
+				<FormSwitch v-model="emojiStretch" class="_formBlock">
+					<template #label>{{ $ts.emojiStretch }}</template>
+				</FormSwitch>
+			</FormSection>
 
-		<FormRadios v-model="font" class="_formBlock">
-			<template #label>{{ $ts.font }}</template>
-			<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
-			<option value="mplus-1p-black">M+ 1p black</option>
-			<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
-			<option value="ipamjm">IPAmj明朝</option>
-			<option value="aoyagireisyoshimo">青柳隷書しも</option>
-			<option value="LinLibertine_RBah">LinLibertine Bold</option>
-		</FormRadios>
+			<FormRadios v-model="font" class="_formBlock">
+				<template #label>{{ $ts.font }}</template>
+				<option value="notosans-mono-bold">Noto Sans Mono CJK JP Bold</option>
+				<option value="mplus-1p-black">M+ 1p black</option>
+				<option value="rounded-x-mplus-1p-black">Rounded M+ 1p black</option>
+				<option value="ipamjm">IPAmj明朝</option>
+				<option value="aoyagireisyoshimo">青柳隷書しも</option>
+				<option value="LinLibertine_RBah">LinLibertine Bold</option>
+			</FormRadios>
 
-		<FormFolder :default-open="true" class="_formBlock">
-			<template #label>{{ $ts.accentColor }}</template>
-			<div class="cwepdizn-colors">
-				<div class="row">
-					<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
-						<div class="preview" :style="{ background: color }"></div>
-					</button>
+			<FormFolder :default-open="true" class="_formBlock">
+				<template #label>{{ $ts.accentColor }}</template>
+				<div class="cwepdizn-colors">
+					<div class="row">
+						<button v-for="color in accentColors" :key="color" class="color rounded _button" @click="setAccentColor(color)">
+							<div class="preview" :style="{ background: color }"></div>
+						</button>
+					</div>
 				</div>
-			</div>
-		</FormFolder>
+			</FormFolder>
 
+			<FormInput v-model="emojiColor" class="_formBlock">
+				<template #prefix><i class="fas fa-palette"></i></template>
+				<template #label>{{ $ts.emojiColor }}</template>
+				<template #caption>#RRGGBB</template>
+			</FormInput>
 
-		<FormInput v-model="emojiColor" class="_formBlock">
-			<template #prefix><i class="fas fa-palette"></i></template>
-			<template #label>{{ $ts.emojiColor }}</template>
-			<template #caption>#RRGGBB</template>
-		</FormInput>
+			<FormButton primary class="_formBlock" @click="emojiGenerate">{{ $ts.emojiGenerate }}</FormButton>
 
-		<FormButton primary class="_formBlock" @click="emojiGenerate">{{ $ts.emojiGenerate }}</FormButton>
-
-		<FormSection>
-			<template #label>{{ $ts.preview }}</template>
-			<img :src="emojiUrl" class="img" :alt="emojiName"/>
-			<p>{{ emojiUrl }}</p>
-		</FormSection>
-		<FormButton primary class="_formBlock" @click="emojiApproval">{{ $ts.emojiApproval }}</FormButton>
-	</div>
+			<FormSection>
+				<template #label>{{ $ts.preview }}</template>
+				<img :src="emojiUrl" class="img" :alt="emojiName"/>
+				<p>{{ emojiUrl }}</p>
+			</FormSection>
+			<FormButton primary class="_formBlock" @click="emojiApproval">{{ $ts.emojiApproval }}</FormButton>
+		</div>
+	</FormSuspense>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue';
+import FormFolder from '@/components/form/folder.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
 import FormButton from '@/components/ui/button.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import {defaultStore} from "@/store";
@@ -84,13 +86,14 @@ import {stream} from "@/stream";
 
 export default defineComponent({
 	components: {
+		FormFolder,
 		FormInput,
 		FormTextarea,
 		FormRadios,
 		FormSection,
 		FormSwitch,
 		FormButton,
-		FormFolder,
+		FormSuspense,
 	},
 
 	emits: ['info'],