{
 "curated": true,
 "slug": "popconfirm",
 "mode": "scenarios",
 "examples": [
  {
   "id": "popconfirm-ex-1",
   "title": "删除确认（底部弹出）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <span class=\"kole-popconfirm\" data-popconfirm>\n    <button class=\"kole-btn danger\">删除</button>\n    <div class=\"kole-popconfirm-pop placement-bottom\" hidden>\n      <div class=\"kole-popconfirm-inner\">\n        <span class=\"kole-popconfirm-icon\">!</span>\n        <span class=\"kole-popconfirm-title\">确定要删除该条记录吗？此操作不可撤销。</span>\n      </div>\n      <div class=\"kole-popconfirm-actions\">\n        <button class=\"kole-popconfirm-btn\" data-act=\"cancel\">取消</button>\n        <button class=\"kole-popconfirm-btn primary\" data-act=\"ok\">确定</button>\n      </div>\n    </div>\n  </span>\n  <div class=\"log\" id=\"log\">结果：—</div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<span class=\"kole-popconfirm\">\n  <button>删除</button>\n  <div class=\"kole-popconfirm-pop placement-bottom\" hidden>\n    <div class=\"kole-popconfirm-inner\">\n      <span class=\"kole-popconfirm-icon\">!</span>\n      <span class=\"kole-popconfirm-title\">确定要删除该条记录吗？此操作不可撤销。</span>\n    </div>\n    <div class=\"kole-popconfirm-actions\">\n      <button class=\"kole-popconfirm-btn\">取消</button>\n      <button class=\"kole-popconfirm-btn primary\">确定</button>\n    </div>\n  </div>\n</span>\n<div>结果：—</div>",
    "jsx": "import { useState } from 'react';\nimport { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <KolePopconfirm\n      title=\"确定要删除该条记录吗？此操作不可撤销。\"\n      placement=\"bottom\"\n      okText=\"确定\"\n      cancelText=\"取消\"\n      visible={open}\n      onConfirm={() => setOpen(false)}\n      onCancel={() => setOpen(false)}\n    >\n      <button onClick={() => setOpen(true)}>删除</button>\n    </KolePopconfirm>\n  );\n}",
    "vue3": "<template>\n  <KolePopconfirm\n    v-model=\"open\"\n    title=\"确定要删除该条记录吗？此操作不可撤销。\"\n    placement=\"bottom\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button @click=\"open = true\">删除</button>\n  </KolePopconfirm>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst open = ref(false);\nconst onConfirm = () => { open.value = false; };\nconst onCancel = () => { open.value = false; };\n</script>",
    "vue2": "<template>\n  <KolePopconfirm\n    v-model=\"open\"\n    title=\"确定要删除该条记录吗？此操作不可撤销。\"\n    placement=\"bottom\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button @click=\"open = true\">删除</button>\n  </KolePopconfirm>\n</template>\n\n<script>\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopconfirm },\n  data() {\n    return { open: false };\n  },\n  methods: {\n    onConfirm() { this.open = false; },\n    onCancel() { this.open = false; }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <KolePopconfirm\n      title=\"确定要删除该条记录吗？此操作不可撤销。\"\n      placement=\"bottom\"\n      okText=\"确定\"\n      cancelText=\"取消\"\n      visible={open}\n      onConfirm={() => setOpen(false)}\n      onCancel={() => setOpen(false)}\n    >\n      <button onClick={() => setOpen(true)}>删除</button>\n    </KolePopconfirm>\n  );\n}",
    "vue3ts": "<template>\n\n  <KolePopconfirm\n    v-model=\"open\"\n    title=\"确定要删除该条记录吗？此操作不可撤销。\"\n    placement=\"bottom\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button @click=\"open = true\">删除</button>\n  </KolePopconfirm>\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst open = ref<boolean>(false);\nconst onConfirm = () => { open.value = false; };\nconst onCancel = () => { open.value = false; };\n</script>",
    "vue2ts": "<template>\n\n  <KolePopconfirm\n    v-model=\"open\"\n    title=\"确定要删除该条记录吗？此操作不可撤销。\"\n    placement=\"bottom\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button @click=\"open = true\">删除</button>\n  </KolePopconfirm>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopconfirm },\n  data(): Record<string, unknown> {\n    return { open: false };\n  },\n  methods: {\n    onConfirm(): void { this.open = false; },\n    onCancel(): void { this.open = false; }\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Popconfirm.html:28-38 的第一段气泡（placement-bottom、标题\"确定要删除该条记录吗？此操作不可撤销。\"、取消/确定按钮）与 :77-80 的确定回调；placement 取值对齐 site/details/popconfirm.json contract.dims.placement=top|bottom|left|right，受控用法对齐 frameworks/Popconfirm.jsx 的 visible/onConfirm/onCancel"
  },
  {
   "id": "popconfirm-ex-2",
   "title": "顶部弹出",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <span class=\"kole-popconfirm\" data-popconfirm>\n    <button class=\"kole-btn\">提交</button>\n    <div class=\"kole-popconfirm-pop placement-top\" hidden>\n      <div class=\"kole-popconfirm-inner\">\n        <span class=\"kole-popconfirm-icon\">!</span>\n        <span class=\"kole-popconfirm-title\">确定要提交审批吗？</span>\n      </div>\n      <div class=\"kole-popconfirm-actions\">\n        <button class=\"kole-popconfirm-btn\" data-act=\"cancel\">取消</button>\n        <button class=\"kole-popconfirm-btn primary\" data-act=\"ok\">确定</button>\n      </div>\n    </div>\n  </span>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<span class=\"kole-popconfirm\">\n  <button>提交</button>\n  <div class=\"kole-popconfirm-pop placement-top\" hidden>\n    <div class=\"kole-popconfirm-inner\">\n      <span class=\"kole-popconfirm-icon\">!</span>\n      <span class=\"kole-popconfirm-title\">确定要提交审批吗？</span>\n    </div>\n    <div class=\"kole-popconfirm-actions\">\n      <button class=\"kole-popconfirm-btn\">取消</button>\n      <button class=\"kole-popconfirm-btn primary\">确定</button>\n    </div>\n  </div>\n</span>",
    "jsx": "import { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo() {\n  return (\n    <KolePopconfirm\n      title=\"确定要提交审批吗？\"\n      placement=\"top\"\n      okText=\"确定\"\n      cancelText=\"取消\"\n      defaultVisible\n      onConfirm={() => console.log('已确认（ok）')}\n      onCancel={() => console.log('已取消')}\n    >\n      <button>提交</button>\n    </KolePopconfirm>\n  );\n}",
    "vue3": "<template>\n  <KolePopconfirm\n    title=\"确定要提交审批吗？\"\n    placement=\"top\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button>提交</button>\n  </KolePopconfirm>\n</template>\n\n<script setup>\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst onConfirm = () => { console.log('已确认（ok）'); };\nconst onCancel = () => { console.log('已取消'); };\n</script>",
    "vue2": "<template>\n  <KolePopconfirm\n    title=\"确定要提交审批吗？\"\n    placement=\"top\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button>提交</button>\n  </KolePopconfirm>\n</template>\n\n<script>\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopconfirm },\n  methods: {\n    onConfirm() { console.log('已确认（ok）'); },\n    onCancel() { console.log('已取消'); }\n  }\n};\n</script>",
    "tsx": "import { KolePopconfirm } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  return (\n    <KolePopconfirm\n      title=\"确定要提交审批吗？\"\n      placement=\"top\"\n      okText=\"确定\"\n      cancelText=\"取消\"\n      defaultVisible\n      onConfirm={() => console.log('已确认（ok）')}\n      onCancel={() => console.log('已取消')}\n    >\n      <button>提交</button>\n    </KolePopconfirm>\n  );\n}",
    "vue3ts": "<template>\n\n  <KolePopconfirm\n    title=\"确定要提交审批吗？\"\n    placement=\"top\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button>提交</button>\n  </KolePopconfirm>\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePopconfirm } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('顶部弹出');\nconst onConfirm = () => { console.log('已确认（ok）'); };\nconst onCancel = () => { console.log('已取消'); };\n</script>",
    "vue2ts": "<template>\n\n  <KolePopconfirm\n    title=\"确定要提交审批吗？\"\n    placement=\"top\"\n    ok-text=\"确定\"\n    cancel-text=\"取消\"\n    @confirm=\"onConfirm\"\n    @cancel=\"onCancel\"\n  >\n    <button>提交</button>\n  </KolePopconfirm>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePopconfirm } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopconfirm },\n  methods: {\n    onConfirm(): void { console.log('已确认（ok）'); },\n    onCancel(): void { console.log('已取消'); }\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Popconfirm.html:46-56 的第二段气泡（placement-top、标题\"确定要提交审批吗？\"、取消/确定按钮，初始 hidden）；Vue 端按实现走自管开合（frameworks/Popconfirm.vue3.vue 只声明 modelValue，frameworks/Popconfirm.vue2.vue 为 value），React 端非受控默认展开态对齐 frameworks/Popconfirm.jsx 的 defaultVisible 参数"
  }
 ]
}