116 lines
9.6 KiB
JSON
116 lines
9.6 KiB
JSON
{
|
|
"slug": "form",
|
|
"mode": "scenarios",
|
|
"examples": [
|
|
{
|
|
"id": "form-ex-1",
|
|
"title": "默认与常用变体",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-form\">\n <form class=\"kole-form-form\" id=\"kole-form-form\">\n <label class=\"kole-form-field\">\n <span>\n 名称\n <b aria-hidden=\"true\">*</b>\n </span>\n <input class=\"kole-form-control\" name=\"name\" required value=\"示例项目\" />\n </label>\n <span class=\"kole-form-error\" hidden>请输入名称</span>\n <div class=\"kole-form-row\">\n <button class=\"kole-form-button kole-form-primary\" type=\"submit\">提交</button>\n <button class=\"kole-form-button\" type=\"reset\">重置</button>\n </div>\n </form>\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-form\">\n <form class=\"kole-form-form\">\n <label class=\"kole-form-field\">\n <span>\n 名称\n <b aria-hidden=\"true\">*</b>\n </span>\n <input class=\"kole-form-control\" name=\"name\" required value=\"示例项目\" />\n </label>\n <span class=\"kole-form-error\" hidden>请输入名称</span>\n <div class=\"kole-form-row\">\n <button class=\"kole-form-button kole-form-primary\" type=\"submit\">提交</button>\n <button class=\"kole-form-button\" type=\"reset\">重置</button>\n </div>\n </form>\n</div>",
|
|
"jsx": "import { useState } from 'react';\nimport { KoleForm } from 'kole-ui/react';\n\nexport default function ProjectForm() {\n const [error, setError] = useState('');\n\n // 与演示页同一套校验：名称为空时给出「请输入名称」\n return (\n <KoleForm\n label=\"名称\"\n required\n error={error}\n onSubmit={(e) => {\n const name = e.target.elements.name.value.trim();\n setError(name ? '' : '请输入名称');\n }}\n />\n );\n}",
|
|
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleForm } from 'kole-ui/vue3';\n\nconst error = ref('');\n\nfunction onSubmit(e) {\n const name = e.target.elements.name.value.trim();\n error.value = name ? '' : '请输入名称';\n}\nfunction resetError() { error.value = ''; }\n</script>\n\n<template>\n <!-- label / required 渲染字段与必填星号，error 非空时显示校验提示 -->\n <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>",
|
|
"vue2": "<template>\n <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>\n\n<script>\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n name: 'FormDemo',\n components: { KoleForm },\n data() { return { error: '' }; },\n methods: {\n onSubmit(e) {\n const name = e.target.elements.name.value.trim();\n this.error = name ? '' : '请输入名称';\n },\n resetError() { this.error = ''; },\n },\n};\n</script>",
|
|
"tsx": "import { useState } from 'react';\nimport { KoleForm } from 'kole-ui/react';\n\nexport default function ProjectForm(): JSX.Element {\n const [error, setError] = useState<string>('');\n\n // 与演示页同一套校验：名称为空时给出「请输入名称」\n return (\n <KoleForm\n label=\"名称\"\n required\n error={error}\n onSubmit={(e) => {\n const name = e.target.elements.name.value.trim();\n setError(name ? '' : '请输入名称');\n }}\n />\n );\n}",
|
|
"vue3ts": "<template>\n\n <!-- label / required 渲染字段与必填星号，error 非空时显示校验提示 -->\n <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleForm } from 'kole-ui/vue3';\n\nconst error = ref<string>('');\n\nfunction onSubmit(e) {\n const name = e.target.elements.name.value.trim();\n error.value = name ? '' : '请输入名称';\n}\nfunction resetError() { error.value = ''; }\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n name: 'FormDemo',\n components: { KoleForm },\n data(): Record<string, unknown> { return { error: '' }; },\n methods: {\n onSubmit(e) {\n const name = e.target.elements.name.value.trim();\n this.error = name ? '' : '请输入名称';\n },\n resetError(): void { this.error = ''; },\n },\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/Form.html 首个 demo-block 的标记（label「名称」+ 必填 *、错误文案「请输入名称」）与脚本里 submit 校验（名称为空则显示错误）",
|
|
"label / required / error 形参见 Form.jsx 与 Form.vue3.vue defineProps；提交与重置对应 emits submit/reset"
|
|
]
|
|
},
|
|
{
|
|
"id": "form-ex-2",
|
|
"title": "状态与使用场景",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-form\">\n <div class=\"kole-form-surface\" style=\"padding:12px\">统一字段布局、必填标识、校验错误和提交/重置流程。</div>\n <span class=\"kole-form-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-form\">\n <div class=\"kole-form-surface\" style=\"padding:12px\">统一字段布局、必填标识、校验错误和提交/重置流程。</div>\n <span class=\"kole-form-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
|
"jsx": "import { KoleForm } from 'kole-ui/react';\n\n// 状态与使用场景（frameworks/Form.html 第二个 demo-block 文案）：统一字段布局 + 必填标识 + 校验错误 + 提交/重置流程\n// error 传入文案即渲染校验错误行；清空后回到默认态\n<KoleForm\n label=\"名称\"\n required\n error=\"请输入名称\"\n onSubmit={() => console.log('提交')}\n/>",
|
|
"vue3": "<script setup>\nimport { KoleForm } from 'kole-ui/vue3';\n\nfunction onSubmit() { console.log('提交'); }\nfunction onReset() { console.log('重置'); }\n</script>\n\n<template>\n <!-- 错误态：error 传入文案即显示校验提示；提交 / 重置沿用同一套字段布局 -->\n <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>",
|
|
"vue2": "<template>\n <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>\n\n<script>\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n name: 'FormErrorDemo',\n components: { KoleForm },\n methods: {\n onSubmit() { console.log('提交'); },\n onReset() { console.log('重置'); },\n },\n};\n</script>",
|
|
"tsx": "import { KoleForm } from 'kole-ui/react';\n\nexport default function KoleFormDemo(): JSX.Element {\n // 状态与使用场景（frameworks/Form.html 第二个 demo-block 文案）：统一字段布局 + 必填标识 + 校验错误 + 提交/重置流程\n // error 传入文案即渲染校验错误行；清空后回到默认态\n return (\n <KoleForm\n label=\"名称\"\n required\n error=\"请输入名称\"\n onSubmit={() => console.log('提交')}\n />\n );\n}",
|
|
"vue3ts": "<template>\n\n <!-- 错误态：error 传入文案即显示校验提示；提交 / 重置沿用同一套字段布局 -->\n <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleForm } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\nfunction onSubmit() { console.log('提交'); }\nfunction onReset() { console.log('重置'); }\n</script>",
|
|
"vue2ts": "<template>\n\n <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n name: 'FormErrorDemo',\n components: { KoleForm },\n methods: {\n onSubmit(): void { console.log('提交'); },\n onReset(): void { console.log('重置'); },\n },\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"该示例块为场景说明块（frameworks/Form.html 第二个 demo-block 只有 kole-form-surface 文案「统一字段布局、必填标识、校验错误和提交/重置流程」），片段按该文案给出错误态调用",
|
|
"error/label/required 见 Form.jsx 形参与 Form.vue3.vue defineProps；错误文案「请输入名称」取自同一页首个 demo-block 的 kole-form-error 元素"
|
|
]
|
|
}
|
|
],
|
|
"curated": true
|
|
}
|