@reni-corp/reni-2c-ui 0.3.27 → 0.3.29

package/src/stories/Form.stories.ts

@@ -0,0 +1,704 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Form from '@/components/renderless/Form.vue'
+import TextField from '@/components/elements/TextField.vue'
+import SelectBox from '@/components/elements/SelectBox.vue'
+import TextArea from '@/components/elements/TextArea.vue'
+import PasswordField from '@/components/elements/PasswordField.vue'
+import CheckBox from '@/components/elements/CheckBox.vue'
+import Button from '@/components/elements/Button.vue'
+import Stack from '@/components/layouts/Stack.vue'
+import { ref } from 'vue'
+
+const meta: Meta<typeof Form> = {
+  title: 'Renderless/Form',
+  component: Form,
+  tags: ['autodocs'],
+  argTypes: {
+    default: {
+      description: `
+**フォーム状態変数**
+| 名称 | 型 | 説明 |
+|---|---|---|
+| \`invalid\` | boolean | フォームが無効かどうか。<br>ボタンの \`disabled\` 制御などに使用。 |
+| \`isValidating\` | boolean | バリデーション実行中かどうか。<br>非同期検証中のスピナー制御に便利。 |
+| \`hasErrors\` | boolean | いずれかのエラーが存在するか。<br>\`Object.keys(errors).length > 0\` 相当。 |
+| \`touched\` | boolean | いずれかのフィールドがタッチ済みか。<br>初回表示でエラーを出さない制御に使用。 |
+| \`dirty\` | boolean | いずれかの値が変更されているか。<br>変更がある時のみ保存ボタンを活性化。 |
+| \`canSubmit\` | boolean | 送信可能状態かどうか。<br>\`valid && !isValidating && dirty\` を簡略化。 |
+<br><br>
+**メタ情報 / エラー情報**
+| 名称 | 型 | 説明 |
+|---|---|---|
+| \`meta\` | object | フォームのメタデータ（vee-validate の \`meta\`）。<br>\`meta.valid\` や \`meta.initialValues\` などを含む。 |
+| \`errors\` | object | 各フィールドのエラー情報オブジェクト。<br>例: \`{ email: '必須です' }\`。 |
+<br><br>
+
+**アクション関数**
+| 名称 | 型 | 説明 |
+|---|---|---|
+| \`validate(): Promise<{ valid: boolean }>\` | function | 手動で全体バリデーションを実行。<br>送信前チェックに使用。 |
+| \`resetForm(state?)\` | function | フォームを初期化。<br>送信後のクリアや「リセット」ボタンに使用。 |
+| \`setFieldValue(field, value)\` | function | 特定フィールドの値を設定。<br>ウィザード形式で初期値を配る際に使用。 |
+| \`setErrors(errors)\` | function | カスタムエラーをまとめて設定。<br>サーバー検証エラー反映時に使用。 |
+| \`setTouched(fields)\` | function | タッチ状態をまとめて設定。<br>全フィールドのエラー表示を有効化。 |
+    `,
+      table: {
+        category: 'slots',
+        type: {
+          summary:
+            '{ invalid, isValidating, hasErrors, touched, dirty, canSubmit, meta, errors, validate, resetForm, setFieldValue, setErrors, setTouched }',
+        },
+      },
+      control: false,
+    },
+  },
+
+  args: {},
+}
+
+export default meta
+type StoryArgs = {}
+type Story = StoryObj<StoryArgs>
+type OverridesStory = Omit<Story, 'argTypes'> & {
+  argTypes?: Record<string, any>
+}
+
+export const 基本: OverridesStory = {
+  args: {},
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-form': Form,
+      'rn-text-field': TextField,
+      'rn-select-box': SelectBox,
+      'rn-text-area': TextArea,
+      'rn-password-field': PasswordField,
+      'rn-checkbox': CheckBox,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      const field1 = ref('テキスト')
+      const field2 = ref('最小文字数制限')
+      const field3 = ref('mailaddress@reni.ci.jp')
+      const field4 = ref('option1') // SelectBox用
+      const field5 = ref(
+        '長文テキスト短くなるとエラーになります。長文テキスト短くなるとエラーになります。長文テキスト短くなるとエラーになります。',
+      ) // TextArea用（バリデーションエラー想定）
+      const password = ref('Zzaq12wsx@??') // PasswordField用
+      const agreement = ref(false) // CheckBox用（利用規約同意）
+      const newsletter = ref(true) // CheckBox用（任意項目）
+      const submissionResult = ref('')
+
+      // SelectBox用のオプション
+      const selectOptions = [
+        { value: 'option1', label: 'オプション1' },
+        { value: 'option2', label: 'オプション2' },
+        { value: 'option3', label: 'オプション3' },
+        { value: 'option4', label: 'オプション4' },
+      ]
+
+      const handleSubmit = () => {
+        alert('フォームが送信されました！')
+        submissionResult.value = 'フォームが正常に送信されました'
+      }
+
+      const handleManualValidation = async (validate: () => Promise<any>) => {
+        const result = await validate()
+        console.log('バリデーション結果:', result)
+        submissionResult.value = result.valid
+          ? 'バリデーション成功'
+          : 'バリデーションエラーがあります'
+      }
+
+      const handleReset = (resetForm: (state?: any) => void) => {
+        resetForm()
+        field1.value = ''
+        field2.value = ''
+        field3.value = ''
+        field4.value = ''
+        field5.value = ''
+        password.value = '' // PasswordFieldもリセット
+        agreement.value = false // CheckBoxもリセット
+        newsletter.value = false
+        submissionResult.value = 'フォームがリセットされました'
+      }
+
+      const setInitialValues = (
+        setFieldValue: (field: string, value: any) => void,
+      ) => {
+        setFieldValue('field1', '初期値1')
+        setFieldValue('field2', 'initial value 2')
+        setFieldValue('field3', 'sample@example.com')
+        setFieldValue('field4', 'option2')
+        setFieldValue('field5', 'セットされたテキストエリアの初期値です。')
+        setFieldValue('password', 'SamplePass123!') // PasswordFieldの初期値設定
+        setFieldValue('agreement', true) // CheckBoxの初期値設定
+        setFieldValue('newsletter', false) // CheckBoxの初期値設定
+        field1.value = '初期値1'
+        field2.value = 'initial value 2'
+        field3.value = 'sample@example.com'
+        field4.value = 'option2'
+        field5.value = 'セットされたテキストエリアの初期値です。'
+        password.value = 'SamplePass123!' // PasswordFieldの初期値
+        agreement.value = true // CheckBoxの初期値
+        newsletter.value = false
+        submissionResult.value = '初期値が設定されました'
+      }
+
+      const setCustomErrors = (
+        setErrors: (errors: Record<string, string>) => void,
+      ) => {
+        setErrors({
+          field1: 'カスタムエラー: この値は使用できません',
+          field2: 'カスタムエラー: サーバー側でエラーが発生しました',
+          password: 'カスタムエラー: このパスワードは既に使用されています',
+          agreement: 'カスタムエラー: 利用規約に同意する必要があります',
+        })
+        submissionResult.value = 'カスタムエラーが設定されました'
+      }
+
+      const markFieldsAsTouched = (
+        setTouched: (fields: Record<string, boolean>) => void,
+      ) => {
+        setTouched({
+          field1: true,
+          field2: true,
+          field3: true,
+          password: true, // PasswordFieldもタッチ済みに
+          agreement: true, // CheckBoxもタッチ済みに
+          newsletter: true,
+        })
+        submissionResult.value = '全てのフィールドがタッチ済みに設定されました'
+      }
+
+      return {
+        args,
+        field1,
+        field2,
+        field3,
+        field4,
+        field5,
+        password, // PasswordField用
+        agreement, // CheckBox用
+        newsletter, // CheckBox用
+        selectOptions,
+        submissionResult,
+        handleSubmit,
+        handleManualValidation,
+        handleReset,
+        setInitialValues,
+        setCustomErrors,
+        markFieldsAsTouched,
+      }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-form>
+          <template #default="{ 
+            invalid, 
+            isValidating, 
+            hasErrors, 
+            touched, 
+            dirty, 
+            canSubmit, 
+            meta, 
+            errors,
+            validate,
+            resetForm,
+            setFieldValue,
+            setErrors,
+            setTouched
+          }">
+            <rn-stack direction="vertical" gap="lg">
+              <!-- フォーム状態表示 -->
+              <div style="padding: 16px; background: #f5f5f5; border-radius: 8px; font-size: 14px;">
+                <h4 style="margin: 0 0 12px 0; color: #333;">フォーム状態</h4>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                  <div><strong>Invalid:</strong> {{ invalid }}</div>
+                  <div><strong>Validating:</strong> {{ isValidating }}</div>
+                  <div><strong>Has Errors:</strong> {{ hasErrors }}</div>
+                  <div><strong>Touched:</strong> {{ touched }}</div>
+                  <div><strong>Dirty:</strong> {{ dirty }}</div>
+                  <div><strong>Can Submit:</strong> {{ canSubmit }}</div>
+                </div>
+                <div style="margin-top: 8px;">
+                  <strong>Errors:</strong> {{ Object.keys(errors).length > 0 ? JSON.stringify(errors) : '(なし)' }}
+                </div>
+                <div v-if="submissionResult" style="margin-top: 8px; padding: 8px; background: #e8f5e8; border-radius: 4px;">
+                  <strong>結果:</strong> {{ submissionResult }}
+                </div>
+              </div>
+              
+              <!-- フォームフィールド -->
+              <rn-stack direction="vertical" gap="md">
+                <rn-text-field
+                  name="field1"
+                  v-model="field1"
+                  label="必須フィールド"
+                  rules="required"
+                  help-text="この項目は必須です"
+                />
+                <rn-text-field
+                  v-model="field2"
+                  name="field2"
+                  label="最小文字数フィールド（6文字以上）"
+                  rules="required|min:6"
+                  help-text="6文字以上で入力してください"
+                />
+                <rn-text-field
+                  v-model="field3"
+                  name="field3"
+                  label="メールアドレス"
+                  rules="required|email"
+                  help-text="有効なメールアドレスを入力してください"
+                />
+                <rn-select-box
+                  v-model="field4"
+                  name="field4"
+                  label="選択フィールド（必須）"
+                  :items="selectOptions"
+                  rules="required"
+                  placeholder="オプションを選択してください"
+                  clearable
+                />
+                <rn-text-area
+                  v-model="field5"
+                  name="field5"
+                  label="テキストエリア（最低20文字）"
+                  rules="required|min:20"
+                  placeholder="20文字以上で入力してください"
+                  :rows="4"
+                  dynamic-rows
+                />
+                <rn-password-field
+                  v-model="password"
+                  name="password"
+                  label="パスワード（必須・強度チェック）"
+                  required
+                  requireStrongPassword
+                  showStrengthIndicator
+                  requiredErrorMessage="パスワードは必須です"
+                  customErrorMessage="8文字以上で英大文字・小文字・数字・特殊文字を含む強いパスワードが必要です"
+                />
+                <rn-checkbox
+                  v-model="agreement"
+                  name="agreement"
+                  label="利用規約に同意する"
+                  required
+                  requiredErrorMessage="利用規約への同意は必須です"
+                />
+                <rn-checkbox
+                  v-model="newsletter"
+                  name="newsletter"
+                  label="メールマガジンの配信を希望する（任意）"
+                />
+              </rn-stack>
+              
+              <!-- 操作ボタン群 -->
+              <rn-stack direction="vertical" gap="md">
+                <!-- 基本操作 -->
+                <rn-stack horizontal-re-size="fill" horizontal-align="between" gap="sm">
+                  <rn-button 
+                    @click="handleManualValidation(validate)"
+                    :disabled="isValidating"
+                  >
+                    手動バリデーション
+                  </rn-button>
+                  <rn-button 
+                    @click="handleSubmit()"
+                    :disabled="invalid"
+                    color="primary"
+                  >
+                    送信 (無効時は非活性)
+                  </rn-button>
+                </rn-stack>
+                
+                <!-- フォーム制御操作 -->
+                <rn-stack horizontal-re-size="fill" horizontal-align="between" gap="sm">
+                  <rn-button 
+                    @click="handleReset(resetForm)"
+                    color="secondary"
+                  >
+                    フォームリセット
+                  </rn-button>
+                  <rn-button 
+                    @click="setInitialValues(setFieldValue)"
+                    color="secondary"
+                  >
+                    初期値設定
+                  </rn-button>
+                </rn-stack>
+                
+                <!-- 高度な操作 -->
+                <rn-stack horizontal-re-size="fill" horizontal-align="between" gap="sm">
+                  <rn-button 
+                    @click="setCustomErrors(setErrors)"
+                    color="danger"
+                  >
+                    カスタムエラー設定
+                  </rn-button>
+                  <rn-button 
+                    @click="markFieldsAsTouched(setTouched)"
+                    color="secondary"
+                  >
+                    全フィールドをタッチ済みに
+                  </rn-button>
+                </rn-stack>
+                
+                <!-- 条件付きボタン -->
+                <rn-stack horizontal-re-size="fill" horizontal-align="center" gap="sm">
+                  <rn-button 
+                    v-if="canSubmit"
+                    @click="handleSubmit()"
+                    color="success"
+                  >
+                    送信可能 (dirty & valid)
+                  </rn-button>
+                  <rn-button 
+                    v-if="dirty && hasErrors"
+                    @click="handleManualValidation(validate)"
+                    color="warning"
+                  >
+                    エラーを再確認
+                  </rn-button>
+                </rn-stack>
+              </rn-stack>
+            </rn-stack>
+          </template>
+        </rn-form>
+      </div>
+    `,
+  }),
+}
+
+export const チェックボックス付きフォーム: OverridesStory = {
+  args: {},
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-form': Form,
+      'rn-text-field': TextField,
+      'rn-checkbox': CheckBox,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      const name = ref('')
+      const email = ref('')
+      const agreement = ref(false) // 必須
+      const newsletter = ref(false) // 任意
+      const updates = ref(false) // 任意
+      const privacy = ref(false) // 必須
+      const submissionResult = ref('')
+
+      const handleSubmit = () => {
+        alert('登録が完了しました！')
+        submissionResult.value = '登録が正常に完了しました'
+      }
+
+      const handleReset = (resetForm: (state?: any) => void) => {
+        resetForm()
+        name.value = ''
+        email.value = ''
+        agreement.value = false
+        newsletter.value = false
+        updates.value = false
+        privacy.value = false
+        submissionResult.value = 'フォームがリセットされました'
+      }
+
+      return {
+        args,
+        name,
+        email,
+        agreement,
+        newsletter,
+        updates,
+        privacy,
+        submissionResult,
+        handleSubmit,
+        handleReset,
+      }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-form>
+          <template #default="{ 
+            invalid, 
+            isValidating, 
+            hasErrors, 
+            touched, 
+            dirty, 
+            canSubmit, 
+            meta, 
+            errors,
+            validate,
+            resetForm
+          }">
+            <rn-stack direction="vertical" gap="lg">
+              <!-- フォーム状態表示 -->
+              <div style="padding: 16px; background: #f5f5f5; border-radius: 8px; font-size: 14px;">
+                <h4 style="margin: 0 0 12px 0; color: #333;">チェックボックス付きフォーム状態</h4>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                  <div><strong>Invalid:</strong> {{ invalid }}</div>
+                  <div><strong>Validating:</strong> {{ isValidating }}</div>
+                  <div><strong>Has Errors:</strong> {{ hasErrors }}</div>
+                  <div><strong>Touched:</strong> {{ touched }}</div>
+                  <div><strong>Dirty:</strong> {{ dirty }}</div>
+                  <div><strong>Can Submit:</strong> {{ canSubmit }}</div>
+                </div>
+                <div style="margin-top: 8px;">
+                  <strong>Errors:</strong> {{ Object.keys(errors).length > 0 ? JSON.stringify(errors) : '(なし)' }}
+                </div>
+                <div v-if="submissionResult" style="margin-top: 8px; padding: 8px; background: #e8f5e8; border-radius: 4px;">
+                  <strong>結果:</strong> {{ submissionResult }}
+                </div>
+              </div>
+              
+              <!-- 登録フォーム -->
+              <div style="max-width: 500px; margin: 0 auto; padding: 24px; border: 1px solid #ddd; border-radius: 8px;">
+                <h3 style="text-align: center; margin-bottom: 24px;">サービス登録</h3>
+                <rn-stack direction="vertical" gap="md">
+                  <rn-text-field
+                    v-model="name"
+                    name="name"
+                    label="お名前"
+                    rules="required"
+                    placeholder="山田太郎"
+                  />
+                  
+                  <rn-text-field
+                    v-model="email"
+                    name="email"
+                    label="メールアドレス"
+                    rules="required|email"
+                    placeholder="example@domain.com"
+                  />
+                  
+                  <!-- 必須チェックボックス群 -->
+                  <div style="padding: 16px; background: #fafafa; border-radius: 8px;">
+                    <h4 style="margin: 0 0 12px 0; color: #333; font-size: 16px;">必須項目</h4>
+                    <rn-stack direction="vertical" gap="sm">
+                      <rn-checkbox
+                        v-model="agreement"
+                        name="agreement"
+                        label="利用規約に同意します"
+                        required
+                        requiredErrorMessage="利用規約への同意は必須です"
+                        color="primary"
+                      />
+                      <rn-checkbox
+                        v-model="privacy"
+                        name="privacy"
+                        label="プライバシーポリシーに同意します"
+                        required
+                        requiredErrorMessage="プライバシーポリシーへの同意は必須です"
+                        color="primary"
+                      />
+                    </rn-stack>
+                  </div>
+                  
+                  <!-- 任意チェックボックス群 -->
+                  <div style="padding: 16px; background: #f0f8ff; border-radius: 8px;">
+                    <h4 style="margin: 0 0 12px 0; color: #333; font-size: 16px;">オプション（任意）</h4>
+                    <rn-stack direction="vertical" gap="sm">
+                      <rn-checkbox
+                        v-model="newsletter"
+                        name="newsletter"
+                        label="メールマガジンの配信を希望します"
+                        color="info"
+                      />
+                      <rn-checkbox
+                        v-model="updates"
+                        name="updates"
+                        label="新機能やアップデート情報を受け取ります"
+                        color="info"
+                      />
+                    </rn-stack>
+                  </div>
+                </rn-stack>
+              </div>
+              
+              <!-- 操作ボタン -->
+              <rn-stack horizontal-re-size="fill" horizontal-align="center" gap="md">
+                <rn-button 
+                  @click="handleReset(resetForm)"
+                  color="secondary"
+                >
+                  リセット
+                </rn-button>
+                <rn-button 
+                  @click="handleSubmit()"
+                  :disabled="invalid"
+                  color="primary"
+                >
+                  登録する
+                </rn-button>
+              </rn-stack>
+              
+              <!-- 値の表示 -->
+              <div style="padding: 16px; background: #f9f9f9; border-radius: 8px; font-size: 14px;">
+                <h4 style="margin: 0 0 8px 0;">現在の値:</h4>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px;">
+                  <div><strong>名前:</strong> {{ name || '(未入力)' }}</div>
+                  <div><strong>メール:</strong> {{ email || '(未入力)' }}</div>
+                  <div><strong>利用規約:</strong> {{ agreement ? '同意済み' : '未同意' }}</div>
+                  <div><strong>プライバシー:</strong> {{ privacy ? '同意済み' : '未同意' }}</div>
+                  <div><strong>メルマガ:</strong> {{ newsletter ? '希望' : '不要' }}</div>
+                  <div><strong>アップデート:</strong> {{ updates ? '希望' : '不要' }}</div>
+                </div>
+              </div>
+            </rn-stack>
+          </template>
+        </rn-form>
+      </div>
+    `,
+  }),
+}
+
+export const パスワードフィールド付き: OverridesStory = {
+  args: {},
+  render: (args: StoryArgs) => ({
+    components: {
+      'rn-form': Form,
+      'rn-text-field': TextField,
+      'rn-password-field': PasswordField,
+      'rn-button': Button,
+      'rn-stack': Stack,
+    },
+    setup() {
+      const email = ref('')
+      const password = ref('')
+      const confirmPassword = ref('')
+      const submissionResult = ref('')
+
+      // パスワード確認のバリデーション
+      const validateConfirmPassword = (value: string) => {
+        if (!value) {
+          return 'パスワード確認は必須です'
+        }
+        if (value !== password.value) {
+          return 'パスワードが一致しません'
+        }
+        return true
+      }
+
+      const handleSubmit = () => {
+        alert('アカウントが作成されました！')
+        submissionResult.value = 'アカウントが正常に作成されました'
+      }
+
+      const handleReset = (resetForm: (state?: any) => void) => {
+        resetForm()
+        email.value = ''
+        password.value = ''
+        confirmPassword.value = ''
+        submissionResult.value = 'フォームがリセットされました'
+      }
+
+      return {
+        args,
+        email,
+        password,
+        confirmPassword,
+        submissionResult,
+        validateConfirmPassword,
+        handleSubmit,
+        handleReset,
+      }
+    },
+    template: /* html */ `
+      <div class='sb-canvas'>
+        <rn-form>
+          <template #default="{ 
+            invalid, 
+            isValidating, 
+            hasErrors, 
+            touched, 
+            dirty, 
+            canSubmit, 
+            meta, 
+            errors,
+            validate,
+            resetForm
+          }">
+            <rn-stack direction="vertical" gap="lg">
+              <!-- フォーム状態表示 -->
+              <div style="padding: 16px; background: #f5f5f5; border-radius: 8px; font-size: 14px;">
+                <h4 style="margin: 0 0 12px 0; color: #333;">アカウント作成フォーム状態</h4>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                  <div><strong>Invalid:</strong> {{ invalid }}</div>
+                  <div><strong>Validating:</strong> {{ isValidating }}</div>
+                  <div><strong>Has Errors:</strong> {{ hasErrors }}</div>
+                  <div><strong>Touched:</strong> {{ touched }}</div>
+                  <div><strong>Dirty:</strong> {{ dirty }}</div>
+                  <div><strong>Can Submit:</strong> {{ canSubmit }}</div>
+                </div>
+                <div style="margin-top: 8px;">
+                  <strong>Errors:</strong> {{ Object.keys(errors).length > 0 ? JSON.stringify(errors) : '(なし)' }}
+                </div>
+                <div v-if="submissionResult" style="margin-top: 8px; padding: 8px; background: #e8f5e8; border-radius: 4px;">
+                  <strong>結果:</strong> {{ submissionResult }}
+                </div>
+              </div>
+              
+              <!-- アカウント作成フォーム -->
+              <div style="max-width: 400px; margin: 0 auto; padding: 24px; border: 1px solid #ddd; border-radius: 8px;">
+                <h3 style="text-align: center; margin-bottom: 24px;">新規アカウント作成</h3>
+                <rn-stack direction="vertical" gap="md">
+                  <rn-text-field
+                    v-model="email"
+                    name="email"
+                    label="メールアドレス"
+                    rules="required|email"
+                    placeholder="example@domain.com"
+                    help-text="ログイン時に使用します"
+                  />
+                  
+                  <rn-password-field
+                    v-model="password"
+                    name="password"
+                    label="パスワード"
+                    required
+                    requireStrongPassword
+                    showStrengthIndicator
+                    requiredErrorMessage="パスワードを入力してください"
+                    customErrorMessage="より強力なパスワードが必要です（8文字以上、英数字、特殊文字、大文字小文字を含む）"
+                  />
+                  
+                  <rn-password-field
+                    v-model="confirmPassword"
+                    name="confirmPassword"
+                    label="パスワード確認"
+                    :rules="validateConfirmPassword"
+                  />
+                </rn-stack>
+              </div>
+              
+              <!-- 操作ボタン -->
+              <rn-stack horizontal-re-size="fill" horizontal-align="center" gap="md">
+                <rn-button 
+                  @click="handleReset(resetForm)"
+                  color="secondary"
+                >
+                  リセット
+                </rn-button>
+                <rn-button 
+                  @click="handleSubmit()"
+                  :disabled="invalid"
+                  color="primary"
+                >
+                  アカウント作成
+                </rn-button>
+              </rn-stack>
+              
+              <!-- 条件付き表示 -->
+              <div v-if="canSubmit" style="text-align: center; color: #28a745; font-weight: bold;">
+                ✓ すべての項目が正しく入力されています
+              </div>
+            </rn-stack>
+          </template>
+        </rn-form>
+      </div>
+    `,
+  }),
+}