114 lines
7.9 KiB
JSON
114 lines
7.9 KiB
JSON
{
|
||
"slug": "datepicker",
|
||
"mode": "scenarios",
|
||
"curated": true,
|
||
"examples": [
|
||
{
|
||
"id": "datepicker-ex-1",
|
||
"title": "默认与常用变体",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-datepicker\">\n <label class=\"kole-datepicker-item\">\n 日期\n <input class=\"kole-datepicker-control\" type=\"date\" aria-label=\"日期\" value=\"2026-09-20\" />\n </label>\n <button class=\"kole-datepicker-button kole-datepicker-secondary\" type=\"button\">本月</button>\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-datepicker\">\n <label class=\"kole-datepicker-item\">\n 日期\n <input class=\"kole-datepicker-control\" type=\"date\" aria-label=\"日期\" value=\"2026-09-20\" />\n </label>\n <button class=\"kole-datepicker-button kole-datepicker-secondary\" type=\"button\">本月</button>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleDatePicker } from 'kole-ui/react';\n\nexport default function Demo() {\n const [date, setDate] = useState('2026-09-20');\n\n return <KoleDatePicker value={date} format=\"YYYY-MM-DD\" onChange={setDate} />;\n}",
|
||
"vue3": "<template>\n <KoleDatePicker :value=\"date\" format=\"YYYY-MM-DD\" @change=\"onChange\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleDatePicker } from 'kole-ui/vue3';\n\nconst date = ref('2026-09-20');\n\nfunction onChange(next) {\n date.value = next;\n}\n</script>",
|
||
"vue2": "<template>\n <KoleDatePicker :value=\"date\" format=\"YYYY-MM-DD\" @change=\"onChange\" />\n</template>\n\n<script>\nimport { KoleDatePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDatePicker },\n data() {\n return { date: '2026-09-20' };\n },\n methods: {\n onChange(next) {\n this.date = next;\n },\n },\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleDatePicker } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n const [date, setDate] = useState<string>('2026-09-20');\n\n return <KoleDatePicker value={date} format=\"YYYY-MM-DD\" onChange={setDate} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleDatePicker :value=\"date\" format=\"YYYY-MM-DD\" @change=\"onChange\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDatePicker } from 'kole-ui/vue3';\n\nconst date = ref<string>('2026-09-20');\n\nfunction onChange(next) {\n date.value = next;\n}\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleDatePicker :value=\"date\" format=\"YYYY-MM-DD\" @change=\"onChange\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDatePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDatePicker },\n data(): Record<string, unknown> {\n return { date: '2026-09-20' };\n },\n methods: {\n onChange(next) {\n this.date = next;\n },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/DatePicker.html:5 第一个 demo-block 的 label.kole-datepicker-item（「日期」+ input[type=date] value=2026-09-20）；prop 取 frameworks/DatePicker.jsx:4 的 value、format 与 onChange 回写"
|
||
]
|
||
},
|
||
{
|
||
"id": "datepicker-ex-2",
|
||
"title": "状态与使用场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-datepicker\">\n <div class=\"kole-datepicker-surface\" style=\"padding:12px\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</div>\n <span class=\"kole-datepicker-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-datepicker\">\n <div class=\"kole-datepicker-surface\" style=\"padding:12px\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</div>\n <span class=\"kole-datepicker-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||
"jsx": "import { KoleDatePicker } from 'kole-ui/react';\n\nconst PRESETS = ['今天', '近 7 天', '本月'];\n\n<>\n <span className=\"kole-datepicker-desc\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</span>\n <KoleDatePicker value=\"2026-09-01\" range format=\"YYYY-MM-DD\" presets={PRESETS} />\n</>",
|
||
"vue3": "<template>\n <div class=\"kole-datepicker-row\">\n <span class=\"kole-datepicker-desc\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</span>\n <KoleDatePicker :value=\"start\" range format=\"YYYY-MM-DD\" :presets=\"presets\" />\n </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleDatePicker } from 'kole-ui/vue3';\n\nconst start = ref('2026-09-01');\nconst presets = ['今天', '近 7 天', '本月'];\n</script>",
|
||
"vue2": "<template>\n <div class=\"kole-datepicker-row\">\n <span class=\"kole-datepicker-desc\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</span>\n <KoleDatePicker :value=\"start\" range format=\"YYYY-MM-DD\" :presets=\"presets\" />\n </div>\n</template>\n\n<script>\nimport { KoleDatePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDatePicker },\n data() {\n return { start: '2026-09-01', presets: ['今天', '近 7 天', '本月'] };\n },\n};\n</script>",
|
||
"tsx": "import { KoleDatePicker } from 'kole-ui/react';\n\nexport default function KoleDatePickerDemo(): JSX.Element {\n const PRESETS = ['今天', '近 7 天', '本月'];\n return (\n <>\n <span className=\"kole-datepicker-desc\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</span>\n <KoleDatePicker value=\"2026-09-01\" range format=\"YYYY-MM-DD\" presets={PRESETS} />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <div class=\"kole-datepicker-row\">\n <span class=\"kole-datepicker-desc\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</span>\n <KoleDatePicker :value=\"start\" range format=\"YYYY-MM-DD\" :presets=\"presets\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDatePicker } from 'kole-ui/vue3';\n\nconst start = ref<string>('2026-09-01');\nconst presets = ['今天', '近 7 天', '本月'];\n</script>",
|
||
"vue2ts": "<template>\n\n <div class=\"kole-datepicker-row\">\n <span class=\"kole-datepicker-desc\">选择单日或起止日期，适用于查询条件、有效期和排期设置。</span>\n <KoleDatePicker :value=\"start\" range format=\"YYYY-MM-DD\" :presets=\"presets\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDatePicker } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDatePicker },\n data(): Record<string, unknown> {\n return { start: '2026-09-01', presets: ['今天', '近 7 天', '本月'] };\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/DatePicker.html:5 第二个 demo-block（span.kole-datepicker-desc 说明文案）；range/presets 取 frameworks/DatePicker.jsx:4 的 range、presets，对应演示页第一个 demo-block 的「本月」快捷按钮（DatePicker.html:5）"
|
||
]
|
||
}
|
||
]
|
||
}
|