king-design-analyzer 2.2.0 → 2.2.1

package/components/scrollselect.json

@@ -0,0 +1,140 @@
+{
+    "id": "scrollselect",
+    "name": "ScrollSelect",
+    "displayName": "滚动选择器",
+    "category": "form",
+    "description": "滚动选择器组件，通过滚轮、拖拽或点击来选择值。适合时间、年份、数值区间等连续选项场景，也可以通过函数动态生成可选数据。",
+    "importStatement": "import { ScrollSelect } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前选中值，可用 v-model 双向绑定",
+            "type": {
+                "raw": "T",
+                "kind": "generic"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<ScrollSelect v-model=\"year\" :data=\"years\" />"
+        },
+        {
+            "name": "count",
+            "description": "可视区域中渲染的数据个数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "5",
+            "usageExample": "<ScrollSelect :count=\"10\" />"
+        },
+        {
+            "name": "data",
+            "description": "可选数据列表，或根据当前值动态生成数据的方法",
+            "type": {
+                "raw": "Data<T> = DataItem<T>[] | ((v: T) => DataItem<T>[])",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "[]",
+            "usageExample": "<ScrollSelect :data=\"[{ value: 1, label: '一月' }]\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用整个选择器",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<ScrollSelect disabled :data=\"years\" />"
+        },
+        {
+            "name": "disable",
+            "description": "按值控制单项是否禁用",
+            "type": {
+                "raw": "(v: T) => boolean",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<ScrollSelect :disable=\"(v) => v < 2020\" />"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "append",
+            "description": "在滚动选择器后追加额外内容，例如单位说明",
+            "bindingType": "none",
+            "vueTemplate": "#append",
+            "usageExample": "<ScrollSelect v-model=\"hour\" :data=\"hours\"><template #append>时</template></ScrollSelect>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "scrollselect_basic",
+            "title": "基础用法",
+            "description": "使用静态数据创建一个年份选择器。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ScrollSelect } from '@king-design/vue';\n\nconst year = ref(2024);\nconst years = Array.from({ length: 7 }, (_, index) => ({\n  value: 2021 + index,\n  label: `${2021 + index} 年`,\n}));\n</script>\n<template>\n  <ScrollSelect v-model=\"year\" :data=\"years\" />\n</template>",
+            "tags": [
+                "basic",
+                "static-data"
+            ],
+            "usedProps": [
+                "value",
+                "data"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在时间和数值选择场景中提供滚动选择交互。"
+        },
+        {
+            "id": "scrollselect_dynamic",
+            "title": "动态生成数据",
+            "description": "根据当前选中值动态生成附近的年份选项。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { ScrollSelect } from '@king-design/vue';\n\nconst currentYear = ref(2025);\nconst generateYears = (value: number) => {\n  const start = value - 3;\n  return Array.from({ length: 7 }, (_, index) => {\n    const year = start + index;\n    return {\n      value: year,\n      label: `${year} 年`,\n    };\n  });\n};\n</script>\n<template>\n  <ScrollSelect v-model=\"currentYear\" :count=\"7\" :data=\"generateYears\">\n    <template #append>年份</template>\n  </ScrollSelect>\n</template>",
+            "tags": [
+                "dynamic-data",
+                "append"
+            ],
+            "usedProps": [
+                "value",
+                "count",
+                "data"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "append"
+            ],
+            "usedMethods": [],
+            "scenario": "在时间滚轮或区间选择中按需生成可见窗口数据。"
+        }
+    ],
+    "searchKeywords": [
+        "scrollselect",
+        "滚动选择器",
+        "时间滚轮",
+        "year picker"
+    ],
+    "useCases": [
+        "年份或月份选择",
+        "时间滚轮",
+        "连续数值选择"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ScrollSelectDataItem",
+            "definition": "type ScrollSelectDataItem<T = any> = { value: T; label: Children }",
+            "description": "滚动选择器的数据项结构。"
+        }
+    ],
+    "relatedComponents": [
+        "Datepicker",
+        "Timepicker"
+    ]
+}

package/components/select.json

@@ -354,6 +354,69 @@
             "handlerExample": "const handleHide = () => {\n  console.log('下拉菜单已关闭');\n};"
         }
     ],
+    "slots": [
+        {
+            "name": "value",
+            "description": "自定义单选模式下的已选值展示内容",
+            "bindingType": "array",
+            "slotProps": [
+                {
+                    "name": "value",
+                    "type": "T",
+                    "description": "当前选中的值",
+                    "destructuringExample": "[value]"
+                },
+                {
+                    "name": "label",
+                    "type": "string",
+                    "description": "当前选中值对应的展示文案"
+                }
+            ],
+            "vueTemplate": "#value=\"[value, label]\"",
+            "usageExample": "<Select v-model=\"selected\">\n  <template #value=\"[value, label]\">\n    <span>{{ label }} ({{ value }})</span>\n  </template>\n</Select>"
+        },
+        {
+            "name": "values",
+            "description": "自定义多选模式下的已选值展示内容",
+            "bindingType": "array",
+            "slotProps": [
+                {
+                    "name": "values",
+                    "type": "T[]",
+                    "description": "当前选中的值数组",
+                    "destructuringExample": "[values]"
+                },
+                {
+                    "name": "labels",
+                    "type": "string[]",
+                    "description": "当前选中值对应的展示文案数组"
+                }
+            ],
+            "vueTemplate": "#values=\"[values, labels]\"",
+            "usageExample": "<Select v-model=\"selectedList\" multiple>\n  <template #values=\"[values, labels]\">\n    <span>已选 {{ labels.length }} 项</span>\n  </template>\n</Select>"
+        },
+        {
+            "name": "prefix",
+            "description": "扩展选择框前缀内容",
+            "bindingType": "none",
+            "vueTemplate": "#prefix",
+            "usageExample": "<Select>\n  <template #prefix>\n    <span class=\"k-icon-search\"></span>\n  </template>\n</Select>"
+        },
+        {
+            "name": "suffix",
+            "description": "扩展选择框后缀内容",
+            "bindingType": "none",
+            "vueTemplate": "#suffix",
+            "usageExample": "<Select>\n  <template #suffix>\n    <span>自定义</span>\n  </template>\n</Select>"
+        },
+        {
+            "name": "menu",
+            "description": "自定义整个下拉菜单区域",
+            "bindingType": "none",
+            "vueTemplate": "#menu",
+            "usageExample": "<Select>\n  <template #menu>\n    <div>自定义菜单内容</div>\n  </template>\n</Select>"
+        }
+    ],
     "methods": [
         {
             "name": "show",

package/components/skeleton.json

@@ -66,6 +66,7 @@
         {
             "name": "default",
             "description": "自定义骨架内容。当 loading 为 true 时，默认插槽内容会作为骨架结构渲染。",
+            "bindingType": "none",
             "vueTemplate": "<Skeleton :loading=\"loading\">...</Skeleton>",
             "usageExample": "<Skeleton :loading=\"loading\"><div style=\"display:flex; gap:12px;\"><SkeletonItem type=\"avator\" /><div style=\"flex:1;\"><SkeletonItem type=\"text\" /><SkeletonItem type=\"text\" /></div></div></Skeleton>"
         }

package/components/slider.json

@@ -218,7 +218,17 @@
     "slots": [
         {
             "name": "tooltip",
-            "description": "当展示提示气泡，定义气泡的内容，和Tooltip组件行为一样，如果你传入空的内容，则不会展示气泡"
+            "description": "当展示提示气泡时，自定义气泡内容；参数为当前滑块值，范围模式下为当前指针对应的值。",
+            "bindingType": "single",
+            "slotProps": [
+                {
+                    "name": "value",
+                    "type": "number | [number, number]",
+                    "description": "当前提示气泡对应的滑块值"
+                }
+            ],
+            "vueTemplate": "<template #tooltip=\"value\">...</template>",
+            "usageExample": "<Slider v-model=\"value\" showTooltip>\n  <template #tooltip=\"value\">\n    {{ value }}%\n  </template>\n</Slider>"
         }
     ],
     "methods": [],
@@ -419,4 +429,4 @@
     "relatedComponents": [
         "Spinner"
     ]
-}
+}

package/components/spin.json

@@ -69,7 +69,8 @@
     "slots": [
         {
             "name": "canvas",
-            "description": "自定义旋转的元素内容"
+            "description": "自定义旋转的元素内容",
+            "bindingType": "none"
         }
     ],
     "methods": [],