{
 "slug": "rate",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "rate-ex-1",
   "title": "基础（点击评分）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [score, setScore] = useState(3);\n  return <KoleRate count={5} value={score} onChange={setScore} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref(3);\n</script>\n\n<template>\n  <KoleRate :count=\"5\" v-model=\"score\" />\n</template>",
    "vue2": "<template>\n  <KoleRate :count=\"5\" v-model=\"score\" />\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data() {\n    return { score: 3 };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [score, setScore] = useState<number>(3);\n  return <KoleRate count={5} value={score} onChange={setScore} />;\n}",
    "vue3ts": "<template>\n\n  <KoleRate :count=\"5\" v-model=\"score\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref<number>(3);\n</script>",
    "vue2ts": "<template>\n\n  <KoleRate :count=\"5\" v-model=\"score\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data(): Record<string, unknown> {\n    return { score: 3 };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Rate.html 第 24 行 data-count=\"5\" data-value=\"3\"（可点击评分，无 data-half / data-text / is-readonly）与第 71-88 行的点击取值逻辑（再次点击同一星清零）。",
    "prop 名见 frameworks/Rate.jsx 第 20-31 行参数表（value / count / allowHalf / readonly / size / showText / texts）与 frameworks/Rate.vue3.vue 第 17-26 行 defineProps（modelValue）。React 端受控值是 value，Vue3 端是 modelValue + v-model。"
   ]
  },
  {
   "id": "rate-ex-2",
   "title": "允许半星",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-half data-rate data-value=\"2.5\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-value=\"2.5\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [score, setScore] = useState(2.5);\n  // allowHalf：点击星星左半为 0.5、右半为 1（Rate.jsx 第 41-44 行）\n  return <KoleRate count={5} allowHalf value={score} onChange={setScore} />;\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref(2.5);\n</script>\n\n<template>\n  <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>",
    "vue2": "<template>\n  <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data() {\n    return { score: 2.5 };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [score, setScore] = useState<number>(2.5);\n  // allowHalf：点击星星左半为 0.5、右半为 1（Rate.jsx 第 41-44 行）\n  return <KoleRate count={5} allowHalf value={score} onChange={setScore} />;\n}",
    "vue3ts": "<template>\n\n  <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst score = ref<number>(2.5);\n</script>",
    "vue2ts": "<template>\n\n  <KoleRate :count=\"5\" allow-half v-model=\"score\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data(): Record<string, unknown> {\n    return { score: 2.5 };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Rate.html 第 29 行 data-count=\"5\" data-value=\"2.5\" data-half：data-half 由第 48 行 root.hasAttribute(\"data-half\") 读出为 allowHalf，半星值 2.5 落在第 55-60 行的宽度比例上。",
    "allowHalf 见 frameworks/Rate.jsx 第 24 行参数表与 frameworks/Rate.vue3.vue 第 20 行 defineProps；Vue 模板写 allow-half。"
   ]
  },
  {
   "id": "rate-ex-3",
   "title": "只读 + 显示文字",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-rate is-readonly\" role=\"radiogroup\" data-count=\"5\" data-rate data-text data-value=\"4\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      4
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      5
     ],
     [
      0,
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-rate is-readonly\" role=\"radiogroup\" data-count=\"5\" data-value=\"4\"></div>",
    "jsx": "import { KoleRate } from 'kole-ui/react';\n\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n\nexport default function Demo() {\n  // readonly + showText：文字取 texts[Math.ceil(4) - 1] = 「满意」（Rate.jsx 第 36 行）\n  return <KoleRate count={5} value={4} readonly showText texts={texts} />;\n}",
    "vue3": "<script setup>\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n</script>\n\n<template>\n  <KoleRate :count=\"5\" :model-value=\"4\" readonly show-text :texts=\"texts\" />\n</template>",
    "vue2": "<template>\n  <KoleRate :count=\"5\" :value=\"4\" readonly show-text :texts=\"texts\" />\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data() {\n    return { texts: ['极差', '失望', '一般', '满意', '惊喜'] };\n  }\n};\n</script>",
    "tsx": "import { KoleRate } from 'kole-ui/react';\n\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n\nexport default function Demo(): JSX.Element {\n  // readonly + showText：文字取 texts[Math.ceil(4) - 1] = 「满意」（Rate.jsx 第 36 行）\n  return <KoleRate count={5} value={4} readonly showText texts={texts} />;\n}",
    "vue3ts": "<template>\n\n  <KoleRate :count=\"5\" :model-value=\"4\" readonly show-text :texts=\"texts\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('只读 + 显示文字');\nconst texts = ['极差', '失望', '一般', '满意', '惊喜'];\n</script>",
    "vue2ts": "<template>\n\n  <KoleRate :count=\"5\" :value=\"4\" readonly show-text :texts=\"texts\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data(): Record<string, unknown> {\n    return { texts: ['极差', '失望', '一般', '满意', '惊喜'] };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Rate.html 第 34 行 class 含 is-readonly、data-count=\"5\" data-value=\"4\" data-text：第 49 行 data-text 读出为 showText，第 50 行 texts = [\"极差\",\"失望\",\"一般\",\"满意\",\"惊喜\"]，第 66 行取 texts[Math.ceil(4) - 1] = 「满意」。",
    "readonly / showText / texts 见 frameworks/Rate.jsx 第 26-29 行参数表与 frameworks/Rate.vue3.vue 第 21-25 行 defineProps；Vue2 端受控 prop 名是 value（Rate.vue2.vue 第 18 行）。"
   ]
  },
  {
   "id": "rate-ex-4",
   "title": "尺寸：small / default / large",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-rate sm\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n  <div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n  <div class=\"kole-rate lg\" role=\"radiogroup\" data-count=\"5\" data-rate data-value=\"3\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      5
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-rate sm\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>\n<div class=\"kole-rate\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>\n<div class=\"kole-rate lg\" role=\"radiogroup\" data-count=\"5\" data-value=\"3\"></div>",
    "jsx": "import { KoleRate } from 'kole-ui/react';\n\nexport default function Demo() {\n  // size 三档：sm（14px）/ default（20px）/ lg（28px），见 frameworks/Rate.css 第 12-15 行\n  return (\n    <>\n      <KoleRate size=\"sm\" count={5} defaultValue={3} />\n      <KoleRate count={5} defaultValue={3} />\n      <KoleRate size=\"lg\" count={5} defaultValue={3} />\n    </>\n  );\n}",
    "vue3": "<script setup>\nimport { KoleRate } from 'kole-ui/vue3';\n</script>\n\n<template>\n  <KoleRate size=\"sm\" :count=\"5\" :model-value=\"3\" />\n  <KoleRate :count=\"5\" :model-value=\"3\" />\n  <KoleRate size=\"lg\" :count=\"5\" :model-value=\"3\" />\n</template>",
    "vue2": "<template>\n  <div>\n    <KoleRate size=\"sm\" :count=\"5\" :value=\"3\" />\n    <KoleRate :count=\"5\" :value=\"3\" />\n    <KoleRate size=\"lg\" :count=\"5\" :value=\"3\" />\n  </div>\n</template>\n\n<script>\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate }\n};\n</script>",
    "tsx": "import { KoleRate } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  // size 三档：sm（14px）/ default（20px）/ lg（28px），见 frameworks/Rate.css 第 12-15 行\n  return (\n    <>\n      <KoleRate size=\"sm\" count={5} defaultValue={3} />\n      <KoleRate count={5} defaultValue={3} />\n      <KoleRate size=\"lg\" count={5} defaultValue={3} />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleRate size=\"sm\" :count=\"5\" :model-value=\"3\" />\n  <KoleRate :count=\"5\" :model-value=\"3\" />\n  <KoleRate size=\"lg\" :count=\"5\" :model-value=\"3\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleRate } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('尺寸：small / default / large');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleRate size=\"sm\" :count=\"5\" :value=\"3\" />\n    <KoleRate :count=\"5\" :value=\"3\" />\n    <KoleRate size=\"lg\" :count=\"5\" :value=\"3\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleRate } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleRate },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Rate.html 第 39-41 行的三个 .kole-rate：类为 sm / 无 / lg，三者均 data-count=\"5\" data-value=\"3\"；三档字号见 frameworks/Rate.css 第 12-15 行（.sm 14px、默认 20px、.lg 28px）。",
    "prop 名为 size，取值 default | sm | lg（frameworks/Rate.jsx 第 27 行、Rate.vue3.vue 第 23 行），size 不等于 default 时才追加类（Rate.jsx 第 52 行）；React 端非受控初值用 defaultValue（Rate.jsx 第 22 行）。Vue2 模板只允许一个根元素，三档并排故外包一层无属性 div。"
   ]
  }
 ]
}