{
 "slug": "descriptions",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "descriptions-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-descriptions\">\n    <table class=\"kole-descriptions-table\">\n      <tbody>\n        <tr>\n          <th>订单号</th>\n          <td>KOLE-20260920</td>\n          <th>状态</th>\n          <td>处理中</td>\n        </tr>\n        <tr>\n          <th>负责人</th>\n          <td>林工</td>\n          <th>更新时间</th>\n          <td>今天 09:30</td>\n        </tr>\n      </tbody>\n    </table>\n  </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": "<div class=\"kole-descriptions\">\n  <table class=\"kole-descriptions-table\">\n    <tbody>\n      <tr>\n        <th>订单号</th>\n        <td>KOLE-20260920</td>\n        <th>状态</th>\n        <td>处理中</td>\n      </tr>\n      <tr>\n        <th>负责人</th>\n        <td>林工</td>\n        <th>更新时间</th>\n        <td>今天 09:30</td>\n      </tr>\n    </tbody>\n  </table>\n</div>",
    "jsx": "import { KoleDescriptions } from 'kole-ui/react';\n\nconst FIELDS = [\n  { label: '订单号', value: 'KOLE-20260920' },\n  { label: '状态', value: '处理中' },\n  { label: '负责人', value: '林工' },\n  { label: '更新时间', value: '今天 09:30' },\n];\n\n<KoleDescriptions fields={FIELDS} columns={2} bordered />",
    "vue3": "<template>\n  <KoleDescriptions :fields=\"fields\" :columns=\"2\" :bordered=\"true\" />\n</template>\n\n<script setup>\nimport { KoleDescriptions } from 'kole-ui/vue3';\n\nconst fields = [\n  { label: '订单号', value: 'KOLE-20260920' },\n  { label: '状态', value: '处理中' },\n  { label: '负责人', value: '林工' },\n  { label: '更新时间', value: '今天 09:30' },\n];\n</script>",
    "vue2": "<template>\n  <KoleDescriptions :fields=\"fields\" :columns=\"2\" :bordered=\"true\" />\n</template>\n\n<script>\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDescriptions },\n  data() {\n    return {\n      fields: [\n        { label: '订单号', value: 'KOLE-20260920' },\n        { label: '状态', value: '处理中' },\n        { label: '负责人', value: '林工' },\n        { label: '更新时间', value: '今天 09:30' },\n      ],\n    };\n  },\n};\n</script>",
    "tsx": "import { KoleDescriptions } from 'kole-ui/react';\n\ninterface DescriptionField {\n  label: string;\n  value: string;\n}\n\nconst FIELDS: ReadonlyArray<DescriptionField> = [\n  { label: '订单号', value: 'KOLE-20260920' },\n  { label: '状态', value: '处理中' },\n  { label: '负责人', value: '林工' },\n  { label: '更新时间', value: '今天 09:30' },\n];\n\nconst columns: number = 2;\n\n<KoleDescriptions fields={FIELDS} columns={columns} bordered />",
    "vue3ts": "<template>\n  <KoleDescriptions :fields=\"fields\" :columns=\"columns\" :bordered=\"true\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDescriptions } from 'kole-ui/vue3';\n\ninterface DescriptionField {\n  label: string;\n  value: string;\n}\n\nconst fields: ReadonlyArray<DescriptionField> = [\n  { label: '订单号', value: 'KOLE-20260920' },\n  { label: '状态', value: '处理中' },\n  { label: '负责人', value: '林工' },\n  { label: '更新时间', value: '今天 09:30' },\n];\nconst columns: number = 2;\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleDescriptions :fields=\"fields\" :columns=\"columns\" :bordered=\"true\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\ninterface DescriptionField {\n  label: string;\n  value: string;\n}\n\nexport default Vue.extend({\n  components: { KoleDescriptions },\n  data(): { fields: ReadonlyArray<DescriptionField>; columns: number } {\n    return {\n      fields: [\n        { label: '订单号', value: 'KOLE-20260920' },\n        { label: '状态', value: '处理中' },\n        { label: '负责人', value: '林工' },\n        { label: '更新时间', value: '今天 09:30' },\n      ],\n      columns: 2,\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Descriptions.html:5 第一个 demo-block 的 table.kole-descriptions-table（订单号 KOLE-20260920 / 状态 处理中 / 负责人 林工 / 更新时间 今天 09:30，每行两对 → columns=2）；prop 取 frameworks/Descriptions.jsx:4 的 fields/columns/bordered",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 interface DescriptionField + ReadonlyArray（fields 语义见 Descriptions.jsx 形参）；vue3ts/vue2ts 用 <script lang=\"ts\"> + columns: number；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "id": "descriptions-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-descriptions\">\n    <div class=\"kole-descriptions-surface\" style=\"padding:12px\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</div>\n    <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\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": "<div class=\"kole-descriptions\">\n  <div class=\"kole-descriptions-surface\" style=\"padding:12px\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</div>\n  <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleDescriptions } from 'kole-ui/react';\n\n<KoleDescriptions bordered={false} columns={1}>\n  <span className=\"kole-descriptions-desc\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</span>\n  <span className=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</KoleDescriptions>",
    "vue3": "<template>\n  <KoleDescriptions :bordered=\"false\" :columns=\"1\">\n    <span class=\"kole-descriptions-desc\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</span>\n    <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </KoleDescriptions>\n</template>\n\n<script setup>\nimport { KoleDescriptions } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleDescriptions :bordered=\"false\" :columns=\"1\">\n    <span class=\"kole-descriptions-desc\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</span>\n    <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </KoleDescriptions>\n</template>\n\n<script>\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDescriptions },\n};\n</script>",
    "tsx": "import { KoleDescriptions } from 'kole-ui/react';\n\ninterface DescriptionsCopy {\n  intro: string;\n  a11y: string;\n}\n\nconst copy: DescriptionsCopy = {\n  intro: '以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。',\n  a11y: '支持键盘焦点、状态反馈和令牌化样式。',\n};\n\nconst columns: number = 1;\n\n<KoleDescriptions bordered={false} columns={columns}>\n  <span className=\"kole-descriptions-desc\">{copy.intro}</span>\n  <span className=\"kole-descriptions-desc\">{copy.a11y}</span>\n</KoleDescriptions>",
    "vue3ts": "<template>\n  <KoleDescriptions :bordered=\"false\" :columns=\"columns\">\n    <span class=\"kole-descriptions-desc\">{{ copy.intro }}</span>\n    <span class=\"kole-descriptions-desc\">{{ copy.a11y }}</span>\n  </KoleDescriptions>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDescriptions } from 'kole-ui/vue3';\n\ninterface DescriptionsCopy {\n  intro: string;\n  a11y: string;\n}\n\nconst copy: DescriptionsCopy = {\n  intro: '以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。',\n  a11y: '支持键盘焦点、状态反馈和令牌化样式。',\n};\nconst columns: number = 1;\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleDescriptions :bordered=\"false\" :columns=\"columns\">\n      <span class=\"kole-descriptions-desc\">{{ copy.intro }}</span>\n      <span class=\"kole-descriptions-desc\">{{ copy.a11y }}</span>\n    </KoleDescriptions>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\ninterface DescriptionsCopy {\n  intro: string;\n  a11y: string;\n}\n\nexport default Vue.extend({\n  components: { KoleDescriptions },\n  data(): { copy: DescriptionsCopy; columns: number } {\n    return {\n      copy: {\n        intro: '以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。',\n        a11y: '支持键盘焦点、状态反馈和令牌化样式。',\n      },\n      columns: 1,\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Descriptions.html:5 第二个 demo-block（.kole-descriptions-surface 说明文案 + span.kole-descriptions-desc）；文案走默认插槽（api.slots=default，Descriptions.vue3.vue 的 <slot />），bordered/columns 取 frameworks/Descriptions.jsx:4"
   ]
  }
 ]
}