{
 "slug": "formmodal",
 "mode": "single",
 "examples": [
  {
   "id": "formmodal-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">FormModal 表单弹窗</h2>\n  <p class=\"kole-desc\">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n  <div class=\"kole-demo\">\n    <button class=\"kole-btn kole-btn--primary\" id=\"open\">新建用户</button>\n    <p class=\"kole-code-tip\" id=\"out\"></p>\n  </div>\n</div>\n<div class=\"kole-formmodal-mask\" id=\"mask\" style=\"display:none\">\n  <div class=\"kole-formmodal\">\n    <div class=\"kole-formmodal-head\">\n      <span>新建用户</span>\n      <button class=\"kole-formmodal-close\" id=\"close\">×</button>\n    </div>\n    <div class=\"kole-formmodal-body\">\n      <div class=\"kole-form-row\">\n        <label class=\"kole-form-label\">\n          <span class=\"req\">*</span>\n          姓名\n        </label>\n        <input class=\"kole-form-input\" id=\"f-name\" placeholder=\"请输入姓名\" />\n        <div class=\"kole-form-err\" id=\"e-name\" style=\"display:none\">姓名不能为空</div>\n      </div>\n      <div class=\"kole-form-row\">\n        <label class=\"kole-form-label\">\n          <span class=\"req\">*</span>\n          邮箱\n        </label>\n        <input class=\"kole-form-input\" id=\"f-email\" placeholder=\"name@example.com\" />\n        <div class=\"kole-form-err\" id=\"e-email\" style=\"display:none\">邮箱格式不正确</div>\n      </div>\n      <div class=\"kole-form-row\">\n        <label class=\"kole-form-label\">角色</label>\n        <input class=\"kole-form-input\" id=\"f-role\" placeholder=\"如：管理员\" />\n      </div>\n    </div>\n    <div class=\"kole-formmodal-foot\">\n      <button class=\"kole-btn\" id=\"cancel\">取消</button>\n      <button class=\"kole-btn kole-btn--primary\" id=\"ok\">提交</button>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ],
     [
      1
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>FormModal 表单弹窗</h2>\n<p>弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>\n<button>新建用户</button>\n<p></p>\n<div class=\"kole-formmodal-mask\" style=\"display:none\">\n  <div class=\"kole-formmodal\">\n    <div class=\"kole-formmodal-head\">\n      <span>新建用户</span>\n      <button class=\"kole-formmodal-close\">×</button>\n    </div>\n    <div class=\"kole-formmodal-body\">\n      <div class=\"kole-form-row\">\n        <label class=\"kole-form-label\">\n          <span class=\"req\">*</span>\n          姓名\n        </label>\n        <input class=\"kole-form-input\" placeholder=\"请输入姓名\" />\n        <div class=\"kole-form-err\" style=\"display:none\">姓名不能为空</div>\n      </div>\n      <div class=\"kole-form-row\">\n        <label class=\"kole-form-label\">\n          <span class=\"req\">*</span>\n          邮箱\n        </label>\n        <input class=\"kole-form-input\" placeholder=\"name@example.com\" />\n        <div class=\"kole-form-err\" style=\"display:none\">邮箱格式不正确</div>\n      </div>\n      <div class=\"kole-form-row\">\n        <label class=\"kole-form-label\">角色</label>\n        <input class=\"kole-form-input\" placeholder=\"如：管理员\" />\n      </div>\n    </div>\n    <div class=\"kole-formmodal-foot\">\n      <button>取消</button>\n      <button>提交</button>\n    </div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleFormModal } from 'kole-ui/react';\n\nconst fields = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default function Demo() {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <>\n      <button type=\"button\" onClick={() => setVisible(true)}>新建用户</button>\n      <KoleFormModal\n        visible={visible}\n        title=\"新建用户\"\n        fields={fields}\n        onSubmit={(form) => { console.log(form); setVisible(false); }}\n        onCancel={() => setVisible(false)}\n      />\n    </>\n  );\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleFormModal } from 'kole-ui/vue3';\n\nconst visible = ref(false);\nconst fields = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nfunction onSubmit(form) { console.log(form); visible.value = false; }\nfunction close() { visible.value = false; }\n</script>\n\n<template>\n  <button type=\"button\" @click=\"visible = true\">新建用户</button>\n  <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n  <KoleFormModal\n    :visible=\"visible\"\n    title=\"新建用户\"\n    :fields=\"fields\"\n    @submit=\"onSubmit\"\n    @cancel=\"close\"\n  />\n</template>",
    "vue2": "<template>\n  <div>\n    <button type=\"button\" @click=\"visible = true\">新建用户</button>\n    <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n    <KoleFormModal\n      :visible=\"visible\"\n      title=\"新建用户\"\n      :fields=\"fields\"\n      @submit=\"onSubmit\"\n      @cancel=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { KoleFormModal } from 'kole-ui/vue2';\n\nconst fields = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default {\n  name: 'FormModalDemo',\n  components: { KoleFormModal },\n  data() { return { visible: false, fields }; },\n  methods: {\n    onSubmit(form) { console.log(form); this.visible = false; },\n    close() { this.visible = false; },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleFormModal } from 'kole-ui/react';\n\nconst fields = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default function Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n\n  return (\n    <>\n      <button type=\"button\" onClick={() => setVisible(true)}>新建用户</button>\n      <KoleFormModal\n        visible={visible}\n        title=\"新建用户\"\n        fields={fields}\n        onSubmit={(form) => { console.log(form); setVisible(false); }}\n        onCancel={() => setVisible(false)}\n      />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <button type=\"button\" @click=\"visible = true\">新建用户</button>\n  <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n  <KoleFormModal\n    :visible=\"visible\"\n    title=\"新建用户\"\n    :fields=\"fields\"\n    @submit=\"onSubmit\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleFormModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\nconst fields = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nfunction onSubmit(form) { console.log(form); visible.value = false; }\nfunction close() { visible.value = false; }\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <button type=\"button\" @click=\"visible = true\">新建用户</button>\n    <!-- 姓名/邮箱必填，提交时组件内校验（姓名不能为空 / 邮箱格式不正确） -->\n    <KoleFormModal\n      :visible=\"visible\"\n      title=\"新建用户\"\n      :fields=\"fields\"\n      @submit=\"onSubmit\"\n      @cancel=\"close\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleFormModal } from 'kole-ui/vue2';\n\nconst fields = [\n  { key: 'name', label: '姓名', required: true, placeholder: '请输入姓名' },\n  { key: 'email', label: '邮箱', required: true, placeholder: 'name@example.com' },\n  { key: 'role', label: '角色', placeholder: '如：管理员' },\n];\n\nexport default {\n  name: 'FormModalDemo',\n  components: { KoleFormModal },\n  data(): Record<string, unknown> { return { visible: false, fields }; },\n  methods: {\n    onSubmit(form) { console.log(form); this.visible = false; },\n    close(): void { this.visible = false; },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/FormModal.html:20-44 的弹窗结构（标题「新建用户」、姓名/邮箱必填并带 placeholder、角色可空、错误文案「姓名不能为空」「邮箱格式不正确」）",
    "visible / title / fields / value 形参见 FormModal.jsx 与 FormModal.vue3.vue defineProps（DEFAULT_FIELDS 与演示页三个字段同值）"
   ]
  }
 ],
 "curated": true
}