{
 "slug": "select",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "select-ex-1",
   "title": "单选",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"kole-select\" data-mode=\"single\" data-name=\"city\" data-select>\n      <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <span class=\"placeholder\">请选择城市</span>\n        <span class=\"caret\">▾</span>\n      </div>\n      <div class=\"kole-select-panel\" hidden>\n        <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"bj\">\n          北京\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"sh\">\n          上海\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"gz\">\n          广州\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"sz\">\n          深圳\n          <span class=\"check\">✓</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-select\">\n  <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n    <span class=\"placeholder\">请选择城市</span>\n    <span class=\"caret\">▾</span>\n  </div>\n  <div class=\"kole-select-panel\" hidden>\n    <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"bj\">\n      北京\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"sh\">\n      上海\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"gz\">\n      广州\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"sz\">\n      深圳\n      <span class=\"check\">✓</span>\n    </div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst cities = [\n  { value: 'bj', label: '北京' },\n  { value: 'sh', label: '上海' },\n  { value: 'gz', label: '广州' },\n  { value: 'sz', label: '深圳' }\n];\n\nexport default function Demo() {\n  const [city, setCity] = useState('bj');\n  return <KoleSelect options={cities} value={city} placeholder=\"请选择城市\" onChange={setCity} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst cities = [\n  { value: 'bj', label: '北京' },\n  { value: 'sh', label: '上海' },\n  { value: 'gz', label: '广州' },\n  { value: 'sz', label: '深圳' }\n];\nconst city = ref('bj');\n</script>\n\n<template>\n  <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>",
    "vue2": "<template>\n  <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data() {\n    return {\n      city: 'bj',\n      cities: [\n        { value: 'bj', label: '北京' },\n        { value: 'sh', label: '上海' },\n        { value: 'gz', label: '广州' },\n        { value: 'sz', label: '深圳' }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst cities = [\n  { value: 'bj', label: '北京' },\n  { value: 'sh', label: '上海' },\n  { value: 'gz', label: '广州' },\n  { value: 'sz', label: '深圳' }\n];\n\nexport default function Demo(): JSX.Element {\n  const [city, setCity] = useState<string>('bj');\n  return <KoleSelect options={cities} value={city} placeholder=\"请选择城市\" onChange={setCity} />;\n}",
    "vue3ts": "<template>\n\n  <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst cities = [\n  { value: 'bj', label: '北京' },\n  { value: 'sh', label: '上海' },\n  { value: 'gz', label: '广州' },\n  { value: 'sz', label: '深圳' }\n];\nconst city = ref<string>('bj');\n</script>",
    "vue2ts": "<template>\n\n  <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data(): Record<string, unknown> {\n    return {\n      city: 'bj',\n      cities: [\n        { value: 'bj', label: '北京' },\n        { value: 'sh', label: '上海' },\n        { value: 'gz', label: '广州' },\n        { value: 'sz', label: '深圳' }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Select.html 第 65-72 行「1. 单选」块：data-mode=\"single\"、data-name=\"city\"、触发器占位「请选择城市」，面板四个选项 data-value 为 bj/sh/gz/sz（北京/上海/广州/深圳），其中 bj 带 is-selected。",
    "prop 名见 frameworks/Select.jsx 第 18-30 行参数表（options / value / placeholder / onChange）与 frameworks/Select.vue3.vue 第 53-61 行 defineProps（modelValue）；三端受控值：React 为 value、Vue3 为 modelValue。"
   ]
  },
  {
   "id": "select-ex-2",
   "title": "多选",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"kole-select\" data-mode=\"multiple\" data-name=\"role\" data-select>\n      <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <span class=\"placeholder\">请选择角色</span>\n        <span class=\"caret\">▾</span>\n      </div>\n      <div class=\"kole-select-panel\" hidden>\n        <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"admin\">\n          管理员\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"editor\">\n          编辑\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"viewer\">\n          访客\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option is-disabled\" role=\"option\" aria-disabled=\"true\" data-disabled=\"1\" data-value=\"guest\">\n          受限访客\n          <span class=\"check\">✓</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-select\">\n  <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n    <span class=\"placeholder\">请选择角色</span>\n    <span class=\"caret\">▾</span>\n  </div>\n  <div class=\"kole-select-panel\" hidden>\n    <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"admin\">\n      管理员\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"editor\">\n      编辑\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"viewer\">\n      访客\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option is-disabled\" role=\"option\" aria-disabled=\"true\" data-disabled=\"1\" data-value=\"guest\">\n      受限访客\n      <span class=\"check\">✓</span>\n    </div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst roles = [\n  { value: 'admin', label: '管理员' },\n  { value: 'editor', label: '编辑' },\n  { value: 'viewer', label: '访客' },\n  { value: 'guest', label: '受限访客', disabled: true }\n];\n\nexport default function Demo() {\n  const [picked, setPicked] = useState(['admin']);\n  // multiple：受控值是数组，选中项以标签形式回填触发器（Select.jsx 第 102-112 行）\n  return <KoleSelect options={roles} multiple value={picked} placeholder=\"请选择角色\" onChange={setPicked} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst roles = [\n  { value: 'admin', label: '管理员' },\n  { value: 'editor', label: '编辑' },\n  { value: 'viewer', label: '访客' },\n  { value: 'guest', label: '受限访客', disabled: true }\n];\nconst picked = ref(['admin']);\n</script>\n\n<template>\n  <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>",
    "vue2": "<template>\n  <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data() {\n    return {\n      picked: ['admin'],\n      roles: [\n        { value: 'admin', label: '管理员' },\n        { value: 'editor', label: '编辑' },\n        { value: 'viewer', label: '访客' },\n        { value: 'guest', label: '受限访客', disabled: true }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst roles = [\n  { value: 'admin', label: '管理员' },\n  { value: 'editor', label: '编辑' },\n  { value: 'viewer', label: '访客' },\n  { value: 'guest', label: '受限访客', disabled: true }\n];\n\nexport default function Demo(): JSX.Element {\n  const [picked, setPicked] = useState(['admin']);\n  // multiple：受控值是数组，选中项以标签形式回填触发器（Select.jsx 第 102-112 行）\n  return <KoleSelect options={roles} multiple value={picked} placeholder=\"请选择角色\" onChange={setPicked} />;\n}",
    "vue3ts": "<template>\n\n  <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('多选');\nconst roles = [\n  { value: 'admin', label: '管理员' },\n  { value: 'editor', label: '编辑' },\n  { value: 'viewer', label: '访客' },\n  { value: 'guest', label: '受限访客', disabled: true }\n];\nconst picked = ref(['admin']);\n</script>",
    "vue2ts": "<template>\n\n  <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data(): Record<string, unknown> {\n    return {\n      picked: ['admin'],\n      roles: [\n        { value: 'admin', label: '管理员' },\n        { value: 'editor', label: '编辑' },\n        { value: 'viewer', label: '访客' },\n        { value: 'guest', label: '受限访客', disabled: true }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Select.html 第 80-87 行「2. 多选」块：data-mode=\"multiple\"、data-name=\"role\"、占位「请选择角色」，选项为 admin/editor/viewer（管理员/编辑/访客）与带 data-disabled=\"1\" 的 guest（受限访客），其中 admin 带 is-selected。",
    "multiple 见 frameworks/Select.jsx 第 23 行参数表与第 73-77 行数组增删逻辑；Vue 端同名 prop 见 Select.vue3.vue 第 57 行。禁用选项由 options 项的 disabled 字段决定（Select.jsx 第 72 行）。"
   ]
  },
  {
   "id": "select-ex-3",
   "title": "可搜索",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"kole-select\" data-mode=\"single\" data-name=\"user\" data-searchable=\"1\" data-select>\n      <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <span class=\"placeholder\">搜索并选择用户</span>\n        <span class=\"caret\">▾</span>\n      </div>\n      <div class=\"kole-select-panel\" hidden>\n        <div class=\"kole-select-search\">\n          <input placeholder=\"输入关键字\" />\n        </div>\n        <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"u1\">\n          张伟\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"u2\">\n          李娜\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"u3\">\n          王芳\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"u4\">\n          刘强\n          <span class=\"check\">✓</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      4
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      5
     ],
     [
      0,
      6
     ],
     [
      0,
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-select\" data-searchable=\"1\">\n  <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n    <span class=\"placeholder\">搜索并选择用户</span>\n    <span class=\"caret\">▾</span>\n  </div>\n  <div class=\"kole-select-panel\" hidden>\n    <div class=\"kole-select-search\">\n      <input placeholder=\"输入关键字\" />\n    </div>\n    <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"u1\">\n      张伟\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"u2\">\n      李娜\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"u3\">\n      王芳\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"u4\">\n      刘强\n      <span class=\"check\">✓</span>\n    </div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst users = [\n  { value: 'u1', label: '张伟' },\n  { value: 'u2', label: '李娜' },\n  { value: 'u3', label: '王芳' },\n  { value: 'u4', label: '刘强' }\n];\n\nexport default function Demo() {\n  const [user, setUser] = useState('u1');\n  return <KoleSelect options={users} searchable value={user} placeholder=\"搜索并选择用户\" onChange={setUser} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst users = [\n  { value: 'u1', label: '张伟' },\n  { value: 'u2', label: '李娜' },\n  { value: 'u3', label: '王芳' },\n  { value: 'u4', label: '刘强' }\n];\nconst user = ref('u1');\n</script>\n\n<template>\n  <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>",
    "vue2": "<template>\n  <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data() {\n    return {\n      user: 'u1',\n      users: [\n        { value: 'u1', label: '张伟' },\n        { value: 'u2', label: '李娜' },\n        { value: 'u3', label: '王芳' },\n        { value: 'u4', label: '刘强' }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst users = [\n  { value: 'u1', label: '张伟' },\n  { value: 'u2', label: '李娜' },\n  { value: 'u3', label: '王芳' },\n  { value: 'u4', label: '刘强' }\n];\n\nexport default function Demo(): JSX.Element {\n  const [user, setUser] = useState<string>('u1');\n  return <KoleSelect options={users} searchable value={user} placeholder=\"搜索并选择用户\" onChange={setUser} />;\n}",
    "vue3ts": "<template>\n\n  <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst users = [\n  { value: 'u1', label: '张伟' },\n  { value: 'u2', label: '李娜' },\n  { value: 'u3', label: '王芳' },\n  { value: 'u4', label: '刘强' }\n];\nconst user = ref<string>('u1');\n</script>",
    "vue2ts": "<template>\n\n  <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data(): Record<string, unknown> {\n    return {\n      user: 'u1',\n      users: [\n        { value: 'u1', label: '张伟' },\n        { value: 'u2', label: '李娜' },\n        { value: 'u3', label: '王芳' },\n        { value: 'u4', label: '刘强' }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Select.html 第 95-103 行「3. 可搜索」块：data-searchable=\"1\"、data-name=\"user\"、占位「搜索并选择用户」，选项为 u1-u4（张伟/李娜/王芳/刘强），其中 u1 带 is-selected；第 98 行面板顶部是搜索输入框。",
    "searchable 见 frameworks/Select.jsx 第 25 行参数表与第 41-45 行的 label 过滤（Vue 端 Select.vue3.vue 第 72-76 行）；搜索框与面板的渲染条件见 Select.jsx 第 123-132 行。"
   ]
  },
  {
   "id": "select-ex-4",
   "title": "分组",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"kole-select\" data-grouped=\"1\" data-mode=\"single\" data-name=\"dept\" data-select>\n      <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n        <span class=\"placeholder\">请选择部门</span>\n        <span class=\"caret\">▾</span>\n      </div>\n      <div class=\"kole-select-panel\" hidden>\n        <div class=\"kole-select-group-label\">技术中心</div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"fe\">\n          前端组\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"be\">\n          后端组\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-group-label\">产品中心</div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"pm\">\n          产品组\n          <span class=\"check\">✓</span>\n        </div>\n        <div class=\"kole-select-option\" role=\"option\" data-value=\"ux\">\n          设计组\n          <span class=\"check\">✓</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      5
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      6
     ],
     [
      0,
      5,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-select\">\n  <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n    <span class=\"placeholder\">请选择部门</span>\n    <span class=\"caret\">▾</span>\n  </div>\n  <div class=\"kole-select-panel\" hidden>\n    <div class=\"kole-select-group-label\">技术中心</div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"fe\">\n      前端组\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"be\">\n      后端组\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-group-label\">产品中心</div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"pm\">\n      产品组\n      <span class=\"check\">✓</span>\n    </div>\n    <div class=\"kole-select-option\" role=\"option\" data-value=\"ux\">\n      设计组\n      <span class=\"check\">✓</span>\n    </div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst groups = [\n  { label: '技术中心', options: [\n    { value: 'fe', label: '前端组' },\n    { value: 'be', label: '后端组' }\n  ] },\n  { label: '产品中心', options: [\n    { value: 'pm', label: '产品组' },\n    { value: 'ux', label: '设计组' }\n  ] }\n];\n\nexport default function Demo() {\n  const [dept, setDept] = useState('');\n  // groups：面板按分组标题渲染，组内仍是 { value, label } 选项（Select.jsx 第 134-148 行）\n  return <KoleSelect groups={groups} value={dept} placeholder=\"请选择部门\" onChange={setDept} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst groups = [\n  { label: '技术中心', options: [\n    { value: 'fe', label: '前端组' },\n    { value: 'be', label: '后端组' }\n  ] },\n  { label: '产品中心', options: [\n    { value: 'pm', label: '产品组' },\n    { value: 'ux', label: '设计组' }\n  ] }\n];\nconst dept = ref('');\n</script>\n\n<template>\n  <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>",
    "vue2": "<template>\n  <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data() {\n    return {\n      dept: '',\n      groups: [\n        { label: '技术中心', options: [\n          { value: 'fe', label: '前端组' },\n          { value: 'be', label: '后端组' }\n        ] },\n        { label: '产品中心', options: [\n          { value: 'pm', label: '产品组' },\n          { value: 'ux', label: '设计组' }\n        ] }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst groups = [\n  { label: '技术中心', options: [\n    { value: 'fe', label: '前端组' },\n    { value: 'be', label: '后端组' }\n  ] },\n  { label: '产品中心', options: [\n    { value: 'pm', label: '产品组' },\n    { value: 'ux', label: '设计组' }\n  ] }\n];\n\nexport default function Demo(): JSX.Element {\n  const [dept, setDept] = useState<string>('');\n  // groups：面板按分组标题渲染，组内仍是 { value, label } 选项（Select.jsx 第 134-148 行）\n  return <KoleSelect groups={groups} value={dept} placeholder=\"请选择部门\" onChange={setDept} />;\n}",
    "vue3ts": "<template>\n\n  <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst groups = [\n  { label: '技术中心', options: [\n    { value: 'fe', label: '前端组' },\n    { value: 'be', label: '后端组' }\n  ] },\n  { label: '产品中心', options: [\n    { value: 'pm', label: '产品组' },\n    { value: 'ux', label: '设计组' }\n  ] }\n];\nconst dept = ref<string>('');\n</script>",
    "vue2ts": "<template>\n\n  <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data(): Record<string, unknown> {\n    return {\n      dept: '',\n      groups: [\n        { label: '技术中心', options: [\n          { value: 'fe', label: '前端组' },\n          { value: 'be', label: '后端组' }\n        ] },\n        { label: '产品中心', options: [\n          { value: 'pm', label: '产品组' },\n          { value: 'ux', label: '设计组' }\n        ] }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Select.html 第 111-119 行「4. 分组」块：data-grouped=\"1\"、data-name=\"dept\"、占位「请选择部门」，分组标题为「技术中心」（fe 前端组 / be 后端组）与「产品中心」（pm 产品组 / ux 设计组），组内无 is-selected。",
    "groups 见 frameworks/Select.jsx 第 22 行参数表（[{ label, options }]）与第 134-148 行的分组渲染，Vue 端 Select.vue3.vue 第 56 行；分组模式下 labelOf 会从各组 options 里拍平查找（Select.jsx 第 58-63 行）。"
   ]
  },
  {
   "id": "select-ex-5",
   "title": "空态（无匹配选项）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"kole-select is-open\" data-mode=\"single\" data-name=\"empty\" data-select>\n      <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"true\" aria-haspopup=\"listbox\">\n        <span class=\"placeholder\">搜索无结果</span>\n        <span class=\"caret\">▾</span>\n      </div>\n      <div class=\"kole-select-panel\">\n        <div class=\"kole-select-empty\">无匹配选项</div>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      6
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      6,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-select is-open\">\n  <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"true\" aria-haspopup=\"listbox\">\n    <span class=\"placeholder\">搜索无结果</span>\n    <span class=\"caret\">▾</span>\n  </div>\n  <div class=\"kole-select-panel\">\n    <div class=\"kole-select-empty\">无匹配选项</div>\n  </div>\n</div>",
    "jsx": "import { KoleSelect } from 'kole-ui/react';\n\nexport default function Demo() {\n  // 无可选项（或搜索无匹配）时，面板渲染 .kole-select-empty「无匹配选项」（Select.jsx 第 161 行）\n  return <KoleSelect options={[]} searchable placeholder=\"搜索无结果\" />;\n}",
    "vue3": "<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst noOptions = [];\n</script>\n\n<template>\n  <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>",
    "vue2": "<template>\n  <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data() {\n    return { noOptions: [] };\n  }\n};\n</script>",
    "tsx": "import { KoleSelect } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  // 无可选项（或搜索无匹配）时，面板渲染 .kole-select-empty「无匹配选项」（Select.jsx 第 161 行）\n  return <KoleSelect options={[]} searchable placeholder=\"搜索无结果\" />;\n}",
    "vue3ts": "<template>\n\n  <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('空态（无匹配选项）');\nconst noOptions = [];\n</script>",
    "vue2ts": "<template>\n\n  <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleSelect },\n  data(): Record<string, unknown> {\n    return { noOptions: [] };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Select.html 第 128-131 行「5. 空态（无匹配选项）」块：根类含 is-open、aria-expanded=\"true\"，触发器占位「搜索无结果」，面板内只有一个 .kole-select-empty「无匹配选项」。",
    "空态判据是过滤后无选项（frameworks/Select.jsx 第 56 行 isEmpty、第 161 行渲染），因此片段给 searchable + 空 options；Vue 端同见 Select.vue3.vue 第 85-87 行。"
   ]
  }
 ]
}