{
 "curated": true,
 "slug": "plateinput",
 "mode": "single",
 "examples": [
  {
   "id": "plateinput-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">PlateInput 车牌号输入</h2>\n  <p class=\"kole-desc\">省份简称 + 字母数字组合，自动大写，支持新能源车牌（7 位）。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">基础用法</div>\n    <div class=\"kole-plate\" id=\"plate\">\n      <div class=\"kole-plate-field\" id=\"field\">\n        <select class=\"kole-plate-prov\" id=\"prov\">\n          <option>京</option>\n          <option>沪</option>\n          <option>粤</option>\n          <option>津</option>\n          <option>冀</option>\n          <option>鲁</option>\n          <option>苏</option>\n        </select>\n        <input class=\"kole-plate-input\" id=\"input\" role=\"group\" maxlength=\"7\" placeholder=\"A12345\" />\n      </div>\n      <div class=\"kole-plate-tip\" id=\"tip\"></div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>PlateInput 车牌号输入</h2>\n<p>省份简称 + 字母数字组合，自动大写，支持新能源车牌（7 位）。</p>\n<div>基础用法</div>\n<div class=\"kole-plate\" id=\"plate\">\n  <div class=\"kole-plate-field\">\n    <select class=\"kole-plate-prov\">\n      <option>京</option>\n      <option>沪</option>\n      <option>粤</option>\n      <option>津</option>\n      <option>冀</option>\n      <option>鲁</option>\n      <option>苏</option>\n    </select>\n    <input class=\"kole-plate-input\" role=\"group\" maxlength=\"7\" placeholder=\"A12345\" />\n  </div>\n  <div class=\"kole-plate-tip\"></div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KolePlateInput } from 'kole-ui/react';\n\nconst PROVINCES = ['京', '沪', '粤', '津', '冀', '鲁', '苏'];\n\nexport default function Demo() {\n  const [plate, setPlate] = useState('');\n\n  return (\n    <KolePlateInput\n      modelValue={plate}\n      provinces={PROVINCES}\n      onChange={setPlate}\n    />\n  );\n}",
    "vue3": "<template>\n  <KolePlateInput v-model=\"plate\" :provinces=\"provinces\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePlateInput } from 'kole-ui/vue3';\n\nconst plate = ref('');\nconst provinces = ['京', '沪', '粤', '津', '冀', '鲁', '苏'];\n</script>",
    "vue2": "<template>\n  <KolePlateInput v-model=\"plate\" :provinces=\"provinces\" />\n</template>\n\n<script>\nimport { KolePlateInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePlateInput },\n  data() {\n    return {\n      plate: '',\n      provinces: ['京', '沪', '粤', '津', '冀', '鲁', '苏']\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KolePlateInput } from 'kole-ui/react';\n\nconst PROVINCES = ['京', '沪', '粤', '津', '冀', '鲁', '苏'];\n\nexport default function Demo(): JSX.Element {\n  const [plate, setPlate] = useState<string>('');\n\n  return (\n    <KolePlateInput\n      modelValue={plate}\n      provinces={PROVINCES}\n      onChange={setPlate}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KolePlateInput v-model=\"plate\" :provinces=\"provinces\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePlateInput } from 'kole-ui/vue3';\n\nconst plate = ref<string>('');\nconst provinces = ['京', '沪', '粤', '津', '冀', '鲁', '苏'];\n</script>",
    "vue2ts": "<template>\n\n  <KolePlateInput v-model=\"plate\" :provinces=\"provinces\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePlateInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePlateInput },\n  data(): Record<string, unknown> {\n    return {\n      plate: '',\n      provinces: ['京', '沪', '粤', '津', '冀', '鲁', '苏']\n    };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/PlateInput.html:19-21 的七个省份 option（京/沪/粤/津/冀/鲁/苏）与 :23 的 placeholder=\"A12345\"、maxlength=\"7\"；provinces 默认值对齐 frameworks/PlateInput.jsx 的 provinces 参数，校验规则取自 :37-41 validate() 里的 5/6 位正则"
  }
 ]
}