{
 "slug": "confirmmodal",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "confirmmodal-ex-1",
   "title": "确认弹窗 ConfirmModal 示例 1",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-confirm is-primary\" id=\"confirmPrimary\" hidden>\n  <div class=\"kole-confirm-head\">\n    <span class=\"kole-confirm-icon\">i</span>\n    <div class=\"kole-confirm-title\">提交该申请？</div>\n  </div>\n  <div class=\"kole-confirm-content\">提交后将进入审批流程。</div>\n  <div class=\"kole-confirm-footer\">\n    <button class=\"kole-confirm-btn\" id=\"cancelPrimary\">取消</button>\n    <button class=\"kole-confirm-btn primary\" id=\"okPrimary\">提交</button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      2,
      0
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      2,
      1
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-confirm is-primary\" hidden>\n  <div class=\"kole-confirm-head\">\n    <span class=\"kole-confirm-icon\">i</span>\n    <div class=\"kole-confirm-title\">提交该申请？</div>\n  </div>\n  <div class=\"kole-confirm-content\">提交后将进入审批流程。</div>\n  <div class=\"kole-confirm-footer\">\n    <button class=\"kole-confirm-btn\">取消</button>\n    <button class=\"kole-confirm-btn primary\">提交</button>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [visible, setVisible] = useState(true);\n  const close = () => setVisible(false);\n\n  return (\n    <KoleConfirmModal\n      visible={visible}\n      confirmType=\"primary\"\n      title=\"提交该申请？\"\n      content=\"提交后将进入审批流程。\"\n      confirmText=\"提交\"\n      cancelText=\"取消\"\n      onConfirm={close}\n      onCancel={close}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"primary\"\n    title=\"提交该申请？\"\n    content=\"提交后将进入审批流程。\"\n    confirm-text=\"提交\"\n    cancel-text=\"取消\"\n    @confirm=\"close\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref(true);\n\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2": "<template>\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"primary\"\n    title=\"提交该申请？\"\n    content=\"提交后将进入审批流程。\"\n    confirm-text=\"提交\"\n    cancel-text=\"取消\"\n    @confirm=\"close\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script>\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleConfirmModal },\n  data() {\n    return { visible: true };\n  },\n  methods: {\n    close() {\n      this.visible = false;\n    },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(true);\n  const close = () => setVisible(false);\n\n  return (\n    <KoleConfirmModal\n      visible={visible}\n      confirmType=\"primary\"\n      title=\"提交该申请？\"\n      content=\"提交后将进入审批流程。\"\n      confirmText=\"提交\"\n      cancelText=\"取消\"\n      onConfirm={close}\n      onCancel={close}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"primary\"\n    title=\"提交该申请？\"\n    content=\"提交后将进入审批流程。\"\n    confirm-text=\"提交\"\n    cancel-text=\"取消\"\n    @confirm=\"close\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(true);\n\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"primary\"\n    title=\"提交该申请？\"\n    content=\"提交后将进入审批流程。\"\n    confirm-text=\"提交\"\n    cancel-text=\"取消\"\n    @confirm=\"close\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleConfirmModal },\n  data(): Record<string, unknown> {\n    return { visible: true };\n  },\n  methods: {\n    close(): void {\n      this.visible = false;\n    },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ConfirmModal.html:16-26 的 is-primary 确认块（标题「提交该申请？」、内容「提交后将进入审批流程。」、取消 + 提交按钮）；prop 取 frameworks/ConfirmModal.jsx:5-8 的 visible/confirmType/title/content/confirmText/cancelText"
   ]
  },
  {
   "id": "confirmmodal-ex-2",
   "title": "确认弹窗 ConfirmModal 示例 2",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-confirm is-danger\">\n  <div class=\"kole-confirm-head\">\n    <span class=\"kole-confirm-icon\">!</span>\n    <div class=\"kole-confirm-title\">删除该成员？</div>\n  </div>\n  <div class=\"kole-confirm-content\">删除后该成员将无法访问系统，且不可恢复。</div>\n  <label class=\"kole-confirm-extra\">\n    <input id=\"dont\" type=\"checkbox\" />\n    不再提示\n  </label>\n  <div class=\"kole-confirm-footer\">\n    <button class=\"kole-confirm-btn\" id=\"cancel\">取消</button>\n    <button class=\"kole-confirm-btn danger\" id=\"ok\">删除</button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      2,
      1
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-confirm is-danger\">\n  <div class=\"kole-confirm-head\">\n    <span class=\"kole-confirm-icon\">!</span>\n    <div class=\"kole-confirm-title\">删除该成员？</div>\n  </div>\n  <div class=\"kole-confirm-content\">删除后该成员将无法访问系统，且不可恢复。</div>\n  <label class=\"kole-confirm-extra\">\n    <input type=\"checkbox\" />\n    不再提示\n  </label>\n  <div class=\"kole-confirm-footer\">\n    <button class=\"kole-confirm-btn\">取消</button>\n    <button class=\"kole-confirm-btn danger\">删除</button>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [visible, setVisible] = useState(true);\n  const [submitting, setSubmitting] = useState(false);\n  const close = () => setVisible(false);\n  const confirm = (dontAskChecked) => {\n    setSubmitting(true);\n    console.log('删除成员，不再提示 =', dontAskChecked);\n  };\n\n  return (\n    <KoleConfirmModal\n      visible={visible}\n      confirmType=\"danger\"\n      title=\"删除该成员？\"\n      content=\"删除后该成员将无法访问系统，且不可恢复。\"\n      confirmText=\"删除\"\n      cancelText=\"取消\"\n      dontAsk\n      loading={submitting}\n      onConfirm={confirm}\n      onCancel={close}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"danger\"\n    title=\"删除该成员？\"\n    content=\"删除后该成员将无法访问系统，且不可恢复。\"\n    confirm-text=\"删除\"\n    cancel-text=\"取消\"\n    dont-ask\n    :loading=\"submitting\"\n    @confirm=\"confirm\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref(true);\nconst submitting = ref(false);\n\nfunction confirm(dontAskChecked) {\n  submitting.value = true;\n  console.log('删除成员，不再提示 =', dontAskChecked);\n}\n\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2": "<template>\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"danger\"\n    title=\"删除该成员？\"\n    content=\"删除后该成员将无法访问系统，且不可恢复。\"\n    confirm-text=\"删除\"\n    cancel-text=\"取消\"\n    dont-ask\n    :loading=\"submitting\"\n    @confirm=\"confirm\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script>\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleConfirmModal },\n  data() {\n    return { visible: true, submitting: false };\n  },\n  methods: {\n    confirm(dontAskChecked) {\n      this.submitting = true;\n      console.log('删除成员，不再提示 =', dontAskChecked);\n    },\n    close() {\n      this.visible = false;\n    },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleConfirmModal } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(true);\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const close = () => setVisible(false);\n  const confirm = (dontAskChecked) => {\n    setSubmitting(true);\n    console.log('删除成员，不再提示 =', dontAskChecked);\n  };\n\n  return (\n    <KoleConfirmModal\n      visible={visible}\n      confirmType=\"danger\"\n      title=\"删除该成员？\"\n      content=\"删除后该成员将无法访问系统，且不可恢复。\"\n      confirmText=\"删除\"\n      cancelText=\"取消\"\n      dontAsk\n      loading={submitting}\n      onConfirm={confirm}\n      onCancel={close}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"danger\"\n    title=\"删除该成员？\"\n    content=\"删除后该成员将无法访问系统，且不可恢复。\"\n    confirm-text=\"删除\"\n    cancel-text=\"取消\"\n    dont-ask\n    :loading=\"submitting\"\n    @confirm=\"confirm\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleConfirmModal } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(true);\nconst submitting = ref<boolean>(false);\n\nfunction confirm(dontAskChecked) {\n  submitting.value = true;\n  console.log('删除成员，不再提示 =', dontAskChecked);\n}\n\nfunction close() {\n  visible.value = false;\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleConfirmModal\n    :visible=\"visible\"\n    confirm-type=\"danger\"\n    title=\"删除该成员？\"\n    content=\"删除后该成员将无法访问系统，且不可恢复。\"\n    confirm-text=\"删除\"\n    cancel-text=\"取消\"\n    dont-ask\n    :loading=\"submitting\"\n    @confirm=\"confirm\"\n    @cancel=\"close\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleConfirmModal } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleConfirmModal },\n  data(): Record<string, unknown> {\n    return { visible: true, submitting: false };\n  },\n  methods: {\n    confirm(dontAskChecked) {\n      this.submitting = true;\n      console.log('删除成员，不再提示 =', dontAskChecked);\n    },\n    close(): void {\n      this.visible = false;\n    },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/ConfirmModal.html:27-37 的 is-danger 块（标题「删除该成员？」、内容「删除后该成员将无法访问系统，且不可恢复。」、删除按钮）；dontAsk 对应 :33 的 label.kole-confirm-extra「不再提示」勾选，loading 对应 ConfirmModal.jsx:12 的 loading 分支（按钮文案「处理中…」）"
   ]
  }
 ]
}