{
	"schemaVersion": 1,
	"sourceSha": "281c9734cc502432e7665cfcf9a528ae09d5af1a",
	"components": [
		{
			"name": "AsamConfigProvider",
			"documentation": "/component-AsamConfigProvider.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/basic/ts/Demo.vue",
									"sha256": "c501cbc741cfbb71ed98706fc9d226fea03fbc4b5e4feb690b5bf46f7a37f306",
									"source": "<template>\n\t<label>\n\t\t<span>继承密度</span>\n\t\t<AsamSelect v-model=\"size\">\n\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\tvalue\n\t\t\t}}</AsamOption>\n\t\t</AsamSelect>\n\t</label>\n\t<AsamConfigProvider :size=\"size\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamTag>继承 {{ size }}</AsamTag>\n\t\t\t<AsamTag size=\"small\">显式 small 优先</AsamTag>\n\t\t</div>\n\t</AsamConfigProvider>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamConfigProvider, AsamTag } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst size = ref<AsamControlSize>('default');\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/basic/js/Demo.vue",
									"sha256": "ebcc11c50056a30f1a3995a4d666b9ac70872e3130a2aff5595d4f4c026256ac",
									"source": "<template>\n\t<label>\n\t\t<span>继承密度</span>\n\t\t<AsamSelect v-model=\"size\">\n\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\tvalue\n\t\t\t}}</AsamOption>\n\t\t</AsamSelect>\n\t</label>\n\t<AsamConfigProvider :size=\"size\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamTag>继承 {{ size }}</AsamTag>\n\t\t\t<AsamTag size=\"small\">显式 small 优先</AsamTag>\n\t\t</div>\n\t</AsamConfigProvider>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamConfigProvider, AsamTag } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('default');\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-usage",
					"title": "i18n 配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-usage/ts/Demo.vue",
									"sha256": "3d9d42c50ab83dbfb4ce0d45449dd25ef3c5cd8117dff53901d47c9e322433fd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<AsamButton type=\"default\" class=\"ui032-mb-2\" @click=\"toggle\">切换语言</AsamButton>\n\t\t<br />\n\n\t\t<AsamConfigProvider :locale=\"locale\">\n\t\t\t<div class=\"demo-provider-layout-1\">\n\t\t\t\t<AsamTable :data=\"[]\" class=\"ui032-mb-1\" />\n\t\t\t\t<AsamPagination :total=\"100\" />\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapUsageDemo' });\nimport { AsamButton, AsamConfigProvider, AsamTable, AsamPagination } from '@asam-ui/ui';\n\nimport { computed, ref } from 'vue';\nimport { asamLocaleZhCn as zhCn } from '@asam-ui/ui';\nimport { asamLocaleEn as en } from '@asam-ui/ui';\n\nconst language = ref('zh-cn');\nconst locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));\n\nconst toggle = () => {\n\tlanguage.value = language.value === 'zh-cn' ? 'en' : 'zh-cn';\n};\n</script>\n\n<style scoped>\n.ui032-mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n\n.ui032-mb-1 {\n\tmargin-bottom: var(--asam-space-xs);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-provider-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-provider-layout-1 > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "332dbba1fa65a57c7617d382fc3f4f5533083c047c464d3368ded54faf289f38",
									"notice": {
										"id": "958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267",
										"url": "/licenses/source-notices/958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt",
										"licenseFilename": "LICENSE-958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/usage.vue",
											"sourceSha256": "cc9c1c98d6268d646eca175a0eb181a13b28fc78c29dc23486cbf1fcffcd573a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-usage/js/Demo.vue",
									"sha256": "4ba2720a0efd89a6d7aa10ec383342bbf494f5edef989e0d74530b9688503ec7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<AsamButton type=\"default\" class=\"ui032-mb-2\" @click=\"toggle\">切换语言</AsamButton>\n\t\t<br />\n\n\t\t<AsamConfigProvider :locale=\"locale\">\n\t\t\t<div class=\"demo-provider-layout-1\">\n\t\t\t\t<AsamTable :data=\"[]\" class=\"ui032-mb-1\" />\n\t\t\t\t<AsamPagination :total=\"100\" />\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapUsageDemo' });\nimport { AsamButton, AsamConfigProvider, AsamTable, AsamPagination } from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nimport { asamLocaleZhCn as zhCn } from '@asam-ui/ui';\nimport { asamLocaleEn as en } from '@asam-ui/ui';\nconst language = ref('zh-cn');\nconst locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));\nconst toggle = () => {\n\tlanguage.value = language.value === 'zh-cn' ? 'en' : 'zh-cn';\n};\n</script>\n\n<style scoped>\n.ui032-mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n\n.ui032-mb-1 {\n\tmargin-bottom: var(--asam-space-xs);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-provider-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-provider-layout-1 > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "c8fa9704c8469b50830cb22c1b61f22815a863b846236af70e07eada41d6d9eb",
									"notice": {
										"id": "958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267",
										"url": "/licenses/source-notices/958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt",
										"licenseFilename": "LICENSE-958014fa179d5e45e0adb1b69b815592fa9555e7f1e1d48cdb185896950c2267.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/usage.vue",
											"sourceSha256": "cc9c1c98d6268d646eca175a0eb181a13b28fc78c29dc23486cbf1fcffcd573a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-button",
					"title": "对按钮进行配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-button/ts/Demo.vue",
									"sha256": "a18f719e10451fe6a420fde16a7e7e881e495f62ac0efc15d7a4fa3866338488",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.autoInsertSpace\"\n\t\t\t\tactive-text=\"autoInsertSpace\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.autoInsertSpace = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.plain\"\n\t\t\t\tactive-text=\"plain\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.plain = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.round\"\n\t\t\t\tactive-text=\"round\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.round = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.dashed\"\n\t\t\t\tactive-text=\"dashed\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.dashed = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.text\"\n\t\t\t\tactive-text=\"text\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.text = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSelect\n\t\t\t\t:model-value=\"config.type\"\n\t\t\t\tclass=\"ml-5\"\n\t\t\t\tstyle=\"max-width: 150px\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value: unknown) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tvalue === 'primary' ||\n\t\t\t\t\t\t\tvalue === 'success' ||\n\t\t\t\t\t\t\tvalue === 'warning' ||\n\t\t\t\t\t\t\tvalue === 'danger' ||\n\t\t\t\t\t\t\tvalue === 'info' ||\n\t\t\t\t\t\t\tvalue === 'default'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\tconfig.type = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t<AsamOption v-for=\"type in buttonTypes.filter(Boolean)\" :key=\"type\" :value=\"type\" />\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :button=\"config\">\n\t\t\t<AsamButton>中文</AsamButton>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapButtonDemo' });\nimport {\n\tAsamSwitch,\n\tAsamSelect,\n\tAsamOption,\n\tAsamDivider,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\n\nimport { reactive } from 'vue';\nconst buttonTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'] as const;\n\nimport type { AsamConfigProviderButtonConfigContext } from '@asam-ui/ui';\n\nconst config = reactive<AsamConfigProviderButtonConfigContext>({\n\tautoInsertSpace: true,\n\ttype: 'default',\n\tplain: true,\n\tround: true,\n\ttext: false,\n\tdashed: false\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.ml-5 {\n\tmargin-left: 1.25rem;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "bdcef35caadb7ce50b65a0b42d4dc6e13a033e19542ec76ae019c30fd0487cce",
									"notice": {
										"id": "0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841",
										"url": "/licenses/source-notices/0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt",
										"licenseFilename": "LICENSE-0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/button.vue",
											"sourceSha256": "d13605125768023bde55f7954edebee908f70808eb3bf1a384682496563f6d57",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-button/js/Demo.vue",
									"sha256": "563b63e614ff2aa11624db0aaf9f2d293563ede821fd6435cdfd18639874e609",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.autoInsertSpace\"\n\t\t\t\tactive-text=\"autoInsertSpace\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.autoInsertSpace = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.plain\"\n\t\t\t\tactive-text=\"plain\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.plain = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.round\"\n\t\t\t\tactive-text=\"round\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.round = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.dashed\"\n\t\t\t\tactive-text=\"dashed\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.dashed = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.text\"\n\t\t\t\tactive-text=\"text\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.text = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSelect\n\t\t\t\t:model-value=\"config.type\"\n\t\t\t\tclass=\"ml-5\"\n\t\t\t\tstyle=\"max-width: 150px\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tvalue === 'primary' ||\n\t\t\t\t\t\t\tvalue === 'success' ||\n\t\t\t\t\t\t\tvalue === 'warning' ||\n\t\t\t\t\t\t\tvalue === 'danger' ||\n\t\t\t\t\t\t\tvalue === 'info' ||\n\t\t\t\t\t\t\tvalue === 'default'\n\t\t\t\t\t\t)\n\t\t\t\t\t\t\tconfig.type = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t<AsamOption v-for=\"type in buttonTypes.filter(Boolean)\" :key=\"type\" :value=\"type\" />\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :button=\"config\">\n\t\t\t<AsamButton>中文</AsamButton>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapButtonDemo' });\nimport {\n\tAsamSwitch,\n\tAsamSelect,\n\tAsamOption,\n\tAsamDivider,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nimport { reactive } from 'vue';\nconst buttonTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'];\nconst config = reactive({\n\tautoInsertSpace: true,\n\ttype: 'default',\n\tplain: true,\n\tround: true,\n\ttext: false,\n\tdashed: false\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.ml-5 {\n\tmargin-left: 1.25rem;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "c93f387192f3426cfc1f77c24b7741e984a836558f239d8cd5974cc9e15c8572",
									"notice": {
										"id": "0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841",
										"url": "/licenses/source-notices/0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt",
										"licenseFilename": "LICENSE-0ef3cb5bf7a1aaedd9fa31af58f67213c02a32bb1d1740113a393e613289a841.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/button.vue",
											"sourceSha256": "d13605125768023bde55f7954edebee908f70808eb3bf1a384682496563f6d57",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-link",
					"title": "对链接进行配置2.9.11",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-link/ts/Demo.vue",
									"sha256": "23b8d7c2b2f8f24b1c2ebf53c8a8cec3ad738d764865839cbbd3b983755d598b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt\n-->\n<template>\n\t<div>\n\t\t<div class=\"flex gap-4\">\n\t\t\t<div class=\"flex flex-col basis-150px demo-gap\">\n\t\t\t\t<span>类型：</span>\n\t\t\t\t<AsamSelect\n\t\t\t\t\t:model-value=\"config.type\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value: unknown) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tvalue === 'primary' ||\n\t\t\t\t\t\t\t\tvalue === 'success' ||\n\t\t\t\t\t\t\t\tvalue === 'warning' ||\n\t\t\t\t\t\t\t\tvalue === 'danger' ||\n\t\t\t\t\t\t\t\tvalue === 'info' ||\n\t\t\t\t\t\t\t\tvalue === 'default'\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\tconfig.type = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<AsamOption v-for=\"type in linkTypes\" :key=\"type\" :value=\"type\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<div class=\"flex flex-col basis-150px demo-gap\">\n\t\t\t\t<span>下划线：</span>\n\t\t\t\t<AsamSelect\n\t\t\t\t\t:model-value=\"config.underline\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value: unknown) => {\n\t\t\t\t\t\t\tif (value === 'always' || value === 'hover' || value === 'never')\n\t\t\t\t\t\t\t\tconfig.underline = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<AsamOption v-for=\"type in underlineOptions\" :key=\"type\" :value=\"type\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :link=\"config\">\n\t\t\t<AsamLink>链接示例</AsamLink>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapLinkDemo' });\nimport { AsamSelect, AsamOption, AsamDivider, AsamConfigProvider, AsamLink } from '@asam-ui/ui';\n\nimport { reactive } from 'vue';\n\nimport type { AsamConfigProviderLinkConfigContext } from '@asam-ui/ui';\n\nconst linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default'];\nconst underlineOptions = ['always', 'never', 'hover'];\n\nconst config = reactive<AsamConfigProviderLinkConfigContext>({\n\ttype: 'success',\n\tunderline: 'always'\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n\n.flex-col {\n\tflex-direction: column;\n}\n\n.basis-150px {\n\tflex-basis: 150px;\n}\n\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "757bace45913eb32b0c02a413f4ef0b3db874f7c784a54730e2a4ea3b9a3db27",
									"notice": {
										"id": "9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8",
										"url": "/licenses/source-notices/9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt",
										"licenseFilename": "LICENSE-9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/link.vue",
											"sourceSha256": "ac6916996cb09a96c9a472cbf08d4f24d24c1435e76f2b680cc925e8cdd8ae46",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-link/js/Demo.vue",
									"sha256": "8eae42bda06b67704eebb397121388171db0f21a099efb2268b68bcc82ea4add",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt\n-->\n<template>\n\t<div>\n\t\t<div class=\"flex gap-4\">\n\t\t\t<div class=\"flex flex-col basis-150px demo-gap\">\n\t\t\t\t<span>类型：</span>\n\t\t\t\t<AsamSelect\n\t\t\t\t\t:model-value=\"config.type\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tvalue === 'primary' ||\n\t\t\t\t\t\t\t\tvalue === 'success' ||\n\t\t\t\t\t\t\t\tvalue === 'warning' ||\n\t\t\t\t\t\t\t\tvalue === 'danger' ||\n\t\t\t\t\t\t\t\tvalue === 'info' ||\n\t\t\t\t\t\t\t\tvalue === 'default'\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\tconfig.type = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<AsamOption v-for=\"type in linkTypes\" :key=\"type\" :value=\"type\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<div class=\"flex flex-col basis-150px demo-gap\">\n\t\t\t\t<span>下划线：</span>\n\t\t\t\t<AsamSelect\n\t\t\t\t\t:model-value=\"config.underline\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (value === 'always' || value === 'hover' || value === 'never')\n\t\t\t\t\t\t\t\tconfig.underline = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<AsamOption v-for=\"type in underlineOptions\" :key=\"type\" :value=\"type\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :link=\"config\">\n\t\t\t<AsamLink>链接示例</AsamLink>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapLinkDemo' });\nimport { AsamSelect, AsamOption, AsamDivider, AsamConfigProvider, AsamLink } from '@asam-ui/ui';\nimport { reactive } from 'vue';\nconst linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default'];\nconst underlineOptions = ['always', 'never', 'hover'];\nconst config = reactive({\n\ttype: 'success',\n\tunderline: 'always'\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n\n.flex-col {\n\tflex-direction: column;\n}\n\n.basis-150px {\n\tflex-basis: 150px;\n}\n\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "920246267018ed863c04ee22241428c72d60daba420ac4187073b9b510424fd0",
									"notice": {
										"id": "9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8",
										"url": "/licenses/source-notices/9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt",
										"licenseFilename": "LICENSE-9cd45b6ce88479c1e538ca5919fd10a573b838cdc2d8d3a10a8526a8ee1994d8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/link.vue",
											"sourceSha256": "ac6916996cb09a96c9a472cbf08d4f24d24c1435e76f2b680cc925e8cdd8ae46",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-card",
					"title": "对 Card 进行配置 2.10.5",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-card/ts/Demo.vue",
									"sha256": "e8e249ec4b8527caaca0c24285d7c5b19b2137daf40ec5990beb307eb901cb05",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt\n-->\n<template>\n\t阴影：\n\t<div class=\"flex flex-col justify-center\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"config.shadow\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (value === 'always' || value === 'hover' || value === 'never')\n\t\t\t\t\t\tconfig.shadow = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamRadioItem value=\"always\">always</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"hover\">hover</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"never\">never</AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :card=\"config\">\n\t\t\t<AsamCard>卡片示例</AsamCard>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapCardDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioItem,\n\tAsamDivider,\n\tAsamConfigProvider,\n\tAsamCard\n} from '@asam-ui/ui';\n\nimport { reactive } from 'vue';\n\nimport type { AsamConfigProviderCardConfigContext } from '@asam-ui/ui';\n\nconst config = reactive<AsamConfigProviderCardConfigContext>({\n\tshadow: 'always'\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-col {\n\tflex-direction: column;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "dfe53a55676c794dd06b4fc7d836b5a095c60c476525d00f410f3de43fd8580b",
									"notice": {
										"id": "633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b",
										"url": "/licenses/source-notices/633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt",
										"licenseFilename": "LICENSE-633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/card.vue",
											"sourceSha256": "832832d9058b542c18ab16268a94308a08d14eb43cf200b858ab20de83aab9b2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-card/js/Demo.vue",
									"sha256": "7eca26f75ff9b1fdcdedc925794bbb356b241f8f1b66d1c04afe0eb2ec29e263",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt\n-->\n<template>\n\t阴影：\n\t<div class=\"flex flex-col justify-center\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"config.shadow\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (value === 'always' || value === 'hover' || value === 'never')\n\t\t\t\t\t\tconfig.shadow = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamRadioItem value=\"always\">always</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"hover\">hover</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"never\">never</AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :card=\"config\">\n\t\t\t<AsamCard>卡片示例</AsamCard>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapCardDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioItem,\n\tAsamDivider,\n\tAsamConfigProvider,\n\tAsamCard\n} from '@asam-ui/ui';\nimport { reactive } from 'vue';\nconst config = reactive({\n\tshadow: 'always'\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-col {\n\tflex-direction: column;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "d6b2cf38057fc2371e68a9a0da2e77c0aef157ed515d1b002351bd9cb332de2f",
									"notice": {
										"id": "633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b",
										"url": "/licenses/source-notices/633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt",
										"licenseFilename": "LICENSE-633e0d867d9e971f2ca580f5c28004f845dab7823ed134d402c7a373122d2b5b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/card.vue",
											"sourceSha256": "832832d9058b542c18ab16268a94308a08d14eb43cf200b858ab20de83aab9b2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-dialog",
					"title": "对 Dialog 进行配置 2.10.7",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-dialog/ts/Demo.vue",
									"sha256": "107d1915ed5a9ff3ea7b0aa7964f0ce56049d26b599398f2e3df4a9b9280656e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt\n-->\n<template>\n\t<div class=\"flex flex-col gap-4 justify-center\">\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.alignCenter\"\n\t\t\t\tactive-text=\"alignCenter\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.alignCenter = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-4\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.draggable\"\n\t\t\t\tactive-text=\"draggable\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.draggable = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.overflow\"\n\t\t\t\t:disabled=\"!config.draggable\"\n\t\t\t\tactive-text=\"overflow\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.overflow = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"enableTransition\"\n\t\t\t\tactive-text=\"启用过渡效果\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') enableTransition = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"isObjectTransition\"\n\t\t\t\t:disabled=\"!enableTransition\"\n\t\t\t\tactive-text=\"transition: object\"\n\t\t\t\tinactive-text=\"transition: string\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') isObjectTransition = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamButton\n\t\t\t\tref=\"buttonRef\"\n\t\t\t type=\"default\"\n\t\t\t\tsize=\"small\"\n\t\t\t\t@click=\"visible = true\"\n\t\t\t>\n\t\t\t\t打开对话框\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<AsamConfigProvider :dialog=\"globalConfig\">\n\t\t\t<AsamDialog v-model=\"visible\" title=\"对话框标题\" destroy-on-close>\n\t\t\t\t对话框内容\n\t\t\t</AsamDialog>\n\t\t</AsamConfigProvider>\n\t\t<div v-if=\"enableTransition\" class=\"text-xs opacity-70\">\n\t\t\t<div v-if=\"isObjectTransition\">\n\t\t\t\t使用 JavaScript 控制动画：\n\t\t\t\t<code>{{ JSON.stringify(globalConfig.transition) }}</code>\n\t\t\t</div>\n\t\t\t<div v-else>\n\t\t\t\t使用字符串过渡名称：\n\t\t\t\t<code>{{ globalConfig.transition }}</code>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapDialogDemo' });\nimport { AsamSwitch, AsamButton, AsamConfigProvider, AsamDialog } from '@asam-ui/ui';\n\nimport { computed, nextTick, ref, shallowReactive } from 'vue';\n\nimport type { AsamButtonExpose, AsamConfigProviderProps } from '@asam-ui/ui';\n\ntype GlobalConfig = {\n\talignCenter: boolean;\n\tdraggable: boolean;\n\toverflow: boolean;\n\ttransition?: NonNullable<AsamConfigProviderProps['dialog']>['transition'];\n};\n\nconst config = shallowReactive<GlobalConfig>({\n\talignCenter: false,\n\tdraggable: false,\n\toverflow: false\n});\nconst visible = ref(false);\nconst enableTransition = ref(false);\nconst isObjectTransition = ref(false);\n\nconst buttonRef = ref<AsamButtonExpose>();\n\nconst ANIMATION_DURATION = 300;\n\nconst globalConfig = computed<GlobalConfig>(() => {\n\tlet transition: NonNullable<AsamConfigProviderProps['dialog']>['transition'] | undefined;\n\tif (enableTransition.value) {\n\t\tif (isObjectTransition.value) {\n\t\t\ttransition = {\n\t\t\t\tcss: false,\n\t\t\t\tonBeforeEnter(el) {\n\t\t\t\t\tnextTick(() => {\n\t\t\t\t\t\tif (buttonRef.value) {\n\t\t\t\t\t\t\tconst buttonRect = buttonRef.value.ref!.getBoundingClientRect();\n\t\t\t\t\t\t\tconst dialogEl = el.querySelector('.el-dialog') as HTMLElement;\n\n\t\t\t\t\t\t\tif (dialogEl) {\n\t\t\t\t\t\t\t\tconst dialogRect = dialogEl.getBoundingClientRect();\n\n\t\t\t\t\t\t\t\tconst offsetX =\n\t\t\t\t\t\t\t\t\tbuttonRect.left +\n\t\t\t\t\t\t\t\t\tbuttonRect.width / 2 -\n\t\t\t\t\t\t\t\t\t(dialogRect.left + dialogRect.width / 2);\n\t\t\t\t\t\t\t\tconst offsetY =\n\t\t\t\t\t\t\t\t\tbuttonRect.top +\n\t\t\t\t\t\t\t\t\tbuttonRect.height / 2 -\n\t\t\t\t\t\t\t\t\t(dialogRect.top + dialogRect.height / 2);\n\n\t\t\t\t\t\t\t\tdialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;\n\t\t\t\t\t\t\t\tdialogEl.style.opacity = '0';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tonEnter(el, done) {\n\t\t\t\t\tnextTick(() => {\n\t\t\t\t\t\tconst dialogEl = el.querySelector('.el-dialog') as HTMLElement;\n\t\t\t\t\t\tif (dialogEl) {\n\t\t\t\t\t\t\t// force reflow\n\t\t\t\t\t\t\tvoid dialogEl.offsetHeight;\n\n\t\t\t\t\t\t\tdialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;\n\t\t\t\t\t\t\tdialogEl.style.transform = 'translate(0, 0) scale(1)';\n\t\t\t\t\t\t\tdialogEl.style.opacity = '1';\n\n\t\t\t\t\t\t\t// wait for animation to complete, then cleanup inline styles to avoid affecting drag\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tdialogEl.style.transition = '';\n\t\t\t\t\t\t\t\tdialogEl.style.transform = '';\n\t\t\t\t\t\t\t\tdialogEl.style.opacity = '';\n\t\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t\t}, ANIMATION_DURATION);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tonLeave(el, done) {\n\t\t\t\t\tconst dialogEl = el.querySelector('.el-dialog') as HTMLElement;\n\t\t\t\t\tif (dialogEl) {\n\t\t\t\t\t\tif (buttonRef.value) {\n\t\t\t\t\t\t\tconst buttonRect = buttonRef.value.ref!.getBoundingClientRect();\n\t\t\t\t\t\t\tconst dialogRect = dialogEl.getBoundingClientRect();\n\n\t\t\t\t\t\t\tconst currentTransform = dialogEl.style.transform;\n\t\t\t\t\t\t\tlet dragOffsetX = 0;\n\t\t\t\t\t\t\tlet dragOffsetY = 0;\n\n\t\t\t\t\t\t\t// avoid draggable effect\n\t\t\t\t\t\t\tif (currentTransform) {\n\t\t\t\t\t\t\t\tconst translateMatch = currentTransform.match(\n\t\t\t\t\t\t\t\t\t/translate\\(([^,]+),\\s*([^)]+)\\)/\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tif (translateMatch) {\n\t\t\t\t\t\t\t\t\tdragOffsetX = Number.parseFloat(translateMatch[1]);\n\t\t\t\t\t\t\t\t\tdragOffsetY = Number.parseFloat(translateMatch[2]);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst offsetX =\n\t\t\t\t\t\t\t\tbuttonRect.left +\n\t\t\t\t\t\t\t\tbuttonRect.width / 2 -\n\t\t\t\t\t\t\t\t(dialogRect.left + dialogRect.width / 2) +\n\t\t\t\t\t\t\t\tdragOffsetX;\n\t\t\t\t\t\t\tconst offsetY =\n\t\t\t\t\t\t\t\tbuttonRect.top +\n\t\t\t\t\t\t\t\tbuttonRect.height / 2 -\n\t\t\t\t\t\t\t\t(dialogRect.top + dialogRect.height / 2) +\n\t\t\t\t\t\t\t\tdragOffsetY;\n\n\t\t\t\t\t\t\tdialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;\n\t\t\t\t\t\t\tdialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;\n\t\t\t\t\t\t\tdialogEl.style.opacity = '0';\n\n\t\t\t\t\t\t\t// wait for animation to complete, then cleanup inline styles\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tdialogEl.style.transition = '';\n\t\t\t\t\t\t\t\tdialogEl.style.transform = '';\n\t\t\t\t\t\t\t\tdialogEl.style.opacity = '';\n\t\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t\t}, ANIMATION_DURATION);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdone();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t} else {\n\t\t\ttransition = 'dialog-bounce';\n\t\t}\n\t}\n\treturn {\n\t\talignCenter: config.alignCenter,\n\t\tdraggable: config.draggable,\n\t\toverflow: config.overflow,\n\t\ttransition\n\t};\n});\n</script>\n\n<style>\n/* Bounce Animation */\n.dialog-bounce-enter-active,\n.dialog-bounce-leave-active,\n.dialog-bounce-enter-active .el-dialog,\n.dialog-bounce-leave-active .el-dialog {\n\ttransition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.dialog-bounce-enter-from,\n.dialog-bounce-leave-to {\n\topacity: 0;\n}\n\n.dialog-bounce-enter-from .el-dialog,\n.dialog-bounce-leave-to .el-dialog {\n\ttransform: scale(0.3) translateY(-50px);\n\topacity: 0;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-col {\n\tflex-direction: column;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.text-xs {\n\tfont-size: var(--el-font-size-extra-small);\n}\n\n.opacity-70 {\n\topacity: 0.7;\n}\n</style>\n",
									"originalSourceSha256": "40ac5fd5f60f6879df3b06cdcae88684665456508622b742f2a44facd5962af1",
									"notice": {
										"id": "8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00",
										"url": "/licenses/source-notices/8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt",
										"licenseFilename": "LICENSE-8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/dialog.vue",
											"sourceSha256": "996e4003282f523079fae653a08881a4673865b61873c29d73c3f7c1e4c3560d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-dialog/js/Demo.vue",
									"sha256": "e77f212403832f6d85221605cbd1af901b6144b4b7aed53a9674cf3ae16f2611",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt\n-->\n<template>\n\t<div class=\"flex flex-col gap-4 justify-center\">\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.alignCenter\"\n\t\t\t\tactive-text=\"alignCenter\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.alignCenter = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-4\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.draggable\"\n\t\t\t\tactive-text=\"draggable\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.draggable = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.overflow\"\n\t\t\t\t:disabled=\"!config.draggable\"\n\t\t\t\tactive-text=\"overflow\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.overflow = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"enableTransition\"\n\t\t\t\tactive-text=\"启用过渡效果\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') enableTransition = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"isObjectTransition\"\n\t\t\t\t:disabled=\"!enableTransition\"\n\t\t\t\tactive-text=\"transition: object\"\n\t\t\t\tinactive-text=\"transition: string\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') isObjectTransition = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamButton\n\t\t\t\tref=\"buttonRef\"\n\t\t\t type=\"default\"\n\t\t\t\tsize=\"small\"\n\t\t\t\t@click=\"visible = true\"\n\t\t\t>\n\t\t\t\t打开对话框\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<AsamConfigProvider :dialog=\"globalConfig\">\n\t\t\t<AsamDialog v-model=\"visible\" title=\"对话框标题\" destroy-on-close>\n\t\t\t\t对话框内容\n\t\t\t</AsamDialog>\n\t\t</AsamConfigProvider>\n\t\t<div v-if=\"enableTransition\" class=\"text-xs opacity-70\">\n\t\t\t<div v-if=\"isObjectTransition\">\n\t\t\t\t使用 JavaScript 控制动画：\n\t\t\t\t<code>{{ JSON.stringify(globalConfig.transition) }}</code>\n\t\t\t</div>\n\t\t\t<div v-else>\n\t\t\t\t使用字符串过渡名称：\n\t\t\t\t<code>{{ globalConfig.transition }}</code>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapDialogDemo' });\nimport { AsamSwitch, AsamButton, AsamConfigProvider, AsamDialog } from '@asam-ui/ui';\nimport { computed, nextTick, ref, shallowReactive } from 'vue';\nconst config = shallowReactive({\n\talignCenter: false,\n\tdraggable: false,\n\toverflow: false\n});\nconst visible = ref(false);\nconst enableTransition = ref(false);\nconst isObjectTransition = ref(false);\nconst buttonRef = ref();\nconst ANIMATION_DURATION = 300;\nconst globalConfig = computed(() => {\n\tlet transition;\n\tif (enableTransition.value) {\n\t\tif (isObjectTransition.value) {\n\t\t\ttransition = {\n\t\t\t\tcss: false,\n\t\t\t\tonBeforeEnter(el) {\n\t\t\t\t\tnextTick(() => {\n\t\t\t\t\t\tif (buttonRef.value) {\n\t\t\t\t\t\t\tconst buttonRect = buttonRef.value.ref.getBoundingClientRect();\n\t\t\t\t\t\t\tconst dialogEl = el.querySelector('.el-dialog');\n\t\t\t\t\t\t\tif (dialogEl) {\n\t\t\t\t\t\t\t\tconst dialogRect = dialogEl.getBoundingClientRect();\n\t\t\t\t\t\t\t\tconst offsetX =\n\t\t\t\t\t\t\t\t\tbuttonRect.left +\n\t\t\t\t\t\t\t\t\tbuttonRect.width / 2 -\n\t\t\t\t\t\t\t\t\t(dialogRect.left + dialogRect.width / 2);\n\t\t\t\t\t\t\t\tconst offsetY =\n\t\t\t\t\t\t\t\t\tbuttonRect.top +\n\t\t\t\t\t\t\t\t\tbuttonRect.height / 2 -\n\t\t\t\t\t\t\t\t\t(dialogRect.top + dialogRect.height / 2);\n\t\t\t\t\t\t\t\tdialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;\n\t\t\t\t\t\t\t\tdialogEl.style.opacity = '0';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tonEnter(el, done) {\n\t\t\t\t\tnextTick(() => {\n\t\t\t\t\t\tconst dialogEl = el.querySelector('.el-dialog');\n\t\t\t\t\t\tif (dialogEl) {\n\t\t\t\t\t\t\t// force reflow\n\t\t\t\t\t\t\tvoid dialogEl.offsetHeight;\n\t\t\t\t\t\t\tdialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;\n\t\t\t\t\t\t\tdialogEl.style.transform = 'translate(0, 0) scale(1)';\n\t\t\t\t\t\t\tdialogEl.style.opacity = '1';\n\t\t\t\t\t\t\t// wait for animation to complete, then cleanup inline styles to avoid affecting drag\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tdialogEl.style.transition = '';\n\t\t\t\t\t\t\t\tdialogEl.style.transform = '';\n\t\t\t\t\t\t\t\tdialogEl.style.opacity = '';\n\t\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t\t}, ANIMATION_DURATION);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tonLeave(el, done) {\n\t\t\t\t\tconst dialogEl = el.querySelector('.el-dialog');\n\t\t\t\t\tif (dialogEl) {\n\t\t\t\t\t\tif (buttonRef.value) {\n\t\t\t\t\t\t\tconst buttonRect = buttonRef.value.ref.getBoundingClientRect();\n\t\t\t\t\t\t\tconst dialogRect = dialogEl.getBoundingClientRect();\n\t\t\t\t\t\t\tconst currentTransform = dialogEl.style.transform;\n\t\t\t\t\t\t\tlet dragOffsetX = 0;\n\t\t\t\t\t\t\tlet dragOffsetY = 0;\n\t\t\t\t\t\t\t// avoid draggable effect\n\t\t\t\t\t\t\tif (currentTransform) {\n\t\t\t\t\t\t\t\tconst translateMatch = currentTransform.match(\n\t\t\t\t\t\t\t\t\t/translate\\(([^,]+),\\s*([^)]+)\\)/\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\tif (translateMatch) {\n\t\t\t\t\t\t\t\t\tdragOffsetX = Number.parseFloat(translateMatch[1]);\n\t\t\t\t\t\t\t\t\tdragOffsetY = Number.parseFloat(translateMatch[2]);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tconst offsetX =\n\t\t\t\t\t\t\t\tbuttonRect.left +\n\t\t\t\t\t\t\t\tbuttonRect.width / 2 -\n\t\t\t\t\t\t\t\t(dialogRect.left + dialogRect.width / 2) +\n\t\t\t\t\t\t\t\tdragOffsetX;\n\t\t\t\t\t\t\tconst offsetY =\n\t\t\t\t\t\t\t\tbuttonRect.top +\n\t\t\t\t\t\t\t\tbuttonRect.height / 2 -\n\t\t\t\t\t\t\t\t(dialogRect.top + dialogRect.height / 2) +\n\t\t\t\t\t\t\t\tdragOffsetY;\n\t\t\t\t\t\t\tdialogEl.style.transition = `all ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 1, 1)`;\n\t\t\t\t\t\t\tdialogEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0.3)`;\n\t\t\t\t\t\t\tdialogEl.style.opacity = '0';\n\t\t\t\t\t\t\t// wait for animation to complete, then cleanup inline styles\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tdialogEl.style.transition = '';\n\t\t\t\t\t\t\t\tdialogEl.style.transform = '';\n\t\t\t\t\t\t\t\tdialogEl.style.opacity = '';\n\t\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t\t}, ANIMATION_DURATION);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdone();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdone();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t} else {\n\t\t\ttransition = 'dialog-bounce';\n\t\t}\n\t}\n\treturn {\n\t\talignCenter: config.alignCenter,\n\t\tdraggable: config.draggable,\n\t\toverflow: config.overflow,\n\t\ttransition\n\t};\n});\n</script>\n\n<style>\n/* Bounce Animation */\n.dialog-bounce-enter-active,\n.dialog-bounce-leave-active,\n.dialog-bounce-enter-active .el-dialog,\n.dialog-bounce-leave-active .el-dialog {\n\ttransition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.dialog-bounce-enter-from,\n.dialog-bounce-leave-to {\n\topacity: 0;\n}\n\n.dialog-bounce-enter-from .el-dialog,\n.dialog-bounce-leave-to .el-dialog {\n\ttransform: scale(0.3) translateY(-50px);\n\topacity: 0;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-col {\n\tflex-direction: column;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.text-xs {\n\tfont-size: var(--el-font-size-extra-small);\n}\n\n.opacity-70 {\n\topacity: 0.7;\n}\n</style>\n",
									"originalSourceSha256": "deb50d1ce1f6a1c5af2590ed4092ec8f47bc0e8db9ec4f09beebe9e43bcbfcea",
									"notice": {
										"id": "8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00",
										"url": "/licenses/source-notices/8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt",
										"licenseFilename": "LICENSE-8c4f2577839c8c9d12005b5a75cfa7a8dfb487df1d1d0d87c0a2207f3dcf0b00.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/dialog.vue",
											"sourceSha256": "996e4003282f523079fae653a08881a4673865b61873c29d73c3f7c1e4c3560d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-message",
					"title": "对消息进行配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-message/ts/Demo.vue",
									"sha256": "3db37908ad3e66c76f7469a2a2437184d9e7d2edb61f2a5ff56c28e76218e036",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt\n-->\n<template>\n\t<div>\n\t\t<AsamConfigProvider :message=\"config\">\n\t\t\t<AsamButton type=\"default\" @click=\"open\">打开</AsamButton>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapMessageDemo' });\nimport { AsamConfigProvider, AsamButton } from '@asam-ui/ui';\n\nimport { reactive } from 'vue';\nimport { AsamMessage } from '@asam-ui/ui';\n\nconst config = reactive({\n\tmax: 3,\n\tplain: true,\n\tplacement: 'bottom'\n});\n\nconst open = () => {\n\tAsamMessage('这是一条显示在底部的消息。');\n};\n</script>\n",
									"originalSourceSha256": "a0ea963b8c7c7ca7a47c973669c38e77d5d12e71e68beb2d9ce4a3cae1127247",
									"notice": {
										"id": "bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff",
										"url": "/licenses/source-notices/bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt",
										"licenseFilename": "LICENSE-bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/message.vue",
											"sourceSha256": "b56272e4e71a8da34592df92411e2d072b6ee0d6f97c45e507779366be97aa72",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-message/js/Demo.vue",
									"sha256": "dc63577b09fc5ed48821f28caeba85bee320344116f4807020cdfb2c1a24b13b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt\n-->\n<template>\n\t<div>\n\t\t<AsamConfigProvider :message=\"config\">\n\t\t\t<AsamButton type=\"default\" @click=\"open\">打开</AsamButton>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapMessageDemo' });\nimport { AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport { reactive } from 'vue';\nimport { AsamMessage } from '@asam-ui/ui';\nconst config = reactive({\n\tmax: 3,\n\tplain: true,\n\tplacement: 'bottom'\n});\nconst open = () => {\n\tAsamMessage('这是一条显示在底部的消息。');\n};\n</script>\n",
									"originalSourceSha256": "95bd481e109c2cdb29db1c53ef857d395397b79d0251a2f6407e9da1d54e43a3",
									"notice": {
										"id": "bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff",
										"url": "/licenses/source-notices/bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt",
										"licenseFilename": "LICENSE-bed44c8af1d348440fbb1fd11d7d34268e9317a610b86df2f81f2aa91baf20ff.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/message.vue",
											"sourceSha256": "b56272e4e71a8da34592df92411e2d072b6ee0d6f97c45e507779366be97aa72",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-empty-values",
					"title": "空值配置2.7.0",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-empty-values/ts/Demo.vue",
									"sha256": "98d66fb7eb2726e865fb58250557032ed9642de671e137b60b4ea1f279885f48",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt\n-->\n<template>\n\t<AsamConfigProvider :value-on-clear=\"null\" :empty-values=\"[undefined, null]\">\n\t\t<div class=\"flex flex-wrap gap-4 items-center\">\n\t\t\t<AsamSelect\n\t\t\t\t:model-value=\"value1\"\n\t\t\t\tclearable\n\t\t\t\tplaceholder=\"选择\"\n\t\t\t\tstyle=\"width: 240px\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value: unknown) => {\n\t\t\t\t\t\tif (typeof value === 'string' || value === null) value1 = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t\t@change=\"handleChange\"\n\t\t\t>\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"item in options\"\n\t\t\t\t\t:key=\"item.value\"\n\t\t\t\t\t:label=\"item.label\"\n\t\t\t\t\t:value=\"item.value\"\n\t\t\t\t/>\n\t\t\t</AsamSelect>\n\t\t\t<AsamSelectV2\n\t\t\t\t:model-value=\"value2\"\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\tclearable\n\t\t\t\tplaceholder=\"选择\"\n\t\t\t\tstyle=\"width: 240px\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:value-on-clear=\"() => undefined\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value: unknown) => {\n\t\t\t\t\t\tif (typeof value === 'string' || value === undefined) value2 = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t\t@change=\"handleChange\"\n\t\t\t/>\n\t\t</div>\n\t</AsamConfigProvider>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapEmptyValuesDemo' });\nimport { AsamConfigProvider, AsamSelect, AsamOption, AsamSelectV2 } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { AsamMessage } from '@asam-ui/ui';\n\nconst value1 = ref<string | null>('');\nconst value2 = ref<string | undefined>('');\nconst options = [\n\t{\n\t\tvalue: '',\n\t\tlabel: '全部'\n\t},\n\t{\n\t\tvalue: 'Option1',\n\t\tlabel: '选项 1'\n\t},\n\t{\n\t\tvalue: 'Option2',\n\t\tlabel: '选项 2'\n\t},\n\t{\n\t\tvalue: 'Option3',\n\t\tlabel: '选项 3'\n\t},\n\t{\n\t\tvalue: 'Option4',\n\t\tlabel: '选项 4'\n\t},\n\t{\n\t\tvalue: 'Option5',\n\t\tlabel: '选项 5'\n\t}\n];\n\nconst handleChange = (value: unknown) => {\n\tif (value === undefined || value === null) {\n\t\tAsamMessage.info(`清空后的值为：${value}`);\n\t}\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n\n.items-center {\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "9eda15e8f1054297ae34d22a6d8a003cd1f5db85664595ba9b11cb43cce81928",
									"notice": {
										"id": "41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea",
										"url": "/licenses/source-notices/41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt",
										"licenseFilename": "LICENSE-41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/empty-values.vue",
											"sourceSha256": "ea0c9ef5a4578f3a49488e8eec11ef96e9644568e5ebf991576dde32ffc31eff",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-empty-values/js/Demo.vue",
									"sha256": "27601b11d1cd5fb9712f9454890a0427eb285a7afcb144957c33580578a2c42e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt\n-->\n<template>\n\t<AsamConfigProvider :value-on-clear=\"null\" :empty-values=\"[undefined, null]\">\n\t\t<div class=\"flex flex-wrap gap-4 items-center\">\n\t\t\t<AsamSelect\n\t\t\t\t:model-value=\"value1\"\n\t\t\t\tclearable\n\t\t\t\tplaceholder=\"选择\"\n\t\t\t\tstyle=\"width: 240px\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'string' || value === null) value1 = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t\t@change=\"handleChange\"\n\t\t\t>\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"item in options\"\n\t\t\t\t\t:key=\"item.value\"\n\t\t\t\t\t:label=\"item.label\"\n\t\t\t\t\t:value=\"item.value\"\n\t\t\t\t/>\n\t\t\t</AsamSelect>\n\t\t\t<AsamSelectV2\n\t\t\t\t:model-value=\"value2\"\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\tclearable\n\t\t\t\tplaceholder=\"选择\"\n\t\t\t\tstyle=\"width: 240px\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:value-on-clear=\"() => undefined\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'string' || value === undefined) value2 = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t\t@change=\"handleChange\"\n\t\t\t/>\n\t\t</div>\n\t</AsamConfigProvider>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapEmptyValuesDemo' });\nimport { AsamConfigProvider, AsamSelect, AsamOption, AsamSelectV2 } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { AsamMessage } from '@asam-ui/ui';\nconst value1 = ref('');\nconst value2 = ref('');\nconst options = [\n\t{\n\t\tvalue: '',\n\t\tlabel: '全部'\n\t},\n\t{\n\t\tvalue: 'Option1',\n\t\tlabel: '选项 1'\n\t},\n\t{\n\t\tvalue: 'Option2',\n\t\tlabel: '选项 2'\n\t},\n\t{\n\t\tvalue: 'Option3',\n\t\tlabel: '选项 3'\n\t},\n\t{\n\t\tvalue: 'Option4',\n\t\tlabel: '选项 4'\n\t},\n\t{\n\t\tvalue: 'Option5',\n\t\tlabel: '选项 5'\n\t}\n];\nconst handleChange = (value) => {\n\tif (value === undefined || value === null) {\n\t\tAsamMessage.info(`清空后的值为：${value}`);\n\t}\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n\n.items-center {\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "27262eaa3959da36b7e9e9cbb0223991489910127c5939590ba8c57c24808482",
									"notice": {
										"id": "41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea",
										"url": "/licenses/source-notices/41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt",
										"licenseFilename": "LICENSE-41aef72276b3b88b218121c915596e24ce646ca914ca6dbf16304ae81716bcea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/empty-values.vue",
											"sourceSha256": "ea0c9ef5a4578f3a49488e8eec11ef96e9644568e5ebf991576dde32ffc31eff",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-table",
					"title": "表格配置 2.13.3",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-table/ts/Demo.vue",
									"sha256": "939ed34a1db959fb574a8201bf3cd3060cade1346ebac03e61ebe2b32ba1630e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.showOverflowTooltip\"\n\t\t\t\tactive-text=\"showOverflowTooltip\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.showOverflowTooltip = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSelect\n\t\t\t\t:model-value=\"config.tooltipEffect\"\n\t\t\t\tclass=\"ml-5\"\n\t\t\t\tstyle=\"max-width: 150px\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value: unknown) => {\n\t\t\t\t\t\tif (value === 'dark' || value === 'light') config.tooltipEffect = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t<AsamOption value=\"dark\" label=\"dark\" />\n\t\t\t\t<AsamOption value=\"light\" label=\"light\" />\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :table=\"config\">\n\t\t\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn type=\"selection\" width=\"55\" />\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn label=\"日期\" width=\"120\">\n\t\t\t\t\t<template #default=\"scope\">{{ scope.row.date }}</template>\n\t\t\t\t</AsamTableColumn>\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn property=\"address\" label=\"地址（继承配置提供器）\" width=\"300\" />\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn\n\t\t\t\t\tproperty=\"address\"\n\t\t\t\t\tlabel=\"地址（显式设置 false）\"\n\t\t\t\t\t:show-overflow-tooltip=\"false\"\n\t\t\t\t/>\n\t\t\t</AsamTable>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamConfigProviderCapTableDemo' });\nimport {\n\tAsamSwitch,\n\tAsamSelect,\n\tAsamOption,\n\tAsamDivider,\n\tAsamConfigProvider,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\n\nimport { reactive } from 'vue';\n\nimport type { AsamConfigProviderTableConfigContext } from '@asam-ui/ui';\n\nconst config = reactive<AsamConfigProviderTableConfigContext & { showOverflowTooltip: boolean }>({\n\tshowOverflowTooltip: true,\n\ttooltipEffect: 'dark'\n});\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '艾琳娜·库茨纳',\n\t\taddress: '萨尔州南莉莉洛尔贝格路 86c 号'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '海伦·雅各比',\n\t\taddress: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '布兰登·德克特',\n\t\taddress: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '玛吉·史密斯',\n\t\taddress: '爱达荷州西里卡多温莎路 23618 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.ml-5 {\n\tmargin-left: 1.25rem;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "7debd7cef9f04ba95eb49670ff11134bdf7c74bd97aae989dd1283290bb515ef",
									"notice": {
										"id": "bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9",
										"url": "/licenses/source-notices/bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt",
										"licenseFilename": "LICENSE-bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/table.vue",
											"sourceSha256": "71213f8d96981210ceb40619604a3bdbf31d5ac9200d451c7a885d81ef09a901",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/cap-table/js/Demo.vue",
									"sha256": "64177e160ea61e7754c28958d1431a3e66bb878c92fbb4d3d2e067446cf346cc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"config.showOverflowTooltip\"\n\t\t\t\tactive-text=\"showOverflowTooltip\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') config.showOverflowTooltip = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t\t<AsamSelect\n\t\t\t\t:model-value=\"config.tooltipEffect\"\n\t\t\t\tclass=\"ml-5\"\n\t\t\t\tstyle=\"max-width: 150px\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'dark' || value === 'light') config.tooltipEffect = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t<AsamOption value=\"dark\" label=\"dark\" />\n\t\t\t\t<AsamOption value=\"light\" label=\"light\" />\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<AsamConfigProvider :table=\"config\">\n\t\t\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn type=\"selection\" width=\"55\" />\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn label=\"日期\" width=\"120\">\n\t\t\t\t\t<template #default=\"scope\">{{ scope.row.date }}</template>\n\t\t\t\t</AsamTableColumn>\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn property=\"address\" label=\"地址（继承配置提供器）\" width=\"300\" />\n\t\t\t\t<!-- @vue-generic {User} -->\n\t\t\t\t<AsamTableColumn\n\t\t\t\t\tproperty=\"address\"\n\t\t\t\t\tlabel=\"地址（显式设置 false）\"\n\t\t\t\t\t:show-overflow-tooltip=\"false\"\n\t\t\t\t/>\n\t\t\t</AsamTable>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderCapTableDemo' });\nimport {\n\tAsamSwitch,\n\tAsamSelect,\n\tAsamOption,\n\tAsamDivider,\n\tAsamConfigProvider,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport { reactive } from 'vue';\nconst config = reactive({\n\tshowOverflowTooltip: true,\n\ttooltipEffect: 'dark'\n});\nconst tableData = [\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '艾琳娜·库茨纳',\n\t\taddress: '萨尔州南莉莉洛尔贝格路 86c 号'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '海伦·雅各比',\n\t\taddress: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '布兰登·德克特',\n\t\taddress: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '玛吉·史密斯',\n\t\taddress: '爱达荷州西里卡多温莎路 23618 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.ml-5 {\n\tmargin-left: 1.25rem;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "a979e2b48ef9b6fd70d406f4a651a48d911fe048d10ce8e7b2a0d31cfa79f1be",
									"notice": {
										"id": "bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9",
										"url": "/licenses/source-notices/bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt",
										"licenseFilename": "LICENSE-bfbcc0eb929e409e6259e9ae3153ebe4e41d337d11a122cc450e9c95dba74df9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/config-provider/table.vue",
											"sourceSha256": "71213f8d96981210ceb40619604a3bdbf31d5ac9200d451c7a885d81ef09a901",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "boundaries",
					"title": "零层级与响应式密度",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/boundaries/ts/Demo.vue",
									"sha256": "4405e65f7d47eb1c441478a53fbdfcbabbe9f4d54ab02b508e4c3cca7bdc7f30",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"size = size === 'big' ? 'small' : 'big'\"\n\t\t\t>切换密度</AsamButton\n\t\t>\n\t\t<AsamConfigProvider :size=\"size\" :z-index=\"0\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<div class=\"demo-provider-layout-1\">\n\t\t\t\t\t<output v-bind=\"domDataAttrs('data-state', 'z-index')\">{{\n\t\t\t\t\t\tscope.config?.zIndex\n\t\t\t\t\t}}</output>\n\t\t\t\t\t<AsamText v-bind=\"domDataAttrs('data-density', 'inherited')\">继承密度</AsamText>\n\t\t\t\t\t<AsamText size=\"large\" v-bind=\"domDataAttrs('data-density', 'explicit')\">\n\t\t\t\t\t\t显式密度\n\t\t\t\t\t</AsamText>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamConfigProviderBoundariesDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamConfigProvider, AsamText } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst size = ref<AsamControlSize>('big');\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-provider-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-provider-layout-1 > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamConfigProvider/boundaries/js/Demo.vue",
									"sha256": "b1bcc6483f00291ee97ad5be9e6031e065fd0b8acd305d909140ca5532c09fb7",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"size = size === 'big' ? 'small' : 'big'\"\n\t\t\t>切换密度</AsamButton\n\t\t>\n\t\t<AsamConfigProvider :size=\"size\" :z-index=\"0\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<div class=\"demo-provider-layout-1\">\n\t\t\t\t\t<output v-bind=\"domDataAttrs('data-state', 'z-index')\">{{\n\t\t\t\t\t\tscope.config?.zIndex\n\t\t\t\t\t}}</output>\n\t\t\t\t\t<AsamText v-bind=\"domDataAttrs('data-density', 'inherited')\">继承密度</AsamText>\n\t\t\t\t\t<AsamText size=\"large\" v-bind=\"domDataAttrs('data-density', 'explicit')\">\n\t\t\t\t\t\t显式密度\n\t\t\t\t\t</AsamText>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamConfigProviderBoundariesDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamConfigProvider, AsamText } from '@asam-ui/ui';\nconst size = ref('big');\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-provider-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-provider-layout-1 > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamButton",
			"documentation": "/component-AsamButton.html",
			"demos": [
				{
					"id": "basic",
					"title": "语义颜色与点击",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/basic/ts/Demo.vue",
									"sha256": "6ae753c97546e6dd7f328abb2171abf9f978c01670be9b2354468e9a7d2ebe5a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton @click=\"count++\"> 默认操作 </AsamButton>\n\t\t\t<AsamButton type=\"primary\" @click=\"count++\"> 主要操作 </AsamButton>\n\t\t\t<AsamButton type=\"gradient\"> 渐变操作 </AsamButton>\n\t\t\t<AsamButton type=\"accent\"> 强调操作 </AsamButton>\n\t\t\t<AsamButton type=\"success\"> 成功 </AsamButton>\n\t\t\t<AsamButton type=\"warning\"> 提醒 </AsamButton>\n\t\t\t<AsamButton type=\"danger\"> 危险 </AsamButton>\n\t\t\t<AsamButton type=\"info\"> 信息 </AsamButton>\n\t\t\t<AsamButton disabled @click=\"count++\"> 禁用 </AsamButton>\n\t\t</div>\n\t\t<output>点击次数：{{ count }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonBasicExample' });\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/basic/js/Demo.vue",
									"sha256": "b92904a68afa8faea553e056c959efa1e81135c722b77cd65e90629cc9a8bb8b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton @click=\"count++\"> 默认操作 </AsamButton>\n\t\t\t<AsamButton type=\"primary\" @click=\"count++\"> 主要操作 </AsamButton>\n\t\t\t<AsamButton type=\"gradient\"> 渐变操作 </AsamButton>\n\t\t\t<AsamButton type=\"accent\"> 强调操作 </AsamButton>\n\t\t\t<AsamButton type=\"success\"> 成功 </AsamButton>\n\t\t\t<AsamButton type=\"warning\"> 提醒 </AsamButton>\n\t\t\t<AsamButton type=\"danger\"> 危险 </AsamButton>\n\t\t\t<AsamButton type=\"info\"> 信息 </AsamButton>\n\t\t\t<AsamButton disabled @click=\"count++\"> 禁用 </AsamButton>\n\t\t</div>\n\t\t<output>点击次数：{{ count }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonBasicExample' });\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "appearance",
					"title": "形态与自定义颜色",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/appearance/ts/Demo.vue",
									"sha256": "4598da977e17ab02a243c51132dadd2886426e9080d5baeffde743edb53d4449",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"primary\" plain> 描边 </AsamButton>\n\t\t\t<AsamButton text bg> 文字背景 </AsamButton>\n\t\t\t<AsamButton link> 链接形态 </AsamButton>\n\t\t\t<AsamButton round> 圆角 </AsamButton>\n\t\t\t<AsamButton dashed> 虚线 </AsamButton>\n\t\t\t<AsamButton color=\"#526d82\"> 自定义颜色 </AsamButton>\n\t\t\t<AsamButton color=\"#526d82\" text> 自定义文字颜色 </AsamButton>\n\t\t\t<AsamButton color=\"#526d82\" link> 自定义链接颜色 </AsamButton>\n\t\t\t<AsamButton tag=\"a\" href=\"#api\"> 查看 API </AsamButton>\n\t\t\t<AsamButton auto-insert-space> 保存 </AsamButton>\n\t\t</div>\n\t\t<AsamButton block :press-animation=\"false\"> 撑满宽度，关闭按压动画 </AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonAppearanceExample' });\nimport { AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/appearance/js/Demo.vue",
									"sha256": "1f5c821b6b8354c5558936581097efe471ae4c4d1e905bc2a941e2cd24afcae7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"primary\" plain> 描边 </AsamButton>\n\t\t\t<AsamButton text bg> 文字背景 </AsamButton>\n\t\t\t<AsamButton link> 链接形态 </AsamButton>\n\t\t\t<AsamButton round> 圆角 </AsamButton>\n\t\t\t<AsamButton dashed> 虚线 </AsamButton>\n\t\t\t<AsamButton color=\"#526d82\"> 自定义颜色 </AsamButton>\n\t\t\t<AsamButton color=\"#526d82\" text> 自定义文字颜色 </AsamButton>\n\t\t\t<AsamButton color=\"#526d82\" link> 自定义链接颜色 </AsamButton>\n\t\t\t<AsamButton tag=\"a\" href=\"#api\"> 查看 API </AsamButton>\n\t\t\t<AsamButton auto-insert-space> 保存 </AsamButton>\n\t\t</div>\n\t\t<AsamButton block :press-animation=\"false\"> 撑满宽度，关闭按压动画 </AsamButton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonAppearanceExample' });\nimport { AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "icons",
					"title": "图标与自定义加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/icons/ts/Demo.vue",
									"sha256": "b2977e4240a36c9898df7fb95e4bf741c17e2b73f783e98dac489eac4d1db3c0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton :icon=\"Search\" :icon-size=\"18\"> 查询 </AsamButton>\n\t\t\t<AsamButton :icon=\"ArrowRight\" icon-position=\"right\"> 下一步 </AsamButton>\n\t\t\t<AsamButton circle :icon=\"Plus\" aria-label=\"新增\" />\n\t\t\t<AsamButton icon=\"Ui027DemoSearchIcon\" data-case=\"registered-icon\">\n\t\t\t\t字符串组件名\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t\t:icon=\"Search\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\t:loading-icon=\"Loading\"\n\t\t\t\tdata-case=\"loading-icon\"\n\t\t\t\t@click=\"loading = true\"\n\t\t\t>\n\t\t\t\t提交\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t\t:icon=\"ArrowRight\"\n\t\t\t\ticon-position=\"right\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\tdata-case=\"loading-right-icon\"\n\t\t\t>\n\t\t\t\t右侧图标加载\n\t\t\t</AsamButton>\n\t\t\t<AsamButton loading :icon=\"Search\" data-case=\"loading-slot-icon\">\n\t\t\t\t<template #loading>\n\t\t\t\t\t<Loading style=\"width: 16px\" />\n\t\t\t\t</template>\n\t\t\t\t加载插槽\n\t\t\t</AsamButton>\n\t\t\t<AsamButton :icon=\"Search\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check style=\"width: 16px\" />\n\t\t\t\t</template>\n\t\t\t\t图标插槽\n\t\t\t</AsamButton>\n\t\t\t<AsamButton @click=\"loading = false\"> 重置加载 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonIconsExample' });\nimport { getCurrentInstance, ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport { Search, ArrowRight, Plus, Loading, Check } from '@asam-ui/icons-vue';\nconst loading = ref(false);\nconst app = getCurrentInstance()?.appContext.app;\nif (app && !app.component('Ui027DemoSearchIcon')) app.component('Ui027DemoSearchIcon', Search);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/icons/js/Demo.vue",
									"sha256": "e4d2692846d75ea3d3786e2759b2775b92a5b987f2dc21c0d69ff56b4e93152b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton :icon=\"Search\" :icon-size=\"18\"> 查询 </AsamButton>\n\t\t\t<AsamButton :icon=\"ArrowRight\" icon-position=\"right\"> 下一步 </AsamButton>\n\t\t\t<AsamButton circle :icon=\"Plus\" aria-label=\"新增\" />\n\t\t\t<AsamButton icon=\"Ui027DemoSearchIcon\" data-case=\"registered-icon\">\n\t\t\t\t字符串组件名\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t\t:icon=\"Search\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\t:loading-icon=\"Loading\"\n\t\t\t\tdata-case=\"loading-icon\"\n\t\t\t\t@click=\"loading = true\"\n\t\t\t>\n\t\t\t\t提交\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t\t:icon=\"ArrowRight\"\n\t\t\t\ticon-position=\"right\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\tdata-case=\"loading-right-icon\"\n\t\t\t>\n\t\t\t\t右侧图标加载\n\t\t\t</AsamButton>\n\t\t\t<AsamButton loading :icon=\"Search\" data-case=\"loading-slot-icon\">\n\t\t\t\t<template #loading>\n\t\t\t\t\t<Loading style=\"width: 16px\" />\n\t\t\t\t</template>\n\t\t\t\t加载插槽\n\t\t\t</AsamButton>\n\t\t\t<AsamButton :icon=\"Search\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check style=\"width: 16px\" />\n\t\t\t\t</template>\n\t\t\t\t图标插槽\n\t\t\t</AsamButton>\n\t\t\t<AsamButton @click=\"loading = false\"> 重置加载 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonIconsExample' });\nimport { getCurrentInstance, ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport { Search, ArrowRight, Plus, Loading, Check } from '@asam-ui/icons-vue';\nconst loading = ref(false);\nconst app = getCurrentInstance()?.appContext.app;\nif (app && !app.component('Ui027DemoSearchIcon')) app.component('Ui027DemoSearchIcon', Search);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原生提交与实例状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/native/ts/Demo.vue",
									"sha256": "5393cf4c61da77e4964f2c009db01f9482179a18fd2c210c7a59bfc7cc5c2e2d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<form @submit.prevent=\"submitted++\" @reset=\"submitted = 0\">\n\t\t\t<div class=\"row\">\n\t\t\t\t<AsamButton ref=\"button\" native-type=\"submit\" type=\"primary\"> 提交表单 </AsamButton>\n\t\t\t\t<AsamButton native-type=\"reset\"> 重置表单 </AsamButton>\n\t\t\t\t<AsamButton @click=\"inspect\"> 读取状态 </AsamButton>\n\t\t\t</div>\n\t\t</form>\n\t\t<output>提交次数：{{ submitted }}；{{ state }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonNativeExample' });\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport type { AsamButtonExpose } from '@asam-ui/ui';\nconst button = ref<AsamButtonExpose>();\nconst submitted = ref(0);\nconst state = ref('');\nfunction inspect() {\n\tstate.value = button.value\n\t\t? [button.value.size, button.value.type, button.value.disabled].join(' / ')\n\t\t: '';\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/native/js/Demo.vue",
									"sha256": "bf2641908980e1a778a1efadc0c365b68180d40075e7a37d181d893b6dccd96e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<form @submit.prevent=\"submitted++\" @reset=\"submitted = 0\">\n\t\t\t<div class=\"row\">\n\t\t\t\t<AsamButton ref=\"button\" native-type=\"submit\" type=\"primary\"> 提交表单 </AsamButton>\n\t\t\t\t<AsamButton native-type=\"reset\"> 重置表单 </AsamButton>\n\t\t\t\t<AsamButton @click=\"inspect\"> 读取状态 </AsamButton>\n\t\t\t</div>\n\t\t</form>\n\t\t<output>提交次数：{{ submitted }}；{{ state }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonNativeExample' });\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nconst button = ref();\nconst submitted = ref(0);\nconst state = ref('');\nfunction inspect() {\n\tstate.value = button.value\n\t\t? [button.value.size, button.value.type, button.value.disabled].join(' / ')\n\t\t: '';\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/sizes/ts/Demo.vue",
									"sha256": "04e94fb289777379763ac9b11efc32019361cfd993e9fee236d7d1d79fdd2f35",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton size=\"large\" v-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t\t<AsamButton size=\"big\" v-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t\t<AsamButton size=\"default\" v-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t\t<AsamButton size=\"small\" v-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamButton v-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\">\n\t\t\t\t\t操作\n\t\t\t\t</AsamButton>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonSizesExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/sizes/js/Demo.vue",
									"sha256": "1a04231bd2b7fec7c2d796b010ebfb68568455b8953430c410b412ce6909162e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton size=\"large\" v-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t\t<AsamButton size=\"big\" v-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t\t<AsamButton size=\"default\" v-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t\t<AsamButton size=\"small\" v-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\">\n\t\t\t\t操作\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamButton v-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\">\n\t\t\t\t\t操作\n\t\t\t\t</AsamButton>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonSizesExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamConfigProvider } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "provider",
					"title": "全局类型与覆盖优先级",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/provider/ts/Demo.vue",
									"sha256": "24f06ffe6602496d906fccb4c09d2d646dcf6be6094f536b1c6c8a0070360994",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<label>\n\t\t\t全局类型\n\t\t\t<AsamSelect aria-label=\"全局按钮类型\" v-model=\"providerTypeControl\">\n\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'未配置'\"\n\t\t\t\t\t>未配置</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption v-for=\"type in nativeTypes\" :key=\"type\" :value=\"type\" :label=\"type\">{{\n\t\t\t\t\ttype\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamConfigProvider :button=\"{ type: providerType }\">\n\t\t\t<AsamButton data-case=\"provider-inherited\">继承全局类型</AsamButton>\n\t\t\t<AsamButton data-case=\"provider-explicit\" type=\"danger\">显式 danger</AsamButton>\n\t\t\t<AsamButtonGroup type=\"gradient\">\n\t\t\t\t<AsamButton data-case=\"provider-group\">继承按钮组</AsamButton>\n\t\t\t\t<AsamButton data-case=\"group-explicit\" type=\"accent\"> 显式 accent </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t</AsamConfigProvider>\n\t\t<output>全局类型：{{ providerType ?? '未配置' }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamButtonGroup,\n\tAsamConfigProvider\n} from '@asam-ui/ui';\nconst nativeTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'] as const;\nconst providerType = ref<(typeof nativeTypes)[number] | undefined>('success');\ndefineOptions({ name: 'AsamButtonProviderDemo' });\n\nconst providerTypeControl = computed({\n\tget: () => providerType.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\tproviderType.value =\n\t\t\tvalue === '__asam_example_unconfigured__'\n\t\t\t\t? undefined\n\t\t\t\t: (value as typeof providerType.value);\n\t}\n});\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\nselect {\n\tmargin-inline-start: var(--asam-space-sm, 8px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/provider/js/Demo.vue",
									"sha256": "a8918cacffd9a4014b56cd17ab09c293ef6331c7b93d005d9210f713445380b7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<label>\n\t\t\t全局类型\n\t\t\t<AsamSelect aria-label=\"全局按钮类型\" v-model=\"providerTypeControl\">\n\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'未配置'\"\n\t\t\t\t\t>未配置</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption v-for=\"type in nativeTypes\" :key=\"type\" :value=\"type\" :label=\"type\">{{\n\t\t\t\t\ttype\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamConfigProvider :button=\"{ type: providerType }\">\n\t\t\t<AsamButton data-case=\"provider-inherited\">继承全局类型</AsamButton>\n\t\t\t<AsamButton data-case=\"provider-explicit\" type=\"danger\">显式 danger</AsamButton>\n\t\t\t<AsamButtonGroup type=\"gradient\">\n\t\t\t\t<AsamButton data-case=\"provider-group\">继承按钮组</AsamButton>\n\t\t\t\t<AsamButton data-case=\"group-explicit\" type=\"accent\"> 显式 accent </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t</AsamConfigProvider>\n\t\t<output>全局类型：{{ providerType ?? '未配置' }}</output>\n\t</div>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamButtonGroup,\n\tAsamConfigProvider\n} from '@asam-ui/ui';\n/** @type {NonNullable<import('@asam-ui/ui').AsamConfigProviderProps['button']>['type'][]} */\nconst nativeTypes = ['primary', 'success', 'warning', 'danger', 'info', 'default'];\n/** @type {import('vue').Ref<NonNullable<import('@asam-ui/ui').AsamConfigProviderProps['button']>['type']>} */\nconst providerType = ref('success');\ndefineOptions({ name: 'AsamButtonProviderDemo' });\n\nconst providerTypeControl = computed({\n\tget: () => providerType.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\tproviderType.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\nselect {\n\tmargin-inline-start: var(--asam-space-sm, 8px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "delegation",
					"title": "原生间距与点击、四档按压反馈",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/delegation/ts/Demo.vue",
									"sha256": "93a3a3414097c10a145ef9a54d2b26cb4d1b4ef0e877ed670563bd564c3a4209",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"space\"> 原生双汉字间距</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"loading\"> 加载</AsamCheckboxItem>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton\n\t\t\t\tv-for=\"size in sizes\"\n\t\t\t\t:key=\"size\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:auto-insert-space=\"space\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\t@click=\"onClick\"\n\t\t\t>\n\t\t\t\t确认\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<AsamButton ref=\"control\" :auto-insert-space=\"space\" @click=\"onClick\">确认</AsamButton>\n\t\t<AsamButton :auto-insert-space=\"space\" @click=\"onClick\"><strong>确认</strong></AsamButton>\n\t\t<output>\n\t\t\t{{ clicks }} 次；原生间距： {{ control?.shouldAddSpace ?? false }}；{{ eventType }}\n\t\t</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonDelegationExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\nimport type { AsamButtonExpose, AsamControlSize } from '@asam-ui/ui';\n\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst space = ref(true);\nconst disabled = ref(false);\nconst loading = ref(false);\nconst clicks = ref(0);\nconst eventType = ref('尚未点击');\nconst control = ref<AsamButtonExpose>();\nfunction onClick(event: MouseEvent) {\n\tclicks.value++;\n\teventType.value = event.type;\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButton/delegation/js/Demo.vue",
									"sha256": "f11adba4648a0369f5afed68c6d58e1c3982f1f0350ee2c65ad7a77578b9fb5e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"space\"> 原生双汉字间距</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"loading\"> 加载</AsamCheckboxItem>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton\n\t\t\t\tv-for=\"size in sizes\"\n\t\t\t\t:key=\"size\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:auto-insert-space=\"space\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\t@click=\"onClick\"\n\t\t\t>\n\t\t\t\t确认\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<AsamButton ref=\"control\" :auto-insert-space=\"space\" @click=\"onClick\">确认</AsamButton>\n\t\t<AsamButton :auto-insert-space=\"space\" @click=\"onClick\"><strong>确认</strong></AsamButton>\n\t\t<output>\n\t\t\t{{ clicks }} 次；原生间距： {{ control?.shouldAddSpace ?? false }}；{{ eventType }}\n\t\t</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonDelegationExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\n\nconst sizes = ['large', 'big', 'default', 'small'];\nconst space = ref(true);\nconst disabled = ref(false);\nconst loading = ref(false);\nconst clicks = ref(0);\nconst eventType = ref('尚未点击');\nconst control = ref();\nfunction onClick(event) {\n\tclicks.value++;\n\teventType.value = event.type;\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamEditor",
			"documentation": "/component-AsamEditor.html",
			"demos": [
				{
					"id": "basic",
					"title": "编辑与实例方法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/basic/ts/Demo.vue",
									"sha256": "935745cd9ef55fa4e1d4fb8d83d2393ff8b068fcdb9d711355983f31852f666e",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"demo-controls\">\n\t\t\t<AsamInput\n\t\t\t\tv-model=\"imageUrl\"\n\t\t\t\tclass=\"image-url\"\n\t\t\t\taria-label=\"示例图片地址\"\n\t\t\t\tplaceholder=\"HTTP(S) 或站内根路径\"\n\t\t\t/>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.focus()\">聚焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.blur()\">失焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.clear()\">清空</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"insertImage\">插入示例图片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"readHTML\">读取 HTML</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"reset\">恢复初始文档</AsamButton>\n\t\t</div>\n\t\t<p class=\"example-paragraph\">图片按所填地址加载；默认示例需要网络。可替换为本项目托管的图片根路径或 HTTP(S) 地址。</p>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamEditor\n\t\tref=\"editor\"\n\t\tv-model=\"document\"\n\t\tplaceholder=\"填写排产说明\"\n\t\t@change=\"changes++\"\n\t/>\n\t\t<p class=\"example-paragraph\">\n\t\t\t<output>change 次数：{{ changes }}；插图结果：{{ imageResult }}</output>\n\t\t</p>\n\t\t<pre class=\"demo-output\">{{ html || '点击读取 HTML' }}</pre>\n\t\t<AsamCollapse\n\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t<template #title><span>当前结构化文档</span></template>\n\t\t\t\t<pre class=\"demo-output\">{{ JSON.stringify(document, null, 2) }}</pre>\n\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEditorBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCollapse, AsamCollapseItem, AsamButton, AsamEditor, AsamInput } from '@asam-ui/ui';\nimport type { AsamEditorDocument, AsamEditorExpose } from '@asam-ui/ui';\nimport { createDocument } from './document.js';\n// 默认图片来自公开 HTTPS 地址；本项目站内图片须由宿主托管，不支持 data/blob。\nconst imageUrl = ref('https://asam-ui.github.io/assets/favicon.svg');\nconst editor = ref<AsamEditorExpose>();\nconst document = ref<AsamEditorDocument>(createDocument());\nconst changes = ref(0);\nconst imageResult = ref('尚未插入');\nconst html = ref('');\nfunction insertImage(): void {\n\timageResult.value = String(\n\t\teditor.value?.insertImage({\n\t\t\tsrc: imageUrl.value,\n\t\t\talt: 'ASAM 示例图片',\n\t\t\ttitle: 'ASAM 示例图片'\n\t\t}) ?? false\n\t);\n}\nfunction readHTML(): void {\n\thtml.value = editor.value?.getHTML() ?? '';\n}\nfunction reset(): void {\n\tdocument.value = createDocument();\n\thtml.value = '';\n\timageResult.value = '尚未插入';\n}\n</script>\n\n<style scoped>\n.image-url {\n\twidth: min(420px, 100%);\n}\n\n.demo-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.demo-output {\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "document.ts",
									"sourcePath": "apps/website/examples/AsamEditor/basic/ts/document.ts",
									"sha256": "269709333cfd28a4409a986fe5c29801fe3da26ea8d6e10117fa76e44eda4520",
									"source": "import type { AsamEditorDocument } from '@asam-ui/ui';\nexport function createDocument(): AsamEditorDocument {\n\treturn {\n\t\ttype: 'doc',\n\t\tcontent: [\n\t\t\t{ type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: '排产说明' }] },\n\t\t\t{\n\t\t\t\ttype: 'paragraph',\n\t\t\t\tcontent: [{ type: 'text', text: '优先核对任务参数。', marks: [{ type: 'bold' }] }]\n\t\t\t}\n\t\t]\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/basic/js/Demo.vue",
									"sha256": "e6fbbc73efb9add0ba2a12ffc41b93a05c8764a5128966b7890daf10330c0073",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"demo-controls\">\n\t\t\t<AsamInput\n\t\t\t\tv-model=\"imageUrl\"\n\t\t\t\tclass=\"image-url\"\n\t\t\t\taria-label=\"示例图片地址\"\n\t\t\t\tplaceholder=\"HTTP(S) 或站内根路径\"\n\t\t\t/>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.focus()\">聚焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.blur()\">失焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.clear()\">清空</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"insertImage\">插入示例图片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"readHTML\">读取 HTML</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"reset\">恢复初始文档</AsamButton>\n\t\t</div>\n\t\t<p class=\"example-paragraph\">图片按所填地址加载；默认示例需要网络。可替换为本项目托管的图片根路径或 HTTP(S) 地址。</p>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamEditor\n\t\tref=\"editor\"\n\t\tv-model=\"document\"\n\t\tplaceholder=\"填写排产说明\"\n\t\t@change=\"changes++\"\n\t/>\n\t\t<p class=\"example-paragraph\">\n\t\t\t<output>change 次数：{{ changes }}；插图结果：{{ imageResult }}</output>\n\t\t</p>\n\t\t<pre class=\"demo-output\">{{ html || '点击读取 HTML' }}</pre>\n\t\t<AsamCollapse\n\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t<template #title><span>当前结构化文档</span></template>\n\t\t\t\t<pre class=\"demo-output\">{{ JSON.stringify(document, null, 2) }}</pre>\n\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEditorBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCollapse, AsamCollapseItem, AsamButton, AsamEditor, AsamInput } from '@asam-ui/ui';\nimport { createDocument } from './document.js';\n// 默认图片来自公开 HTTPS 地址；本项目站内图片须由宿主托管，不支持 data/blob。\nconst imageUrl = ref('https://asam-ui.github.io/assets/favicon.svg');\nconst editor = ref();\nconst document = ref(createDocument());\nconst changes = ref(0);\nconst imageResult = ref('尚未插入');\nconst html = ref('');\nfunction insertImage() {\n\timageResult.value = String(\n\t\teditor.value?.insertImage({\n\t\t\tsrc: imageUrl.value,\n\t\t\talt: 'ASAM 示例图片',\n\t\t\ttitle: 'ASAM 示例图片'\n\t\t}) ?? false\n\t);\n}\nfunction readHTML() {\n\thtml.value = editor.value?.getHTML() ?? '';\n}\nfunction reset() {\n\tdocument.value = createDocument();\n\thtml.value = '';\n\timageResult.value = '尚未插入';\n}\n</script>\n\n<style scoped>\n.image-url {\n\twidth: min(420px, 100%);\n}\n\n.demo-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.demo-output {\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "document.js",
									"sourcePath": "apps/website/examples/AsamEditor/basic/js/document.js",
									"sha256": "1d5e78028f04191eebff843cf65ef95dd81dd296f64d2c5f36941cd15d582eec",
									"source": "export function createDocument() {\n\treturn {\n\t\ttype: 'doc',\n\t\tcontent: [\n\t\t\t{ type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: '排产说明' }] },\n\t\t\t{\n\t\t\t\ttype: 'paragraph',\n\t\t\t\tcontent: [{ type: 'text', text: '优先核对任务参数。', marks: [{ type: 'bold' }] }]\n\t\t\t}\n\t\t]\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "readonly",
					"title": "只读与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/readonly/ts/Demo.vue",
									"sha256": "61a316df10dc60d5ed2e423311652e7df3985d35f60383ec3aac0dff7c1839f5",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\">\n\t\t\t{{ disabled ? '切换为只读' : '切换为禁用' }}\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"tryInsert\">尝试插图</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamEditor\n\t\tref=\"editor\"\n\t\tv-model=\"document\"\n\t\t:editable=\"false\"\n\t\t:disabled=\"disabled\"\n\t/>\n\t\t<output>模式：{{ disabled ? '禁用' : '只读' }}；插图结果：{{ result }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEditorReadonlyExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamEditor } from '@asam-ui/ui';\nimport type { AsamEditorDocument, AsamEditorExpose } from '@asam-ui/ui';\nimport { createDocument } from './document.js';\nconst document = ref<AsamEditorDocument>(createDocument());\nconst editor = ref<AsamEditorExpose>();\nconst disabled = ref(false);\nconst result = ref('尚未尝试');\nfunction tryInsert(): void {\n\tresult.value = String(\n\t\teditor.value?.insertImage({\n\t\t\tsrc: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22%3E%3Crect width=%2220%22 height=%2220%22 fill=%22%232d67cf%22/%3E%3C/svg%3E'\n\t\t}) ?? false\n\t);\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "document.ts",
									"sourcePath": "apps/website/examples/AsamEditor/readonly/ts/document.ts",
									"sha256": "269709333cfd28a4409a986fe5c29801fe3da26ea8d6e10117fa76e44eda4520",
									"source": "import type { AsamEditorDocument } from '@asam-ui/ui';\nexport function createDocument(): AsamEditorDocument {\n\treturn {\n\t\ttype: 'doc',\n\t\tcontent: [\n\t\t\t{ type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: '排产说明' }] },\n\t\t\t{\n\t\t\t\ttype: 'paragraph',\n\t\t\t\tcontent: [{ type: 'text', text: '优先核对任务参数。', marks: [{ type: 'bold' }] }]\n\t\t\t}\n\t\t]\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/readonly/js/Demo.vue",
									"sha256": "267ea21b24ad34f23b0b175f1371a796dbd521ff152652c6d15f522c50004ae3",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\">\n\t\t\t{{ disabled ? '切换为只读' : '切换为禁用' }}\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"tryInsert\">尝试插图</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamEditor\n\t\tref=\"editor\"\n\t\tv-model=\"document\"\n\t\t:editable=\"false\"\n\t\t:disabled=\"disabled\"\n\t/>\n\t\t<output>模式：{{ disabled ? '禁用' : '只读' }}；插图结果：{{ result }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEditorReadonlyExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamEditor } from '@asam-ui/ui';\nimport { createDocument } from './document.js';\nconst document = ref(createDocument());\nconst editor = ref();\nconst disabled = ref(false);\nconst result = ref('尚未尝试');\nfunction tryInsert() {\n\tresult.value = String(\n\t\teditor.value?.insertImage({\n\t\t\tsrc: 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22%3E%3Crect width=%2220%22 height=%2220%22 fill=%22%232d67cf%22/%3E%3C/svg%3E'\n\t\t}) ?? false\n\t);\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "document.js",
									"sourcePath": "apps/website/examples/AsamEditor/readonly/js/document.js",
									"sha256": "1d5e78028f04191eebff843cf65ef95dd81dd296f64d2c5f36941cd15d582eec",
									"source": "export function createDocument() {\n\treturn {\n\t\ttype: 'doc',\n\t\tcontent: [\n\t\t\t{ type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: '排产说明' }] },\n\t\t\t{\n\t\t\t\ttype: 'paragraph',\n\t\t\t\tcontent: [{ type: 'text', text: '优先核对任务参数。', marks: [{ type: 'bold' }] }]\n\t\t\t}\n\t\t]\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "security",
					"title": "链接、图片安全与外部 JSON 替换",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/security/ts/Demo.vue",
									"sha256": "2b6707ca9780d88f6acbb17ab71b1909a7e471964bb6f8efbb9d68ccadb1476c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamEditor\n\t\t\tref=\"editor\"\n\t\t\tv-model=\"document\"\n\t\t\t:editable=\"editable\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@change=\"changes++\"\n\t\t/>\n\t\t<div class=\"controls\">\n\t\t\t<AsamInput\n\t\t\t\tv-model=\"imageUrl\"\n\t\t\t\tclass=\"image-url\"\n\t\t\t\taria-label=\"安全示例图片地址\"\n\t\t\t\tplaceholder=\"HTTP(S) 或站内根路径\"\n\t\t\t/>\n\t\t\t<AsamCheckboxItem v-model=\"editable\"> 可编辑</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" @click=\"insertExample\">插入示例图片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"insert('javascript:alert(1)')\"\n\t\t\t\t>尝试非法图片</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" @click=\"replace\">外部替换 JSON</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.clear()\">清空文档</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"html = editor?.getHTML() ?? ''\"\n\t\t\t\t>读取序列化</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\">图片按所填地址加载；默认示例需要网络。可替换为本项目托管的图片根路径或 HTTP(S) 地址。</p>\n\t\t<output>插图：{{ inserted }}；change：{{ changes }}</output>\n\t\t<pre>{{ html }}</pre>\n\t\t<pre>{{ JSON.stringify(document, null, 2) }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEditorSecurityExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamEditor, AsamButton, AsamInput } from '@asam-ui/ui';\nimport type { AsamEditorDocument, AsamEditorExpose } from '@asam-ui/ui';\n// Editor 图片只接收根路径或 HTTP(S) URL，内联 data/blob 会按公开契约被拒绝。\nconst imageUrl = ref('https://asam-ui.github.io/assets/favicon.svg');\nconst editor = ref<AsamEditorExpose>();\nconst editable = ref(true);\nconst disabled = ref(false);\nconst inserted = ref('尚未插图');\nconst changes = ref(0);\nconst html = ref('');\nconst document = ref<AsamEditorDocument>({\n\ttype: 'doc',\n\tcontent: [\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: '安全链接',\n\t\t\t\t\tmarks: [{ type: 'link', attrs: { href: 'https://example.com' } }]\n\t\t\t\t},\n\t\t\t\t{ type: 'hardBreak' },\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: '邮件',\n\t\t\t\t\tmarks: [{ type: 'link', attrs: { href: 'mailto:demo@example.com' } }]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n});\nfunction insert(src: string): void {\n\tinserted.value = String(editor.value?.insertImage({ src, alt: '示例图片' }));\n}\nfunction insertExample(): void {\n\tinsert(imageUrl.value);\n}\nfunction replace(): void {\n\tdocument.value = {\n\t\ttype: 'doc',\n\t\tcontent: [\n\t\t\t{\n\t\t\t\ttype: 'heading',\n\t\t\t\tattrs: { level: 2 },\n\t\t\t\tcontent: [{ type: 'text', text: '外部新文档' }]\n\t\t\t},\n\t\t\t{ type: 'paragraph' }\n\t\t]\n\t};\n}\n</script>\n\n<style scoped>\n.image-url {\n\twidth: min(420px, 100%);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/security/js/Demo.vue",
									"sha256": "a041455caf50d8d89af8b3d0edf03ce0e36924bc15b3c03bb48a027dc5b8a7f1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamEditor\n\t\t\tref=\"editor\"\n\t\t\tv-model=\"document\"\n\t\t\t:editable=\"editable\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@change=\"changes++\"\n\t\t/>\n\t\t<div class=\"controls\">\n\t\t\t<AsamInput\n\t\t\t\tv-model=\"imageUrl\"\n\t\t\t\tclass=\"image-url\"\n\t\t\t\taria-label=\"安全示例图片地址\"\n\t\t\t\tplaceholder=\"HTTP(S) 或站内根路径\"\n\t\t\t/>\n\t\t\t<AsamCheckboxItem v-model=\"editable\"> 可编辑</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" @click=\"insertExample\">插入示例图片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"insert('javascript:alert(1)')\"\n\t\t\t\t>尝试非法图片</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" @click=\"replace\">外部替换 JSON</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"editor?.clear()\">清空文档</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"html = editor?.getHTML() ?? ''\"\n\t\t\t\t>读取序列化</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\">图片按所填地址加载；默认示例需要网络。可替换为本项目托管的图片根路径或 HTTP(S) 地址。</p>\n\t\t<output>插图：{{ inserted }}；change：{{ changes }}</output>\n\t\t<pre>{{ html }}</pre>\n\t\t<pre>{{ JSON.stringify(document, null, 2) }}</pre>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEditorSecurityExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamEditor, AsamButton, AsamInput } from '@asam-ui/ui';\n// Editor 图片只接收根路径或 HTTP(S) URL，内联 data/blob 会按公开契约被拒绝。\nconst imageUrl = ref('https://asam-ui.github.io/assets/favicon.svg');\nconst editor = ref();\nconst editable = ref(true);\nconst disabled = ref(false);\nconst inserted = ref('尚未插图');\nconst changes = ref(0);\nconst html = ref('');\nconst document = ref({\n\ttype: 'doc',\n\tcontent: [\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: '安全链接',\n\t\t\t\t\tmarks: [{ type: 'link', attrs: { href: 'https://example.com' } }]\n\t\t\t\t},\n\t\t\t\t{ type: 'hardBreak' },\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: '邮件',\n\t\t\t\t\tmarks: [{ type: 'link', attrs: { href: 'mailto:demo@example.com' } }]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n});\nfunction insert(src) {\n\tinserted.value = String(editor.value?.insertImage({ src, alt: '示例图片' }));\n}\nfunction insertExample() {\n\tinsert(imageUrl.value);\n}\nfunction replace() {\n\tdocument.value = {\n\t\ttype: 'doc',\n\t\tcontent: [\n\t\t\t{\n\t\t\t\ttype: 'heading',\n\t\t\t\tattrs: { level: 2 },\n\t\t\t\tcontent: [{ type: 'text', text: '外部新文档' }]\n\t\t\t},\n\t\t\t{ type: 'paragraph' }\n\t\t]\n\t};\n}\n</script>\n\n<style scoped>\n.image-url {\n\twidth: min(420px, 100%);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "helpers",
					"title": "公开辅助函数与动态占位提示",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/helpers/ts/Demo.vue",
									"sha256": "50fb95238bbfc73861d3cd0f3d3992eda1ce8835c09b06fda274f03a46bd5299",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<label for=\"image-url\">图片地址判定</label>\n\t\t\t<AsamInput id=\"image-url\" v-model=\"imageUrl\" />\n\t\t\t<label for=\"link-url\">链接地址判定</label>\n\t\t\t<AsamInput id=\"link-url\" v-model=\"linkUrl\" />\n\t\t</div>\n\t\t<output data-url-results>\n\t\t\t图片允许：{{ isSafeImageUrl(imageUrl) }}；链接允许：{{ isSafeLinkUrl(linkUrl) }}\n\t\t</output>\n\t\t<label for=\"json-source\">待验证 JSON</label>\n\t\t<AsamTextarea id=\"json-source\" v-model=\"jsonSource\" :rows=\"5\"></AsamTextarea>\n\t\t<AsamButton type=\"default\" @click=\"load\">验证并加载 JSON</AsamButton>\n\t\t<output data-parse-result>{{ result }}</output>\n\t\t<label for=\"placeholder-value\">空文档占位提示</label>\n\t\t<AsamInput id=\"placeholder-value\" v-model=\"placeholder\" />\n\t\t<AsamEditor\n\t\t\t:model-value=\"document\"\n\t\t\t:placeholder=\"placeholder\"\n\t\t\t@update:model-value=\"\n\t\t\t\tdocument = $event;\n\t\t\t\tupdates++;\n\t\t\t\"\n\t\t\t@change=\"changes++\"\n\t\t/>\n\t\t<output data-editor-events>模型更新 {{ updates }}；change {{ changes }}</output>\n\t\t<pre data-editor-document>{{ JSON.stringify(document) }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEditorHelpersExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamInput,\n\tAsamTextarea,\n\tAsamButton,\n\tAsamEditor,\n\tEMPTY_EDITOR_DOCUMENT,\n\tisSafeImageUrl,\n\tisSafeLinkUrl,\n\tvalidateEditorDocument\n} from '@asam-ui/ui';\nimport type { AsamEditorDocument } from '@asam-ui/ui';\nconst document = ref<AsamEditorDocument>(structuredClone(EMPTY_EDITOR_DOCUMENT));\nconst jsonSource = ref(JSON.stringify(EMPTY_EDITOR_DOCUMENT, null, 2));\nconst imageUrl = ref('/images/avatar.jpg');\nconst linkUrl = ref('mailto:demo@example.com');\nconst placeholder = ref('初始占位提示');\nconst changes = ref(0);\nconst updates = ref(0);\nconst result = ref('常量已复制为独立文档；辅助函数不发送请求。');\nfunction load(): void {\n\ttry {\n\t\tconst value: unknown = JSON.parse(jsonSource.value);\n\t\tvalidateEditorDocument(value);\n\t\tdocument.value = value;\n\t\tresult.value = '有效文档已加载；验证不改写输入。';\n\t} catch (error) {\n\t\tresult.value = `验证失败：${error instanceof Error ? error.message : String(error)}`;\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\npre {\n\toverflow-wrap: anywhere;\n\twhite-space: pre-wrap;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEditor/helpers/js/Demo.vue",
									"sha256": "b00e200dc10334ca0b932ceca5bc721c6bc1be8de5200ca02712f146b0862b58",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<label for=\"image-url\">图片地址判定</label>\n\t\t\t<AsamInput id=\"image-url\" v-model=\"imageUrl\" />\n\t\t\t<label for=\"link-url\">链接地址判定</label>\n\t\t\t<AsamInput id=\"link-url\" v-model=\"linkUrl\" />\n\t\t</div>\n\t\t<output data-url-results>\n\t\t\t图片允许：{{ isSafeImageUrl(imageUrl) }}；链接允许：{{ isSafeLinkUrl(linkUrl) }}\n\t\t</output>\n\t\t<label for=\"json-source\">待验证 JSON</label>\n\t\t<AsamTextarea id=\"json-source\" v-model=\"jsonSource\" :rows=\"5\"></AsamTextarea>\n\t\t<AsamButton type=\"default\" @click=\"load\">验证并加载 JSON</AsamButton>\n\t\t<output data-parse-result>{{ result }}</output>\n\t\t<label for=\"placeholder-value\">空文档占位提示</label>\n\t\t<AsamInput id=\"placeholder-value\" v-model=\"placeholder\" />\n\t\t<AsamEditor\n\t\t\t:model-value=\"document\"\n\t\t\t:placeholder=\"placeholder\"\n\t\t\t@update:model-value=\"\n\t\t\t\tdocument = $event;\n\t\t\t\tupdates++;\n\t\t\t\"\n\t\t\t@change=\"changes++\"\n\t\t/>\n\t\t<output data-editor-events>模型更新 {{ updates }}；change {{ changes }}</output>\n\t\t<pre data-editor-document>{{ JSON.stringify(document) }}</pre>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEditorHelpersExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamInput,\n\tAsamTextarea,\n\tAsamButton,\n\tAsamEditor,\n\tEMPTY_EDITOR_DOCUMENT,\n\tisSafeImageUrl,\n\tisSafeLinkUrl,\n\tvalidateEditorDocument\n} from '@asam-ui/ui';\nconst document = ref(structuredClone(EMPTY_EDITOR_DOCUMENT));\nconst jsonSource = ref(JSON.stringify(EMPTY_EDITOR_DOCUMENT, null, 2));\nconst imageUrl = ref('/images/avatar.jpg');\nconst linkUrl = ref('mailto:demo@example.com');\nconst placeholder = ref('初始占位提示');\nconst changes = ref(0);\nconst updates = ref(0);\nconst result = ref('常量已复制为独立文档；辅助函数不发送请求。');\nfunction load() {\n\ttry {\n\t\tconst value = JSON.parse(jsonSource.value);\n\t\tvalidateEditorDocument(value);\n\t\tdocument.value = value;\n\t\tresult.value = '有效文档已加载；验证不改写输入。';\n\t} catch (error) {\n\t\tresult.value = `验证失败：${error instanceof Error ? error.message : String(error)}`;\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\npre {\n\toverflow-wrap: anywhere;\n\twhite-space: pre-wrap;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFormSection",
			"documentation": "/component-AsamFormSection.html",
			"demos": [
				{
					"id": "basic",
					"title": "文本与插槽分区",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormSection/basic/ts/Demo.vue",
									"sha256": "ead661ea4e7c8794076175c13a95247be855c50a1930bd079ed036750fa1ca5b",
									"source": "<template>\n\t<AsamFormSection title=\"基本信息\" description=\"文本属性生成分区标题和说明。\">\n\t\t<p class=\"example-paragraph\">任务：装配任务 A-01</p>\n\t</AsamFormSection>\n\t<AsamFormSection title=\"被插槽覆盖的标题\" description=\"被插槽覆盖的说明\">\n\t\t<template #title>\n\t\t\t<span>排产说明 <small>可选</small></span>\n\t\t</template>\n\t\t<template #description>此处分区内容与折叠状态由父组件控制。</template>\n\t\t<template #actions>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tsize=\"small\"\n\t\t\t\t:aria-expanded=\"expanded\"\n\t\t\t\t@click=\"expanded = !expanded\"\n\t\t\t>\n\t\t\t\t{{ expanded ? '收起内容' : '展开内容' }}\n\t\t\t</AsamButton>\n\t\t</template>\n\t\t<p class=\"example-paragraph\" v-if=\"expanded\">优先处理已核对的任务，保留当前分区的其他字段值。</p>\n\t\t<output v-else>内容已收起</output>\n\t</AsamFormSection>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormSectionBasicExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamFormSection } from '@asam-ui/ui';\nconst expanded = ref(true);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormSection/basic/js/Demo.vue",
									"sha256": "5d5e638d25d149bbd293dc9bf795aee38f5ea779d2d15323712f35a1e7ef5c20",
									"source": "<template>\n\t<AsamFormSection title=\"基本信息\" description=\"文本属性生成分区标题和说明。\">\n\t\t<p class=\"example-paragraph\">任务：装配任务 A-01</p>\n\t</AsamFormSection>\n\t<AsamFormSection title=\"被插槽覆盖的标题\" description=\"被插槽覆盖的说明\">\n\t\t<template #title>\n\t\t\t<span>排产说明 <small>可选</small></span>\n\t\t</template>\n\t\t<template #description>此处分区内容与折叠状态由父组件控制。</template>\n\t\t<template #actions>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tsize=\"small\"\n\t\t\t\t:aria-expanded=\"expanded\"\n\t\t\t\t@click=\"expanded = !expanded\"\n\t\t\t>\n\t\t\t\t{{ expanded ? '收起内容' : '展开内容' }}\n\t\t\t</AsamButton>\n\t\t</template>\n\t\t<p class=\"example-paragraph\" v-if=\"expanded\">优先处理已核对的任务，保留当前分区的其他字段值。</p>\n\t\t<output v-else>内容已收起</output>\n\t</AsamFormSection>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormSectionBasicExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamFormSection } from '@asam-ui/ui';\nconst expanded = ref(true);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFormGrid",
			"documentation": "/component-AsamFormGrid.html",
			"demos": [
				{
					"id": "basic",
					"title": "响应式字段排列",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormGrid/basic/ts/Demo.vue",
									"sha256": "ed227d9b42be3bb57cd354365a490e770592d9a434ed57a215b4825a62046864",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamCheckboxItem v-model=\"invalid\"> 无效列数回退</AsamCheckboxItem>\n\t\t<AsamFormGrid\n\t\t\t:columns=\"invalid ? 0 : 3\"\n\t\t\t:tablet-columns=\"invalid ? -1 : 2\"\n\t\t\t:mobile-columns=\"invalid ? 1.5 : 1\"\n\t\t\tgap=\"var(--asam-space-lg)\"\n\t\t>\n\t\t\t<Field v-model=\"form.name\" label=\"任务名称\" />\n\t\t\t<Field v-model=\"form.model\" label=\"产品型号\" />\n\t\t\t<Field v-model=\"form.team\" label=\"班组\" />\n\t\t</AsamFormGrid>\n\t\t<AsamButton type=\"default\" class=\"demo-reset\" @click=\"reset\">恢复默认值</AsamButton>\n\t\t<output>{{ form.name }} / {{ form.model }} / {{ form.team }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormGridBasicExample' });\nimport { reactive, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamFormGrid } from '@asam-ui/ui';\nimport Field from './Field.vue';\nconst invalid = ref(false);\nconst form = reactive({ name: '装配任务', model: 'A-01', team: '一班' });\nfunction reset(): void {\n\tObject.assign(form, { name: '装配任务', model: 'A-01', team: '一班' });\n}\n</script>\n\n<style scoped>\n.demo-reset {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "Field.vue",
									"sourcePath": "apps/website/examples/AsamFormGrid/basic/ts/Field.vue",
									"sha256": "0b41fb8c65339b107b8ff3fed7dbce5b07bdfcf63ffb99ab7e5014c87506b709",
									"source": "<template>\n\t<label class=\"demo-field\">\n\t\t<span>{{ label }}</span>\n\t\t<AsamInput\n\t\t\t:model-value=\"modelValue\"\n\t\t\t@update:model-value=\"emit('update:modelValue', String($event))\"\n\t\t/>\n\t</label>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormGridFieldExample' });\nimport { AsamInput } from '@asam-ui/ui';\ndefineProps<{ label: string; modelValue: string }>();\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>();\n</script>\n\n<style scoped>\n.demo-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormGrid/basic/js/Demo.vue",
									"sha256": "a89542d12a4c1268be99eaa45c5175502c15fd68f2ecd0973ea89be806533c6f",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamCheckboxItem v-model=\"invalid\"> 无效列数回退</AsamCheckboxItem>\n\t\t<AsamFormGrid\n\t\t\t:columns=\"invalid ? 0 : 3\"\n\t\t\t:tablet-columns=\"invalid ? -1 : 2\"\n\t\t\t:mobile-columns=\"invalid ? 1.5 : 1\"\n\t\t\tgap=\"var(--asam-space-lg)\"\n\t\t>\n\t\t\t<Field v-model=\"form.name\" label=\"任务名称\" />\n\t\t\t<Field v-model=\"form.model\" label=\"产品型号\" />\n\t\t\t<Field v-model=\"form.team\" label=\"班组\" />\n\t\t</AsamFormGrid>\n\t\t<AsamButton type=\"default\" class=\"demo-reset\" @click=\"reset\">恢复默认值</AsamButton>\n\t\t<output>{{ form.name }} / {{ form.model }} / {{ form.team }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormGridBasicExample' });\nimport { reactive, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamFormGrid } from '@asam-ui/ui';\nimport Field from './Field.vue';\nconst invalid = ref(false);\nconst form = reactive({ name: '装配任务', model: 'A-01', team: '一班' });\nfunction reset() {\n\tObject.assign(form, { name: '装配任务', model: 'A-01', team: '一班' });\n}\n</script>\n\n<style scoped>\n.demo-reset {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "Field.vue",
									"sourcePath": "apps/website/examples/AsamFormGrid/basic/js/Field.vue",
									"sha256": "5cdb355686bdbb499b7f2afb5a5e489ab46f7f35bfa6eb15de4fd479370c8b31",
									"source": "<template>\n\t<label class=\"demo-field\">\n\t\t<span>{{ label }}</span>\n\t\t<AsamInput\n\t\t\t:model-value=\"modelValue\"\n\t\t\t@update:model-value=\"emit('update:modelValue', String($event))\"\n\t\t/>\n\t</label>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormGridFieldExample' });\nimport { AsamInput } from '@asam-ui/ui';\ndefineProps({\n\tlabel: { type: String, required: true },\n\tmodelValue: { type: String, required: true }\n});\nconst emit = defineEmits(['update:modelValue']);\n</script>\n\n<style scoped>\n.demo-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFormActions",
			"documentation": "/component-AsamFormActions.html",
			"demos": [
				{
					"id": "basic",
					"title": "保存、取消与加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormActions/basic/ts/Demo.vue",
									"sha256": "e79069599850d4189fbc6e9148387508b807f17655691aac74dcbb8820c20533",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamFormActions\n\t\t\tv-bind=\"{\n\t\t\t\t...{ saving: saving, disabled: disabled },\n\t\t\t\t...{ align: 'start', 'save-text': '确认保存', 'cancel-text': '返回' }\n\t\t\t}\"\n\t\t\t@save=\"save\"\n\t\t\t@cancel=\"event = 'cancel'\"\n\t\t/>\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁止操作 </AsamCheckboxItem>\n\t\t<output>{{ event }}；saving：{{ saving }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormActionsBasicExample' });\nimport { ref } from 'vue';\nimport { AsamFormActions, AsamCheckboxItem } from '@asam-ui/ui';\nconst saving = ref(false);\nconst disabled = ref(false);\nconst event = ref('尚未操作');\nasync function save() {\n\tsaving.value = true;\n\ttry {\n\t\tawait new Promise((resolve) => setTimeout(resolve, 250));\n\t\tevent.value = 'save';\n\t} finally {\n\t\tsaving.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormActions/basic/js/Demo.vue",
									"sha256": "e41d46d7f6e66c5f7819b23ccf9c74477467ea82dec0d8de468698c6663cf44f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamFormActions\n\t\t\tv-bind=\"{\n\t\t\t\t...{ saving: saving, disabled: disabled },\n\t\t\t\t...{ align: 'start', 'save-text': '确认保存', 'cancel-text': '返回' }\n\t\t\t}\"\n\t\t\t@save=\"save\"\n\t\t\t@cancel=\"event = 'cancel'\"\n\t\t/>\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁止操作 </AsamCheckboxItem>\n\t\t<output>{{ event }}；saving：{{ saving }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormActionsBasicExample' });\nimport { ref } from 'vue';\nimport { AsamFormActions, AsamCheckboxItem } from '@asam-ui/ui';\nconst saving = ref(false);\nconst disabled = ref(false);\nconst event = ref('尚未操作');\nasync function save() {\n\tsaving.value = true;\n\ttry {\n\t\tawait new Promise((resolve) => setTimeout(resolve, 250));\n\t\tevent.value = 'save';\n\t} finally {\n\t\tsaving.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "附加操作与完整替换",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormActions/slots/ts/Demo.vue",
									"sha256": "0a03c7e2d6e2b7bb6521b66904e266d4d47e011a987ddd1b79b7c149dc71ceed",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamFormActions align=\"center\" @save=\"event = 'save'\" @cancel=\"event = 'cancel'\">\n\t\t\t<template #leading> 尚有未保存更改 </template>\n\t\t\t<template #save> 保存草稿 </template>\n\t\t\t<template #cancel> 放弃更改 </template>\n\t\t</AsamFormActions>\n\t\t<AsamFormActions align=\"end\">\n\t\t\t<AsamButton type=\"default\" @click=\"event = 'preview'\"> 预览 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"event = 'publish-local'\"> 本地确认 </AsamButton>\n\t\t</AsamFormActions>\n\t\t<output>{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormActionsSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamFormActions, AsamButton } from '@asam-ui/ui';\nconst event = ref('尚未操作');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormActions/slots/js/Demo.vue",
									"sha256": "6970849b408bead61255b746c475b0cb3aa6301bd8f0228cd12e85df018ec119",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamFormActions align=\"center\" @save=\"event = 'save'\" @cancel=\"event = 'cancel'\">\n\t\t\t<template #leading> 尚有未保存更改 </template>\n\t\t\t<template #save> 保存草稿 </template>\n\t\t\t<template #cancel> 放弃更改 </template>\n\t\t</AsamFormActions>\n\t\t<AsamFormActions align=\"end\">\n\t\t\t<AsamButton type=\"default\" @click=\"event = 'preview'\"> 预览 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"event = 'publish-local'\"> 本地确认 </AsamButton>\n\t\t</AsamFormActions>\n\t\t<output>{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormActionsSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamFormActions, AsamButton } from '@asam-ui/ui';\nconst event = ref('尚未操作');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormActions/sizes/ts/Demo.vue",
									"sha256": "75d7eb4bc9e27ed1512b66e77444543589231ee881195edc3c115755326a38e6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamFormActions size=\"large\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamFormActions size=\"big\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamFormActions size=\"default\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamFormActions size=\"small\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamFormActions />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormActionsSizesExample' });\nimport { ref } from 'vue';\nimport { AsamFormActions, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormActions/sizes/js/Demo.vue",
									"sha256": "c53b269455cb24f2c5eacd189681329d605ca7bf6e990c53505c2eac0d9b6584",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamFormActions size=\"large\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamFormActions size=\"big\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamFormActions size=\"default\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamFormActions size=\"small\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamFormActions />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormActionsSizesExample' });\nimport { ref } from 'vue';\nimport { AsamFormActions, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCard",
			"documentation": "/component-AsamCard.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/basic/ts/Demo.vue",
									"sha256": "d8c27ccdadd5d10ff5e46d09471d265fd3855d7acd6d59e1fc6dcb86269f9af4",
									"source": "<template>\n\t<AsamCard\n\t\tv-bind=\"{\n\t\t\ttitle: '本地草稿',\n\t\t\tsubtitle: '保存后可继续编辑',\n\t\t\tbordered: true,\n\t\t\thoverable: true,\n\t\t\tshadow: 'hover'\n\t\t}\"\n\t>\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\">保存</AsamButton>\n\t\t</template>\n\t\t<p class=\"example-paragraph\">卡片正文由 default 插槽提供。</p>\n\t\t<template #footer>\n\t\t\t<span role=\"status\">已保存 {{ count }} 次</span>\n\t\t</template>\n\t</AsamCard>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCardBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCard } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/basic/js/Demo.vue",
									"sha256": "0c2ad1a467886cc33c875cca16d6e78c8abc35b0704e935fc522302558b2d0a1",
									"source": "<template>\n\t<AsamCard\n\t\tv-bind=\"{\n\t\t\ttitle: '本地草稿',\n\t\t\tsubtitle: '保存后可继续编辑',\n\t\t\tbordered: true,\n\t\t\thoverable: true,\n\t\t\tshadow: 'hover'\n\t\t}\"\n\t>\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\">保存</AsamButton>\n\t\t</template>\n\t\t<p class=\"example-paragraph\">卡片正文由 default 插槽提供。</p>\n\t\t<template #footer>\n\t\t\t<span role=\"status\">已保存 {{ count }} 次</span>\n\t\t</template>\n\t</AsamCard>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCardBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCard } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-basic/ts/Demo.vue",
									"sha256": "0e5e67e89119cd473e6a24f4f742d9a8069413278f878e732d3886dc2a8a2baa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt\n-->\n<template>\n\t<AsamCard style=\"max-width: 480px\">\n\t\t<template #header>\n\t\t\t<div class=\"card-header\">\n\t\t\t\t<span>卡片名称</span>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<p v-for=\"o in 4\" :key=\"o\" class=\"text item example-paragraph\">{{ '列表项 ' + o }}</p>\n\t\t<template #footer>底部内容</template>\n\t</AsamCard>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCardCapBasicDemo' });\nimport { AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "11b9ac158d08c2d08168a5b120bab40be872a891a77eeb1e7d99356cf6effd44",
									"notice": {
										"id": "845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319",
										"url": "/licenses/source-notices/845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt",
										"licenseFilename": "LICENSE-845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/basic.vue",
											"sourceSha256": "a73d44fcf43337297c4b21a5701517fa4d55d0ea91025c6378752822c570e5d9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-basic/js/Demo.vue",
									"sha256": "9b8b8735507b12880cf3dcba7d2b2dcdcd74ec497f3cab2a68cbc9ae9e58a758",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt\n-->\n<template>\n\t<AsamCard style=\"max-width: 480px\">\n\t\t<template #header>\n\t\t\t<div class=\"card-header\">\n\t\t\t\t<span>卡片名称</span>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<p v-for=\"o in 4\" :key=\"o\" class=\"text item example-paragraph\">{{ '列表项 ' + o }}</p>\n\t\t<template #footer>底部内容</template>\n\t</AsamCard>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCardCapBasicDemo' });\nimport { AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "67530f029dd91213faafbccdcfd41d61132b2a2a11b55fbd021088f2983a2cca",
									"notice": {
										"id": "845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319",
										"url": "/licenses/source-notices/845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt",
										"licenseFilename": "LICENSE-845f77a8e154f13ecbc87422911229bbfba1ea99165f441cf895d9aecf7aa319.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/basic.vue",
											"sourceSha256": "a73d44fcf43337297c4b21a5701517fa4d55d0ea91025c6378752822c570e5d9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-simple",
					"title": "简单卡片",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-simple/ts/Demo.vue",
									"sha256": "3691640421c6939c9710e4c3889f49e5476294c39e26118c7968790d22ba6873",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt\n-->\n<template>\n\t<AsamCard style=\"max-width: 480px\">\n\t\t<p v-for=\"o in 4\" :key=\"o\" class=\"text item example-paragraph\">{{ '列表项 ' + o }}</p>\n\t</AsamCard>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCardCapSimpleDemo' });\nimport { AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "de5d836cce407e6a4664ab63c64a2dc7b55ebd88e5bc3b197126984c99c4a772",
									"notice": {
										"id": "f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e",
										"url": "/licenses/source-notices/f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt",
										"licenseFilename": "LICENSE-f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/simple.vue",
											"sourceSha256": "170d6e880218202bd8320a1db9fc1033791f99fde38d2ce1522bf2d1d25f30d6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-simple/js/Demo.vue",
									"sha256": "1948005bd225b4745fcbf44d7dab1cb6de53a0c29a791ceb9c14bd14d0245b80",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt\n-->\n<template>\n\t<AsamCard style=\"max-width: 480px\">\n\t\t<p v-for=\"o in 4\" :key=\"o\" class=\"text item example-paragraph\">{{ '列表项 ' + o }}</p>\n\t</AsamCard>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCardCapSimpleDemo' });\nimport { AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "aaf747f694b1a416edf29179103fe2b905d5b8324767236f662edbe558a82a48",
									"notice": {
										"id": "f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e",
										"url": "/licenses/source-notices/f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt",
										"licenseFilename": "LICENSE-f36ea2be03e7e1d8da811a3d50ac3585ab6ec288bbc09b6e0ca5426610fe3b2e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/simple.vue",
											"sourceSha256": "170d6e880218202bd8320a1db9fc1033791f99fde38d2ce1522bf2d1d25f30d6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-with-images",
					"title": "有图片内容的卡片",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-with-images/ts/Demo.vue",
									"sha256": "bd1232cdd00bc49d1dd5285135813edcde76ef4c7395961a2d98f0ee4323e0c4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt\n-->\n<template>\n\t<AsamCard style=\"max-width: 480px\">\n\t\t<template #header>美味汉堡</template>\n\n\t\t<AsamImage\n\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\tstyle=\"width: 100%\"\n\t\t/>\n\t</AsamCard>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCardCapWithImagesDemo' });\nimport { AsamImage, AsamCard } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "1367269b4b5411b72de6b3b033a303636d6e613468bf3843336a30df594f808d",
									"notice": {
										"id": "80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf",
										"url": "/licenses/source-notices/80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt",
										"licenseFilename": "LICENSE-80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/with-images.vue",
											"sourceSha256": "d1b30a190b894864604a4a8fac82cbd6c3443fb2ceca66985bdc29588e3c30a7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-with-images/js/Demo.vue",
									"sha256": "816656a72be2881bd6ca31af15fdc89c4e3c03968e9283ea00f640816acb47dd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt\n-->\n<template>\n\t<AsamCard style=\"max-width: 480px\">\n\t\t<template #header>美味汉堡</template>\n\n\t\t<AsamImage\n\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\tstyle=\"width: 100%\"\n\t\t/>\n\t</AsamCard>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCardCapWithImagesDemo' });\nimport { AsamImage, AsamCard } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "235eb7cd6ee0d73d0f4c149686b14bbe1a5d11dac96c17c77846342bee51cd48",
									"notice": {
										"id": "80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf",
										"url": "/licenses/source-notices/80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt",
										"licenseFilename": "LICENSE-80f4bc9b1026b6f4f28605b81e7c7891eec82fd6dca8d6de4d4b1dff2fe6b6cf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/with-images.vue",
											"sourceSha256": "d1b30a190b894864604a4a8fac82cbd6c3443fb2ceca66985bdc29588e3c30a7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-shadow",
					"title": "带有阴影效果的卡片",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-shadow/ts/Demo.vue",
									"sha256": "40017b8a4f71a2c6605d1fc2cd30b940fdccbd9d29061611cc458b7077b9a5e8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap gap-4\">\n\t\t<AsamCard style=\"width: 480px\" shadow=\"always\">始终显示</AsamCard>\n\t\t<AsamCard style=\"width: 480px\" shadow=\"hover\">悬停</AsamCard>\n\t\t<AsamCard style=\"width: 480px\" shadow=\"never\">不显示</AsamCard>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCardCapShadowDemo' });\nimport { AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "0f85c6cd1bd7d4114429f4a73f29d86558a90fe5994a98668bf64e4925cc88b1",
									"notice": {
										"id": "dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f",
										"url": "/licenses/source-notices/dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt",
										"licenseFilename": "LICENSE-dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/shadow.vue",
											"sourceSha256": "7d02f846f84415ba15f098b00ec33455e02064559c5141ab55cc549dc60e88e7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCard/cap-shadow/js/Demo.vue",
									"sha256": "3b35447fa30c1d175ed1eb4400c157823724bb72d482ba0a874736877f70a65f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap gap-4\">\n\t\t<AsamCard style=\"width: 480px\" shadow=\"always\">始终显示</AsamCard>\n\t\t<AsamCard style=\"width: 480px\" shadow=\"hover\">悬停</AsamCard>\n\t\t<AsamCard style=\"width: 480px\" shadow=\"never\">不显示</AsamCard>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCardCapShadowDemo' });\nimport { AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n\n.gap-4 {\n\tgap: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "0978282d8da71fb1e54cffc228bc746a7fbfa94da2c75781255d0c0ab99c094f",
									"notice": {
										"id": "dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f",
										"url": "/licenses/source-notices/dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt",
										"licenseFilename": "LICENSE-dc792b2ba3ead07859071309484f83ba3699987eb0ef7d10f36d0428a5961d4f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/card/shadow.vue",
											"sourceSha256": "7d02f846f84415ba15f098b00ec33455e02064559c5141ab55cc549dc60e88e7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCardList",
			"documentation": "/component-AsamCardList.html",
			"demos": [
				{
					"id": "basic",
					"title": "自动宽度与固定列",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCardList/basic/ts/Demo.vue",
									"sha256": "d9bb62ac798058b3da356bf9ed9fa17c46591c8080cceaa66428da8f750af1d7",
									"source": "<template>\n\t<div class=\"demo-controls\">\n\t\t<AsamButton type=\"default\" @click=\"fixed = !fixed\">{{\n\t\t\tfixed ? '改用自动宽度' : '改用三列'\n\t\t}}</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"equalHeight = !equalHeight\">\n\t\t\t等高：{{ equalHeight ? '开' : '关' }}\n\t\t</AsamButton>\n\t</div>\n\t<AsamCardList\n\t\t:columns=\"fixed ? 3 : null\"\n\t\t:min-card-width=\"200\"\n\t\t:max-card-width=\"320\"\n\t\t:gap=\"16\"\n\t\t:row-gap=\"24\"\n\t\talign=\"stretch\"\n\t\t:equal-height=\"equalHeight\"\n\t>\n\t\t<ItemCard\n\t\t\tv-for=\"card in cards\"\n\t\t\t:key=\"card.id\"\n\t\t\t:title=\"card.title\"\n\t\t\t:description=\"card.description\"\n\t\t\t:details=\"card.details\"\n\t\t/>\n\t</AsamCardList>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCardListBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCardList } from '@asam-ui/ui';\nimport ItemCard from './ItemCard.vue';\nimport { cards } from './cards.js';\nconst fixed = ref(false);\nconst equalHeight = ref(true);\n</script>\n\n<style scoped>\n.demo-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								},
								{
									"name": "ItemCard.vue",
									"sourcePath": "apps/website/examples/AsamCardList/basic/ts/ItemCard.vue",
									"sha256": "afc6ee844179fcce0c7d33dadbade61badec92420bdec28172a5be0023be11e9",
									"source": "<template>\n\t<AsamCard :title=\"title\" shadow=\"never\">\n\t\t<p class=\"example-paragraph\">{{ description }}</p>\n\t\t<ul v-if=\"details.length\">\n\t\t\t<li v-for=\"detail in details\" :key=\"detail\">{{ detail }}</li>\n\t\t</ul>\n\t</AsamCard>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamCard } from '@asam-ui/ui';\ndefineProps<{ title: string; description: string; details: string[] }>();\n</script>\n\n<style scoped>\nul {\n\tmargin: 0;\n\tpadding-left: 20px;\n}\n\nli + li {\n\tmargin-top: 8px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "cards.ts",
									"sourcePath": "apps/website/examples/AsamCardList/basic/ts/cards.ts",
									"sha256": "7a4400489b01fe4a6c12057d80ee2f9addabf97d2db7b7de100d5feb990ff888",
									"source": "export const cards = [\n\t{\n\t\tid: 'a',\n\t\ttitle: '待核任务',\n\t\tdescription: '核对任务参数。',\n\t\tdetails: []\n\t},\n\t{\n\t\tid: 'b',\n\t\ttitle: '正在执行',\n\t\tdescription: '处理步骤较多时保留自然内容高度；切换等高可比较同一网格行中的卡片。',\n\t\tdetails: [\n\t\t\t'核对请求编号与申请人。',\n\t\t\t'确认目标环境与当前版本。',\n\t\t\t'检查提交参数与依赖条件。',\n\t\t\t'核对权限与配置来源。',\n\t\t\t'确认待办记录的当前状态。',\n\t\t\t'检查关联任务的处理结果。',\n\t\t\t'记录本次执行的起止时间。',\n\t\t\t'补充操作说明与异常信息。',\n\t\t\t'保全执行日志和结果文件。',\n\t\t\t'完成复核后更新任务状态。'\n\t\t]\n\t},\n\t{\n\t\tid: 'c',\n\t\ttitle: '已完成',\n\t\tdescription: '检查结果已保全。',\n\t\tdetails: []\n\t}\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCardList/basic/js/Demo.vue",
									"sha256": "d85059df8f591cf6a717b505059f298e09425f011710e4452b4ed1c4737be643",
									"source": "<template>\n\t<div class=\"demo-controls\">\n\t\t<AsamButton type=\"default\" @click=\"fixed = !fixed\">{{\n\t\t\tfixed ? '改用自动宽度' : '改用三列'\n\t\t}}</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"equalHeight = !equalHeight\">\n\t\t\t等高：{{ equalHeight ? '开' : '关' }}\n\t\t</AsamButton>\n\t</div>\n\t<AsamCardList\n\t\t:columns=\"fixed ? 3 : null\"\n\t\t:min-card-width=\"200\"\n\t\t:max-card-width=\"320\"\n\t\t:gap=\"16\"\n\t\t:row-gap=\"24\"\n\t\talign=\"stretch\"\n\t\t:equal-height=\"equalHeight\"\n\t>\n\t\t<ItemCard\n\t\t\tv-for=\"card in cards\"\n\t\t\t:key=\"card.id\"\n\t\t\t:title=\"card.title\"\n\t\t\t:description=\"card.description\"\n\t\t\t:details=\"card.details\"\n\t\t/>\n\t</AsamCardList>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCardListBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCardList } from '@asam-ui/ui';\nimport ItemCard from './ItemCard.vue';\nimport { cards } from './cards.js';\nconst fixed = ref(false);\nconst equalHeight = ref(true);\n</script>\n\n<style scoped>\n.demo-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								},
								{
									"name": "ItemCard.vue",
									"sourcePath": "apps/website/examples/AsamCardList/basic/js/ItemCard.vue",
									"sha256": "1bd1cd26ceb3c2d8e76aa077f1771fd25f7796c636aae059695b453b04678010",
									"source": "<template>\n\t<AsamCard :title=\"title\" shadow=\"never\">\n\t\t<p class=\"example-paragraph\">{{ description }}</p>\n\t\t<ul v-if=\"details.length\">\n\t\t\t<li v-for=\"detail in details\" :key=\"detail\">{{ detail }}</li>\n\t\t</ul>\n\t</AsamCard>\n</template>\n\n<script setup>\nimport { AsamCard } from '@asam-ui/ui';\ndefineProps({\n\ttitle: { type: String, required: true },\n\tdescription: { type: String, required: true },\n\tdetails: { type: Array, required: true }\n});\n</script>\n\n<style scoped>\nul {\n\tmargin: 0;\n\tpadding-left: 20px;\n}\n\nli + li {\n\tmargin-top: 8px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "cards.js",
									"sourcePath": "apps/website/examples/AsamCardList/basic/js/cards.js",
									"sha256": "7a4400489b01fe4a6c12057d80ee2f9addabf97d2db7b7de100d5feb990ff888",
									"source": "export const cards = [\n\t{\n\t\tid: 'a',\n\t\ttitle: '待核任务',\n\t\tdescription: '核对任务参数。',\n\t\tdetails: []\n\t},\n\t{\n\t\tid: 'b',\n\t\ttitle: '正在执行',\n\t\tdescription: '处理步骤较多时保留自然内容高度；切换等高可比较同一网格行中的卡片。',\n\t\tdetails: [\n\t\t\t'核对请求编号与申请人。',\n\t\t\t'确认目标环境与当前版本。',\n\t\t\t'检查提交参数与依赖条件。',\n\t\t\t'核对权限与配置来源。',\n\t\t\t'确认待办记录的当前状态。',\n\t\t\t'检查关联任务的处理结果。',\n\t\t\t'记录本次执行的起止时间。',\n\t\t\t'补充操作说明与异常信息。',\n\t\t\t'保全执行日志和结果文件。',\n\t\t\t'完成复核后更新任务状态。'\n\t\t]\n\t},\n\t{\n\t\tid: 'c',\n\t\ttitle: '已完成',\n\t\tdescription: '检查结果已保全。',\n\t\tdetails: []\n\t}\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "boundaries",
					"title": "固定列、自动宽度与异常范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCardList/boundaries/ts/Demo.vue",
									"sha256": "9411090c99063d1fdd29acdec9416dc38dad2318ccd59b1926078cbe33acaeb3",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"mode = (mode + 1) % scenarios.length\"\n\t\t\t>切换布局输入</AsamButton\n\t\t>\n\t\t<output v-bind=\"domDataAttrs('data-list-mode')\">{{ mode }}</output>\n\t\t<AsamCardList v-bind=\"{ ...scenarios[mode], ...domDataAttrs('data-list-host') }\">\n\t\t\t<AsamCard\n\t\t\t\tv-for=\"(height, index) in [50, 120, 80]\"\n\t\t\t\t:key=\"index\"\n\t\t\t\t:title=\"'卡片 ' + index\"\n\t\t\t>\n\t\t\t\t<div :style=\"{ minHeight: height + 'px' }\">不等高正文</div>\n\t\t\t</AsamCard>\n\t\t</AsamCardList>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport { ref } from 'vue';\nimport { AsamButton, AsamCardList, AsamCard } from '@asam-ui/ui';\nimport type { AsamCardListProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCardListBoundariesDemo' });\nconst mode = ref(0);\nconst scenarios: AsamCardListProps[] = [\n\t{ columns: 3, gap: 12, rowGap: 20, align: 'stretch', equalHeight: true },\n\t{\n\t\tcolumns: null,\n\t\tminCardWidth: 240,\n\t\tmaxCardWidth: '160px',\n\t\tgap: '1rem',\n\t\talign: 'center',\n\t\tequalHeight: false\n\t},\n\t{ columns: 0, minCardWidth: '12rem', maxCardWidth: '20rem', gap: '', align: 'start' },\n\t{ columns: -1, gap: '8px' },\n\t{ columns: 1.5, gap: 0 }\n];\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCardList/boundaries/js/Demo.vue",
									"sha256": "912a97a5eaf4a64ec5f951d1b0563e99c9cde87ced3f2507c33334852b3d5c23",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"mode = (mode + 1) % scenarios.length\"\n\t\t\t>切换布局输入</AsamButton\n\t\t>\n\t\t<output v-bind=\"domDataAttrs('data-list-mode')\">{{ mode }}</output>\n\t\t<AsamCardList v-bind=\"{ ...scenarios[mode], ...domDataAttrs('data-list-host') }\">\n\t\t\t<AsamCard\n\t\t\t\tv-for=\"(height, index) in [50, 120, 80]\"\n\t\t\t\t:key=\"index\"\n\t\t\t\t:title=\"'卡片 ' + index\"\n\t\t\t>\n\t\t\t\t<div :style=\"{ minHeight: height + 'px' }\">不等高正文</div>\n\t\t\t</AsamCard>\n\t\t</AsamCardList>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamCardList, AsamCard } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCardListBoundariesDemo' });\nconst mode = ref(0);\nconst scenarios = [\n\t{ columns: 3, gap: 12, rowGap: 20, align: 'stretch', equalHeight: true },\n\t{\n\t\tcolumns: null,\n\t\tminCardWidth: 240,\n\t\tmaxCardWidth: '160px',\n\t\tgap: '1rem',\n\t\talign: 'center',\n\t\tequalHeight: false\n\t},\n\t{ columns: 0, minCardWidth: '12rem', maxCardWidth: '20rem', gap: '', align: 'start' },\n\t{ columns: -1, gap: '8px' },\n\t{ columns: 1.5, gap: 0 }\n];\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDialog",
			"documentation": "/component-AsamDialog.html",
			"demos": [
				{
					"id": "basic",
					"title": "受控显隐与标题图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/basic/ts/Demo.vue",
									"sha256": "a18bf257b21edc3a59995fb1bbfe1cbb99cc7625f3ee6a820998b82aedec3859",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开对话框</AsamButton>\n\t<AsamDialog\n\t\tv-model=\"open\"\n\t\ttitle=\"保存草稿\"\n\t\tsize=\"mini\"\n\t\t:icon=\"InfoFilled\"\n\t\t:close-on-click-modal=\"false\"\n\t\t@closed=\"closed++\"\n\t>\n\t\t<p class=\"example-paragraph\">对话框内容由宿主维护。</p>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t>完成并关闭</AsamButton\n\t\t\t>\n\t\t</template>\n\t</AsamDialog>\n\t<p class=\"example-paragraph\" role=\"status\">关闭完成 {{ closed }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDialogBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\nconst closed = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/basic/js/Demo.vue",
									"sha256": "45e40316581dd05bf21e407ed972de6664ac8a7a8ab7066ba24858b2d48c09ec",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开对话框</AsamButton>\n\t<AsamDialog\n\t\tv-model=\"open\"\n\t\ttitle=\"保存草稿\"\n\t\tsize=\"mini\"\n\t\t:icon=\"InfoFilled\"\n\t\t:close-on-click-modal=\"false\"\n\t\t@closed=\"closed++\"\n\t>\n\t\t<p class=\"example-paragraph\">对话框内容由宿主维护。</p>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t>完成并关闭</AsamButton\n\t\t\t>\n\t\t</template>\n\t</AsamDialog>\n\t<p class=\"example-paragraph\" role=\"status\">关闭完成 {{ closed }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDialogBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\nconst closed = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "close-guard",
					"title": "关闭确认与公开方法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/close-guard/ts/Demo.vue",
									"sha256": "86a2eb700e41202b9f5aa0be4e00a19acf0c4cb1febb6bb6d765b6f3ed011ace",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开待保存内容</AsamButton>\n\t<AsamDialog\n\t\tref=\"dialog\"\n\t\tv-model=\"open\"\n\t\ttitle=\"未保存内容\"\n\t\twidth=\"min(90vw, 500px)\"\n\t\t:before-close=\"guard\"\n\t>\n\t\t<p class=\"example-paragraph\">确认丢弃后才关闭。</p>\n\t\t<div v-if=\"pending\" class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"approve\">确认丢弃</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"pending = null\"\n\t\t\t\t>继续编辑</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dialog?.handleClose()\"\n\t\t\t\t>请求关闭</AsamButton\n\t\t\t>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDialogCloseGuardDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport type { AsamDialogExpose } from '@asam-ui/ui';\nconst open = ref(false);\nconst dialog = shallowRef<AsamDialogExpose>();\nconst pending = shallowRef<(() => void) | null>(null);\nconst guard = (done: () => void) => {\n\tpending.value = done;\n};\nconst approve = () => {\n\tpending.value?.();\n\tpending.value = null;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/close-guard/js/Demo.vue",
									"sha256": "9c29fccc43cd0c8fdee409939d538934d0835b7e7517e675bb305419a07fdcce",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开待保存内容</AsamButton>\n\t<AsamDialog\n\t\tref=\"dialog\"\n\t\tv-model=\"open\"\n\t\ttitle=\"未保存内容\"\n\t\twidth=\"min(90vw, 500px)\"\n\t\t:before-close=\"guard\"\n\t>\n\t\t<p class=\"example-paragraph\">确认丢弃后才关闭。</p>\n\t\t<div v-if=\"pending\" class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"approve\">确认丢弃</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"pending = null\"\n\t\t\t\t>继续编辑</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dialog?.handleClose()\"\n\t\t\t\t>请求关闭</AsamButton\n\t\t\t>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDialogCloseGuardDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nconst open = ref(false);\nconst dialog = shallowRef();\nconst pending = shallowRef(null);\nconst guard = (done) => {\n\tpending.value = done;\n};\nconst approve = () => {\n\tpending.value?.();\n\tpending.value = null;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "editor",
					"title": "多文件表单与完成关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/editor/ts/Demo.vue",
									"sha256": "2165b2347c756b15cf44f487ae9b075e7d1e773feb1a35b8b0724b56d469c218",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">编辑本地草稿</AsamButton>\n\t<AsamDialog v-model=\"open\" title=\"草稿编辑\" size=\"mini\">\n\t\t<DraftFields v-model=\"draft\" />\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t>保存草稿</AsamButton\n\t\t\t>\n\t\t</template>\n\t</AsamDialog>\n\t<p class=\"example-paragraph\" role=\"status\">草稿名称：{{ draft }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDialogEditorDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport DraftFields from './DraftFields.vue';\nconst open = ref(false);\nconst draft = ref('周报草稿');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "DraftFields.vue",
									"sourcePath": "apps/website/examples/AsamDialog/editor/ts/DraftFields.vue",
									"sha256": "3a98d6f8e351a74d14385cdd5c3c4eee277c2fde32a765fb95f29edced16a35e",
									"source": "<template>\n\t<label>草稿名称 <AsamInput v-model=\"draft\" /></label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamInput } from '@asam-ui/ui';\n\nconst draft = defineModel<string>({ required: true });\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/editor/js/Demo.vue",
									"sha256": "c6c36512173eccc377c8de57092c1f0bbf7aa7d81697ee8d5eaf8adc7f9f00f3",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">编辑本地草稿</AsamButton>\n\t<AsamDialog v-model=\"open\" title=\"草稿编辑\" size=\"mini\">\n\t\t<DraftFields v-model=\"draft\" />\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t>保存草稿</AsamButton\n\t\t\t>\n\t\t</template>\n\t</AsamDialog>\n\t<p class=\"example-paragraph\" role=\"status\">草稿名称：{{ draft }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDialogEditorDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport DraftFields from './DraftFields.vue';\nconst open = ref(false);\nconst draft = ref('周报草稿');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "DraftFields.vue",
									"sourcePath": "apps/website/examples/AsamDialog/editor/js/DraftFields.vue",
									"sha256": "75624e748dbacd6d9d44ca3eefa5fa19962ce914132637a52d8db74dd2b98b12",
									"source": "<template>\n\t<label>草稿名称 <AsamInput v-model=\"draft\" /></label>\n</template>\n\n<script setup>\nimport { AsamInput } from '@asam-ui/ui';\n\nconst draft = defineModel({ type: String, required: true });\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "dimensions",
					"title": "独立浮层尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/dimensions/ts/Demo.vue",
									"sha256": "d73d717bf667412932bd9d5d1cbad845372af4b08b51cbf4fd7d07e5c2ae87bd",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<label>\n\t\t\t<span>浮层尺寸</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>打开所选尺寸</AsamButton\n\t\t>\n\t</div>\n\t<AsamDialog v-model=\"open\" title=\"独立浮层尺寸\" :size=\"size\">\n\t\t<p class=\"example-paragraph\">当前宽度档位 {{ size }}</p>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDialogDimensionsDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamDialog } from '@asam-ui/ui';\nimport type { AsamDialogSize } from '@asam-ui/ui';\nconst sizes: AsamDialogSize[] = ['default', 'small', 'mini', 'large'];\nconst size = ref<AsamDialogSize>('mini');\nconst open = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/dimensions/js/Demo.vue",
									"sha256": "87747283e1e5a1cb1b3f185311f06cc8ff08b4fc064a20238876b866d46197ce",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<label>\n\t\t\t<span>浮层尺寸</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>打开所选尺寸</AsamButton\n\t\t>\n\t</div>\n\t<AsamDialog v-model=\"open\" title=\"独立浮层尺寸\" :size=\"size\">\n\t\t<p class=\"example-paragraph\">当前宽度档位 {{ size }}</p>\n\t</AsamDialog>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDialogDimensionsDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamDialog } from '@asam-ui/ui';\nconst sizes = ['default', 'small', 'mini', 'large'];\nconst size = ref('mini');\nconst open = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic-usage",
					"title": "显隐与关闭守卫",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-basic-usage/ts/Demo.vue",
									"sha256": "bd14ec9e08f0c87754d6a11fa62918ca198ef0560585e5b961325e801c7b818c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 点击打开对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"dialogVisible\" title=\"提示\" width=\"500\" :before-close=\"handleClose\">\n\t\t<span>这是一条消息。</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog, AsamMessageBox } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst dialogVisible = ref(false);\n\nconst handleClose = (done: () => void) => {\n\tAsamMessageBox.confirm('确定关闭当前对话框吗？')\n\t\t.then(() => {\n\t\t\tdone();\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\n</script>\n",
									"originalSourceSha256": "23857cb5e673e8475ee76e546c7ae362aca3cfdc3f2893295be9ae23e51784d2",
									"notice": {
										"id": "ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef",
										"url": "/licenses/source-notices/ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt",
										"licenseFilename": "LICENSE-ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/basic-usage.vue",
											"sourceSha256": "cb5098af597bf88a61587385d58ee7a1c47f3fc7fd0d290bdd3c38ed2b2b3c59",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-basic-usage/js/Demo.vue",
									"sha256": "e6cebe2dfa8b3220b887bf0ae88660ff7c18b8952ace8f66c3c703021c60f02b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 点击打开对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"dialogVisible\" title=\"提示\" width=\"500\" :before-close=\"handleClose\">\n\t\t<span>这是一条消息。</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog, AsamMessageBox } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst dialogVisible = ref(false);\nconst handleClose = (done) => {\n\tAsamMessageBox.confirm('确定关闭当前对话框吗？')\n\t\t.then(() => {\n\t\t\tdone();\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\n</script>\n",
									"originalSourceSha256": "b0f2b149b34f365535fdbfe71e00ad3bba94b3e618e63f4c282adc6296d10331",
									"notice": {
										"id": "ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef",
										"url": "/licenses/source-notices/ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt",
										"licenseFilename": "LICENSE-ee1ec316b17ef0c7e7e7a86a05f3b68e1af77b855a4ed03497c899355456d7ef.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/basic-usage.vue",
											"sourceSha256": "cb5098af597bf88a61587385d58ee7a1c47f3fc7fd0d290bdd3c38ed2b2b3c59",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customization-content",
					"title": "表单与表格内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-customization-content/ts/Demo.vue",
									"sha256": "477fa7cd33a93b9aa38dd98f6fa833fab08e3ccfaec34aa30b04d15f65950f9a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogTableVisible = true\">\n\t\t\t打开含嵌套表格的对话框\n\t\t</AsamButton>\n\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogFormVisible = true\">\n\t\t\t打开含嵌套表单的对话框\n\t\t</AsamButton>\n\t</div>\n\n\t<AsamDialog v-model=\"dialogTableVisible\" title=\"收货地址\" width=\"800\">\n\t\t<AsamTable :data=\"gridData\">\n\t\t\t<AsamTableColumn property=\"date\" label=\"日期\" width=\"150\" />\n\t\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"200\" />\n\t\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</AsamDialog>\n\n\t<AsamDialog v-model=\"dialogFormVisible\" title=\"收货地址\" width=\"500\">\n\t\t<AsamBaseForm :model=\"form\">\n\t\t\t<AsamFormItem label=\"活动名称\" :label-width=\"formLabelWidth\">\n\t\t\t\t<AsamInput\n\t\t\t\t\t:model-value=\"form.name\"\n\t\t\t\t\t@update:model-value=\"form.name = String($event ?? '')\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"区域\" :label-width=\"formLabelWidth\">\n\t\t\t\t<AsamSelect\n\t\t\t\t\t:model-value=\"form.region\"\n\t\t\t\t\t@update:model-value=\"form.region = String($event ?? '')\"\n\t\t\t\t\tplaceholder=\"请选择区域\"\n\t\t\t\t>\n\t\t\t\t\t<AsamOption label=\"区域 1\" value=\"shanghai\" />\n\t\t\t\t\t<AsamOption label=\"区域 2\" value=\"beijing\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogFormVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogFormVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamBaseForm,\n\tAsamButton,\n\tAsamDialog,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamOption,\n\tAsamSelect,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\n\nimport { reactive, ref } from 'vue';\n\nconst dialogTableVisible = ref(false);\nconst dialogFormVisible = ref(false);\nconst formLabelWidth = '140px';\n\nconst form = reactive({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\n\nconst gridData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "fd1656122210f6fe1b1366ca2e2d9b563de8e483a8bb9e992abdf0104ca80dd1",
									"notice": {
										"id": "e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4",
										"url": "/licenses/source-notices/e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt",
										"licenseFilename": "LICENSE-e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/customization-content.vue",
											"sourceSha256": "942d20013e94423bdecc52dd1f00162e77b1fac6d019e808c8a3754554f0e23b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-customization-content/js/Demo.vue",
									"sha256": "61a666e295120c564f7ac40edca279baf64b23c41a716acf39a714537d6ff447",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogTableVisible = true\">\n\t\t\t打开含嵌套表格的对话框\n\t\t</AsamButton>\n\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogFormVisible = true\">\n\t\t\t打开含嵌套表单的对话框\n\t\t</AsamButton>\n\t</div>\n\n\t<AsamDialog v-model=\"dialogTableVisible\" title=\"收货地址\" width=\"800\">\n\t\t<AsamTable :data=\"gridData\">\n\t\t\t<AsamTableColumn property=\"date\" label=\"日期\" width=\"150\" />\n\t\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"200\" />\n\t\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</AsamDialog>\n\n\t<AsamDialog v-model=\"dialogFormVisible\" title=\"收货地址\" width=\"500\">\n\t\t<AsamBaseForm :model=\"form\">\n\t\t\t<AsamFormItem label=\"活动名称\" :label-width=\"formLabelWidth\">\n\t\t\t\t<AsamInput\n\t\t\t\t\t:model-value=\"form.name\"\n\t\t\t\t\t@update:model-value=\"form.name = String($event ?? '')\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"区域\" :label-width=\"formLabelWidth\">\n\t\t\t\t<AsamSelect\n\t\t\t\t\t:model-value=\"form.region\"\n\t\t\t\t\t@update:model-value=\"form.region = String($event ?? '')\"\n\t\t\t\t\tplaceholder=\"请选择区域\"\n\t\t\t\t>\n\t\t\t\t\t<AsamOption label=\"区域 1\" value=\"shanghai\" />\n\t\t\t\t\t<AsamOption label=\"区域 2\" value=\"beijing\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogFormVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogFormVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport {\n\tAsamBaseForm,\n\tAsamButton,\n\tAsamDialog,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamOption,\n\tAsamSelect,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport { reactive, ref } from 'vue';\nconst dialogTableVisible = ref(false);\nconst dialogFormVisible = ref(false);\nconst formLabelWidth = '140px';\nconst form = reactive({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst gridData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "4b12b9f746ffdff91d7d7b4c88863117d1dfbe33bf48715939152dfef661bcff",
									"notice": {
										"id": "e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4",
										"url": "/licenses/source-notices/e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt",
										"licenseFilename": "LICENSE-e8c9291ec84144989e5aa39e9a402c42748f74941aa2d7a3c5a2791edc8a0aa4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/customization-content.vue",
											"sourceSha256": "942d20013e94423bdecc52dd1f00162e77b1fac6d019e808c8a3754554f0e23b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customization-header",
					"title": "标题插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-customization-header/ts/Demo.vue",
									"sha256": "ef2c47bb22a8585f807e89cffb6996e0ac4af9e01e642eb3c73f374157dae2ea",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"visible = true\"> 打开自定义头部的对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"visible\" :show-close=\"false\" width=\"500\">\n\t\t<template #header=\"{ close, titleId, titleClass }\">\n\t\t\t<div class=\"my-header\">\n\t\t\t\t<h4 :id=\"titleId\" :class=\"titleClass\">自定义头部示例</h4>\n\t\t\t\t<AsamButton type=\"default\" @click=\"close\">\n\t\t\t\t\t<AsamIcon class=\"el-icon--left\"><CircleCloseFilled /></AsamIcon>\n\t\t\t\t\t关闭\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t\t这是对话框内容。\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog, AsamIcon } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { CircleCloseFilled } from '@asam-ui/icons-vue';\n\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.my-header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tgap: 16px;\n}\n</style>\n",
									"originalSourceSha256": "f0f75835a4348621e55b3ca72f3709b9b1341e55b3f7818e16b56675a5168c96",
									"notice": {
										"id": "2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723",
										"url": "/licenses/source-notices/2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt",
										"licenseFilename": "LICENSE-2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/customization-header.vue",
											"sourceSha256": "181ca18d5b911898aeaa3861a112f03eb9a2d9ef6d8361bd566f9b960fa5ac7c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-customization-header/js/Demo.vue",
									"sha256": "85be640c507ef3c65b218c56c9ffda708176402f351a276546b6cd0a4d5ccacc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"visible = true\"> 打开自定义头部的对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"visible\" :show-close=\"false\" width=\"500\">\n\t\t<template #header=\"{ close, titleId, titleClass }\">\n\t\t\t<div class=\"my-header\">\n\t\t\t\t<h4 :id=\"titleId\" :class=\"titleClass\">自定义头部示例</h4>\n\t\t\t\t<AsamButton type=\"default\" @click=\"close\">\n\t\t\t\t\t<AsamIcon class=\"el-icon--left\"><CircleCloseFilled /></AsamIcon>\n\t\t\t\t\t关闭\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t\t这是对话框内容。\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog, AsamIcon } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { CircleCloseFilled } from '@asam-ui/icons-vue';\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.my-header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tgap: 16px;\n}\n</style>\n",
									"originalSourceSha256": "24274af0ded65af5e88129bbda212efb4aa36e57f76c9852750882d60c6d0fa7",
									"notice": {
										"id": "2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723",
										"url": "/licenses/source-notices/2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt",
										"licenseFilename": "LICENSE-2d7b7447ecdf5fd735d1ba7726768400b9548d5f48b9b323644a6001c5bce723.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/customization-header.vue",
											"sourceSha256": "181ca18d5b911898aeaa3861a112f03eb9a2d9ef6d8361bd566f9b960fa5ac7c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-nested-dialog",
					"title": "嵌套弹窗",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-nested-dialog/ts/Demo.vue",
									"sha256": "d1b4559340e4f31bea56e74b3b56059394e419fa27412ac5d11eef9859093873",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"outerVisible = true\"> 打开外层对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"outerVisible\" title=\"外层对话框\" width=\"800\">\n\t\t<span>这是外层对话框。</span>\n\t\t<AsamDialog v-model=\"innerVisible\" width=\"500\" title=\"内层对话框\" append-to-body>\n\t\t\t<span>这是内层对话框。</span>\n\t\t</AsamDialog>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"outerVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"innerVisible = true\">\n\t\t\t\t\t打开内层对话框\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst outerVisible = ref(false);\nconst innerVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "931cdc797ef4eed1c5f280386223e71dec751c9004686a65cb858770a45a2769",
									"notice": {
										"id": "a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d",
										"url": "/licenses/source-notices/a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt",
										"licenseFilename": "LICENSE-a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/nested-dialog.vue",
											"sourceSha256": "d54077a15ea280f292fbeffe15883d7147cf4ae5c64b3be319a7e832595644d0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-nested-dialog/js/Demo.vue",
									"sha256": "c9ff03996c3f0eaf02a3c16cc61c3542a8b86963112d580bdf99c3c265366172",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"outerVisible = true\"> 打开外层对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"outerVisible\" title=\"外层对话框\" width=\"800\">\n\t\t<span>这是外层对话框。</span>\n\t\t<AsamDialog v-model=\"innerVisible\" width=\"500\" title=\"内层对话框\" append-to-body>\n\t\t\t<span>这是内层对话框。</span>\n\t\t</AsamDialog>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"outerVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"innerVisible = true\">\n\t\t\t\t\t打开内层对话框\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst outerVisible = ref(false);\nconst innerVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "fd1c661b9dd3291e170990633ff6edbcc91c9e22e4ab958f2e48d4a9e4054e3b",
									"notice": {
										"id": "a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d",
										"url": "/licenses/source-notices/a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt",
										"licenseFilename": "LICENSE-a75efffb096d39d2e68ca4dd2d47172ca04c3d98a55515abf7f3a582a697528d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/nested-dialog.vue",
											"sourceSha256": "d54077a15ea280f292fbeffe15883d7147cf4ae5c64b3be319a7e832595644d0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-centered-content",
					"title": "居中内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-centered-content/ts/Demo.vue",
									"sha256": "3b48f0fd81b4bede5962fd55b9b95ae688411a48eb69470b852fe653c6c33e36",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"centerDialogVisible = true\">\n\t\t点击打开对话框\n\t</AsamButton>\n\n\t<AsamDialog v-model=\"centerDialogVisible\" title=\"警告\" width=\"500\" center>\n\t\t<span> 注意：内容默认不会居中对齐。 </span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst centerDialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "8c078aa4024b621794dec8f9ead779f3475d29d2968935ef4a19a1bc2fb8eb0c",
									"notice": {
										"id": "174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69",
										"url": "/licenses/source-notices/174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt",
										"licenseFilename": "LICENSE-174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/centered-content.vue",
											"sourceSha256": "26d97f0ab753ef6e163fd042839ae528c325d24c8b2b0b813c3c2cfe705bffb0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-centered-content/js/Demo.vue",
									"sha256": "fd3d8bf0a1e964d16de9d71e2b7c0a9579404aeba943911a23dfcccc5671c911",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"centerDialogVisible = true\">\n\t\t点击打开对话框\n\t</AsamButton>\n\n\t<AsamDialog v-model=\"centerDialogVisible\" title=\"警告\" width=\"500\" center>\n\t\t<span> 注意：内容默认不会居中对齐。 </span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst centerDialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "465c55080ff65d51132dc347fb2b78ae150cf12d89a2ac651c962b2e9e61ebc0",
									"notice": {
										"id": "174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69",
										"url": "/licenses/source-notices/174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt",
										"licenseFilename": "LICENSE-174c029651e1d5640929fd7b7fda986e74413779167ff2518de675d9000ccf69.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/centered-content.vue",
											"sourceSha256": "26d97f0ab753ef6e163fd042839ae528c325d24c8b2b0b813c3c2cfe705bffb0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-align-center",
					"title": "垂直居中",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-align-center/ts/Demo.vue",
									"sha256": "93ff1514852916319057b5a321d1400444acbbdd379043793a731262d5895cbf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"centerDialogVisible = true\">\n\t\t点击打开对话框\n\t</AsamButton>\n\n\t<AsamDialog v-model=\"centerDialogVisible\" title=\"警告\" width=\"500\" align-center>\n\t\t<span>从屏幕中央打开对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst centerDialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "3f2ea83fd8c648d03caa91535fc54406e77e1de7886c0e4517beadc213953101",
									"notice": {
										"id": "5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18",
										"url": "/licenses/source-notices/5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt",
										"licenseFilename": "LICENSE-5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/align-center.vue",
											"sourceSha256": "7f4430fcc1c9cad25f5aafaa36c882c8b50ac59cd2c74a17d7e5de22b37e1264",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-align-center/js/Demo.vue",
									"sha256": "1498c01112778c586a15d841eb13706e4d999fa1b4aa9b4fbc1b373ac00db810",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"centerDialogVisible = true\">\n\t\t点击打开对话框\n\t</AsamButton>\n\n\t<AsamDialog v-model=\"centerDialogVisible\" title=\"警告\" width=\"500\" align-center>\n\t\t<span>从屏幕中央打开对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst centerDialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "85c8465084286eb85265c4ca892ff82742650aa3f04565e6d2c51de0658c0c1e",
									"notice": {
										"id": "5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18",
										"url": "/licenses/source-notices/5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt",
										"licenseFilename": "LICENSE-5171bf4db17f03cd12f12ddce3757430b2769dfc751244804304d7df689a2b18.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/align-center.vue",
											"sourceSha256": "7f4430fcc1c9cad25f5aafaa36c882c8b50ac59cd2c74a17d7e5de22b37e1264",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-destroy-on-close",
					"title": "关闭后销毁内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-destroy-on-close/ts/Demo.vue",
									"sha256": "9ed9123aafb9f8f4cc1731e9d2e961d8b98e4d854f448ea51e83a168ca75e422",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"centerDialogVisible = true\">\n\t\t点击打开对话框\n\t</AsamButton>\n\n\t<AsamDialog v-model=\"centerDialogVisible\" title=\"注意\" width=\"500\" destroy-on-close center>\n\t\t<span> 注意：首次打开对话框前，此节点及其下方节点不会渲染。 </span>\n\t\t<div>\n\t\t\t<strong>额外内容（未渲染）</strong>\n\t\t</div>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst centerDialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "dfae23c627c2560f69c8a8f36b7d29ae6457e5ff6d81156cab79a1ec27068699",
									"notice": {
										"id": "e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336",
										"url": "/licenses/source-notices/e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt",
										"licenseFilename": "LICENSE-e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/destroy-on-close.vue",
											"sourceSha256": "53ed215287b60db209b7d37e0aa35a4c2af8e7ec6c8858bd0b5890a70c0012a6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-destroy-on-close/js/Demo.vue",
									"sha256": "a0ef1dddcb439b7b1401a979fb60530d89203efdcae688dc1ef2bdd6937aeb46",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"centerDialogVisible = true\">\n\t\t点击打开对话框\n\t</AsamButton>\n\n\t<AsamDialog v-model=\"centerDialogVisible\" title=\"注意\" width=\"500\" destroy-on-close center>\n\t\t<span> 注意：首次打开对话框前，此节点及其下方节点不会渲染。 </span>\n\t\t<div>\n\t\t\t<strong>额外内容（未渲染）</strong>\n\t\t</div>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"centerDialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst centerDialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "3b55bcfd0f4e84866f434ed3216515d8733bf27877514c88b2fe08fabf3e4c2d",
									"notice": {
										"id": "e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336",
										"url": "/licenses/source-notices/e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt",
										"licenseFilename": "LICENSE-e0940d5691d6f7ca85203de70a27a059f26d69b91541d22c4514bba62847a336.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/destroy-on-close.vue",
											"sourceSha256": "53ed215287b60db209b7d37e0aa35a4c2af8e7ec6c8858bd0b5890a70c0012a6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-draggable-dialog",
					"title": "拖动、溢出与复位",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-draggable-dialog/ts/Demo.vue",
									"sha256": "bef149bb13fbf0ddbbfc36903bfcacbb7b712bb3b82afe49ad362924ad8d574a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogVisible = true\">\n\t\t\t打开可拖拽对话框\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogOverflowVisible = true\">\n\t\t\t打开允许越界拖拽的对话框\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"customDraggingVisible = true\">\n\t\t\t打开自定义拖拽样式的对话框\n\t\t</AsamButton>\n\t</div>\n\n\t<AsamDialog v-model=\"dialogVisible\" title=\"提示\" width=\"500\" draggable>\n\t\t<span>可拖拽对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n\n\t<AsamDialog v-model=\"dialogOverflowVisible\" title=\"提示\" width=\"500\" draggable overflow>\n\t\t<span>允许越界拖拽的对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogOverflowVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogOverflowVisible = false\">\n\t\t\t\t\t确认\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n\n\t<AsamDialog\n\t\tv-model=\"customDraggingVisible\"\n\t\tclass=\"custom-dragging-style\"\n\t\ttitle=\"自定义拖拽样式\"\n\t\twidth=\"500\"\n\t\tdraggable\n\t>\n\t\t<span>此对话框采用自定义拖拽样式，可以拖动查看效果。</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"customDraggingVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"customDraggingVisible = false\">\n\t\t\t\t\t确认\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst dialogVisible = ref(false);\nconst dialogOverflowVisible = ref(false);\nconst customDraggingVisible = ref(false);\n</script>\n\n<style scoped>\n:global(.custom-dragging-style.is-dragging) {\n\tborder: 2px dashed var(--el-color-primary);\n\topacity: 0.65;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "188a9cea1c7690f0c67e2a40eb8c71d735d43342416bef9b3d1d57aea5baea65",
									"notice": {
										"id": "dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3",
										"url": "/licenses/source-notices/dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt",
										"licenseFilename": "LICENSE-dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/draggable-dialog.vue",
											"sourceSha256": "da50572dcffefa226a3077ddec258c4ff1725ac537e5339060d5d5378ca7cd41",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-draggable-dialog/js/Demo.vue",
									"sha256": "c1f124b9f77c5b7fd95e55ffa329943012ec31292d3a0b18fff777ea8348e1ed",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogVisible = true\">\n\t\t\t打开可拖拽对话框\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"dialogOverflowVisible = true\">\n\t\t\t打开允许越界拖拽的对话框\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"customDraggingVisible = true\">\n\t\t\t打开自定义拖拽样式的对话框\n\t\t</AsamButton>\n\t</div>\n\n\t<AsamDialog v-model=\"dialogVisible\" title=\"提示\" width=\"500\" draggable>\n\t\t<span>可拖拽对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n\n\t<AsamDialog v-model=\"dialogOverflowVisible\" title=\"提示\" width=\"500\" draggable overflow>\n\t\t<span>允许越界拖拽的对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogOverflowVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogOverflowVisible = false\">\n\t\t\t\t\t确认\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n\n\t<AsamDialog\n\t\tv-model=\"customDraggingVisible\"\n\t\tclass=\"custom-dragging-style\"\n\t\ttitle=\"自定义拖拽样式\"\n\t\twidth=\"500\"\n\t\tdraggable\n\t>\n\t\t<span>此对话框采用自定义拖拽样式，可以拖动查看效果。</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"customDraggingVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"customDraggingVisible = false\">\n\t\t\t\t\t确认\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst dialogVisible = ref(false);\nconst dialogOverflowVisible = ref(false);\nconst customDraggingVisible = ref(false);\n</script>\n\n<style scoped>\n:global(.custom-dragging-style.is-dragging) {\n\tborder: 2px dashed var(--el-color-primary);\n\topacity: 0.65;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "8701fcf3c66e29a4482d8f8f88f67c3c63fe6122cc2d9d1204694369dbef5a81",
									"notice": {
										"id": "dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3",
										"url": "/licenses/source-notices/dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt",
										"licenseFilename": "LICENSE-dbc2fc85a49b4bc413f7357a2df49933e7afdc6a1f7930f3d31878dcc6316dd3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/draggable-dialog.vue",
											"sourceSha256": "da50572dcffefa226a3077ddec258c4ff1725ac537e5339060d5d5378ca7cd41",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-fullscreen",
					"title": "全屏",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-fullscreen/ts/Demo.vue",
									"sha256": "784622237980a08d4014a7db93d95e219d3096a47a300092924bc8b519a0f9f5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 打开全屏对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"dialogVisible\" fullscreen>\n\t\t<span>全屏对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst dialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "9b079dd13ffa3bcbd6eec2fee9e854a117623b2edf7b1af1ed909917b1285871",
									"notice": {
										"id": "119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375",
										"url": "/licenses/source-notices/119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt",
										"licenseFilename": "LICENSE-119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/fullscreen.vue",
											"sourceSha256": "945a1a4d2b3bd60a871469686e796f965f138f82e5655362c7110db1ee36a5ac",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-fullscreen/js/Demo.vue",
									"sha256": "9359c2b58af987254a1e2aa0a60f6814e3044065d99383084c51f25c66007b06",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 打开全屏对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"dialogVisible\" fullscreen>\n\t\t<span>全屏对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst dialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "7e392e10ac5aec5798c6708328954232b18f36f0d348ed9e4497a28170b6c2c0",
									"notice": {
										"id": "119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375",
										"url": "/licenses/source-notices/119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt",
										"licenseFilename": "LICENSE-119261af903c97d54a114022185a1e943f7aee870c25496644d5385761260375.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/fullscreen.vue",
											"sourceSha256": "945a1a4d2b3bd60a871469686e796f965f138f82e5655362c7110db1ee36a5ac",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-modal",
					"title": "遮罩配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-modal/ts/Demo.vue",
									"sha256": "31cb2edaf9dfb170329a5948904175a4e888140d03a0097b21d506dabd97a276",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 打开模态对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"dialogVisible\" :modal=\"false\" modal-penetrable>\n\t\t<span>模态对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst dialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "a6a2f1400936cc21333e79c02febbe6a8546f62b420fc2119f7e5b49c205d668",
									"notice": {
										"id": "f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403",
										"url": "/licenses/source-notices/f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt",
										"licenseFilename": "LICENSE-f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/modal.vue",
											"sourceSha256": "4d8a31f02db6a3dd9cd45b90659aacbba8cb62d74942e18879987407507bee0c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-modal/js/Demo.vue",
									"sha256": "283f060409c80d6801bafc30df008239c7ab934f4575ba7224b65c9d9baee987",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 打开模态对话框 </AsamButton>\n\n\t<AsamDialog v-model=\"dialogVisible\" :modal=\"false\" modal-penetrable>\n\t\t<span>模态对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst dialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "b13e128ff7f37b659291606fbc739f788436b473965ff084e0592d34154f7a13",
									"notice": {
										"id": "f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403",
										"url": "/licenses/source-notices/f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt",
										"licenseFilename": "LICENSE-f234fb9fb801fbf421c5ce1ba3e0e09ca89daec9a5bbc36389eca6e616a3c403.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/modal.vue",
											"sourceSha256": "4d8a31f02db6a3dd9cd45b90659aacbba8cb62d74942e18879987407507bee0c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-custom-animation",
					"title": "自定义动画",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-custom-animation/ts/Demo.vue",
									"sha256": "b393e284c76ce23330214aef17ec41f3f670943fb179b7a45aaa285e04df8e57",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt\n-->\n<template>\n\t<div>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('fade')\"> 默认 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('scale')\"> 缩放 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('slide')\"> 滑动 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('bounce')\"> 弹跳 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialogWithObject\"> 对象配置 </AsamButton>\n\t</div>\n\n\t<AsamDialog\n\t\tv-model=\"dialogVisible\"\n\t\tclass=\"custom-transition-dialog\"\n\t\t:title=\"`${currentAnimation} Animation Dialog`\"\n\t\twidth=\"30%\"\n\t\t:transition=\"transitionConfig\"\n\t>\n\t\t<div>\n\t\t\t<p class=\"example-paragraph\">\n\t\t\t\t当前动画： <strong>{{ currentAnimation }}</strong>\n\t\t\t</p>\n\t\t\t<p class=\"example-paragraph\">此对话框演示 {{ currentAnimation }} 动画效果。</p>\n\t\t\t<p class=\"example-paragraph\" v-if=\"isObjectConfig\">\n\t\t\t\t<strong>使用对象配置：</strong><br />\n\t\t\t\t<code>{{ JSON.stringify(transitionConfig, null, 2) }}</code>\n\t\t\t</p>\n\t\t</div>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog, type AsamDialogTransition as DialogTransition } from '@asam-ui/ui';\n\nimport { computed, ref } from 'vue';\n\nconst dialogVisible = ref(false);\nconst currentAnimation = ref('fade');\nconst isObjectConfig = ref(false);\n\nconst transitionConfig = computed<DialogTransition>(() => {\n\tif (isObjectConfig.value) {\n\t\treturn {\n\t\t\tname: 'dialog-custom-object',\n\t\t\tappear: true,\n\t\t\tmode: 'out-in',\n\t\t\tduration: 500\n\t\t};\n\t}\n\treturn `dialog-${currentAnimation.value}`;\n});\n\nconst openDialog = (type: string) => {\n\tcurrentAnimation.value = type;\n\tisObjectConfig.value = false;\n\tdialogVisible.value = true;\n};\n\nconst openDialogWithObject = () => {\n\tcurrentAnimation.value = 'object-config';\n\tisObjectConfig.value = true;\n\tdialogVisible.value = true;\n};\n</script>\n\n<style scoped>\ncode {\n\tbackground: var(--el-bg-color-page);\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-size: 12px;\n\tdisplay: block;\n\tmargin-top: 8px;\n}\n</style>\n\n<style>\n/* Scale Animation */\n.dialog-scale-enter-active,\n.dialog-scale-leave-active,\n.dialog-scale-enter-active .el-dialog,\n.dialog-scale-leave-active .el-dialog {\n\ttransition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.dialog-scale-enter-from,\n.dialog-scale-leave-to {\n\topacity: 0;\n}\n\n.dialog-scale-enter-from .el-dialog,\n.dialog-scale-leave-to .el-dialog {\n\ttransform: scale(0.5);\n\topacity: 0;\n}\n\n/* Slide Animation */\n.dialog-slide-enter-active,\n.dialog-slide-leave-active,\n.dialog-slide-enter-active .el-dialog,\n.dialog-slide-leave-active .el-dialog {\n\ttransition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.dialog-slide-enter-from,\n.dialog-slide-leave-to {\n\topacity: 0;\n}\n\n.dialog-slide-enter-from .el-dialog,\n.dialog-slide-leave-to .el-dialog {\n\ttransform: translateY(-100px);\n\topacity: 0;\n}\n\n/* Bounce Animation */\n.dialog-bounce-enter-active,\n.dialog-bounce-leave-active,\n.dialog-bounce-enter-active .el-dialog,\n.dialog-bounce-leave-active .el-dialog {\n\ttransition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.dialog-bounce-enter-from,\n.dialog-bounce-leave-to {\n\topacity: 0;\n}\n\n.dialog-bounce-enter-from .el-dialog,\n.dialog-bounce-leave-to .el-dialog {\n\ttransform: scale(0.3) translateY(-50px);\n\topacity: 0;\n}\n\n/* Object Configuration Animation */\n.dialog-custom-object-enter-active,\n.dialog-custom-object-leave-active,\n.dialog-custom-object-enter-active .el-dialog,\n.dialog-custom-object-leave-active .el-dialog {\n\ttransition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.dialog-custom-object-enter-from,\n.dialog-custom-object-leave-to {\n\topacity: 0;\n}\n\n.dialog-custom-object-enter-from .el-dialog,\n.dialog-custom-object-leave-to .el-dialog {\n\ttransform: rotate(180deg) scale(0.5);\n\topacity: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "e551eff21cca85c6fda930353957be5bafb34ae7d97137ea8539aca1d9004e6e",
									"notice": {
										"id": "8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523",
										"url": "/licenses/source-notices/8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt",
										"licenseFilename": "LICENSE-8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/custom-animation.vue",
											"sourceSha256": "42dd10ad016cbd5afe50996155fe5c640a07ac3ff10d9761a44452d8daf40cdb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-custom-animation/js/Demo.vue",
									"sha256": "19e1adf3b451c662fbf2dfcb4508c3b6adc45500ee24ebf2f31f3937fe526073",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt\n-->\n<template>\n\t<div>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('fade')\"> 默认 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('scale')\"> 缩放 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('slide')\"> 滑动 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialog('bounce')\"> 弹跳 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"openDialogWithObject\"> 对象配置 </AsamButton>\n\t</div>\n\n\t<AsamDialog\n\t\tv-model=\"dialogVisible\"\n\t\tclass=\"custom-transition-dialog\"\n\t\t:title=\"`${currentAnimation} Animation Dialog`\"\n\t\twidth=\"30%\"\n\t\t:transition=\"transitionConfig\"\n\t>\n\t\t<div>\n\t\t\t<p class=\"example-paragraph\">\n\t\t\t\t当前动画： <strong>{{ currentAnimation }}</strong>\n\t\t\t</p>\n\t\t\t<p class=\"example-paragraph\">此对话框演示 {{ currentAnimation }} 动画效果。</p>\n\t\t\t<p class=\"example-paragraph\" v-if=\"isObjectConfig\">\n\t\t\t\t<strong>使用对象配置：</strong><br />\n\t\t\t\t<code>{{ JSON.stringify(transitionConfig, null, 2) }}</code>\n\t\t\t</p>\n\t\t</div>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nconst dialogVisible = ref(false);\nconst currentAnimation = ref('fade');\nconst isObjectConfig = ref(false);\nconst transitionConfig = computed(() => {\n\tif (isObjectConfig.value) {\n\t\treturn {\n\t\t\tname: 'dialog-custom-object',\n\t\t\tappear: true,\n\t\t\tmode: 'out-in',\n\t\t\tduration: 500\n\t\t};\n\t}\n\treturn `dialog-${currentAnimation.value}`;\n});\nconst openDialog = (type) => {\n\tcurrentAnimation.value = type;\n\tisObjectConfig.value = false;\n\tdialogVisible.value = true;\n};\nconst openDialogWithObject = () => {\n\tcurrentAnimation.value = 'object-config';\n\tisObjectConfig.value = true;\n\tdialogVisible.value = true;\n};\n</script>\n\n<style scoped>\ncode {\n\tbackground: var(--el-bg-color-page);\n\tpadding: 4px 8px;\n\tborder-radius: 4px;\n\tfont-size: 12px;\n\tdisplay: block;\n\tmargin-top: 8px;\n}\n</style>\n\n<style>\n/* Scale Animation */\n.dialog-scale-enter-active,\n.dialog-scale-leave-active,\n.dialog-scale-enter-active .el-dialog,\n.dialog-scale-leave-active .el-dialog {\n\ttransition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.dialog-scale-enter-from,\n.dialog-scale-leave-to {\n\topacity: 0;\n}\n\n.dialog-scale-enter-from .el-dialog,\n.dialog-scale-leave-to .el-dialog {\n\ttransform: scale(0.5);\n\topacity: 0;\n}\n\n/* Slide Animation */\n.dialog-slide-enter-active,\n.dialog-slide-leave-active,\n.dialog-slide-enter-active .el-dialog,\n.dialog-slide-leave-active .el-dialog {\n\ttransition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.dialog-slide-enter-from,\n.dialog-slide-leave-to {\n\topacity: 0;\n}\n\n.dialog-slide-enter-from .el-dialog,\n.dialog-slide-leave-to .el-dialog {\n\ttransform: translateY(-100px);\n\topacity: 0;\n}\n\n/* Bounce Animation */\n.dialog-bounce-enter-active,\n.dialog-bounce-leave-active,\n.dialog-bounce-enter-active .el-dialog,\n.dialog-bounce-leave-active .el-dialog {\n\ttransition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.dialog-bounce-enter-from,\n.dialog-bounce-leave-to {\n\topacity: 0;\n}\n\n.dialog-bounce-enter-from .el-dialog,\n.dialog-bounce-leave-to .el-dialog {\n\ttransform: scale(0.3) translateY(-50px);\n\topacity: 0;\n}\n\n/* Object Configuration Animation */\n.dialog-custom-object-enter-active,\n.dialog-custom-object-leave-active,\n.dialog-custom-object-enter-active .el-dialog,\n.dialog-custom-object-leave-active .el-dialog {\n\ttransition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.dialog-custom-object-enter-from,\n.dialog-custom-object-leave-to {\n\topacity: 0;\n}\n\n.dialog-custom-object-enter-from .el-dialog,\n.dialog-custom-object-leave-to .el-dialog {\n\ttransform: rotate(180deg) scale(0.5);\n\topacity: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "b37d3d40bdffdd24332691213a731ed4c9ca7cf961abb19de391ccbdf317a762",
									"notice": {
										"id": "8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523",
										"url": "/licenses/source-notices/8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt",
										"licenseFilename": "LICENSE-8360bef9a6e8218080736f5d26b7810a3936280f460d9fb13c82858948247523.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/custom-animation.vue",
											"sourceSha256": "42dd10ad016cbd5afe50996155fe5c640a07ac3ff10d9761a44452d8daf40cdb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-events",
					"title": "完整交互：events",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-events/ts/Demo.vue",
									"sha256": "ee315afa58a6a51249e16f4741863714a163069cbae56b626faae2908a9c511b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 打开事件演示对话框 </AsamButton>\n\n\t<AsamDialog\n\t\tv-model=\"dialogVisible\"\n\t\tmodal-class=\"overide-animation\"\n\t\t:before-close=\"\n\t\t\t(doneFn) => {\n\t\t\t\t(console.log('before-close'), doneFn());\n\t\t\t}\n\t\t\"\n\t\t@open=\"console.log('open')\"\n\t\t@open-auto-focus=\"console.log('open-auto-focus')\"\n\t\t@opened=\"console.log('opened')\"\n\t\t@close=\"console.log('close')\"\n\t\t@close-auto-focus=\"console.log('close-auto-focus')\"\n\t\t@closed=\"console.log('closed')\"\n\t>\n\t\t<span>事件演示对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst dialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "f6333e12ba1055ad5119b5d83608fc9e375a05603f9a614bfd0e738c881ef9e4",
									"notice": {
										"id": "621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58",
										"url": "/licenses/source-notices/621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt",
										"licenseFilename": "LICENSE-621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/events.vue",
											"sourceSha256": "b471b7b4453ba6361546c111d35d63a2d9d5d5c053bfdad0e3e405409906a102",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/ep2147-events/js/Demo.vue",
									"sha256": "e362fc00b5c8761f3662d28af311d2b6282109ce792fbe51667641f0e5faf0f9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"dialogVisible = true\"> 打开事件演示对话框 </AsamButton>\n\n\t<AsamDialog\n\t\tv-model=\"dialogVisible\"\n\t\tmodal-class=\"overide-animation\"\n\t\t:before-close=\"\n\t\t\t(doneFn) => {\n\t\t\t\t(console.log('before-close'), doneFn());\n\t\t\t}\n\t\t\"\n\t\t@open=\"console.log('open')\"\n\t\t@open-auto-focus=\"console.log('open-auto-focus')\"\n\t\t@opened=\"console.log('opened')\"\n\t\t@close=\"console.log('close')\"\n\t\t@close-auto-focus=\"console.log('close-auto-focus')\"\n\t\t@closed=\"console.log('closed')\"\n\t>\n\t\t<span>事件演示对话框</span>\n\t\t<template #footer>\n\t\t\t<div class=\"dialog-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"dialogVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDialog>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst dialogVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "92a6c0fbcabe2e7c26b4495d0628e7533c53fcb67d9dd5a8055496d8197ecd2f",
									"notice": {
										"id": "621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58",
										"url": "/licenses/source-notices/621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt",
										"licenseFilename": "LICENSE-621a703a69d3c87536726f6f2f7616ac555fea6c485b43ef7984ce81cd19fa58.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dialog/events.vue",
											"sourceSha256": "b471b7b4453ba6361546c111d35d63a2d9d5d5c053bfdad0e3e405409906a102",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/popup-container/ts/Demo.vue",
									"sha256": "8c3bde1193fc1955e9504514b57eafc00f3fb8278fd05c1f82a7fb6a3747c275",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开对话框</AsamButton>\n\t\t<AsamDialog\n\t\t\tv-model=\"open\"\n\t\t\ttitle=\"保存草稿\"\n\t\t\tsize=\"mini\"\n\t\t\t:icon=\"InfoFilled\"\n\t\t\t:close-on-click-modal=\"false\"\n\t\t\t@closed=\"closed++\"\n\t\t\t:append-to=\"globalPopup ? 'body' : mountTarget || 'body'\"\n\t\t\t:append-to-body=\"globalPopup\"\n\t\t>\n\t\t\t<p class=\"example-paragraph\">对话框内容由宿主维护。</p>\n\t\t\t<template #footer>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t>完成并关闭</AsamButton\n\t\t\t\t>\n\t\t\t</template>\n\t\t</AsamDialog>\n\t\t<p class=\"example-paragraph\" role=\"status\">关闭完成 {{ closed }} 次</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDialogBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\nconst closed = ref(0);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.popup-stage.local :deep(.el-overlay) {\n\tposition: absolute;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDialog/popup-container/js/Demo.vue",
									"sha256": "8a1e462dac3cbbe961d7bc6585e8b9ffbcd56c51f85bf0f88bb100c782a60e2d",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开对话框</AsamButton>\n\t\t<AsamDialog\n\t\t\tv-model=\"open\"\n\t\t\ttitle=\"保存草稿\"\n\t\t\tsize=\"mini\"\n\t\t\t:icon=\"InfoFilled\"\n\t\t\t:close-on-click-modal=\"false\"\n\t\t\t@closed=\"closed++\"\n\t\t\t:append-to=\"globalPopup ? 'body' : mountTarget || 'body'\"\n\t\t\t:append-to-body=\"globalPopup\"\n\t\t>\n\t\t\t<p class=\"example-paragraph\">对话框内容由宿主维护。</p>\n\t\t\t<template #footer>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t>完成并关闭</AsamButton\n\t\t\t\t>\n\t\t\t</template>\n\t\t</AsamDialog>\n\t\t<p class=\"example-paragraph\" role=\"status\">关闭完成 {{ closed }} 次</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDialogBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDialog } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\nconst closed = ref(0);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.popup-stage.local :deep(.el-overlay) {\n\tposition: absolute;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDrawer",
			"documentation": "/component-AsamDrawer.html",
			"demos": [
				{
					"id": "basic",
					"title": "方向与抽屉操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/basic/ts/Demo.vue",
									"sha256": "3f06a13e1cac7d47c54025ffc1cc74bee64a83115c30b335439ad47d89e5ff44",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开抽屉</AsamButton>\n\t<AsamDrawer\n\t\tv-model=\"open\"\n\t\ttitle=\"记录详情\"\n\t\tdirection=\"rtl\"\n\t\tsize=\"small\"\n\t\t:icon=\"InfoFilled\"\n\t\t:close-on-click-modal=\"false\"\n\t>\n\t\t<p class=\"example-paragraph\">辅助内容保持在当前页面上下文中。</p>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\">完成</AsamButton>\n\t\t</template>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDrawerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/basic/js/Demo.vue",
									"sha256": "fc30daa68179daf85f7da08bd8d1e4bed1197b56f88226aa3ad1390c0ecadf99",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开抽屉</AsamButton>\n\t<AsamDrawer\n\t\tv-model=\"open\"\n\t\ttitle=\"记录详情\"\n\t\tdirection=\"rtl\"\n\t\tsize=\"small\"\n\t\t:icon=\"InfoFilled\"\n\t\t:close-on-click-modal=\"false\"\n\t>\n\t\t<p class=\"example-paragraph\">辅助内容保持在当前页面上下文中。</p>\n\t\t<template #footer>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\">完成</AsamButton>\n\t\t</template>\n\t</AsamDrawer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDrawerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "resize",
					"title": "调整边缘尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/resize/ts/Demo.vue",
									"sha256": "01d65f4c90b3eccb015117e0de9f496a5995ccbc835d68864401281bf74d31d5",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开可调整抽屉</AsamButton>\n\t<AsamDrawer\n\t\tv-model=\"open\"\n\t\tv-bind=\"{ title: '可调整宽度', size: '60%', resizable: true }\"\n\t\t@resize=\"track\"\n\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前拖动尺寸 {{ size }} px</p>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDrawerResizeDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nconst open = ref(false);\nconst size = ref(0);\nconst track = (_event: MouseEvent, value: number) => {\n\tsize.value = Math.round(value);\n};\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/resize/js/Demo.vue",
									"sha256": "35e6d760cbd3a96c4a208a4e11d486bc4eb02837dc4c92ca6a1ee8b101de1e55",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开可调整抽屉</AsamButton>\n\t<AsamDrawer\n\t\tv-model=\"open\"\n\t\tv-bind=\"{ title: '可调整宽度', size: '60%', resizable: true }\"\n\t\t@resize=\"track\"\n\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前拖动尺寸 {{ size }} px</p>\n\t</AsamDrawer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDrawerResizeDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nconst open = ref(false);\nconst size = ref(0);\nconst track = (_event, value) => {\n\tsize.value = Math.round(value);\n};\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic-usage",
					"title": "显隐与关闭守卫",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-basic-usage/ts/Demo.vue",
									"sha256": "2a6d56243cda3796a237eaf501d6f02b2a8f7e4feacaf494757cd0406600efff",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt\n-->\n<template>\n\t<label\n\t\t>展开方向\n\t\t<AsamSelect :model-value=\"direction\" @change=\"changeDirection\">\n\t\t\t<AsamOption value=\"ltr\" :label=\"'从左展开'\">从左展开</AsamOption>\n\t\t\t<AsamOption value=\"rtl\" :label=\"'从右展开'\">从右展开</AsamOption>\n\t\t\t<AsamOption value=\"ttb\" :label=\"'从上展开'\">从上展开</AsamOption>\n\t\t\t<AsamOption value=\"btt\" :label=\"'从下展开'\">从下展开</AsamOption>\n\t\t</AsamSelect></label\n\t>\n\n\t<AsamButton type=\"default\" style=\"margin-left: 16px\" @click=\"drawer = true\"> 打开 </AsamButton>\n\t<AsamButton type=\"default\" style=\"margin-left: 16px\" @click=\"drawer2 = true\">\n\t\t带底部区域\n\t</AsamButton>\n\n\t<AsamDrawer\n\t\tv-model=\"drawer\"\n\t\ttitle=\"标题示例\"\n\t\t:direction=\"direction\"\n\t\t:before-close=\"handleClose\"\n\t>\n\t\t<span>你好！</span>\n\t</AsamDrawer>\n\t<AsamDrawer v-model=\"drawer2\" :direction=\"direction\">\n\t\t<template #header>\n\t\t\t<h4>通过插槽设置标题</h4>\n\t\t</template>\n\t\t<template #default>\n\t\t\t<div>\n\t\t\t\t<AsamRadioItem v-model=\"radio1\" value=\"Option 1\"> 选项 1 </AsamRadioItem>\n\t\t\t\t<AsamRadioItem v-model=\"radio1\" value=\"Option 2\"> 选项 2 </AsamRadioItem>\n\t\t\t</div>\n\t\t</template>\n\t\t<template #footer>\n\t\t\t<div style=\"flex: auto\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"cancelClick\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"confirmClick\">确认</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamRadioItem,\n\tAsamButton,\n\tAsamDrawer,\n\tAsamMessageBox,\n\ttype AsamDrawerProps as DrawerProps\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst drawer = ref(false);\nconst drawer2 = ref(false);\nconst direction = ref<DrawerProps['direction']>('rtl');\nconst radio1 = ref('Option 1');\nconst handleClose = (done: () => void) => {\n\tAsamMessageBox.confirm('确定关闭当前窗口吗？')\n\t\t.then(() => {\n\t\t\tdone();\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\nfunction cancelClick() {\n\tdrawer2.value = false;\n}\nfunction confirmClick() {\n\tAsamMessageBox.confirm(`确认选择${radio1.value === 'Option 1' ? '选项 1' : '选项 2'}吗？`)\n\t\t.then(() => {\n\t\t\tdrawer2.value = false;\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n}\n\nconst changeDirection = (value: unknown) => {\n\tif (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {\n\t\tdirection.value = value;\n\t}\n};\n</script>\n",
									"originalSourceSha256": "2de6b0d87aa698f291dbb1277827de8e8a71d444c0bf0edefe6d1b462011b19c",
									"notice": {
										"id": "f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80",
										"url": "/licenses/source-notices/f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt",
										"licenseFilename": "LICENSE-f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/basic-usage.vue",
											"sourceSha256": "ed2041bea202be017bc85581084d0f01a3e652ef00f254bbbd51894a91a8ef05",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-basic-usage/js/Demo.vue",
									"sha256": "6772e3241c60cde7493719112b53a3302629e729ce1bf806fd8b81d21c585d25",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt\n-->\n<template>\n\t<label\n\t\t>展开方向\n\t\t<AsamSelect :model-value=\"direction\" @change=\"changeDirection\">\n\t\t\t<AsamOption value=\"ltr\" :label=\"'从左展开'\">从左展开</AsamOption>\n\t\t\t<AsamOption value=\"rtl\" :label=\"'从右展开'\">从右展开</AsamOption>\n\t\t\t<AsamOption value=\"ttb\" :label=\"'从上展开'\">从上展开</AsamOption>\n\t\t\t<AsamOption value=\"btt\" :label=\"'从下展开'\">从下展开</AsamOption>\n\t\t</AsamSelect></label\n\t>\n\n\t<AsamButton type=\"default\" style=\"margin-left: 16px\" @click=\"drawer = true\"> 打开 </AsamButton>\n\t<AsamButton type=\"default\" style=\"margin-left: 16px\" @click=\"drawer2 = true\">\n\t\t带底部区域\n\t</AsamButton>\n\n\t<AsamDrawer\n\t\tv-model=\"drawer\"\n\t\ttitle=\"标题示例\"\n\t\t:direction=\"direction\"\n\t\t:before-close=\"handleClose\"\n\t>\n\t\t<span>你好！</span>\n\t</AsamDrawer>\n\t<AsamDrawer v-model=\"drawer2\" :direction=\"direction\">\n\t\t<template #header>\n\t\t\t<h4>通过插槽设置标题</h4>\n\t\t</template>\n\t\t<template #default>\n\t\t\t<div>\n\t\t\t\t<AsamRadioItem v-model=\"radio1\" value=\"Option 1\"> 选项 1 </AsamRadioItem>\n\t\t\t\t<AsamRadioItem v-model=\"radio1\" value=\"Option 2\"> 选项 2 </AsamRadioItem>\n\t\t\t</div>\n\t\t</template>\n\t\t<template #footer>\n\t\t\t<div style=\"flex: auto\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"cancelClick\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"confirmClick\">确认</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDrawer>\n</template>\n\n<script setup>\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamRadioItem,\n\tAsamButton,\n\tAsamDrawer,\n\tAsamMessageBox\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst drawer = ref(false);\nconst drawer2 = ref(false);\nconst direction = ref('rtl');\nconst radio1 = ref('Option 1');\nconst handleClose = (done) => {\n\tAsamMessageBox.confirm('确定关闭当前窗口吗？')\n\t\t.then(() => {\n\t\t\tdone();\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\nfunction cancelClick() {\n\tdrawer2.value = false;\n}\nfunction confirmClick() {\n\tAsamMessageBox.confirm(`确认选择${radio1.value === 'Option 1' ? '选项 1' : '选项 2'}吗？`)\n\t\t.then(() => {\n\t\t\tdrawer2.value = false;\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n}\nconst changeDirection = (value) => {\n\tif (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {\n\t\tdirection.value = value;\n\t}\n};\n</script>\n",
									"originalSourceSha256": "2b7f6ff3dd0746f77b52f0886d1c4f88fd5b1efa90ace6acd35d73e0f137a8dd",
									"notice": {
										"id": "f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80",
										"url": "/licenses/source-notices/f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt",
										"licenseFilename": "LICENSE-f353c5b32e4e2002a6fae49f2c13e5ee7acf3149cef89f67e875495d3e29cb80.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/basic-usage.vue",
											"sourceSha256": "ed2041bea202be017bc85581084d0f01a3e652ef00f254bbbd51894a91a8ef05",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-no-title",
					"title": "无标题",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-no-title/ts/Demo.vue",
									"sha256": "2a52b6e31e85db1ddfbd7f3b61a93f1ca401c9208d874f43bd247f4d2c313b61",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"drawer = true\"> 打开 </AsamButton>\n\n\t<AsamDrawer v-model=\"drawer\" title=\"标题示例\" :with-header=\"false\">\n\t\t<span>你好！</span>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst drawer = ref(false);\n</script>\n",
									"originalSourceSha256": "9ebcda360917fd34a97acf56e453111cef7fca08cbd69ba4bd729c8517259db6",
									"notice": {
										"id": "0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c",
										"url": "/licenses/source-notices/0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt",
										"licenseFilename": "LICENSE-0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/no-title.vue",
											"sourceSha256": "68783b7cc51ae2a3ba89955f0147559b9dff2db550f688244b091790dd8a3411",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-no-title/js/Demo.vue",
									"sha256": "124cbb255eda6176468ec8e810222c8d43477c2fcfc443b5e7d3b60682ae0a5f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"drawer = true\"> 打开 </AsamButton>\n\n\t<AsamDrawer v-model=\"drawer\" title=\"标题示例\" :with-header=\"false\">\n\t\t<span>你好！</span>\n\t</AsamDrawer>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst drawer = ref(false);\n</script>\n",
									"originalSourceSha256": "48a82e6fc0e35256afafa8bfd93346abb9881248011530ba490451cff2493e93",
									"notice": {
										"id": "0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c",
										"url": "/licenses/source-notices/0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt",
										"licenseFilename": "LICENSE-0a41f6f6102b9b1e959bf2b6ba0588d8416fa127f89db3eda60782f3d6856a4c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/no-title.vue",
											"sourceSha256": "68783b7cc51ae2a3ba89955f0147559b9dff2db550f688244b091790dd8a3411",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customization-content",
					"title": "表单与表格内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-customization-content/ts/Demo.vue",
									"sha256": "f954ccff5b6a04ea781099433d909ba9a830b17fc593fe787ad88c41a10cd255",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt\n-->\n<template>\n\t<AsamButton type=\"default\" text @click=\"table = true\"> 打开含嵌套表格的抽屉 </AsamButton>\n\t<AsamButton type=\"default\" text @click=\"dialog = true\"> 打开含嵌套表单的抽屉 </AsamButton>\n\t<AsamDrawer v-model=\"table\" title=\"内部包含嵌套表格。\" direction=\"rtl\" size=\"50%\">\n\t\t<AsamTable :data=\"gridData\">\n\t\t\t<AsamTableColumn property=\"date\" label=\"日期\" width=\"150\" />\n\t\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"200\" />\n\t\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</AsamDrawer>\n\n\t<AsamDrawer\n\t\tv-model=\"dialog\"\n\t\ttitle=\"内部包含嵌套表单。\"\n\t\t:before-close=\"handleClose\"\n\t\tdirection=\"ltr\"\n\t\tclass=\"demo-drawer\"\n\t>\n\t\t<div class=\"demo-drawer__content\">\n\t\t\t<AsamBaseForm :model=\"form\">\n\t\t\t\t<AsamFormItem label=\"姓名\" :label-width=\"formLabelWidth\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"form.name\"\n\t\t\t\t\t\t@update:model-value=\"form.name = String($event ?? '')\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"区域\" :label-width=\"formLabelWidth\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"form.region\"\n\t\t\t\t\t\t@update:model-value=\"form.region = String($event ?? '')\"\n\t\t\t\t\t\tplaceholder=\"请选择活动区域\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamOption label=\"区域 1\" value=\"shanghai\" />\n\t\t\t\t\t\t<AsamOption label=\"区域 2\" value=\"beijing\" />\n\t\t\t\t\t</AsamSelect>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamBaseForm>\n\t\t\t<div class=\"demo-drawer__footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"cancelForm\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" :loading=\"loading\" @click=\"onClick\">\n\t\t\t\t\t{{ loading ? 'Submitting ...' : 'Submit' }}\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</div>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamBaseForm,\n\tAsamButton,\n\tAsamDrawer,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamMessageBox,\n\tAsamOption,\n\tAsamSelect,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\n\nimport { reactive, ref } from 'vue';\n\nconst formLabelWidth = '80px';\nlet timer: ReturnType<typeof setTimeout> | undefined;\n\nconst table = ref(false);\nconst dialog = ref(false);\nconst loading = ref(false);\n\nconst form = reactive({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\n\nconst gridData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t}\n];\n\nconst onClick = () => {\n\tloading.value = true;\n\tsetTimeout(() => {\n\t\tloading.value = false;\n\t\tdialog.value = false;\n\t}, 400);\n};\n\nconst handleClose = (done: () => void) => {\n\tif (loading.value) {\n\t\treturn;\n\t}\n\tAsamMessageBox.confirm('确定提交吗？')\n\t\t.then(() => {\n\t\t\tloading.value = true;\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tdone();\n\t\t\t\t// 动画关闭需要一定的时间\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tloading.value = false;\n\t\t\t\t}, 400);\n\t\t\t}, 2000);\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\n\nconst cancelForm = () => {\n\tloading.value = false;\n\tdialog.value = false;\n\tclearTimeout(timer);\n};\n</script>\n",
									"originalSourceSha256": "f62c665056c652a46d6a615ec1d164beb467ad2bf7fe50bcff7948425fb18e30",
									"notice": {
										"id": "46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e",
										"url": "/licenses/source-notices/46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt",
										"licenseFilename": "LICENSE-46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/customization-content.vue",
											"sourceSha256": "1e4c2e98e9c61d25df87141325f3558eb508b6b75b68d5e0e22f1d97af569a89",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-customization-content/js/Demo.vue",
									"sha256": "8d365d1452ade9d732f3ce188fbee8ce4533cf6c677e4de9d05db68f02b0b300",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt\n-->\n<template>\n\t<AsamButton type=\"default\" text @click=\"table = true\"> 打开含嵌套表格的抽屉 </AsamButton>\n\t<AsamButton type=\"default\" text @click=\"dialog = true\"> 打开含嵌套表单的抽屉 </AsamButton>\n\t<AsamDrawer v-model=\"table\" title=\"内部包含嵌套表格。\" direction=\"rtl\" size=\"50%\">\n\t\t<AsamTable :data=\"gridData\">\n\t\t\t<AsamTableColumn property=\"date\" label=\"日期\" width=\"150\" />\n\t\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"200\" />\n\t\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</AsamDrawer>\n\n\t<AsamDrawer\n\t\tv-model=\"dialog\"\n\t\ttitle=\"内部包含嵌套表单。\"\n\t\t:before-close=\"handleClose\"\n\t\tdirection=\"ltr\"\n\t\tclass=\"demo-drawer\"\n\t>\n\t\t<div class=\"demo-drawer__content\">\n\t\t\t<AsamBaseForm :model=\"form\">\n\t\t\t\t<AsamFormItem label=\"姓名\" :label-width=\"formLabelWidth\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"form.name\"\n\t\t\t\t\t\t@update:model-value=\"form.name = String($event ?? '')\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"区域\" :label-width=\"formLabelWidth\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"form.region\"\n\t\t\t\t\t\t@update:model-value=\"form.region = String($event ?? '')\"\n\t\t\t\t\t\tplaceholder=\"请选择活动区域\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamOption label=\"区域 1\" value=\"shanghai\" />\n\t\t\t\t\t\t<AsamOption label=\"区域 2\" value=\"beijing\" />\n\t\t\t\t\t</AsamSelect>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamBaseForm>\n\t\t\t<div class=\"demo-drawer__footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"cancelForm\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" :loading=\"loading\" @click=\"onClick\">\n\t\t\t\t\t{{ loading ? 'Submitting ...' : 'Submit' }}\n\t\t\t\t</AsamButton>\n\t\t\t</div>\n\t\t</div>\n\t</AsamDrawer>\n</template>\n\n<script setup>\nimport {\n\tAsamBaseForm,\n\tAsamButton,\n\tAsamDrawer,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamMessageBox,\n\tAsamOption,\n\tAsamSelect,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport { reactive, ref } from 'vue';\nconst formLabelWidth = '80px';\nlet timer;\nconst table = ref(false);\nconst dialog = ref(false);\nconst loading = ref(false);\nconst form = reactive({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst gridData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: 'Peter Parker',\n\t\taddress: 'Queens, New York City'\n\t}\n];\nconst onClick = () => {\n\tloading.value = true;\n\tsetTimeout(() => {\n\t\tloading.value = false;\n\t\tdialog.value = false;\n\t}, 400);\n};\nconst handleClose = (done) => {\n\tif (loading.value) {\n\t\treturn;\n\t}\n\tAsamMessageBox.confirm('确定提交吗？')\n\t\t.then(() => {\n\t\t\tloading.value = true;\n\t\t\ttimer = setTimeout(() => {\n\t\t\t\tdone();\n\t\t\t\t// 动画关闭需要一定的时间\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tloading.value = false;\n\t\t\t\t}, 400);\n\t\t\t}, 2000);\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\nconst cancelForm = () => {\n\tloading.value = false;\n\tdialog.value = false;\n\tclearTimeout(timer);\n};\n</script>\n",
									"originalSourceSha256": "2b2be921b8215884e4579cb4340f146820b1256c36329d7b9033967f838dbd09",
									"notice": {
										"id": "46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e",
										"url": "/licenses/source-notices/46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt",
										"licenseFilename": "LICENSE-46ad16d3e7f7c90975f78c6ca5b843a3972d472db4ad68cebcb645590fa4031e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/customization-content.vue",
											"sourceSha256": "1e4c2e98e9c61d25df87141325f3558eb508b6b75b68d5e0e22f1d97af569a89",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customization-header",
					"title": "标题插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-customization-header/ts/Demo.vue",
									"sha256": "78723fea854db826d5dc7d69ab939f8ebd7b5e71c30f8dbc7109822ce8ebbbbe",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"visible = true\"> 打开自定义头部的抽屉 </AsamButton>\n\t<AsamDrawer v-model=\"visible\" :show-close=\"false\">\n\t\t<template #header=\"{ close, titleId, titleClass }\">\n\t\t\t<h4 :id=\"titleId\" :class=\"titleClass\">自定义头部示例</h4>\n\t\t\t<AsamButton type=\"default\" @click=\"close\">\n\t\t\t\t<AsamIcon class=\"el-icon--left\"><CircleCloseFilled /></AsamIcon>\n\t\t\t\t关闭\n\t\t\t</AsamButton>\n\t\t</template>\n\t\t这是抽屉内容。\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDrawer, AsamIcon } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { CircleCloseFilled } from '@asam-ui/icons-vue';\n\nconst visible = ref(false);\n</script>\n",
									"originalSourceSha256": "2971cda50c3ab2e1a62904876225ececd2820f7c66ad04b258d666071c80bd83",
									"notice": {
										"id": "6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf",
										"url": "/licenses/source-notices/6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt",
										"licenseFilename": "LICENSE-6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/customization-header.vue",
											"sourceSha256": "4e5ce8839dc8f4d5d55ed4d0793c4eaf23cc7db17f6ad53bfe265edfc014b4e8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-customization-header/js/Demo.vue",
									"sha256": "f47dbadb170126bbd053cb7e6d85d5ded35092e967f311735cf4f47ff537f312",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"visible = true\"> 打开自定义头部的抽屉 </AsamButton>\n\t<AsamDrawer v-model=\"visible\" :show-close=\"false\">\n\t\t<template #header=\"{ close, titleId, titleClass }\">\n\t\t\t<h4 :id=\"titleId\" :class=\"titleClass\">自定义头部示例</h4>\n\t\t\t<AsamButton type=\"default\" @click=\"close\">\n\t\t\t\t<AsamIcon class=\"el-icon--left\"><CircleCloseFilled /></AsamIcon>\n\t\t\t\t关闭\n\t\t\t</AsamButton>\n\t\t</template>\n\t\t这是抽屉内容。\n\t</AsamDrawer>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDrawer, AsamIcon } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { CircleCloseFilled } from '@asam-ui/icons-vue';\nconst visible = ref(false);\n</script>\n",
									"originalSourceSha256": "6bbaf367420a92f51cc7db41998b703cabec47c353bc9c3cbd57bad75b6385c1",
									"notice": {
										"id": "6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf",
										"url": "/licenses/source-notices/6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt",
										"licenseFilename": "LICENSE-6b7d41d93e9e3b3a6c05eba41c0c7319812650cdbfdc9294341e0c33ebbebbdf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/customization-header.vue",
											"sourceSha256": "4e5ce8839dc8f4d5d55ed4d0793c4eaf23cc7db17f6ad53bfe265edfc014b4e8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-resizable",
					"title": "拖动边缘与尺寸事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-resizable/ts/Demo.vue",
									"sha256": "0aa4da0f66b93fdca3dac87fd85cdc75053ed8bb15e1d7f6ca31a417d1691ed3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt\n-->\n<template>\n\t<label\n\t\t>展开方向\n\t\t<AsamSelect :model-value=\"direction\" @change=\"changeDirection\">\n\t\t\t<AsamOption value=\"ltr\" :label=\"'从左展开'\">从左展开</AsamOption>\n\t\t\t<AsamOption value=\"rtl\" :label=\"'从右展开'\">从右展开</AsamOption>\n\t\t\t<AsamOption value=\"ttb\" :label=\"'从上展开'\">从上展开</AsamOption>\n\t\t\t<AsamOption value=\"btt\" :label=\"'从下展开'\">从下展开</AsamOption>\n\t\t</AsamSelect></label\n\t>\n\n\t<AsamDrawer v-model=\"drawer\" :direction=\"direction\" resizable> 这是抽屉内容。 </AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamDrawer,\n\ttype AsamDrawerProps as DrawerProps\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst direction = ref<DrawerProps['direction']>();\nconst drawer = ref(false);\n\nconst changeDirection = (value: unknown) => {\n\tif (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {\n\t\tdirection.value = value;\n\t\tdrawer.value = true;\n\t}\n};\n</script>\n",
									"originalSourceSha256": "a395517a5f4086c6064adfba02ecc46ceeea9399e2106ab4690d2daefeea6a27",
									"notice": {
										"id": "0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7",
										"url": "/licenses/source-notices/0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt",
										"licenseFilename": "LICENSE-0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/resizable.vue",
											"sourceSha256": "229563d14b28e2960721e28078902267a3fb316c0b833387ae2fb52eb1470fa4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-resizable/js/Demo.vue",
									"sha256": "f92357e3d116ffb811eb4c8af464e9fa21b74c6e8dcfaa454057b8c80b44b760",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt\n-->\n<template>\n\t<label\n\t\t>展开方向\n\t\t<AsamSelect :model-value=\"direction\" @change=\"changeDirection\">\n\t\t\t<AsamOption value=\"ltr\" :label=\"'从左展开'\">从左展开</AsamOption>\n\t\t\t<AsamOption value=\"rtl\" :label=\"'从右展开'\">从右展开</AsamOption>\n\t\t\t<AsamOption value=\"ttb\" :label=\"'从上展开'\">从上展开</AsamOption>\n\t\t\t<AsamOption value=\"btt\" :label=\"'从下展开'\">从下展开</AsamOption>\n\t\t</AsamSelect></label\n\t>\n\n\t<AsamDrawer v-model=\"drawer\" :direction=\"direction\" resizable> 这是抽屉内容。 </AsamDrawer>\n</template>\n\n<script setup>\nimport { AsamSelect, AsamOption, AsamDrawer } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst direction = ref();\nconst drawer = ref(false);\nconst changeDirection = (value) => {\n\tif (value === 'ltr' || value === 'rtl' || value === 'ttb' || value === 'btt') {\n\t\tdirection.value = value;\n\t\tdrawer.value = true;\n\t}\n};\n</script>\n",
									"originalSourceSha256": "ef902904595fa5a74270312bf1e176222f6dac003d29a05fb2d4c1ee7244c227",
									"notice": {
										"id": "0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7",
										"url": "/licenses/source-notices/0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt",
										"licenseFilename": "LICENSE-0a7ecfbba2fd30d2dcaf04552e54178d09876c7b270311bbd6dae3fbd4ddb0e7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/resizable.vue",
											"sourceSha256": "229563d14b28e2960721e28078902267a3fb316c0b833387ae2fb52eb1470fa4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-nested-drawer",
					"title": "嵌套抽屉",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-nested-drawer/ts/Demo.vue",
									"sha256": "e1216ff9af29344893327c18cef29714d8a95b1a86d400a2364999858a264f48",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"drawer = true\"> 打开 </AsamButton>\n\n\t<AsamDrawer v-model=\"drawer\" title=\"外层抽屉\" size=\"50%\">\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"innerDrawer = true\">点击按钮</AsamButton>\n\t\t\t<AsamDrawer\n\t\t\t\tv-model=\"innerDrawer\"\n\t\t\t\ttitle=\"内层抽屉\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:before-close=\"handleClose\"\n\t\t\t>\n\t\t\t\t<p class=\"example-paragraph\">_(:зゝ∠)_</p>\n\t\t\t</AsamDrawer>\n\t\t</div>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDrawer, AsamMessageBox } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst drawer = ref(false);\nconst innerDrawer = ref(false);\n\nconst handleClose = (done: () => void) => {\n\tAsamMessageBox.confirm('仍有未保存的数据，确定继续吗？')\n\t\t.then(() => {\n\t\t\tdone();\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "0e3583e3bc3cb40ec09872ea599146b32f02beeb87eec51c1695439db3a0c076",
									"notice": {
										"id": "e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403",
										"url": "/licenses/source-notices/e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt",
										"licenseFilename": "LICENSE-e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/nested-drawer.vue",
											"sourceSha256": "8606aa207e94c22ba0bf8adb53153e96bb08bc20a89a7cc168f79ee46b1cdf44",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-nested-drawer/js/Demo.vue",
									"sha256": "ba25d8f740b9bbaab9db241c9017fadfe1eabde70295817c28d8140fb96bd432",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"drawer = true\"> 打开 </AsamButton>\n\n\t<AsamDrawer v-model=\"drawer\" title=\"外层抽屉\" size=\"50%\">\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"innerDrawer = true\">点击按钮</AsamButton>\n\t\t\t<AsamDrawer\n\t\t\t\tv-model=\"innerDrawer\"\n\t\t\t\ttitle=\"内层抽屉\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:before-close=\"handleClose\"\n\t\t\t>\n\t\t\t\t<p class=\"example-paragraph\">_(:зゝ∠)_</p>\n\t\t\t</AsamDrawer>\n\t\t</div>\n\t</AsamDrawer>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDrawer, AsamMessageBox } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst drawer = ref(false);\nconst innerDrawer = ref(false);\nconst handleClose = (done) => {\n\tAsamMessageBox.confirm('仍有未保存的数据，确定继续吗？')\n\t\t.then(() => {\n\t\t\tdone();\n\t\t})\n\t\t.catch(() => {\n\t\t\t// catch error\n\t\t});\n};\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "3540f692fabd2b95d93be1134c300e2c1d1297dd7f604b75ba39f6549d1159c5",
									"notice": {
										"id": "e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403",
										"url": "/licenses/source-notices/e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt",
										"licenseFilename": "LICENSE-e0cd301052e8e5e2f75d28419201f24a4f8b04732f418989e6f381eaf0230403.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/nested-drawer.vue",
											"sourceSha256": "8606aa207e94c22ba0bf8adb53153e96bb08bc20a89a7cc168f79ee46b1cdf44",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-modal",
					"title": "遮罩配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-modal/ts/Demo.vue",
									"sha256": "72eee2848765343c3c4a149cea2a71e699097abceef1b2cfaa565a7916d49222",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"drawerVisible = true\"> 打开模态抽屉 </AsamButton>\n\n\t<AsamDrawer v-model=\"drawerVisible\" :modal=\"false\" modal-penetrable>\n\t\t<span>模态抽屉</span>\n\t\t<template #footer>\n\t\t\t<div class=\"drawer-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"drawerVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"drawerVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst drawerVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "fc0429d4a397fc246039ed1b5f8315e2c40aaf5f9941c7bbfe28bf17a4a290ae",
									"notice": {
										"id": "4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2",
										"url": "/licenses/source-notices/4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt",
										"licenseFilename": "LICENSE-4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/modal.vue",
											"sourceSha256": "bcf4e05b9c887b04ad18a041dffe5e73c5a3419685d632298d01e0de937b2974",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/ep2147-modal/js/Demo.vue",
									"sha256": "d7c0106d4c5034af807f8c4209edab92d180bdf7a506bf96efbfada7bc566faa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"drawerVisible = true\"> 打开模态抽屉 </AsamButton>\n\n\t<AsamDrawer v-model=\"drawerVisible\" :modal=\"false\" modal-penetrable>\n\t\t<span>模态抽屉</span>\n\t\t<template #footer>\n\t\t\t<div class=\"drawer-footer\">\n\t\t\t\t<AsamButton type=\"default\" @click=\"drawerVisible = false\">取消</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"drawerVisible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamDrawer>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst drawerVisible = ref(false);\n</script>\n",
									"originalSourceSha256": "c559fa5f88a779bcfc7a97948f1804a0075687f04adbe6071704e4044a897b31",
									"notice": {
										"id": "4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2",
										"url": "/licenses/source-notices/4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt",
										"licenseFilename": "LICENSE-4b31055affc9df9d6a6f7023a0783f36b30612bb1dafbf143757d72fd14a5db2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/drawer/modal.vue",
											"sourceSha256": "bcf4e05b9c887b04ad18a041dffe5e73c5a3419685d632298d01e0de937b2974",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/popup-container/ts/Demo.vue",
									"sha256": "13aca324698674fd5ce219425e9a4c85a4e7f677c78cd9be3a283d650eed2f29",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开抽屉</AsamButton>\n\t\t<AsamDrawer\n\t\t\tv-model=\"open\"\n\t\t\ttitle=\"记录详情\"\n\t\t\tdirection=\"rtl\"\n\t\t\tsize=\"small\"\n\t\t\t:icon=\"InfoFilled\"\n\t\t\t:close-on-click-modal=\"false\"\n\t\t\t:append-to=\"globalPopup ? 'body' : mountTarget || 'body'\"\n\t\t\t:append-to-body=\"globalPopup\"\n\t\t>\n\t\t\t<p class=\"example-paragraph\">辅助内容保持在当前页面上下文中。</p>\n\t\t\t<template #footer>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t>完成</AsamButton\n\t\t\t\t>\n\t\t\t</template>\n\t\t</AsamDrawer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDrawerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.popup-stage.local :deep(.el-overlay) {\n\tposition: absolute;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDrawer/popup-container/js/Demo.vue",
									"sha256": "b206cc235d7a746fa7dd2cef08b6dda1cc7187249c38dfa9ba42260e2342b077",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开抽屉</AsamButton>\n\t\t<AsamDrawer\n\t\t\tv-model=\"open\"\n\t\t\ttitle=\"记录详情\"\n\t\t\tdirection=\"rtl\"\n\t\t\tsize=\"small\"\n\t\t\t:icon=\"InfoFilled\"\n\t\t\t:close-on-click-modal=\"false\"\n\t\t\t:append-to=\"globalPopup ? 'body' : mountTarget || 'body'\"\n\t\t\t:append-to-body=\"globalPopup\"\n\t\t>\n\t\t\t<p class=\"example-paragraph\">辅助内容保持在当前页面上下文中。</p>\n\t\t\t<template #footer>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t>完成</AsamButton\n\t\t\t\t>\n\t\t\t</template>\n\t\t</AsamDrawer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDrawerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDrawer } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst open = ref(false);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.popup-stage.local :deep(.el-overlay) {\n\tposition: absolute;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopover",
			"documentation": "/component-AsamPopover.html",
			"demos": [
				{
					"id": "basic",
					"title": "面板操作后关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/basic/ts/Demo.vue",
									"sha256": "a6225c7759f04a0fe532a07db13725fc87a12b46decce73dfe834aaba5e768dd",
									"source": "<template>\n\t<AsamPopover title=\"草稿操作\" :width=\"240\" trigger=\"click\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开气泡面板</AsamButton>\n\t\t</template>\n\t\t<template #default=\"{ hide }\">\n\t\t\t<p class=\"example-paragraph\">需要确认的补充信息。</p>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tcount++;\n\t\t\t\t\thide();\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t完成并关闭\n\t\t\t</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\t<p class=\"example-paragraph\" role=\"status\">完成 {{ count }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopoverBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/basic/js/Demo.vue",
									"sha256": "13880489d7f11c76f5bf5c224176e01a09f4a7b229530a08f253e13c19644f61",
									"source": "<template>\n\t<AsamPopover title=\"草稿操作\" :width=\"240\" trigger=\"click\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开气泡面板</AsamButton>\n\t\t</template>\n\t\t<template #default=\"{ hide }\">\n\t\t\t<p class=\"example-paragraph\">需要确认的补充信息。</p>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tcount++;\n\t\t\t\t\thide();\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t完成并关闭\n\t\t\t</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\t<p class=\"example-paragraph\" role=\"status\">完成 {{ count }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopoverBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "controlled",
					"title": "受控显隐与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/controlled/ts/Demo.vue",
									"sha256": "80f2b7823ced121b3ef971cefc497f5928de8e7dd4ddce98051a42572c5e8a02",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t>切换面板</AsamButton\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用触发</AsamCheckboxItem>\n\t\t<AsamPopover\n\t\t\tv-model:visible=\"visible\"\n\t\t\t:disabled=\"disabled\"\n\t\t\ttitle=\"受控面板\"\n\t\t\tcontent=\"显隐由状态驱动\"\n\t\t\ttrigger=\"click\"\n\t\t>\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">面板锚点</AsamButton>\n\t\t\t</template>\n\t\t</AsamPopover>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopoverControlledDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';\nconst visible = ref(false);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/controlled/js/Demo.vue",
									"sha256": "5007a8f25a71510089c99df1837f2446268f592d8c3e11b61e0a95ca0b3be777",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t>切换面板</AsamButton\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用触发</AsamCheckboxItem>\n\t\t<AsamPopover\n\t\t\tv-model:visible=\"visible\"\n\t\t\t:disabled=\"disabled\"\n\t\t\ttitle=\"受控面板\"\n\t\t\tcontent=\"显隐由状态驱动\"\n\t\t\ttrigger=\"click\"\n\t\t>\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">面板锚点</AsamButton>\n\t\t\t</template>\n\t\t</AsamPopover>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopoverControlledDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';\nconst visible = ref(false);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "trigger-array",
					"title": "数组组合触发",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/trigger-array/ts/Demo.vue",
									"sha256": "74d2c7c6bd17431d2864df647384a07434a79297a85804f47233a1fcb4735a54",
									"source": "<template>\n\t<AsamCheckboxGroup v-model=\"triggers\">\n\t\t<AsamCheckboxItem value=\"hover\">悬停</AsamCheckboxItem>\n\t\t<AsamCheckboxItem value=\"click\">点击</AsamCheckboxItem>\n\t</AsamCheckboxGroup>\n\t<p class=\"example-paragraph\" role=\"status\">数组触发：{{ triggers.join(' + ') || '无' }}</p>\n\t<AsamPopover :trigger=\"triggers\" title=\"数组触发\" :hide-after=\"0\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">数组触发锚点</AsamButton>\n\t\t</template>\n\t\t<p class=\"example-paragraph\">同一面板按所选数组响应触发。</p>\n\t</AsamPopover>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopoverTriggerArrayDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';\nimport type { AsamPopoverTrigger } from '@asam-ui/ui';\nconst triggers = ref<Extract<AsamPopoverTrigger, string[]>>(['hover', 'click']);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/trigger-array/js/Demo.vue",
									"sha256": "990d2e15c4d3014a7f815a4e694fe138a1dad5b12a578ac3ecc0f9483ccdda47",
									"source": "<template>\n\t<AsamCheckboxGroup v-model=\"triggers\">\n\t\t<AsamCheckboxItem value=\"hover\">悬停</AsamCheckboxItem>\n\t\t<AsamCheckboxItem value=\"click\">点击</AsamCheckboxItem>\n\t</AsamCheckboxGroup>\n\t<p class=\"example-paragraph\" role=\"status\">数组触发：{{ triggers.join(' + ') || '无' }}</p>\n\t<AsamPopover :trigger=\"triggers\" title=\"数组触发\" :hide-after=\"0\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">数组触发锚点</AsamButton>\n\t\t</template>\n\t\t<p class=\"example-paragraph\">同一面板按所选数组响应触发。</p>\n\t</AsamPopover>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopoverTriggerArrayDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem, AsamButton, AsamPopover } from '@asam-ui/ui';\n\nconst triggers = ref(['hover', 'click']);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-placement",
					"title": "定位方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-placement/ts/Demo.vue",
									"sha256": "0027ebf7b8f476f1c063884a2a2630c6606252b5f694d4cf2ee01702ada0df8c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt\n-->\n<template>\n\t<div class=\"popover-base-box demo-layout-1\">\n\t\t<div class=\"row center demo-layout-2\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"顶部左侧提示信息\"\n\t\t\t\tplacement=\"top-start\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"顶部居中提示信息\" placement=\"top\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"顶部右侧提示信息\"\n\t\t\t\tplacement=\"top-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row demo-layout-3\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"左侧顶部提示信息\"\n\t\t\t\tplacement=\"left-start\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"右侧顶部提示信息\"\n\t\t\t\tplacement=\"right-start\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row demo-layout-4\">\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"左侧居中提示信息\" placement=\"left\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"mt-3 mb-3\">左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"右侧居中提示信息\" placement=\"right\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row demo-layout-5\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"左侧底部提示信息\"\n\t\t\t\tplacement=\"left-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"右侧底部提示信息\"\n\t\t\t\tplacement=\"right-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row center demo-layout-6\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"底部左侧提示信息\"\n\t\t\t\tplacement=\"bottom-start\"\n\t\t\t>\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部左侧</AsamButton></template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"底部居中提示信息\" placement=\"bottom\">\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部</AsamButton></template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"底部右侧提示信息\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\n</script>\n\n<style>\n.popover-base-box {\n\twidth: 600px;\n}\n\n.popover-base-box .row {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.popover-base-box .center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-3 {\n\tmargin-top: calc(var(--asam-space-xs) * 3);\n}\n.mb-3 {\n\tmargin-bottom: calc(var(--asam-space-xs) * 3);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "aa3080ce345c80d257397b6f1da4655f9db21ec1f87e9cdbe1d21700493d583c",
									"notice": {
										"id": "37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec",
										"url": "/licenses/source-notices/37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt",
										"licenseFilename": "LICENSE-37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/placement.vue",
											"sourceSha256": "4abc851baf03ca1e8339186cdbaa7f531238e83ac147cf564c9502f462b1e2d9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-placement/js/Demo.vue",
									"sha256": "7921251bfe7dc4eba196b0f08eb35a86772ae598ff190311f3ebdd1d314cdb98",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt\n-->\n<template>\n\t<div class=\"popover-base-box demo-layout-1\">\n\t\t<div class=\"row center demo-layout-2\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"顶部左侧提示信息\"\n\t\t\t\tplacement=\"top-start\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"顶部居中提示信息\" placement=\"top\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"顶部右侧提示信息\"\n\t\t\t\tplacement=\"top-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row demo-layout-3\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"左侧顶部提示信息\"\n\t\t\t\tplacement=\"left-start\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"右侧顶部提示信息\"\n\t\t\t\tplacement=\"right-start\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row demo-layout-4\">\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"左侧居中提示信息\" placement=\"left\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"mt-3 mb-3\">左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"右侧居中提示信息\" placement=\"right\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row demo-layout-5\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"左侧底部提示信息\"\n\t\t\t\tplacement=\"left-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"右侧底部提示信息\"\n\t\t\t\tplacement=\"right-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t\t<div class=\"row center demo-layout-6\">\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"底部左侧提示信息\"\n\t\t\t\tplacement=\"bottom-start\"\n\t\t\t>\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部左侧</AsamButton></template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover trigger=\"hover\" title=\"标题\" content=\"底部居中提示信息\" placement=\"bottom\">\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部</AsamButton></template>\n\t\t\t</AsamPopover>\n\t\t\t<AsamPopover\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\ttitle=\"标题\"\n\t\t\t\tcontent=\"底部右侧提示信息\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t>\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopover>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\n</script>\n\n<style>\n.popover-base-box {\n\twidth: 600px;\n}\n\n.popover-base-box .row {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.popover-base-box .center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-3 {\n\tmargin-top: calc(var(--asam-space-xs) * 3);\n}\n.mb-3 {\n\tmargin-bottom: calc(var(--asam-space-xs) * 3);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "8975cc3c067fcf88af6eb5f936aa5f1e15f703c16eea5835a60db8bac43eda9c",
									"notice": {
										"id": "37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec",
										"url": "/licenses/source-notices/37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt",
										"licenseFilename": "LICENSE-37c4a9fceb2f62269f3f027fb4cfff32cca45da5a409c59882198053d9e44bec.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/placement.vue",
											"sourceSha256": "4abc851baf03ca1e8339186cdbaa7f531238e83ac147cf564c9502f462b1e2d9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic-usage",
					"title": "显隐与关闭守卫",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-basic-usage/ts/Demo.vue",
									"sha256": "1c649bcbdccd9caa28fdb93100247f50658a5a2c035071703bb36eb99244b619",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt\n-->\n<template>\n\t<AsamPopover\n\t\tplacement=\"top-start\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"hover\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">悬停触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\tplacement=\"bottom\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"click\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">点击触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\tref=\"popover\"\n\t\tplacement=\"right\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"focus\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">聚焦触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\tref=\"popover\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"contextmenu\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">右键触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\t:visible=\"visible\"\n\t\tplacement=\"bottom\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\" @click=\"visible = !visible\">\n\t\t\t\t手动触发\n\t\t\t</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.el-button + .el-button {\n\tmargin-left: 8px;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-2 {\n\tmargin: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "a69b51f98de916e1506e63d2bc9a61fbd9b92a0ff26f74a4008a92a3ca0eae58",
									"notice": {
										"id": "298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622",
										"url": "/licenses/source-notices/298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt",
										"licenseFilename": "LICENSE-298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/basic-usage.vue",
											"sourceSha256": "a9703d0e5630886922abaccbb4d19f0be0965bd4e756c85ec94db56f718839b0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-basic-usage/js/Demo.vue",
									"sha256": "9040b7fd65f88d6b51ec4b8dab939ada7b0fc8d76167a6475d06ebc38f0daa07",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt\n-->\n<template>\n\t<AsamPopover\n\t\tplacement=\"top-start\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"hover\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">悬停触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\tplacement=\"bottom\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"click\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">点击触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\tref=\"popover\"\n\t\tplacement=\"right\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"focus\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">聚焦触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\tref=\"popover\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\ttrigger=\"contextmenu\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\">右键触发</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n\n\t<AsamPopover\n\t\t:visible=\"visible\"\n\t\tplacement=\"bottom\"\n\t\ttitle=\"标题\"\n\t\t:width=\"200\"\n\t\tcontent=\"这是气泡内容，这是气泡内容，这是气泡内容\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" class=\"m-2\" @click=\"visible = !visible\">\n\t\t\t\t手动触发\n\t\t\t</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.el-button + .el-button {\n\tmargin-left: 8px;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-2 {\n\tmargin: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "7ebe96aa3acc89344f0eff6bce68621b94cdb800e338793c1a11cddb62adbb3d",
									"notice": {
										"id": "298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622",
										"url": "/licenses/source-notices/298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt",
										"licenseFilename": "LICENSE-298adf16598abe1670d9566c5d28cfee3fca2ca7313d0ca0387284b5adcc7622.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/basic-usage.vue",
											"sourceSha256": "a9703d0e5630886922abaccbb4d19f0be0965bd4e756c85ec94db56f718839b0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-virtual-triggering",
					"title": "完整交互：virtual-triggering",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-virtual-triggering/ts/Demo.vue",
									"sha256": "ae71ca4de27d425c1dab8bfc5420b493e2d22607674fbd6e4dd90db0ccc5acc4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt\n-->\n<template>\n\t<AsamButton type=\"default\" ref=\"buttonRef\" v-asam-click-outside=\"onClickOutside\">\n\t\t点击按钮\n\t</AsamButton>\n\n\t<AsamPopover\n\t\tref=\"popoverRef\"\n\t\t:virtual-ref=\"buttonRef\"\n\t\ttrigger=\"click\"\n\t\ttitle=\"带标题\"\n\t\tvirtual-triggering\n\t>\n\t\t<span> 示例内容 </span>\n\t</AsamPopover>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamClickOutside as vAsamClickOutside,\n\tAsamPopover,\n\ttype AsamPopoverExpose as PopoverInstance\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst buttonRef = ref();\nconst popoverRef = ref<PopoverInstance>();\nconst onClickOutside = () => {\n\tpopoverRef.value?.hide();\n};\n</script>\n",
									"originalSourceSha256": "2ac345618f24e2577e9c9c68b6edc0b3466a76fe4fe6e68e88e973cd4d7ac030",
									"notice": {
										"id": "bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72",
										"url": "/licenses/source-notices/bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt",
										"licenseFilename": "LICENSE-bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/virtual-triggering.vue",
											"sourceSha256": "5f9d9cae263b067763229c82a6e0a6966aaa3e324cc794b8afdd2bab808a696f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-virtual-triggering/js/Demo.vue",
									"sha256": "146b2f66321941619df15db36cd0639d57b1bc66d640540da2c23396a62c4e1f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt\n-->\n<template>\n\t<AsamButton type=\"default\" ref=\"buttonRef\" v-asam-click-outside=\"onClickOutside\">\n\t\t点击按钮\n\t</AsamButton>\n\n\t<AsamPopover\n\t\tref=\"popoverRef\"\n\t\t:virtual-ref=\"buttonRef\"\n\t\ttrigger=\"click\"\n\t\ttitle=\"带标题\"\n\t\tvirtual-triggering\n\t>\n\t\t<span> 示例内容 </span>\n\t</AsamPopover>\n</template>\n\n<script setup>\nimport { AsamButton, AsamClickOutside as vAsamClickOutside, AsamPopover } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst buttonRef = ref();\nconst popoverRef = ref();\nconst onClickOutside = () => {\n\tpopoverRef.value?.hide();\n};\n</script>\n",
									"originalSourceSha256": "a874351b96e8e7be34849e8466d0dbc8c7ae676261232e618c77acafcaf235af",
									"notice": {
										"id": "bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72",
										"url": "/licenses/source-notices/bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt",
										"licenseFilename": "LICENSE-bc4af4e49fd3d0e49fc264d3f1868f83bd7d7c14bdf86090acfa0f25b4916a72.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/virtual-triggering.vue",
											"sourceSha256": "5f9d9cae263b067763229c82a6e0a6966aaa3e324cc794b8afdd2bab808a696f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-nested-information",
					"title": "完整交互：nested-information",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-nested-information/ts/Demo.vue",
									"sha256": "503e872d346a0aba595fedbebf18ffba2cb68eabb461e220302a1a3ed0050de9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt\n-->\n<template>\n\t<div style=\"display: flex; align-items: center\">\n\t\t<AsamPopover placement=\"right\" :width=\"400\" trigger=\"click\">\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" style=\"margin-right: 16px\">点击触发</AsamButton>\n\t\t\t</template>\n\t\t\t<AsamTable :data=\"gridData\">\n\t\t\t\t<AsamTableColumn width=\"150\" property=\"date\" label=\"日期\" />\n\t\t\t\t<AsamTableColumn width=\"100\" property=\"name\" label=\"姓名\" />\n\t\t\t\t<AsamTableColumn width=\"300\" property=\"address\" label=\"地址\" />\n\t\t\t</AsamTable>\n\t\t</AsamPopover>\n\n\t\t<AsamPopover\n\t\t\ttrigger=\"hover\"\n\t\t\t:width=\"300\"\n\t\t\tpopper-style=\"box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;\"\n\t\t>\n\t\t\t<template #reference>\n\t\t\t\t<AsamAvatar\n\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t/>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"demo-rich-conent\"\n\t\t\t\t\tstyle=\"display: flex; gap: 16px; flex-direction: column\"\n\t\t\t\t>\n\t\t\t\t\t<AsamAvatar\n\t\t\t\t\t\t:size=\"60\"\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tstyle=\"margin-bottom: 8px\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p class=\"demo-rich-content__name example-paragraph\" style=\"margin: 0; font-weight: 500\">\n\t\t\t\t\t\t\tASAM UI\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclass=\"demo-rich-content__mention example-paragraph\"\n\t\t\t\t\t\t\tstyle=\"margin: 0; font-size: 14px; color: var(--el-color-info)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@asam-ui\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<p class=\"demo-rich-content__desc example-paragraph\" style=\"margin: 0\">\n\t\t\t\t\t\tASAM UI，面向开发者、设计师与产品经理的 Vue 3 组件库\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamPopover>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamAvatar, AsamButton, AsamPopover, AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst gridData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t}\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "9fcfef816ce10be2277be42c8e011e07dc43a9cacd4a093025623a00d710134e",
									"notice": {
										"id": "c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110",
										"url": "/licenses/source-notices/c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt",
										"licenseFilename": "LICENSE-c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/nested-information.vue",
											"sourceSha256": "79402a99a48eaebca1fd2afae3c2d5339c827fc1b22df29dea01d6a3635c63dc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-nested-information/js/Demo.vue",
									"sha256": "30d39ffdb429bf98408428c0a5bb9f1bd58bd91cd667dc72eff2305960bf7391",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt\n-->\n<template>\n\t<div style=\"display: flex; align-items: center\">\n\t\t<AsamPopover placement=\"right\" :width=\"400\" trigger=\"click\">\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" style=\"margin-right: 16px\">点击触发</AsamButton>\n\t\t\t</template>\n\t\t\t<AsamTable :data=\"gridData\">\n\t\t\t\t<AsamTableColumn width=\"150\" property=\"date\" label=\"日期\" />\n\t\t\t\t<AsamTableColumn width=\"100\" property=\"name\" label=\"姓名\" />\n\t\t\t\t<AsamTableColumn width=\"300\" property=\"address\" label=\"地址\" />\n\t\t\t</AsamTable>\n\t\t</AsamPopover>\n\n\t\t<AsamPopover\n\t\t\ttrigger=\"hover\"\n\t\t\t:width=\"300\"\n\t\t\tpopper-style=\"box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;\"\n\t\t>\n\t\t\t<template #reference>\n\t\t\t\t<AsamAvatar\n\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t/>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"demo-rich-conent\"\n\t\t\t\t\tstyle=\"display: flex; gap: 16px; flex-direction: column\"\n\t\t\t\t>\n\t\t\t\t\t<AsamAvatar\n\t\t\t\t\t\t:size=\"60\"\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tstyle=\"margin-bottom: 8px\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p class=\"demo-rich-content__name example-paragraph\" style=\"margin: 0; font-weight: 500\">\n\t\t\t\t\t\t\tASAM UI\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclass=\"demo-rich-content__mention example-paragraph\"\n\t\t\t\t\t\t\tstyle=\"margin: 0; font-size: 14px; color: var(--el-color-info)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@asam-ui\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<p class=\"demo-rich-content__desc example-paragraph\" style=\"margin: 0\">\n\t\t\t\t\t\tASAM UI，面向开发者、设计师与产品经理的 Vue 3 组件库\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamPopover>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamAvatar, AsamButton, AsamPopover, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst gridData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: 'Jack',\n\t\taddress: 'New York City'\n\t}\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "66e3c26601c734ee1ddfad9c6dc7a260dca065b8e34a0e9aab1c7eff603c0e91",
									"notice": {
										"id": "c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110",
										"url": "/licenses/source-notices/c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt",
										"licenseFilename": "LICENSE-c9eaa398cd695f4f4b68c28a983e00a70ae2471bd1645935a77d3ca380256110.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/nested-information.vue",
											"sourceSha256": "79402a99a48eaebca1fd2afae3c2d5339c827fc1b22df29dea01d6a3635c63dc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-nested-operation",
					"title": "完整交互：nested-operation",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-nested-operation/ts/Demo.vue",
									"sha256": "f65feed14b0266f1fd8717d1eee0fee7ecf261e12fbf9510aa044690236064d6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt\n-->\n<template>\n\t<AsamPopover :visible=\"visible\" placement=\"top\" :width=\"180\">\n\t\t<div class=\"demo-slot-layout\">\n\t\t\t<p class=\"example-paragraph\">确定删除此项吗？</p>\n\t\t\t<div style=\"text-align: right; margin: 0\">\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" text @click=\"visible = false\"\n\t\t\t\t\t>取消</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton size=\"small\" type=\"default\" @click=\"visible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</div>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" @click=\"visible = true\">删除</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "88330db5e8b78cf6268e6505b89b99efebae89b18198199cbbaef929754f6cea",
									"notice": {
										"id": "33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e",
										"url": "/licenses/source-notices/33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt",
										"licenseFilename": "LICENSE-33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/nested-operation.vue",
											"sourceSha256": "b9e317cbe0ad1dffd4af5878d7b906a8d6d57171cef2ff27a91f575c78576132",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-nested-operation/js/Demo.vue",
									"sha256": "bcdb1b27c96619dcf7b4caa15ab4d04aa3f64e0999edc1c996e991585200e6b1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt\n-->\n<template>\n\t<AsamPopover :visible=\"visible\" placement=\"top\" :width=\"180\">\n\t\t<div class=\"demo-slot-layout\">\n\t\t\t<p class=\"example-paragraph\">确定删除此项吗？</p>\n\t\t\t<div style=\"text-align: right; margin: 0\">\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" text @click=\"visible = false\"\n\t\t\t\t\t>取消</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton size=\"small\" type=\"default\" @click=\"visible = false\"> 确认 </AsamButton>\n\t\t\t</div>\n\t\t</div>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" @click=\"visible = true\">删除</AsamButton>\n\t\t</template>\n\t</AsamPopover>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "5d71e50ec40f2427bb4a19ef0762d4d7df78c6ed168334b5a06f54fc81c0c28c",
									"notice": {
										"id": "33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e",
										"url": "/licenses/source-notices/33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt",
										"licenseFilename": "LICENSE-33aabaf7ea384883ad0f918879af68eaf8e1365ab320c84af0aea2267e7c4b4e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/nested-operation.vue",
											"sourceSha256": "b9e317cbe0ad1dffd4af5878d7b906a8d6d57171cef2ff27a91f575c78576132",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-directive-usage",
					"title": "完整交互：directive-usage",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-directive-usage/ts/Demo.vue",
									"sha256": "1dac071715278eaf47ed2d82eeccd9766b170b2419f0e8acedda89f050149ce6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" v-asam-popover=\"popoverRef\" v-asam-click-outside=\"onClickOutside\">\n\t\t点击按钮\n\t</AsamButton>\n\n\t<AsamPopover ref=\"popoverRef\" trigger=\"click\" title=\"带标题\" virtual-triggering persistent>\n\t\t<span> 示例内容 </span>\n\t</AsamPopover>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamClickOutside as vAsamClickOutside,\n\tAsamPopover,\n\tAsamPopoverDirective as vAsamPopover,\n\ttype AsamPopoverExpose as PopoverInstance\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst popoverRef = ref<PopoverInstance>();\nconst onClickOutside = () => {\n\tpopoverRef.value?.hide();\n};\n</script>\n",
									"originalSourceSha256": "7d54a28d6b461e0e3c66ec5bc10d60cfb84d6ef6110b98a63e56914e16bb5354",
									"notice": {
										"id": "6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d",
										"url": "/licenses/source-notices/6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt",
										"licenseFilename": "LICENSE-6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/directive-usage.vue",
											"sourceSha256": "430af29a6551cad13572d27bb1b5a9a454e6f79ff0fefc46d3b06faff6db81a7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/ep2147-directive-usage/js/Demo.vue",
									"sha256": "85e399aaf1924b4c7c36b5ae1771fddefa846d2c94b6b91eec023503acab5711",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" v-asam-popover=\"popoverRef\" v-asam-click-outside=\"onClickOutside\">\n\t\t点击按钮\n\t</AsamButton>\n\n\t<AsamPopover ref=\"popoverRef\" trigger=\"click\" title=\"带标题\" virtual-triggering persistent>\n\t\t<span> 示例内容 </span>\n\t</AsamPopover>\n</template>\n\n<script setup>\nimport {\n\tAsamButton,\n\tAsamClickOutside as vAsamClickOutside,\n\tAsamPopover,\n\tAsamPopoverDirective as vAsamPopover\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst popoverRef = ref();\nconst onClickOutside = () => {\n\tpopoverRef.value?.hide();\n};\n</script>\n",
									"originalSourceSha256": "78719b3468cf97310722137a6245d212336985e07175d5273337eaf16b2e07a7",
									"notice": {
										"id": "6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d",
										"url": "/licenses/source-notices/6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt",
										"licenseFilename": "LICENSE-6999ce53e283148a0761bbc79e3e7cc0689f92198e723cbf409a33d6cffe196d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popover/directive-usage.vue",
											"sourceSha256": "430af29a6551cad13572d27bb1b5a9a454e6f79ff0fefc46d3b06faff6db81a7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/popup-container/ts/Demo.vue",
									"sha256": "15d4cd2a31c158a76d0d299b2d473620fa01515a6ecdc9490c664d186877d9cd",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamPopover title=\"草稿操作\" :width=\"240\" trigger=\"click\" :teleported=\"globalPopup\">\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开气泡面板</AsamButton>\n\t\t\t</template>\n\t\t\t<template #default=\"{ hide }\">\n\t\t\t\t<p class=\"example-paragraph\">需要确认的补充信息。</p>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"\n\t\t\t\t\t\tcount++;\n\t\t\t\t\t\thide();\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t完成并关闭\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamPopover>\n\t\t<p class=\"example-paragraph\" role=\"status\">完成 {{ count }} 次</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopoverBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\nconst count = ref(0);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopover/popup-container/js/Demo.vue",
									"sha256": "a8ebfa72436230df6e8848b71d74a25a06ec976e101fa8259752bd2aee3c2b11",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamPopover title=\"草稿操作\" :width=\"240\" trigger=\"click\" :teleported=\"globalPopup\">\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开气泡面板</AsamButton>\n\t\t\t</template>\n\t\t\t<template #default=\"{ hide }\">\n\t\t\t\t<p class=\"example-paragraph\">需要确认的补充信息。</p>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"\n\t\t\t\t\t\tcount++;\n\t\t\t\t\t\thide();\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t完成并关闭\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamPopover>\n\t\t<p class=\"example-paragraph\" role=\"status\">完成 {{ count }} 次</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopoverBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopover } from '@asam-ui/ui';\nconst count = ref(0);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDropdown",
			"documentation": "/component-AsamDropdown.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合菜单、图标与公开方法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/basic/ts/Demo.vue",
									"sha256": "527f480413c72b4c5ee0a2182e5d1631f0d3d43f7537e661f2c4bc8743a9a4d4",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown ref=\"menu\" v-bind=\"{ trigger: 'click', wrapMenu: false }\" @command=\"select\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled>删除（不可用）</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t>通过方法打开</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t>通过方法关闭</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDropdownBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport type { AsamDropdownExpose } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef<AsamDropdownExpose>();\nconst command = ref('未选择');\nconst select = (value: string | number | object) => {\n\tcommand.value = String(value);\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/basic/js/Demo.vue",
									"sha256": "0a01caeb5f996b6b7b1f812cba3969e7b37c8ee4c88ab92c0d780cd7d583cb76",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown ref=\"menu\" v-bind=\"{ trigger: 'click', wrapMenu: false }\" @command=\"select\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled>删除（不可用）</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t>通过方法打开</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t>通过方法关闭</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDropdownBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef();\nconst command = ref('未选择');\nconst select = (value) => {\n\tcommand.value = String(value);\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档控件密度",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/sizes/ts/Demo.vue",
									"sha256": "bd87b8ba807a5016592716225af8f25e74b3ec5a47a70da20b893a62743c9436",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ size, trigger: 'click', wrapMenu: true }\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">{{ size }}</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownItem command=\"save\">保存</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"cancel\">取消</AsamDropdownItem>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDropdownSizesDemo' });\nimport { AsamButton, AsamDropdown, AsamDropdownItem } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/sizes/js/Demo.vue",
									"sha256": "c53d95e8c3aaac240ed8932a4b19fa196999a573755d3f325972151f71af8b30",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ size, trigger: 'click', wrapMenu: true }\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">{{ size }}</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownItem command=\"save\">保存</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"cancel\">取消</AsamDropdownItem>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDropdownSizesDemo' });\nimport { AsamButton, AsamDropdown, AsamDropdownItem } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic-usage",
					"title": "显隐与关闭守卫",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-basic-usage/ts/Demo.vue",
									"sha256": "7910a936c705f1557e2cdee2a465bd91c2d210cad07961c519187fe764e875dc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt\n-->\n<template>\n\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t下拉列表\n\t\t\t<AsamIcon class=\"el-icon--right\">\n\t\t\t\t<arrow-down />\n\t\t\t</AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamDropdown, AsamDropdownItem, AsamDropdownMenu, AsamIcon } from '@asam-ui/ui';\n\nimport { ArrowDown } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "8e5fd7a437b328db4ffa4998b7bf790229899105a00b567b5fcffcdbfb4aaaf2",
									"notice": {
										"id": "055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5",
										"url": "/licenses/source-notices/055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt",
										"licenseFilename": "LICENSE-055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/basic-usage.vue",
											"sourceSha256": "bb5955a10b7dc649a94735f20dd2b3fc32c4cacd159f612c4c796816e96534b6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-basic-usage/js/Demo.vue",
									"sha256": "81b95bffc20d788f85a26c5afe5a7d17ce7851579279952d90e354b93d788847",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt\n-->\n<template>\n\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t下拉列表\n\t\t\t<AsamIcon class=\"el-icon--right\">\n\t\t\t\t<arrow-down />\n\t\t\t</AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script setup>\nimport { AsamDropdown, AsamDropdownItem, AsamDropdownMenu, AsamIcon } from '@asam-ui/ui';\nimport { ArrowDown } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "b655a0a8c5dc2e17c58c2c18c65efcdebef290c3555f911e59faffc876f699b3",
									"notice": {
										"id": "055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5",
										"url": "/licenses/source-notices/055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt",
										"licenseFilename": "LICENSE-055a6d3d55966585d03b7cd0aeac968e697afe186c7f9801bb6aef1ca9cdcec5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/basic-usage.vue",
											"sourceSha256": "bb5955a10b7dc649a94735f20dd2b3fc32c4cacd159f612c4c796816e96534b6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-placements",
					"title": "定位方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-placements/ts/Demo.vue",
									"sha256": "cf180f19e1ec5e35e9ea70b40b4daa658e36db1dc25655f19033f37681d7c561",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap items-center gap-4\">\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"top-start\">\n\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"top\">\n\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"top-end\">\n\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"bottom-start\">\n\t\t\t<AsamButton type=\"default\">底部左侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"bottom\">\n\t\t\t<AsamButton type=\"default\">底部</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"bottom-end\">\n\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "7eaa5278037c894ff3725cc9101712df5c60801f540d53c2eb22c6ec9e2f2cb9",
									"notice": {
										"id": "f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345",
										"url": "/licenses/source-notices/f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt",
										"licenseFilename": "LICENSE-f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/placements.vue",
											"sourceSha256": "4e9771c14612e2bcb4d3a063cdefd50d9fea6c235d378611b5e9e029e9e7763c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-placements/js/Demo.vue",
									"sha256": "cf0a50e3c86b4e09e3bad07a77f9ddd177596a37423329f04d02a629f0cb5ac7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap items-center gap-4\">\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"top-start\">\n\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"top\">\n\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"top-end\">\n\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"bottom-start\">\n\t\t\t<AsamButton type=\"default\">底部左侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"bottom\">\n\t\t\t<AsamButton type=\"default\">底部</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown trigger=\"hover\" :wrap-menu=\"false\" placement=\"bottom-end\">\n\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作一</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作二</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作三</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "1591ad828e0f758dc9b8269946479c74175b314f9cca8f349f49c79b81819b94",
									"notice": {
										"id": "f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345",
										"url": "/licenses/source-notices/f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt",
										"licenseFilename": "LICENSE-f1eb36e3361dd63c9074a37e43467cadd03b053748bbba633c370b97d04a9345.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/placements.vue",
											"sourceSha256": "4e9771c14612e2bcb4d3a063cdefd50d9fea6c235d378611b5e9e029e9e7763c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-triggering-element",
					"title": "完整交互：triggering-element",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-triggering-element/ts/Demo.vue",
									"sha256": "f70223c0fb1497fe0839a29dc1d8d36a9af2b1266f1f52c97fa487c9a534ecdc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap items-center demo-layout-1\">\n\t\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\">\n\t\t\t<AsamButton type=\"default\">\n\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 5</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t\t@click=\"handleClick\"\n\t\t>\n\t\t\t下拉列表\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem divided>操作 4</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 5</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\tAsamIcon\n} from '@asam-ui/ui';\n\nimport { ArrowDown } from '@asam-ui/icons-vue';\n\nconst handleClick = () => {\n\t// eslint-disable-next-line no-alert\n\talert('button click');\n};\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown + .el-dropdown {\n\tmargin-left: 15px;\n}\n\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "9556149354f3404c700c77121b97346f924c9499e64317d0913f9f7627d9f939",
									"notice": {
										"id": "3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9",
										"url": "/licenses/source-notices/3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt",
										"licenseFilename": "LICENSE-3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/triggering-element.vue",
											"sourceSha256": "1a6c5f914f6cb912aa69169d86855df84f46fee8e2d33712bdc11f6a2c0d227f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-triggering-element/js/Demo.vue",
									"sha256": "d69a410fd4bac01853186cb60cd02be16022fd3027892353d71c3ca4af612f32",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap items-center demo-layout-1\">\n\t\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\">\n\t\t\t<AsamButton type=\"default\">\n\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 5</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t\t@click=\"handleClick\"\n\t\t>\n\t\t\t下拉列表\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem divided>操作 4</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 5</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script setup>\nimport {\n\tAsamButton,\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\tAsamIcon\n} from '@asam-ui/ui';\nimport { ArrowDown } from '@asam-ui/icons-vue';\nconst handleClick = () => {\n\t// eslint-disable-next-line no-alert\n\talert('button click');\n};\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown + .el-dropdown {\n\tmargin-left: 15px;\n}\n\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "98f45b7dcb25756ccfe80838a79ccadfea92aeda084600841ce63ae9238415e5",
									"notice": {
										"id": "3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9",
										"url": "/licenses/source-notices/3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt",
										"licenseFilename": "LICENSE-3d7ca9879208cdb1326c426facad47514b7d6d8f3a19e999eaeec2218b9814d9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/triggering-element.vue",
											"sourceSha256": "1a6c5f914f6cb912aa69169d86855df84f46fee8e2d33712bdc11f6a2c0d227f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-how-to-trigger",
					"title": "完整交互：how-to-trigger",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-how-to-trigger/ts/Demo.vue",
									"sha256": "1820bdf4304f3b3c43c331d5fd89882ee5e902e8235d1a2660733f2b73ba6acf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt\n-->\n<template>\n\t<AsamRow class=\"block-col-2\">\n\t\t<AsamCol :span=\"8\">\n\t\t\t<span class=\"demonstration\">悬停触发</span>\n\t\t\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\">\n\t\t\t\t<span class=\"el-dropdown-link\">\n\t\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t\t</span>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<span class=\"demonstration\">点击触发</span>\n\t\t\t<AsamDropdown placement=\"bottom\" :wrap-menu=\"false\" trigger=\"click\">\n\t\t\t\t<span class=\"el-dropdown-link\">\n\t\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t\t</span>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<span class=\"demonstration\">右键触发</span>\n\t\t\t<AsamDropdown placement=\"bottom\" :wrap-menu=\"false\" trigger=\"contextmenu\">\n\t\t\t\t<span class=\"el-dropdown-link\">\n\t\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t\t</span>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamCol,\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\tAsamIcon,\n\tAsamRow\n} from '@asam-ui/ui';\n\nimport {\n\tArrowDown,\n\tCheck,\n\tCircleCheck,\n\tCirclePlus,\n\tCirclePlusFilled,\n\tPlus\n} from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.block-col-2 .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n.block-col-2 .el-dropdown-link {\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "e3183841708a5536fccb1003969437ea4be9f05a2c7976243107c97c406c39df",
									"notice": {
										"id": "74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3",
										"url": "/licenses/source-notices/74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt",
										"licenseFilename": "LICENSE-74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/how-to-trigger.vue",
											"sourceSha256": "89aad9bb9cf7d89c395f670f7894492cc84ea75aee93497c93a2f852174aa843",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-how-to-trigger/js/Demo.vue",
									"sha256": "a2fc3ed606d7b119f2794d2a26ad7b3510048869826c362bccac6532420cbc8a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt\n-->\n<template>\n\t<AsamRow class=\"block-col-2\">\n\t\t<AsamCol :span=\"8\">\n\t\t\t<span class=\"demonstration\">悬停触发</span>\n\t\t\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\">\n\t\t\t\t<span class=\"el-dropdown-link\">\n\t\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t\t</span>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<span class=\"demonstration\">点击触发</span>\n\t\t\t<AsamDropdown placement=\"bottom\" :wrap-menu=\"false\" trigger=\"click\">\n\t\t\t\t<span class=\"el-dropdown-link\">\n\t\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t\t</span>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<span class=\"demonstration\">右键触发</span>\n\t\t\t<AsamDropdown placement=\"bottom\" :wrap-menu=\"false\" trigger=\"contextmenu\">\n\t\t\t\t<span class=\"el-dropdown-link\">\n\t\t\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t\t\t</span>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\nimport {\n\tAsamCol,\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\tAsamIcon,\n\tAsamRow\n} from '@asam-ui/ui';\nimport {\n\tArrowDown,\n\tCheck,\n\tCircleCheck,\n\tCirclePlus,\n\tCirclePlusFilled,\n\tPlus\n} from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.block-col-2 .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n.block-col-2 .el-dropdown-link {\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "801cf8e3180d9f3d4263e348cc58572778e38be691ad6a3502246c479f930baa",
									"notice": {
										"id": "74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3",
										"url": "/licenses/source-notices/74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt",
										"licenseFilename": "LICENSE-74d104c1adc393f799a3601320397d16062d035036136f5eb933cf14789a4ae3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/how-to-trigger.vue",
											"sourceSha256": "89aad9bb9cf7d89c395f670f7894492cc84ea75aee93497c93a2f852174aa843",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-menu-hiding-behavior",
					"title": "完整交互：menu-hiding-behavior",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-menu-hiding-behavior/ts/Demo.vue",
									"sha256": "3db298bbd403f8e9beca6aeadfefa275bc2855a07b95f239d217c2989f2d2585",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt\n-->\n<template>\n\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\" :hide-on-click=\"false\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 6</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamDropdown, AsamDropdownItem, AsamDropdownMenu, AsamIcon } from '@asam-ui/ui';\n\nimport { ArrowDown } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown + .el-dropdown {\n\tmargin-left: 15px;\n}\n\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "a95e1b929679fecb4b56f87790b080b72328ce34f98bfa4edfb8546a84609d58",
									"notice": {
										"id": "0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485",
										"url": "/licenses/source-notices/0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt",
										"licenseFilename": "LICENSE-0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/menu-hiding-behavior.vue",
											"sourceSha256": "62354e23c3350fd4ec497b8f19ad739ae53f736e842caa79418f076a5bec6363",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-menu-hiding-behavior/js/Demo.vue",
									"sha256": "39ee2c425842e35ebc2aa307e78cf6abf7d7fdaa1b6fc4976fc48c4ed234f348",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt\n-->\n<template>\n\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\" :hide-on-click=\"false\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 6</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script setup>\nimport { AsamDropdown, AsamDropdownItem, AsamDropdownMenu, AsamIcon } from '@asam-ui/ui';\nimport { ArrowDown } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown + .el-dropdown {\n\tmargin-left: 15px;\n}\n\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "5502276120241698ef2da1e15277d55eef9e20846368829edb16cb4be4a561b6",
									"notice": {
										"id": "0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485",
										"url": "/licenses/source-notices/0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt",
										"licenseFilename": "LICENSE-0f62aa50b3bd1bb3017d9b79c5619e2f0cfd62332f70f27c77ce7518747f4485.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/menu-hiding-behavior.vue",
											"sourceSha256": "62354e23c3350fd4ec497b8f19ad739ae53f736e842caa79418f076a5bec6363",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-command-event",
					"title": "菜单命令",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-command-event/ts/Demo.vue",
									"sha256": "2b99f6cd89088077a8754dd9df131035ac10485ce384a1575ca03dd55837fea6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt\n-->\n<template>\n\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\" @command=\"handleCommand\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem command=\"a\">操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"b\">操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"c\">操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"d\" disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"e\" divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\tAsamIcon,\n\tAsamMessage,\n\ttype AsamMessageHandler\n} from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { ArrowDown } from '@asam-ui/icons-vue';\n\nconst handleCommand = (command: string | number | object) => {\n\ttrackAsamMessage(AsamMessage(`点击的菜单项：${command}`));\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "96697cd5ef335e640f99a2b212f8cf4596c4b55dbf5a77c33b15c7c35a028296",
									"notice": {
										"id": "717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b",
										"url": "/licenses/source-notices/717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt",
										"licenseFilename": "LICENSE-717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/command-event.vue",
											"sourceSha256": "acc298c90158836733bb1fd941761243eaebad8b454197cdcc6cf0339b68365e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-command-event/js/Demo.vue",
									"sha256": "f50909860b51ca4ca873361f8343292ef7275441a9f90a4b6106c550d32cc2f8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt\n-->\n<template>\n\t<AsamDropdown trigger=\"hover\" placement=\"bottom\" :wrap-menu=\"false\" @command=\"handleCommand\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t下拉列表<AsamIcon class=\"el-icon--right\"><arrow-down /></AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem command=\"a\">操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"b\">操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"c\">操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"d\" disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem command=\"e\" divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script setup>\nimport {\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\tAsamIcon,\n\tAsamMessage\n} from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { ArrowDown } from '@asam-ui/icons-vue';\nconst handleCommand = (command) => {\n\ttrackAsamMessage(AsamMessage(`点击的菜单项：${command}`));\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n",
									"originalSourceSha256": "2657b4f43f807be3e5e80796fda7302e40fce4d60d066c824316c754a34f9c51",
									"notice": {
										"id": "717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b",
										"url": "/licenses/source-notices/717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt",
										"licenseFilename": "LICENSE-717afcc3b7f857f761848bd9fae8590701e7719552eb4a560c83f44b10afc47b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/command-event.vue",
											"sourceSha256": "acc298c90158836733bb1fd941761243eaebad8b454197cdcc6cf0339b68365e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-dropdown-methods",
					"title": "实例打开与关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-dropdown-methods/ts/Demo.vue",
									"sha256": "d8d6d1147a40dac6d7c08b0c515c0b17ce7739cddd8d4a212155cf67287c5979",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt\n-->\n<template>\n\t<div style=\"font-size: 14px\">\n\t\t<p class=\"example-paragraph\">打开（关闭）列表二时会关闭（打开）列表一。</p>\n\t</div>\n\t<div style=\"margin: 15px\">\n\t\t<AsamButton type=\"default\" @click=\"showClick\">显示（show）</AsamButton>\n\t</div>\n\t<AsamDropdown\n\t\tplacement=\"bottom\"\n\t\t:wrap-menu=\"false\"\n\t\tref=\"dropdown1\"\n\t\ttrigger=\"contextmenu\"\n\t\tstyle=\"margin-right: 30px\"\n\t>\n\t\t<span class=\"el-dropdown-link\"> 下拉列表一 </span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n\n\t<AsamDropdown\n\t\tplacement=\"bottom\"\n\t\t:wrap-menu=\"false\"\n\t\ttrigger=\"contextmenu\"\n\t\t@visible-change=\"handleVisible2\"\n\t>\n\t\t<span class=\"el-dropdown-link\"> 下拉列表二 </span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\ttype AsamDropdownExpose as DropdownInstance\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst dropdown1 = ref<DropdownInstance>();\nfunction handleVisible2(visible: boolean) {\n\tif (!dropdown1.value) return;\n\tif (visible) {\n\t\tdropdown1.value.handleClose();\n\t} else {\n\t\tdropdown1.value.handleOpen();\n\t}\n}\nfunction showClick() {\n\tif (!dropdown1.value) return;\n\tdropdown1.value.handleOpen();\n}\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "d28432623fb1fae226bd572027d7f47cfd240a7030f29c48136777ece3a90ef7",
									"notice": {
										"id": "00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500",
										"url": "/licenses/source-notices/00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt",
										"licenseFilename": "LICENSE-00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/dropdown-methods.vue",
											"sourceSha256": "ebcd22414c89dc1fc003f0b641caa0dc5ce1320110c9e88383676ac4129e3e64",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-dropdown-methods/js/Demo.vue",
									"sha256": "e896343288207f2be02519f5516e0e919a7894e50cd5f9b5d04200a6dc5c629b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt\n-->\n<template>\n\t<div style=\"font-size: 14px\">\n\t\t<p class=\"example-paragraph\">打开（关闭）列表二时会关闭（打开）列表一。</p>\n\t</div>\n\t<div style=\"margin: 15px\">\n\t\t<AsamButton type=\"default\" @click=\"showClick\">显示（show）</AsamButton>\n\t</div>\n\t<AsamDropdown\n\t\tplacement=\"bottom\"\n\t\t:wrap-menu=\"false\"\n\t\tref=\"dropdown1\"\n\t\ttrigger=\"contextmenu\"\n\t\tstyle=\"margin-right: 30px\"\n\t>\n\t\t<span class=\"el-dropdown-link\"> 下拉列表一 </span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n\n\t<AsamDropdown\n\t\tplacement=\"bottom\"\n\t\t:wrap-menu=\"false\"\n\t\ttrigger=\"contextmenu\"\n\t\t@visible-change=\"handleVisible2\"\n\t>\n\t\t<span class=\"el-dropdown-link\"> 下拉列表二 </span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem disabled>操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem divided>操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst dropdown1 = ref();\nfunction handleVisible2(visible) {\n\tif (!dropdown1.value) return;\n\tif (visible) {\n\t\tdropdown1.value.handleClose();\n\t} else {\n\t\tdropdown1.value.handleOpen();\n\t}\n}\nfunction showClick() {\n\tif (!dropdown1.value) return;\n\tdropdown1.value.handleOpen();\n}\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown-link {\n\tcursor: pointer;\n\tcolor: var(--el-color-primary);\n\tdisplay: flex;\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "2cd6ec802f8be7683158bd3928cb6cdfab6f6af6417e4317a226ad71739bc583",
									"notice": {
										"id": "00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500",
										"url": "/licenses/source-notices/00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt",
										"licenseFilename": "LICENSE-00598d393de79b28c6b39d74d115a7383804e529171f893c17e101718c08e500.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/dropdown-methods.vue",
											"sourceSha256": "ebcd22414c89dc1fc003f0b641caa0dc5ce1320110c9e88383676ac4129e3e64",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-sizes",
					"title": "完整交互：sizes",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-sizes/ts/Demo.vue",
									"sha256": "65d04831066e3c40ed42f772fdf4e036d64c670b3c4c4c6af46c5349d70e8ea7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsize=\"large\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t>\n\t\t\t大尺寸\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t>\n\t\t\t默认\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsize=\"small\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t>\n\t\t\t小尺寸\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown + .el-dropdown {\n\tmargin-left: 15px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "ef1a45015a2e19972ce652fbc13ea732671de9d7f9623693b52b0abfcf425c9d",
									"notice": {
										"id": "c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34",
										"url": "/licenses/source-notices/c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt",
										"licenseFilename": "LICENSE-c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/sizes.vue",
											"sourceSha256": "e07f93232a42845552f7b9fd7ccf1cc54935066d59c8fa00acd9499f72649260",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-sizes/js/Demo.vue",
									"sha256": "06af7218ecf3173d915c80f3d6b3b522a742b7cb493864fadc68a73b42e4957b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsize=\"large\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t>\n\t\t\t大尺寸\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t>\n\t\t\t默认\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\n\t\t<AsamDropdown\n\t\t\ttrigger=\"hover\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:wrap-menu=\"false\"\n\t\t\tsize=\"small\"\n\t\t\tsplit-button\n\t\t\ttype=\"primary\"\n\t\t>\n\t\t\t小尺寸\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem>操作 1</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 2</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 3</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem>操作 4</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example-showcase .el-dropdown + .el-dropdown {\n\tmargin-left: 15px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "7a38be14c19ef726e7e1c195c000c6198cf6bf3601f15055ecde93c13c011f6f",
									"notice": {
										"id": "c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34",
										"url": "/licenses/source-notices/c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt",
										"licenseFilename": "LICENSE-c764468aa857e1961a132c6fe9178bac472e3424c4fc847dd2057de3b794fd34.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/sizes.vue",
											"sourceSha256": "e07f93232a42845552f7b9fd7ccf1cc54935066d59c8fa00acd9499f72649260",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-virtual-trigger",
					"title": "虚拟触发目标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-virtual-trigger/ts/Demo.vue",
									"sha256": "05de7740b7f14a15a8281be398fd8c402240dbf4abb4b0209fe81f903ad53ce0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt\n-->\n<template>\n\t<div @click=\"handleClick\" @contextmenu=\"handleContextmenu\">\n\t\t<AsamCard class=\"content\" body-class=\"card-body\"> 右键点击 </AsamCard>\n\t</div>\n\t<AsamDropdown\n\t\t:wrap-menu=\"false\"\n\t\tref=\"dropdownRef\"\n\t\t:virtual-ref=\"triggerRef\"\n\t\t:show-arrow=\"false\"\n\t\t:popper-options=\"{\n\t\t\tmodifiers: [{ name: 'offset', options: { offset: [0, 0] } }]\n\t\t}\"\n\t\tvirtual-triggering\n\t\ttrigger=\"contextmenu\"\n\t\tplacement=\"bottom-start\"\n\t>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamCard,\n\tAsamDropdown,\n\tAsamDropdownItem,\n\tAsamDropdownMenu,\n\ttype AsamDropdownExpose as DropdownInstance\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from '@asam-ui/icons-vue';\n\nconst dropdownRef = ref<DropdownInstance>();\nconst position = ref(DOMRect.fromRect());\n\nconst triggerRef = ref({\n\tgetBoundingClientRect: () => position.value\n});\n\nconst handleClick = () => {\n\tdropdownRef.value?.handleClose();\n};\n\nconst handleContextmenu = (event: MouseEvent) => {\n\tconst { clientX, clientY } = event;\n\tposition.value = DOMRect.fromRect({\n\t\tx: clientX,\n\t\ty: clientY\n\t});\n\tevent.preventDefault();\n\tdropdownRef.value?.handleOpen();\n};\n</script>\n\n<style scoped>\n.content {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 200px;\n}\n\n.content :deep(.card-body) {\n\tflex-grow: 0;\n}\n</style>\n",
									"originalSourceSha256": "ab74e79493a28e00a033af2046a5760203cf5fe7be00f9db2739d593aa525fa8",
									"notice": {
										"id": "b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53",
										"url": "/licenses/source-notices/b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt",
										"licenseFilename": "LICENSE-b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/virtual-trigger.vue",
											"sourceSha256": "61bee8e4dbfb853d59d8cc86ba115347146faf3dbd66442e7988b0af53d9744f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/ep2147-virtual-trigger/js/Demo.vue",
									"sha256": "7dbf772a11b5745e4c2b51b287ffcbe2ef2cc68922209a8751ea210863d9eff1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt\n-->\n<template>\n\t<div @click=\"handleClick\" @contextmenu=\"handleContextmenu\">\n\t\t<AsamCard class=\"content\" body-class=\"card-body\"> 右键点击 </AsamCard>\n\t</div>\n\t<AsamDropdown\n\t\t:wrap-menu=\"false\"\n\t\tref=\"dropdownRef\"\n\t\t:virtual-ref=\"triggerRef\"\n\t\t:show-arrow=\"false\"\n\t\t:popper-options=\"{\n\t\t\tmodifiers: [{ name: 'offset', options: { offset: [0, 0] } }]\n\t\t}\"\n\t\tvirtual-triggering\n\t\ttrigger=\"contextmenu\"\n\t\tplacement=\"bottom-start\"\n\t>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem :icon=\"Plus\">操作 1</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"CirclePlusFilled\"> 操作 2 </AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"CirclePlus\">操作 3</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"Check\">操作 4</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem :icon=\"CircleCheck\">操作 5</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script setup>\nimport { AsamCard, AsamDropdown, AsamDropdownItem, AsamDropdownMenu } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from '@asam-ui/icons-vue';\nconst dropdownRef = ref();\nconst position = ref(DOMRect.fromRect());\nconst triggerRef = ref({\n\tgetBoundingClientRect: () => position.value\n});\nconst handleClick = () => {\n\tdropdownRef.value?.handleClose();\n};\nconst handleContextmenu = (event) => {\n\tconst { clientX, clientY } = event;\n\tposition.value = DOMRect.fromRect({\n\t\tx: clientX,\n\t\ty: clientY\n\t});\n\tevent.preventDefault();\n\tdropdownRef.value?.handleOpen();\n};\n</script>\n\n<style scoped>\n.content {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 200px;\n}\n\n.content :deep(.card-body) {\n\tflex-grow: 0;\n}\n</style>\n",
									"originalSourceSha256": "2ed00c2e6f09abc5d7c845f7ab86335082595780bd9ba9a9732a093d67766054",
									"notice": {
										"id": "b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53",
										"url": "/licenses/source-notices/b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt",
										"licenseFilename": "LICENSE-b64eafa6b27811f52d5fbccd3b4c049de7538709d65dd6c9d1be398d363e5b53.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/dropdown/virtual-trigger.vue",
											"sourceSha256": "61bee8e4dbfb853d59d8cc86ba115347146faf3dbd66442e7988b0af53d9744f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/popup-container/ts/Demo.vue",
									"sha256": "74c56e93eb90b3ee38ca5a4a1c1beb9521c0b9f91a04631c653fbe131c304734",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"actions\">\n\t\t\t<AsamDropdown\n\t\t\t\tref=\"menu\"\n\t\t\t\tv-bind=\"{ trigger: 'click', wrapMenu: false }\"\n\t\t\t\t@command=\"select\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled\n\t\t\t\t\t\t\t>删除（不可用）</AsamDropdownItem\n\t\t\t\t\t\t>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t\t>通过方法打开</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t\t>通过方法关闭</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDropdownBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport type { AsamDropdownExpose } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef<AsamDropdownExpose>();\nconst command = ref('未选择');\nconst select = (value: string | number | object) => {\n\tcommand.value = String(value);\n};\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdown/popup-container/js/Demo.vue",
									"sha256": "a8d88feadc067a2e43c58830c87913975148a63bdc7c8eecdf8c57e6754024e1",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"actions\">\n\t\t\t<AsamDropdown\n\t\t\t\tref=\"menu\"\n\t\t\t\tv-bind=\"{ trigger: 'click', wrapMenu: false }\"\n\t\t\t\t@command=\"select\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t\t<template #dropdown>\n\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled\n\t\t\t\t\t\t\t>删除（不可用）</AsamDropdownItem\n\t\t\t\t\t\t>\n\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t</template>\n\t\t\t</AsamDropdown>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t\t>通过方法打开</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t\t>通过方法关闭</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDropdownBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef();\nconst command = ref('未选择');\nconst select = (value) => {\n\tcommand.value = String(value);\n};\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPagination",
			"documentation": "/component-AsamPagination.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/basic/ts/Demo.vue",
									"sha256": "e6e9e143c55490052dfb270cbe96741e43b97d7c5c16eb8ba2106aab049a65da",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamPagination\n\t\t\tv-bind=\"{\n\t\t\t\ttotal: 95,\n\t\t\t\tpageSizes: [10, 20, 50],\n\t\t\t\tlayout: 'total, sizes, prev, pager, next',\n\t\t\t\tsize\n\t\t\t}\"\n\t\t\tv-model:current-page=\"page\"\n\t\t\tv-model:page-size=\"pageSize\"\n\t\t/>\n\t\t<label>\n\t\t\t<span>密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<p class=\"example-paragraph\" role=\"status\">第 {{ page }} 页，每页 {{ pageSize }} 条</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst size = ref<AsamControlSize>('default');\nconst page = ref(1);\nconst pageSize = ref(10);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/basic/js/Demo.vue",
									"sha256": "15fb2dceeb9a1dee8b1aae6214486b34d400c2c3cf6b6b7926daa15929b97ccf",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamPagination\n\t\t\tv-bind=\"{\n\t\t\t\ttotal: 95,\n\t\t\t\tpageSizes: [10, 20, 50],\n\t\t\t\tlayout: 'total, sizes, prev, pager, next',\n\t\t\t\tsize\n\t\t\t}\"\n\t\t\tv-model:current-page=\"page\"\n\t\t\tv-model:page-size=\"pageSize\"\n\t\t/>\n\t\t<label>\n\t\t\t<span>密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<p class=\"example-paragraph\" role=\"status\">第 {{ page }} 页，每页 {{ pageSize }} 条</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('default');\nconst page = ref(1);\nconst pageSize = ref(10);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-basic-usage/ts/Demo.vue",
									"sha256": "5db0bdee7ede88c6a4d3ea5847d5d5a29122093e8a7e30de4d63e8d26dd77330",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt\n-->\n<template>\n\t<div class=\"example-pagination-block\">\n\t\t<div class=\"example-demonstration\">页数较少时</div>\n\t\t<AsamPagination layout=\"prev, pager, next\" :total=\"50\" />\n\t</div>\n\t<div class=\"example-pagination-block\">\n\t\t<div class=\"example-demonstration\">页数超过七页时</div>\n\t\t<AsamPagination layout=\"prev, pager, next\" :total=\"1000\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationCapBasicUsageDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example-pagination-block + .example-pagination-block {\n\tmargin-top: 10px;\n}\n\n.example-pagination-block .example-demonstration {\n\tmargin-bottom: 16px;\n}\n</style>\n",
									"originalSourceSha256": "b5d64f312d145b690dabc46f0b8593ac041a77f7cdb276e053be55f80b19e7db",
									"notice": {
										"id": "9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed",
										"url": "/licenses/source-notices/9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt",
										"licenseFilename": "LICENSE-9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/basic-usage.vue",
											"sourceSha256": "2a228cfde9afba524fc4b01c99d2120888c60bdf75f64f11ade89d8d3de97691",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-basic-usage/js/Demo.vue",
									"sha256": "081c87654aed2b9e9916df4f022fa59ca5b1bbc0c27a399b427fd65573261ba2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt\n-->\n<template>\n\t<div class=\"example-pagination-block\">\n\t\t<div class=\"example-demonstration\">页数较少时</div>\n\t\t<AsamPagination layout=\"prev, pager, next\" :total=\"50\" />\n\t</div>\n\t<div class=\"example-pagination-block\">\n\t\t<div class=\"example-demonstration\">页数超过七页时</div>\n\t\t<AsamPagination layout=\"prev, pager, next\" :total=\"1000\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationCapBasicUsageDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example-pagination-block + .example-pagination-block {\n\tmargin-top: 10px;\n}\n\n.example-pagination-block .example-demonstration {\n\tmargin-bottom: 16px;\n}\n</style>\n",
									"originalSourceSha256": "84195156e187511e7137db239d2666225f7689d9d77d50a5c63c48d4aa0183db",
									"notice": {
										"id": "9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed",
										"url": "/licenses/source-notices/9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt",
										"licenseFilename": "LICENSE-9aa3818e6a5aa6585a865f573b256c10abb4fc20b70f3531e2475e7a6f76fbed.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/basic-usage.vue",
											"sourceSha256": "2a228cfde9afba524fc4b01c99d2120888c60bdf75f64f11ade89d8d3de97691",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-number-of-pagers",
					"title": "设置最大页码按钮数",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-number-of-pagers/ts/Demo.vue",
									"sha256": "837f5c8058419c10022aaa387401932e43f6e7f71b5927da99a3894156d2339d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt\n-->\n<template>\n\t<AsamPagination :page-size=\"20\" :pager-count=\"11\" layout=\"prev, pager, next\" :total=\"1000\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationCapNumberOfPagersDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "93166bae23016c564e5213003400bc846cce72f7b953e79a160e2c6b22f2f148",
									"notice": {
										"id": "79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a",
										"url": "/licenses/source-notices/79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt",
										"licenseFilename": "LICENSE-79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/number-of-pagers.vue",
											"sourceSha256": "802129ab9b367b3d1d077c1bb8e1895a6a7427bf4b5e593cc5389ac090d22afd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-number-of-pagers/js/Demo.vue",
									"sha256": "b34fe6ec9636e018840b72e619a65b4c66d3039f03ded2ee26df4a65cb309279",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt\n-->\n<template>\n\t<AsamPagination :page-size=\"20\" :pager-count=\"11\" layout=\"prev, pager, next\" :total=\"1000\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationCapNumberOfPagersDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "1fe7a2e372862645a0d3ffa0259c5f85fbecf0b85db8ee25c46b2e322ed55936",
									"notice": {
										"id": "79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a",
										"url": "/licenses/source-notices/79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt",
										"licenseFilename": "LICENSE-79c8cba610d8575d29b8df4bb450c79f7b63f72b70d40aa2da1b7ac0a373d53a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/number-of-pagers.vue",
											"sourceSha256": "802129ab9b367b3d1d077c1bb8e1895a6a7427bf4b5e593cc5389ac090d22afd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-background-color",
					"title": "带有背景色的分页",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-background-color/ts/Demo.vue",
									"sha256": "3f64f735b9f34282dbb2ce4b553c940654b318d2360d0e6d6401fdc6842a423c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt\n-->\n<template>\n\t<AsamPagination background layout=\"prev, pager, next\" :total=\"1000\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationCapBackgroundColorDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "71476c7b2e47de88223e71d35a500962cb699cff60ce03670a914d77c4349778",
									"notice": {
										"id": "2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352",
										"url": "/licenses/source-notices/2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt",
										"licenseFilename": "LICENSE-2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/background-color.vue",
											"sourceSha256": "c3a44604fb3722efd71c3c7593c2e601a02be7d289f921d1876b1e483a0e6227",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-background-color/js/Demo.vue",
									"sha256": "5424893e52cbeb79fe6a00417ea86cf2678fea7faff3fd3c5de9451d5a90f27b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt\n-->\n<template>\n\t<AsamPagination background layout=\"prev, pager, next\" :total=\"1000\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationCapBackgroundColorDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "23ca8b3d056baad1d91c4d0e08a44b4413134b95f472b271d8dc85ef13f10b46",
									"notice": {
										"id": "2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352",
										"url": "/licenses/source-notices/2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt",
										"licenseFilename": "LICENSE-2a6a3e92e962102f5bfca38aaf60aa5cfc2bdb9d959baec04d825bcd00d1b352.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/background-color.vue",
											"sourceSha256": "c3a44604fb3722efd71c3c7593c2e601a02be7d289f921d1876b1e483a0e6227",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-small-pagination",
					"title": "小型分页",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-small-pagination/ts/Demo.vue",
									"sha256": "554647fd82f027117c2cdfb506d5ec4d8f5d561b1202eeeb74889f3edc159605",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt\n-->\n<template>\n\t<AsamPagination size=\"small\" layout=\"prev, pager, next\" :total=\"50\" />\n\t<AsamPagination size=\"small\" background layout=\"prev, pager, next\" :total=\"50\" class=\"mt-4\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationCapSmallPaginationDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "6952c872c6c9d66739fd8408f1e570ac6a5362b85de8817d6ad6dfafc86becb0",
									"notice": {
										"id": "d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac",
										"url": "/licenses/source-notices/d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt",
										"licenseFilename": "LICENSE-d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/small-pagination.vue",
											"sourceSha256": "093c634cdbc20ee6a4f89c7a1f28bc6b76512b5cd9f5a66a5b9f0890f84cb51a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-small-pagination/js/Demo.vue",
									"sha256": "5b67452bc3e187a4e60335e190acac498660bed2285dbaad489116ce8f12caed",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt\n-->\n<template>\n\t<AsamPagination size=\"small\" layout=\"prev, pager, next\" :total=\"50\" />\n\t<AsamPagination size=\"small\" background layout=\"prev, pager, next\" :total=\"50\" class=\"mt-4\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationCapSmallPaginationDemo' });\nimport { AsamPagination } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "13fb76af50c647f61d2d6ca01649b7719e663f9f50b2ab37dac9428f99928fb9",
									"notice": {
										"id": "d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac",
										"url": "/licenses/source-notices/d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt",
										"licenseFilename": "LICENSE-d5200787a42b0b1b22fe50a9b4ea51d2bd9f9492e1d720871902a9cdfa9b53ac.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/small-pagination.vue",
											"sourceSha256": "093c634cdbc20ee6a4f89c7a1f28bc6b76512b5cd9f5a66a5b9f0890f84cb51a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-auto-hide-pagination",
					"title": "当只有一页时隐藏分页",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-auto-hide-pagination/ts/Demo.vue",
									"sha256": "2c90e73f26bb9ed8d4690ed06db15e1a2cdd2c323cd36782336144d988cdc3ef",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt\n-->\n<template>\n\t<div>\n\t\t<AsamSwitch\n\t\t\t:model-value=\"value\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(nextValue) => {\n\t\t\t\t\tif (typeof nextValue === 'boolean') value = nextValue;\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t\t<hr class=\"my-4\" />\n\t\t<AsamPagination :hide-on-single-page=\"value\" :total=\"5\" layout=\"prev, pager, next\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationCapAutoHidePaginationDemo' });\nimport { AsamSwitch, AsamPagination } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst value = ref(false);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.my-4 {\n\tmargin-top: 1rem;\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "6edfb60ffecdfa8d5b35772b0a9da9a95801f9963fbc8802b673acf6825cde28",
									"notice": {
										"id": "bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3",
										"url": "/licenses/source-notices/bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt",
										"licenseFilename": "LICENSE-bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/auto-hide-pagination.vue",
											"sourceSha256": "6f48779da560b8102d9ffdbef93662f58372a7b1253f611b7178ee6cb71a2317",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-auto-hide-pagination/js/Demo.vue",
									"sha256": "43c2128d56ca9613df1ea1f99f82d4ec74e3e637f27f26a26c108f81c9be13b8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt\n-->\n<template>\n\t<div>\n\t\t<AsamSwitch\n\t\t\t:model-value=\"value\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(nextValue) => {\n\t\t\t\t\tif (typeof nextValue === 'boolean') value = nextValue;\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t\t<hr class=\"my-4\" />\n\t\t<AsamPagination :hide-on-single-page=\"value\" :total=\"5\" layout=\"prev, pager, next\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationCapAutoHidePaginationDemo' });\nimport { AsamSwitch, AsamPagination } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst value = ref(false);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.my-4 {\n\tmargin-top: 1rem;\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "89fd38467bfb57b7e833a1712665eb3e60b0c442c5b06a7afb272cc6d4b3e08b",
									"notice": {
										"id": "bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3",
										"url": "/licenses/source-notices/bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt",
										"licenseFilename": "LICENSE-bae93ed89f40e91b0b424864572123f71134df7cb114a3c0e33ea6610e54b4e3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/auto-hide-pagination.vue",
											"sourceSha256": "6f48779da560b8102d9ffdbef93662f58372a7b1253f611b7178ee6cb71a2317",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-more-elements",
					"title": "附加功能",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-more-elements/ts/Demo.vue",
									"sha256": "49405d8a4f83bc3b685b0c890edec74104d3d0461a49dd4cf469733487c67e19",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt\n-->\n<template>\n\t<div class=\"flex items-center mb-4\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\tclass=\"mr-4\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tvalue === 'small' ||\n\t\t\t\t\t\tvalue === 'default' ||\n\t\t\t\t\t\tvalue === 'big' ||\n\t\t\t\t\t\tvalue === 'large'\n\t\t\t\t\t)\n\t\t\t\t\t\tsize = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamRadioButton value=\"default\">default</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"large\">large</AsamRadioButton>\n\n\t\t\t<AsamRadioButton value=\"small\">small</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<div>\n\t\t\t背景：\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"background\"\n\t\t\t\tclass=\"ml-2\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') background = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"ml-4\">\n\t\t\t禁用状态：\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"disabled\"\n\t\t\t\tclass=\"ml-2\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') disabled = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n\n\t<hr class=\"my-4\" />\n\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">项目总数</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage1\"\n\t\t\t:page-size=\"100\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"total, prev, pager, next\"\n\t\t\t:total=\"1000\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">调整每页条数</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage2\"\n\t\t\tv-model:page-size=\"pageSize2\"\n\t\t\t:page-sizes=\"[100, 200, 300, 400]\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"sizes, prev, pager, next\"\n\t\t\t:total=\"1000\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">跳转到</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage3\"\n\t\t\tv-model:page-size=\"pageSize3\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"prev, pager, next, jumper\"\n\t\t\t:total=\"1000\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">组合效果</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage4\"\n\t\t\tv-model:page-size=\"pageSize4\"\n\t\t\t:page-sizes=\"[100, 200, 300, 400]\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"total, sizes, prev, pager, next, jumper\"\n\t\t\t:total=\"400\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationCapMoreElementsDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamSwitch, AsamPagination } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamControlSize } from '@asam-ui/ui';\n\nconst currentPage1 = ref(5);\nconst currentPage2 = ref(5);\nconst currentPage3 = ref(5);\nconst currentPage4 = ref(4);\nconst pageSize2 = ref(100);\nconst pageSize3 = ref(100);\nconst pageSize4 = ref(100);\nconst size = ref<AsamControlSize>('default');\nconst background = ref(false);\nconst disabled = ref(false);\n\nconst handleSizeChange = (val: number) => {\n\tconsole.log(`${val} items per page`);\n};\nconst handleCurrentChange = (val: number) => {\n\tconsole.log(`current page: ${val}`);\n};\n</script>\n\n<style scoped>\n.demo-pagination-block + .demo-pagination-block {\n\tmargin-top: 10px;\n}\n\n.demo-pagination-block .demonstration {\n\tmargin-bottom: 16px;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n\n.mr-4 {\n\tmargin-right: 1rem;\n}\n\n.ml-2 {\n\tmargin-left: 0.5rem;\n}\n\n.ml-4 {\n\tmargin-left: 1rem;\n}\n\n.my-4 {\n\tmargin-top: 1rem;\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "c15d5a95863b53fc830f56ab453f4f937a626b2a4bbda275c31cd420766c0bef",
									"notice": {
										"id": "3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f",
										"url": "/licenses/source-notices/3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt",
										"licenseFilename": "LICENSE-3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/more-elements.vue",
											"sourceSha256": "f41f80c956e690ba9b9c702904a97c62297c7ebcf5ff807c4efb9e0ed68a6ee8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/cap-more-elements/js/Demo.vue",
									"sha256": "8398e07c657d28a79eb47982d743227e780670093c9a2df44b9a33da03ff7b3b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt\n-->\n<template>\n\t<div class=\"flex items-center mb-4\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\tclass=\"mr-4\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tvalue === 'small' ||\n\t\t\t\t\t\tvalue === 'default' ||\n\t\t\t\t\t\tvalue === 'big' ||\n\t\t\t\t\t\tvalue === 'large'\n\t\t\t\t\t)\n\t\t\t\t\t\tsize = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamRadioButton value=\"default\">default</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"large\">large</AsamRadioButton>\n\n\t\t\t<AsamRadioButton value=\"small\">small</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<div>\n\t\t\t背景：\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"background\"\n\t\t\t\tclass=\"ml-2\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') background = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"ml-4\">\n\t\t\t禁用状态：\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"disabled\"\n\t\t\t\tclass=\"ml-2\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') disabled = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n\n\t<hr class=\"my-4\" />\n\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">项目总数</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage1\"\n\t\t\t:page-size=\"100\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"total, prev, pager, next\"\n\t\t\t:total=\"1000\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">调整每页条数</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage2\"\n\t\t\tv-model:page-size=\"pageSize2\"\n\t\t\t:page-sizes=\"[100, 200, 300, 400]\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"sizes, prev, pager, next\"\n\t\t\t:total=\"1000\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">跳转到</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage3\"\n\t\t\tv-model:page-size=\"pageSize3\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"prev, pager, next, jumper\"\n\t\t\t:total=\"1000\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n\t<div class=\"demo-pagination-block\">\n\t\t<div class=\"demonstration\">组合效果</div>\n\t\t<AsamPagination\n\t\t\tv-model:current-page=\"currentPage4\"\n\t\t\tv-model:page-size=\"pageSize4\"\n\t\t\t:page-sizes=\"[100, 200, 300, 400]\"\n\t\t\t:size=\"size\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:background=\"background\"\n\t\t\tlayout=\"total, sizes, prev, pager, next, jumper\"\n\t\t\t:total=\"400\"\n\t\t\t@size-change=\"handleSizeChange\"\n\t\t\t@current-change=\"handleCurrentChange\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationCapMoreElementsDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamSwitch, AsamPagination } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst currentPage1 = ref(5);\nconst currentPage2 = ref(5);\nconst currentPage3 = ref(5);\nconst currentPage4 = ref(4);\nconst pageSize2 = ref(100);\nconst pageSize3 = ref(100);\nconst pageSize4 = ref(100);\nconst size = ref('default');\nconst background = ref(false);\nconst disabled = ref(false);\nconst handleSizeChange = (val) => {\n\tconsole.log(`${val} items per page`);\n};\nconst handleCurrentChange = (val) => {\n\tconsole.log(`current page: ${val}`);\n};\n</script>\n\n<style scoped>\n.demo-pagination-block + .demo-pagination-block {\n\tmargin-top: 10px;\n}\n\n.demo-pagination-block .demonstration {\n\tmargin-bottom: 16px;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n\n.mr-4 {\n\tmargin-right: 1rem;\n}\n\n.ml-2 {\n\tmargin-left: 0.5rem;\n}\n\n.ml-4 {\n\tmargin-left: 1rem;\n}\n\n.my-4 {\n\tmargin-top: 1rem;\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "249d73dae9421c5e2df90cceba6fd63e3f1b2a829bb18a4d806cd78c595dcb52",
									"notice": {
										"id": "3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f",
										"url": "/licenses/source-notices/3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt",
										"licenseFilename": "LICENSE-3fb47e531ea6e43f35a92c319144a5320650eaa135be0755e13e149be21acd4f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/pagination/more-elements.vue",
											"sourceSha256": "f41f80c956e690ba9b9c702904a97c62297c7ebcf5ff807c4efb9e0ed68a6ee8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/popup-container/ts/Demo.vue",
									"sha256": "0e30bd2fa2c89bf557ffa71f25d05cde6d44881162da37a9bdd4cbbcc4e7d083",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage demo-spacing-1\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamPagination\n\t\t\tv-bind=\"{\n\t\t\t\ttotal: 95,\n\t\t\t\tpageSizes: [10, 20, 50],\n\t\t\t\tlayout: 'total, sizes, prev, pager, next',\n\t\t\t\tsize\n\t\t\t}\"\n\t\t\tv-model:current-page=\"page\"\n\t\t\tv-model:page-size=\"pageSize\"\n\t\t\t:teleported=\"globalPopup\"\n\t\t/>\n\t\t<label>\n\t\t\t<span>密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<p class=\"example-paragraph\" role=\"status\">第 {{ page }} 页，每页 {{ pageSize }} 条</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPaginationBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst size = ref<AsamControlSize>('default');\nconst page = ref(1);\nconst pageSize = ref(10);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPagination/popup-container/js/Demo.vue",
									"sha256": "5bfe310e69a4afe10a39c330c9254519a8a982fb97f14f8324e22dcd8777dd40",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage demo-spacing-1\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamPagination\n\t\t\tv-bind=\"{\n\t\t\t\ttotal: 95,\n\t\t\t\tpageSizes: [10, 20, 50],\n\t\t\t\tlayout: 'total, sizes, prev, pager, next',\n\t\t\t\tsize\n\t\t\t}\"\n\t\t\tv-model:current-page=\"page\"\n\t\t\tv-model:page-size=\"pageSize\"\n\t\t\t:teleported=\"globalPopup\"\n\t\t/>\n\t\t<label>\n\t\t\t<span>密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<p class=\"example-paragraph\" role=\"status\">第 {{ page }} 页，每页 {{ pageSize }} 条</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPaginationBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamPagination } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('default');\nconst page = ref(1);\nconst pageSize = ref(10);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTable",
			"documentation": "/component-AsamTable.html",
			"demos": [
				{
					"id": "append-summary",
					"title": "追加内容与汇总行",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/append-summary/ts/Demo.vue",
									"sha256": "6a0174dabfa15cbc1cb791aab01296465ddc12b5b47175fdf179c2f8129e38b6",
									"source": "<template>\n\t<div>\n\t\t<p class=\"example-paragraph\">追加内容位于汇总行上方；固定高度时滚动到底部查看追加操作。</p>\n\t\t<label>\n\t\t\t<span>布局</span>\n\t\t\t<AsamSelect v-model=\"layout\">\n\t\t\t\t<AsamOption :label=\"'auto'\" :value=\"'auto'\">auto</AsamOption>\n\t\t\t\t<AsamOption :label=\"'fixed'\" :value=\"'fixed'\">fixed</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamCheckboxItem v-model=\"showSummary\">汇总</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"showAppend\">追加内容</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"empty\">空表</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"customSummary\">自定义 VNode 汇总</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"fixedHeight\">固定高度</AsamCheckboxItem>\n\t\t<AsamTable\n\t\t\t:data=\"visibleRows\"\n\t\t\t:table-layout=\"layout\"\n\t\t\t:show-summary=\"showSummary\"\n\t\t\t:summary-method=\"customSummary ? summaries : undefined\"\n\t\t\t:height=\"fixedHeight ? 260 : undefined\"\n\t\t\trow-key=\"id\"\n\t\t\tborder\n\t\t>\n\t\t\t<AsamTableColumn prop=\"name\" label=\"商品\" min-width=\"160\" />\n\t\t\t<AsamTableColumn prop=\"amount\" label=\"数量\" min-width=\"120\" />\n\t\t\t<template v-if=\"showAppend\" #append>\n\t\t\t\t<div class=\"append-actions\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"add\">追加一行</AsamButton>\n\t\t\t\t\t<span>已追加 {{ added }} 行</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #empty>暂无商品，可通过追加操作添加。</template>\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableAppendSummaryDemo' });\nimport { computed, h, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport type { AsamTableProps } from '@asam-ui/ui';\ninterface Product {\n\tid: number;\n\tname: string;\n\tamount: number;\n}\nconst layout = ref<'auto' | 'fixed'>('auto');\nconst showSummary = ref(true),\n\tshowAppend = ref(true),\n\tempty = ref(false);\nconst customSummary = ref(false),\n\tfixedHeight = ref(false),\n\tadded = ref(0);\nconst rows = ref<Product[]>([\n\t{ id: 1, name: '商品 A', amount: 2 },\n\t{ id: 2, name: '商品 B', amount: 3 }\n]);\nconst visibleRows = computed(() => (empty.value ? [] : rows.value));\nconst summaries: NonNullable<AsamTableProps<Product>['summaryMethod']> = ({ data }) => [\n\th('strong', '数量合计'),\n\tString(data.reduce((sum, row) => sum + row.amount, 0))\n];\nfunction add() {\n\tconst id = rows.value.length + 1;\n\trows.value.push({ id, name: `商品 ${id}`, amount: 1 });\n\tadded.value++;\n\tempty.value = false;\n}\n</script>\n\n<style scoped>\nlabel {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--asam-space-xs);\n\tmargin: var(--asam-space-sm);\n}\n\n.append-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/append-summary/js/Demo.vue",
									"sha256": "240767c97b3fb3d3723068490d05afee14b75fada153706a545f3877dbae3cb0",
									"source": "<template>\n\t<div>\n\t\t<p class=\"example-paragraph\">追加内容位于汇总行上方；固定高度时滚动到底部查看追加操作。</p>\n\t\t<label>\n\t\t\t<span>布局</span>\n\t\t\t<AsamSelect v-model=\"layout\">\n\t\t\t\t<AsamOption :label=\"'auto'\" :value=\"'auto'\">auto</AsamOption>\n\t\t\t\t<AsamOption :label=\"'fixed'\" :value=\"'fixed'\">fixed</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamCheckboxItem v-model=\"showSummary\">汇总</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"showAppend\">追加内容</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"empty\">空表</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"customSummary\">自定义 VNode 汇总</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"fixedHeight\">固定高度</AsamCheckboxItem>\n\t\t<AsamTable\n\t\t\t:data=\"visibleRows\"\n\t\t\t:table-layout=\"layout\"\n\t\t\t:show-summary=\"showSummary\"\n\t\t\t:summary-method=\"customSummary ? summaries : undefined\"\n\t\t\t:height=\"fixedHeight ? 260 : undefined\"\n\t\t\trow-key=\"id\"\n\t\t\tborder\n\t\t>\n\t\t\t<AsamTableColumn prop=\"name\" label=\"商品\" min-width=\"160\" />\n\t\t\t<AsamTableColumn prop=\"amount\" label=\"数量\" min-width=\"120\" />\n\t\t\t<template v-if=\"showAppend\" #append>\n\t\t\t\t<div class=\"append-actions\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"add\">追加一行</AsamButton>\n\t\t\t\t\t<span>已追加 {{ added }} 行</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #empty>暂无商品，可通过追加操作添加。</template>\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableAppendSummaryDemo' });\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport { computed, h, ref } from 'vue';\nconst layout = ref('auto');\nconst showSummary = ref(true),\n\tshowAppend = ref(true),\n\tempty = ref(false);\nconst customSummary = ref(false),\n\tfixedHeight = ref(false),\n\tadded = ref(0);\nconst rows = ref([\n\t{ id: 1, name: '商品 A', amount: 2 },\n\t{ id: 2, name: '商品 B', amount: 3 }\n]);\nconst visibleRows = computed(() => (empty.value ? [] : rows.value));\nconst summaries = ({ data }) => [\n\th('strong', '数量合计'),\n\tString(data.reduce((sum, row) => sum + row.amount, 0))\n];\nfunction add() {\n\tconst id = rows.value.length + 1;\n\trows.value.push({ id, name: `商品 ${id}`, amount: 1 });\n\tadded.value++;\n\tempty.value = false;\n}\n</script>\n\n<style scoped>\nlabel {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--asam-space-xs);\n\tmargin: var(--asam-space-sm);\n}\n\n.append-actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/basic/ts/Demo.vue",
									"sha256": "bf9fb1555d0f979863a70ea864dabeae795de3d9133d12bab5e60869469f626b",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<label>\n\t\t\t<span>控件密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换本地加载状态</AsamButton\n\t\t>\n\t\t<AsamTable\n\t\t\tv-bind=\"{ data: rows, rowKey: 'id', selectable: true, loading, size }\"\n\t\t\t@selection-change=\"selection = $event\"\n\t\t>\n\t\t\t<template #toolbar=\"{ selection: current }\">\n\t\t\t\t<span>已选 {{ current.length }} 项</span>\n\t\t\t</template>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" min-width=\"150\">\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span>{{ row.name }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn\n\t\t\t\tv-bind=\"{ prop: 'count', label: '数量', sortable: true, width: 100 }\"\n\t\t\t/>\n\t\t\t<template #empty>没有本地记录</template>\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" role=\"status\">选中键：{{ selection.map((row) => row.id).join(', ') }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\ninterface Row {\n\tid: number;\n\tname: string;\n\tcount: number;\n}\nconst rows: Row[] = [\n\t{ id: 1, name: '本地草稿', count: 3 },\n\t{ id: 2, name: '本地记录', count: 8 }\n];\nconst selection = ref<Row[]>([]);\nconst loading = ref(false);\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst size = ref<AsamControlSize>('default');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/basic/js/Demo.vue",
									"sha256": "2a2cb8c7459d002399965bb3a5f7746540b0861f54ac6aae8e449437b2c31775",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<label>\n\t\t\t<span>控件密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换本地加载状态</AsamButton\n\t\t>\n\t\t<AsamTable\n\t\t\tv-bind=\"{ data: rows, rowKey: 'id', selectable: true, loading, size }\"\n\t\t\t@selection-change=\"selection = $event\"\n\t\t>\n\t\t\t<template #toolbar=\"{ selection: current }\">\n\t\t\t\t<span>已选 {{ current.length }} 项</span>\n\t\t\t</template>\n\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" min-width=\"150\">\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span>{{ row.name }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn\n\t\t\t\tv-bind=\"{ prop: 'count', label: '数量', sortable: true, width: 100 }\"\n\t\t\t/>\n\t\t\t<template #empty>没有本地记录</template>\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" role=\"status\">选中键：{{ selection.map((row) => row.id).join(', ') }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst rows = [\n\t{ id: 1, name: '本地草稿', count: 3 },\n\t{ id: 2, name: '本地记录', count: 8 }\n];\nconst selection = ref([]);\nconst loading = ref(false);\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('default');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "tree-defaults",
					"title": "树后代与懒加载默认选择",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/tree-defaults/ts/Demo.vue",
									"sha256": "dd019ed3647057d738b0c011a6bcd45289847576fd664046185c4b25035818bd",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamCheckboxItem v-model=\"customChildren\">使用 nodes 子节点字段</AsamCheckboxItem>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"staticTable?.clearSelection()\"\n\t\t\t>清除树默认选择</AsamButton\n\t\t>\n\t\t<AsamTable\n\t\t\tref=\"staticTable\"\n\t\t\t:data=\"rows\"\n\t\t\trow-key=\"id\"\n\t\t\tselectable\n\t\t\tdefault-expand-all\n\t\t\t:default-selected-row-keys=\"[11]\"\n\t\t\t:tree-props=\"{ children: customChildren ? 'nodes' : 'children', checkStrictly: true }\"\n\t\t\t@selection-change=\"recordStatic\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"label\" label=\"静态树\" />\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" data-testid=\"tree-default-static\">静态选择 {{ staticSelection.join(',') }}</p>\n\t\t<AsamTable\n\t\t\t:data=\"lazyRows\"\n\t\t\trow-key=\"id\"\n\t\t\tselectable\n\t\t\tlazy\n\t\t\t:default-selected-row-keys=\"[21]\"\n\t\t\t:tree-props=\"{ children: 'children', hasChildren: 'hasChildren', checkStrictly: true }\"\n\t\t\t:load=\"load\"\n\t\t\t@selection-change=\"recordLazy\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"label\" label=\"懒加载树（展开后解析默认选择）\" />\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" data-testid=\"tree-default-lazy\">懒加载选择 {{ lazySelection.join(',') }}</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableTreeDefaultsDemo' });\nimport { computed, onBeforeUnmount, ref, shallowRef } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamTableExpose, AsamTableProps } from '@asam-ui/ui';\ninterface Row {\n\tid: number;\n\tlabel: string;\n\tchildren?: Row[];\n\tnodes?: Row[];\n\thasChildren?: boolean;\n}\nconst customChildren = ref(false);\nconst staticTable = shallowRef<AsamTableExpose<Row>>();\nconst staticSelection = ref<number[]>([]),\n\tlazySelection = ref<number[]>([]);\nconst rows = computed<Row[]>(() => [\n\t{\n\t\tid: 1,\n\t\tlabel: '父节点',\n\t\t[customChildren.value ? 'nodes' : 'children']: [\n\t\t\t{ id: 11, label: '默认选中子节点' },\n\t\t\t{ id: 12, label: '其他子节点' }\n\t\t]\n\t}\n]);\nconst lazyRows: Row[] = [{ id: 2, label: '待加载父节点', hasChildren: true }];\nconst timers = new Set<ReturnType<typeof setTimeout>>();\nlet disposed = false;\nfunction recordStatic(selection: Row[]): void {\n\tstaticSelection.value = selection.map((row) => row.id);\n}\nfunction recordLazy(selection: Row[]): void {\n\tlazySelection.value = selection.map((row) => row.id);\n}\nconst load: AsamTableProps<Row>['load'] = (_row, _node, resolve) => {\n\tconst timer = setTimeout(() => {\n\t\ttimers.delete(timer);\n\t\tif (!disposed) resolve([{ id: 21, label: '解析后默认选中子节点' }]);\n\t}, 150);\n\ttimers.add(timer);\n};\nonBeforeUnmount(() => {\n\tdisposed = true;\n\ttimers.forEach((timer) => clearTimeout(timer));\n\ttimers.clear();\n});\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/tree-defaults/js/Demo.vue",
									"sha256": "66df9918626ce1cbb8f5be90fa6ea83046a12e544f4648f06b9632328a7c0d68",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamCheckboxItem v-model=\"customChildren\">使用 nodes 子节点字段</AsamCheckboxItem>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"staticTable?.clearSelection()\"\n\t\t\t>清除树默认选择</AsamButton\n\t\t>\n\t\t<AsamTable\n\t\t\tref=\"staticTable\"\n\t\t\t:data=\"rows\"\n\t\t\trow-key=\"id\"\n\t\t\tselectable\n\t\t\tdefault-expand-all\n\t\t\t:default-selected-row-keys=\"[11]\"\n\t\t\t:tree-props=\"{ children: customChildren ? 'nodes' : 'children', checkStrictly: true }\"\n\t\t\t@selection-change=\"recordStatic\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"label\" label=\"静态树\" />\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" data-testid=\"tree-default-static\">静态选择 {{ staticSelection.join(',') }}</p>\n\t\t<AsamTable\n\t\t\t:data=\"lazyRows\"\n\t\t\trow-key=\"id\"\n\t\t\tselectable\n\t\t\tlazy\n\t\t\t:default-selected-row-keys=\"[21]\"\n\t\t\t:tree-props=\"{ children: 'children', hasChildren: 'hasChildren', checkStrictly: true }\"\n\t\t\t:load=\"load\"\n\t\t\t@selection-change=\"recordLazy\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"label\" label=\"懒加载树（展开后解析默认选择）\" />\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" data-testid=\"tree-default-lazy\">懒加载选择 {{ lazySelection.join(',') }}</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableTreeDefaultsDemo' });\nimport { computed, onBeforeUnmount, ref, shallowRef } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst customChildren = ref(false);\nconst staticTable = shallowRef();\nconst staticSelection = ref([]),\n\tlazySelection = ref([]);\nconst rows = computed(() => [\n\t{\n\t\tid: 1,\n\t\tlabel: '父节点',\n\t\t[customChildren.value ? 'nodes' : 'children']: [\n\t\t\t{ id: 11, label: '默认选中子节点' },\n\t\t\t{ id: 12, label: '其他子节点' }\n\t\t]\n\t}\n]);\nconst lazyRows = [{ id: 2, label: '待加载父节点', hasChildren: true }];\nconst timers = new Set();\nlet disposed = false;\nfunction recordStatic(selection) {\n\tstaticSelection.value = selection.map((row) => row.id);\n}\nfunction recordLazy(selection) {\n\tlazySelection.value = selection.map((row) => row.id);\n}\nconst load = (_row, _node, resolve) => {\n\tconst timer = setTimeout(() => {\n\t\ttimers.delete(timer);\n\t\tif (!disposed) resolve([{ id: 21, label: '解析后默认选中子节点' }]);\n\t}, 150);\n\ttimers.add(timer);\n};\nonBeforeUnmount(() => {\n\tdisposed = true;\n\ttimers.forEach((timer) => clearTimeout(timer));\n\ttimers.clear();\n});\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-basic",
					"title": "基础表格",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-basic/ts/Demo.vue",
									"sha256": "1178d2a93e2218e1c7ad5ccb5248de6f21fcc4c35c6587cf0c81719fbeb4651e",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageBasicDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-basic/js/Demo.vue",
									"sha256": "7e9f1d44a710eedc4a4b74e016f7d3dafc366d1b2bcb9355dcf47a9462017140",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageBasicDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-check-strictly",
					"title": "可选择的树形数据",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-check-strictly/ts/Demo.vue",
									"sha256": "18534e97e71ffe9891f295db9ea514b0c1924d739f61d89502415ab3f8fba8db",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup v-model=\"treeProps.checkStrictly\" class=\"mb-2\">\n\t\t\t<AsamRadioButton :value=\"true\" label=\"true\" />\n\t\t\t<AsamRadioButton :value=\"false\" label=\"false\" />\n\t\t</AsamRadioGroup>\n\t\t<AsamTable :data=\"tableData\" :tree-props=\"treeProps\" row-key=\"id\" default-expand-all>\n\t\t\t<AsamTableColumn type=\"selection\" width=\"55\" :selectable=\"selectable\" />\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageCheckStrictlyDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nimport { reactive } from 'vue';\n\ninterface User {\n\tid: number;\n\tdate: string;\n\tname: string;\n\taddress: string;\n\thasChildren?: boolean;\n\tchildren?: User[];\n}\n\nconst treeProps = reactive({\n\tcheckStrictly: false\n});\n\nconst selectable = (row: User) => ![1, 31].includes(row.id);\n\nconst tableData: User[] = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-02',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-04',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-01',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 31,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 32,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 33,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-03',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-check-strictly/js/Demo.vue",
									"sha256": "a81241611e7c022f65770be6bb937a57c501335867e6741db785778b51d1acf4",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup v-model=\"treeProps.checkStrictly\" class=\"mb-2\">\n\t\t\t<AsamRadioButton :value=\"true\" label=\"true\" />\n\t\t\t<AsamRadioButton :value=\"false\" label=\"false\" />\n\t\t</AsamRadioGroup>\n\t\t<AsamTable :data=\"tableData\" :tree-props=\"treeProps\" row-key=\"id\" default-expand-all>\n\t\t\t<AsamTableColumn type=\"selection\" width=\"55\" :selectable=\"selectable\" />\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageCheckStrictlyDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport { reactive } from 'vue';\nconst treeProps = reactive({\n\tcheckStrictly: false\n});\nconst selectable = (row) => ![1, 31].includes(row.id);\nconst tableData = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-02',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-04',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-01',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 31,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 32,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 33,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-03',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-custom-column",
					"title": "自定义列模板",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-custom-column/ts/Demo.vue",
									"sha256": "fb0de5e79b79203f827f13002c396daeee2820fa23058ff55eb6ad767e406b3b",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<!-- @vue-generic {User} -->\n\t\t<AsamTableColumn label=\"日期\" width=\"180\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<div style=\"display: flex; align-items: center\">\n\t\t\t\t\t<AsamIcon><timer /></AsamIcon>\n\t\t\t\t\t<span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t\t<!-- @vue-generic {User} -->\n\t\t<AsamTableColumn label=\"姓名\" width=\"180\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<AsamPopover effect=\"light\" trigger=\"hover\" placement=\"top\" width=\"auto\">\n\t\t\t\t\t<template #default>\n\t\t\t\t\t\t<div>姓名： {{ scope.row.name }}</div>\n\t\t\t\t\t\t<div>地址： {{ scope.row.address }}</div>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #reference>\n\t\t\t\t\t\t<AsamTag>{{ scope.row.name }}</AsamTag>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamPopover>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t\t<!-- @vue-generic {User} -->\n\t\t<AsamTableColumn label=\"操作\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t@click=\"handleEdit(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t编辑\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t type=\"default\"\n\t\t\t\t\t@click=\"handleDelete(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t删除\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageCustomColumnDemo' });\nimport {\n\tAsamTable,\n\tAsamTableColumn,\n\tAsamIcon,\n\tAsamPopover,\n\tAsamTag,\n\tAsamButton\n} from '@asam-ui/ui';\n\nimport { Timer } from '@asam-ui/icons-vue';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst handleEdit = (index: number, row: User) => {\n\tconsole.log(index, row);\n};\nconst handleDelete = (index: number, row: User) => {\n\tconsole.log(index, row);\n};\n\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-custom-column/js/Demo.vue",
									"sha256": "13896482f157343912f444edad805e7dbc0b50efdfd89b77da362298d62eacf3",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn label=\"日期\" width=\"180\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<div style=\"display: flex; align-items: center\">\n\t\t\t\t\t<AsamIcon><timer /></AsamIcon>\n\t\t\t\t\t<span style=\"margin-left: 10px\">{{ scope.row.date }}</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\n\t\t<AsamTableColumn label=\"姓名\" width=\"180\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<AsamPopover effect=\"light\" trigger=\"hover\" placement=\"top\" width=\"auto\">\n\t\t\t\t\t<template #default>\n\t\t\t\t\t\t<div>姓名： {{ scope.row.name }}</div>\n\t\t\t\t\t\t<div>地址： {{ scope.row.address }}</div>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #reference>\n\t\t\t\t\t\t<AsamTag>{{ scope.row.name }}</AsamTag>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamPopover>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\n\t\t<AsamTableColumn label=\"操作\">\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t@click=\"handleEdit(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t编辑\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t type=\"default\"\n\t\t\t\t\t@click=\"handleDelete(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t删除\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageCustomColumnDemo' });\nimport {\n\tAsamTable,\n\tAsamTableColumn,\n\tAsamIcon,\n\tAsamPopover,\n\tAsamTag,\n\tAsamButton\n} from '@asam-ui/ui';\nimport { Timer } from '@asam-ui/icons-vue';\nconst handleEdit = (index, row) => {\n\tconsole.log(index, row);\n};\nconst handleDelete = (index, row) => {\n\tconsole.log(index, row);\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-custom-header",
					"title": "自定义表头",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-custom-header/ts/Demo.vue",
									"sha256": "37aa4c1a7b3d81b86dab50a80e34207dd1dddb9cd78126e877eca42d57229645",
									"source": "<template>\n\t<AsamTable :data=\"filterTableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn label=\"日期\" prop=\"date\" />\n\t\t<AsamTableColumn label=\"姓名\" prop=\"name\" />\n\t\t<!-- @vue-generic {User} -->\n\t\t<AsamTableColumn align=\"right\">\n\t\t\t<template #header>\n\t\t\t\t<AsamInput v-model=\"search\" size=\"small\" placeholder=\"输入关键字搜索\" />\n\t\t\t</template>\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t@click=\"handleEdit(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t编辑\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t type=\"default\"\n\t\t\t\t\t@click=\"handleDelete(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t删除\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageCustomHeaderDemo' });\nimport { AsamTable, AsamTableColumn, AsamInput, AsamButton } from '@asam-ui/ui';\n\nimport { computed, ref } from 'vue';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst search = ref('');\nconst filterTableData = computed(() =>\n\ttableData.filter(\n\t\t(data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())\n\t)\n);\nconst handleEdit = (index: number, row: User) => {\n\tconsole.log(index, row);\n};\nconst handleDelete = (index: number, row: User) => {\n\tconsole.log(index, row);\n};\n\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '摩根',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '杰西',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-custom-header/js/Demo.vue",
									"sha256": "6b23bb923ea575f5630464128537f852a978cb3ed62e3e8a31593e8c5d5fbfbb",
									"source": "<template>\n\t<AsamTable :data=\"filterTableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn label=\"日期\" prop=\"date\" />\n\t\t<AsamTableColumn label=\"姓名\" prop=\"name\" />\n\n\t\t<AsamTableColumn align=\"right\">\n\t\t\t<template #header>\n\t\t\t\t<AsamInput v-model=\"search\" size=\"small\" placeholder=\"输入关键字搜索\" />\n\t\t\t</template>\n\t\t\t<template #default=\"scope\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t@click=\"handleEdit(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t编辑\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t type=\"default\"\n\t\t\t\t\t@click=\"handleDelete(scope.$index, scope.row)\"\n\t\t\t\t>\n\t\t\t\t\t删除\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageCustomHeaderDemo' });\nimport { AsamTable, AsamTableColumn, AsamInput, AsamButton } from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nconst search = ref('');\nconst filterTableData = computed(() =>\n\ttableData.filter(\n\t\t(data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())\n\t)\n);\nconst handleEdit = (index, row) => {\n\tconsole.log(index, row);\n};\nconst handleDelete = (index, row) => {\n\tconsole.log(index, row);\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '摩根',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '杰西',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-custom-index",
					"title": "自定义索引",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-custom-index/ts/Demo.vue",
									"sha256": "5d16a7cf83fe8a36ece74f4ea34f37e9b763712c98496cd93d898d353d3a9531",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn type=\"index\" :index=\"indexMethod\" />\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageCustomIndexDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst indexMethod = (index: number) => {\n\treturn index * 2;\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-custom-index/js/Demo.vue",
									"sha256": "51305a88b6b04035fb2876a29162c0126ef3799709e9ee8941ec8ae50d9e2084",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn type=\"index\" :index=\"indexMethod\" />\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageCustomIndexDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst indexMethod = (index) => {\n\treturn index * 2;\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-expandable-row",
					"title": "展开行",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-expandable-row/ts/Demo.vue",
									"sha256": "d1d498615972a24e2a4eaf6eade42454af201da8adc13b52e0338b83195b3e3a",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t切换父级边框： <AsamSwitch v-model=\"parentBorder\" /> 切换子级边框：\n\t\t<AsamSwitch v-model=\"childBorder\" /> 保留展开状态：\n\t\t<AsamSwitch v-model=\"preserveExpanded\" />\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\t:border=\"parentBorder\"\n\t\t\t:preserve-expanded-content=\"preserveExpanded\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<!-- @vue-generic {typeof tableData[number]} -->\n\t\t\t<AsamTableColumn type=\"expand\">\n\t\t\t\t<template #default=\"props\">\n\t\t\t\t\t<div m=\"4\">\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">状态： {{ props.row.state }}</p>\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">城市： {{ props.row.city }}</p>\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">地址： {{ props.row.address }}</p>\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">邮编： {{ props.row.zip }}</p>\n\t\t\t\t\t\t<h3>家庭</h3>\n\t\t\t\t\t\t<AsamTable :data=\"props.row.family\" :border=\"childBorder\">\n\t\t\t\t\t\t\t<AsamTableColumn label=\"姓名\" prop=\"name\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"状态\" prop=\"state\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"城市\" prop=\"city\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"地址\" prop=\"address\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"邮编\" prop=\"zip\" />\n\t\t\t\t\t\t</AsamTable>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn label=\"日期\" prop=\"date\" />\n\t\t\t<AsamTableColumn label=\"姓名\" prop=\"name\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageExpandableRowDemo' });\nimport { AsamSwitch, AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst parentBorder = ref(false);\nconst childBorder = ref(false);\nconst preserveExpanded = ref(false);\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-expandable-row/js/Demo.vue",
									"sha256": "9c9e5bce537b608acd3503ef2aeb7c47e9fb21ad20ddc4bc1638d7f09ed74770",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t切换父级边框： <AsamSwitch v-model=\"parentBorder\" /> 切换子级边框：\n\t\t<AsamSwitch v-model=\"childBorder\" /> 保留展开状态：\n\t\t<AsamSwitch v-model=\"preserveExpanded\" />\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\t:border=\"parentBorder\"\n\t\t\t:preserve-expanded-content=\"preserveExpanded\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamTableColumn type=\"expand\">\n\t\t\t\t<template #default=\"props\">\n\t\t\t\t\t<div m=\"4\">\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">状态： {{ props.row.state }}</p>\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">城市： {{ props.row.city }}</p>\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">地址： {{ props.row.address }}</p>\n\t\t\t\t\t\t<p class=\"example-paragraph\" m=\"t-0 b-2\">邮编： {{ props.row.zip }}</p>\n\t\t\t\t\t\t<h3>家庭</h3>\n\t\t\t\t\t\t<AsamTable :data=\"props.row.family\" :border=\"childBorder\">\n\t\t\t\t\t\t\t<AsamTableColumn label=\"姓名\" prop=\"name\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"状态\" prop=\"state\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"城市\" prop=\"city\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"地址\" prop=\"address\" />\n\t\t\t\t\t\t\t<AsamTableColumn label=\"邮编\" prop=\"zip\" />\n\t\t\t\t\t\t</AsamTable>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn label=\"日期\" prop=\"date\" />\n\t\t\t<AsamTableColumn label=\"姓名\" prop=\"name\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageExpandableRowDemo' });\nimport { AsamSwitch, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst parentBorder = ref(false);\nconst childBorder = ref(false);\nconst preserveExpanded = ref(false);\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: 'San Francisco',\n\t\taddress: '3650 21st St, San Francisco',\n\t\tzip: 'CA 94114',\n\t\tfamily: [\n\t\t\t{\n\t\t\t\tname: 'Jerry',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Spike',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'Tyke',\n\t\t\t\tstate: '加利福尼亚州',\n\t\t\t\tcity: 'San Francisco',\n\t\t\t\taddress: '3650 21st St, San Francisco',\n\t\t\t\tzip: 'CA 94114'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-filter",
					"title": "筛选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-filter/ts/Demo.vue",
									"sha256": "8ff34ee1b661a9103f2506b169b2d844c5564627a47eebb80bff5dc09390029d",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" @click=\"resetDateFilter\">重置日期筛选</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"clearFilter\">重置全部筛选条件</AsamButton>\n\t\t<AsamTable ref=\"tableRef\" row-key=\"date\" :data=\"tableData\" style=\"width: 100%\">\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"date\"\n\t\t\t\tlabel=\"日期\"\n\t\t\t\tsortable\n\t\t\t\twidth=\"180\"\n\t\t\t\tcolumn-key=\"date\"\n\t\t\t\t:filters=\"[\n\t\t\t\t\t{ text: '2016-05-01', value: '2016-05-01' },\n\t\t\t\t\t{ text: '2016-05-02', value: '2016-05-02' },\n\t\t\t\t\t{ text: '2016-05-03', value: '2016-05-03' },\n\t\t\t\t\t{ text: '2016-05-04', value: '2016-05-04' }\n\t\t\t\t]\"\n\t\t\t\t:filter-method=\"filterHandler\"\n\t\t\t/>\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" :formatter=\"formatter\" />\n\n\t\t\t<!-- @vue-generic {User} -->\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"tag\"\n\t\t\t\tlabel=\"标签\"\n\t\t\t\twidth=\"100\"\n\t\t\t\t:filters=\"[\n\t\t\t\t\t{ text: '家', value: '家' },\n\t\t\t\t\t{ text: '办公室', value: '办公室' }\n\t\t\t\t]\"\n\t\t\t\t:filter-method=\"filterTag\"\n\t\t\t\tfilter-placement=\"bottom-end\"\n\t\t\t>\n\t\t\t\t<template #default=\"scope\">\n\t\t\t\t\t<AsamTag\n\t\t\t\t\t\t:type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n\t\t\t\t\t\tdisable-transitions\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ scope.row.tag }}\n\t\t\t\t\t</AsamTag>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageFilterDemo' });\nimport { AsamButton, AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTableColumnCtx, AsamTableExpose } from '@asam-ui/ui';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n\ttag: string;\n}\n\nconst tableRef = ref<AsamTableExpose<User>>();\n\nconst resetDateFilter = () => {\n\ttableRef.value!.clearFilter(['date']);\n};\nconst clearFilter = () => {\n\ttableRef.value!.clearFilter();\n};\nconst formatter = (row: User) => {\n\treturn row.address;\n};\nconst filterTag = (value: string, row: User) => {\n\treturn row.tag === value;\n};\nconst filterHandler = (value: string, row: User, column: AsamTableColumnCtx<User>) => {\n\tconst property = column['property'];\n\treturn property in row && Reflect.get(row, property) === value;\n};\n\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '办公室'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '办公室'\n\t}\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-filter/js/Demo.vue",
									"sha256": "b1c56d6f7354aa723819380c79deeeed4af72e43e5eb2e0d8ce70b3a69b00f37",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" @click=\"resetDateFilter\">重置日期筛选</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"clearFilter\">重置全部筛选条件</AsamButton>\n\t\t<AsamTable ref=\"tableRef\" row-key=\"date\" :data=\"tableData\" style=\"width: 100%\">\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"date\"\n\t\t\t\tlabel=\"日期\"\n\t\t\t\tsortable\n\t\t\t\twidth=\"180\"\n\t\t\t\tcolumn-key=\"date\"\n\t\t\t\t:filters=\"[\n\t\t\t\t\t{ text: '2016-05-01', value: '2016-05-01' },\n\t\t\t\t\t{ text: '2016-05-02', value: '2016-05-02' },\n\t\t\t\t\t{ text: '2016-05-03', value: '2016-05-03' },\n\t\t\t\t\t{ text: '2016-05-04', value: '2016-05-04' }\n\t\t\t\t]\"\n\t\t\t\t:filter-method=\"filterHandler\"\n\t\t\t/>\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" :formatter=\"formatter\" />\n\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"tag\"\n\t\t\t\tlabel=\"标签\"\n\t\t\t\twidth=\"100\"\n\t\t\t\t:filters=\"[\n\t\t\t\t\t{ text: '家', value: '家' },\n\t\t\t\t\t{ text: '办公室', value: '办公室' }\n\t\t\t\t]\"\n\t\t\t\t:filter-method=\"filterTag\"\n\t\t\t\tfilter-placement=\"bottom-end\"\n\t\t\t>\n\t\t\t\t<template #default=\"scope\">\n\t\t\t\t\t<AsamTag\n\t\t\t\t\t\t:type=\"scope.row.tag === '家' ? 'primary' : 'success'\"\n\t\t\t\t\t\tdisable-transitions\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ scope.row.tag }}\n\t\t\t\t\t</AsamTag>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageFilterDemo' });\nimport { AsamButton, AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst tableRef = ref();\nconst resetDateFilter = () => {\n\ttableRef.value.clearFilter(['date']);\n};\nconst clearFilter = () => {\n\ttableRef.value.clearFilter();\n};\nconst formatter = (row) => {\n\treturn row.address;\n};\nconst filterTag = (value, row) => {\n\treturn row.tag === value;\n};\nconst filterHandler = (value, row, column) => {\n\tconst property = column['property'];\n\treturn property in row && Reflect.get(row, property) === value;\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '办公室'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\ttag: '办公室'\n\t}\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-fixed-column",
					"title": "固定列",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-column/ts/Demo.vue",
									"sha256": "c5d5b8ed35637ead8ee7e2cd7d5639badb77764adefccd1b04d68f451b4abdac",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn fixed prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" width=\"600\" />\n\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" width=\"120\" />\n\t\t<AsamTableColumn fixed=\"right\" label=\"操作\" min-width=\"120\">\n\t\t\t<template #default>\n\t\t\t\t<AsamButton link type=\"default\" size=\"small\" @click=\"handleClick\">\n\t\t\t\t\t详情\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton link type=\"default\" size=\"small\">编辑</AsamButton>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageFixedColumnDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\n\nconst handleClick = () => {\n\tconsole.log('click');\n};\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-column/js/Demo.vue",
									"sha256": "4e5a164d62f0b218bf2076aaa5ca0a8f4f5b448872af990fc706e537b5c30195",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn fixed prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" width=\"600\" />\n\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" width=\"120\" />\n\t\t<AsamTableColumn fixed=\"right\" label=\"操作\" min-width=\"120\">\n\t\t\t<template #default>\n\t\t\t\t<AsamButton link type=\"default\" size=\"small\" @click=\"handleClick\">\n\t\t\t\t\t详情\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton link type=\"default\" size=\"small\">编辑</AsamButton>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageFixedColumnDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\nconst handleClick = () => {\n\tconsole.log('click');\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '家'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036',\n\t\ttag: '办公室'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-fixed-column-and-group-header",
					"title": "固定表头",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-column-and-group-header/ts/Demo.vue",
									"sha256": "c15c9c743a50e3840a5070de70d0ece874836e6007830bc0e75dafe3d00da545",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\" height=\"250\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" />\n\t\t<AsamTableColumn label=\"地址信息\" fixed=\"right\">\n\t\t\t<AsamTableColumn prop=\"state\" label=\"状态\" />\n\t\t\t<AsamTableColumn prop=\"city\" label=\"城市\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" min-width=\"200\" />\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageFixedColumnAndGroupHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-column-and-group-header/js/Demo.vue",
									"sha256": "8b004cf00aaff38c53e34f39b43f8b1d5153e943a8eebe644711dda4aefa3102",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\" height=\"250\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" />\n\t\t<AsamTableColumn label=\"地址信息\" fixed=\"right\">\n\t\t\t<AsamTableColumn prop=\"state\" label=\"状态\" />\n\t\t\t<AsamTableColumn prop=\"city\" label=\"城市\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" min-width=\"200\" />\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageFixedColumnAndGroupHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-fixed-column-and-header",
					"title": "固定列和表头",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-column-and-header/ts/Demo.vue",
									"sha256": "a69b7e33a8945aeb4747b5282fcf3b00a8a1e3881b3e6d152d395c41f42405d1",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\" height=\"250\">\n\t\t<AsamTableColumn fixed prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"320\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" width=\"600\" />\n\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageFixedColumnAndHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-column-and-header/js/Demo.vue",
									"sha256": "e5d7df1460ba52c6ddaaf8abd615513d8bb59f8624ec04891102ddb361d4ef90",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\" height=\"250\">\n\t\t<AsamTableColumn fixed prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"320\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" width=\"600\" />\n\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageFixedColumnAndHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-fixed-header",
					"title": "固定表头",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-header/ts/Demo.vue",
									"sha256": "ad37658fb408822b1f94d30c96f418cb5022130a1f241cacedc6d5072d04e1a6",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" height=\"250\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageFixedHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-header/js/Demo.vue",
									"sha256": "3069c11dfbb99159636aa8523fd987b5e934d52314310bd3a84b1c1606d7b141",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" height=\"250\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageFixedHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-fixed-header-with-fluid-header",
					"title": "流体高度",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-header-with-fluid-header/ts/Demo.vue",
									"sha256": "096ffb8afcea60303fb45d6bdf39144dd05cd0677271ac4b323ebaec6f17e9f0",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTable :data=\"tableData\" style=\"width: 100%\" max-height=\"250\">\n\t\t\t<AsamTableColumn fixed prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"120\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" width=\"600\" />\n\t\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" width=\"120\" />\n\t\t\t<!-- @vue-generic {(typeof tableData.value)[number]} -->\n\t\t\t<AsamTableColumn fixed=\"right\" label=\"操作\" min-width=\"120\">\n\t\t\t\t<template #default=\"scope\">\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t\tlink\n\t\t\t\t\t\ttype=\"default\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t@click.prevent=\"deleteRow(scope.$index)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t移除\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamTable>\n\t\t<AsamButton type=\"default\" class=\"mt-4\" style=\"width: 100%\" @click=\"onAddItem\">\n\t\t\t添加项目\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageFixedHeaderWithFluidHeaderDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst now = new Date();\n\nconst tableData = ref([\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n]);\n\nconst deleteRow = (index: number) => {\n\ttableData.value.splice(index, 1);\n};\n\nconst onAddItem = () => {\n\tnow.setDate(now.getDate() + 1);\n\ttableData.value.push({\n\t\tdate: now.toISOString().slice(0, 10),\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t});\n};\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-4 {\n\tmargin-top: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-fixed-header-with-fluid-header/js/Demo.vue",
									"sha256": "8350cf658f12f729cf8be4fffd20f89f32c1cd21b5403d36917bbe3a2a943074",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTable :data=\"tableData\" style=\"width: 100%\" max-height=\"250\">\n\t\t\t<AsamTableColumn fixed prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"120\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" width=\"600\" />\n\t\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" width=\"120\" />\n\n\t\t\t<AsamTableColumn fixed=\"right\" label=\"操作\" min-width=\"120\">\n\t\t\t\t<template #default=\"scope\">\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t\tlink\n\t\t\t\t\t\ttype=\"default\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t@click.prevent=\"deleteRow(scope.$index)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t移除\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamTable>\n\t\t<AsamButton type=\"default\" class=\"mt-4\" style=\"width: 100%\" @click=\"onAddItem\">\n\t\t\t添加项目\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageFixedHeaderWithFluidHeaderDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst now = new Date();\nconst tableData = ref([\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n]);\nconst deleteRow = (index) => {\n\ttableData.value.splice(index, 1);\n};\nconst onAddItem = () => {\n\tnow.setDate(now.getDate() + 1);\n\ttableData.value.push({\n\t\tdate: now.toISOString().slice(0, 10),\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t});\n};\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-4 {\n\tmargin-top: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-grouping-header",
					"title": "多级表头",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-grouping-header/ts/Demo.vue",
									"sha256": "e188728dec43c46896ed3e4550362cc89f1078631be0ab13a759ca1af63e383f",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t<AsamTableColumn label=\"配送信息\">\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t<AsamTableColumn label=\"地址信息\">\n\t\t\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"120\" />\n\t\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" width=\"120\" />\n\t\t\t</AsamTableColumn>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageGroupingHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-grouping-header/js/Demo.vue",
									"sha256": "b1b1e9a0cdf7449420c430a1483c4f5664fccc1e6e98d7f711854ae69e812bf9",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"150\" />\n\t\t<AsamTableColumn label=\"配送信息\">\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t<AsamTableColumn label=\"地址信息\">\n\t\t\t\t<AsamTableColumn prop=\"state\" label=\"状态\" width=\"120\" />\n\t\t\t\t<AsamTableColumn prop=\"city\" label=\"城市\" width=\"120\" />\n\t\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t\t\t<AsamTableColumn prop=\"zip\" label=\"邮编\" width=\"120\" />\n\t\t\t</AsamTableColumn>\n\t\t</AsamTableColumn>\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageGroupingHeaderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t},\n\t{\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\tstate: '加利福尼亚州',\n\t\tcity: '洛杉矶',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tzip: 'CA 90036'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-multi-select",
					"title": "多选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-multi-select/ts/Demo.vue",
									"sha256": "9bdb71e3505eb894f8d7b2842936f7facd721c8af94ca24648f9de878be1c1e4",
									"source": "<template>\n\t<AsamTable\n\t\tref=\"multipleTableRef\"\n\t\t:data=\"tableData\"\n\t\trow-key=\"id\"\n\t\tstyle=\"width: 100%\"\n\t\t@selection-change=\"handleSelectionChange\"\n\t>\n\t\t<AsamTableColumn type=\"selection\" :selectable=\"selectable\" width=\"55\" />\n\t\t<!-- @vue-generic {User} -->\n\t\t<AsamTableColumn label=\"日期\" width=\"120\">\n\t\t\t<template #default=\"scope\">{{ scope.row.date }}</template>\n\t\t</AsamTableColumn>\n\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t</AsamTable>\n\t<div style=\"margin-top: var(--asam-space-lg)\">\n\t\t<AsamButton type=\"default\" @click=\"toggleSelection([tableData[1], tableData[2]])\">\n\t\t\t切换第二、第三行的选中状态\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"toggleSelection([tableData[1], tableData[2]], false)\">\n\t\t\t按 selectable 切换选中状态\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"toggleSelection()\">清除选择</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageMultiSelectDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTableExpose } from '@asam-ui/ui';\n\ninterface User {\n\tid: number;\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst multipleTableRef = ref<AsamTableExpose<User>>();\nconst multipleSelection = ref<User[]>([]);\n\nconst selectable = (row: User) => ![1, 2].includes(row.id);\nconst toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {\n\tif (rows) {\n\t\trows.forEach((row) => {\n\t\t\tmultipleTableRef.value!.toggleRowSelection(row, undefined, ignoreSelectable);\n\t\t});\n\t} else {\n\t\tmultipleTableRef.value!.clearSelection();\n\t}\n};\nconst handleSelectionChange = (val: User[]) => {\n\tmultipleSelection.value = val;\n};\n\nconst tableData: User[] = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 5,\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 6,\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 7,\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-multi-select/js/Demo.vue",
									"sha256": "43e3b0af2e559d1cf48c7ca8ad59879237a459c952868173a1553f3d12b519b6",
									"source": "<template>\n\t<AsamTable\n\t\tref=\"multipleTableRef\"\n\t\t:data=\"tableData\"\n\t\trow-key=\"id\"\n\t\tstyle=\"width: 100%\"\n\t\t@selection-change=\"handleSelectionChange\"\n\t>\n\t\t<AsamTableColumn type=\"selection\" :selectable=\"selectable\" width=\"55\" />\n\n\t\t<AsamTableColumn label=\"日期\" width=\"120\">\n\t\t\t<template #default=\"scope\">{{ scope.row.date }}</template>\n\t\t</AsamTableColumn>\n\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t</AsamTable>\n\t<div style=\"margin-top: var(--asam-space-lg)\">\n\t\t<AsamButton type=\"default\" @click=\"toggleSelection([tableData[1], tableData[2]])\">\n\t\t\t切换第二、第三行的选中状态\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"toggleSelection([tableData[1], tableData[2]], false)\">\n\t\t\t按 selectable 切换选中状态\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"toggleSelection()\">清除选择</AsamButton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageMultiSelectDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst multipleTableRef = ref();\nconst multipleSelection = ref([]);\nconst selectable = (row) => ![1, 2].includes(row.id);\nconst toggleSelection = (rows, ignoreSelectable) => {\n\tif (rows) {\n\t\trows.forEach((row) => {\n\t\t\tmultipleTableRef.value.toggleRowSelection(row, undefined, ignoreSelectable);\n\t\t});\n\t} else {\n\t\tmultipleTableRef.value.clearSelection();\n\t}\n};\nconst handleSelectionChange = (val) => {\n\tmultipleSelection.value = val;\n};\nconst tableData = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 5,\n\t\tdate: '2016-05-08',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 6,\n\t\tdate: '2016-05-06',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 7,\n\t\tdate: '2016-05-07',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-rowspan-and-colspan",
					"title": "合并行或列",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-rowspan-and-colspan/ts/Demo.vue",
									"sha256": "670b69fe8c850769b787a6c245f34ed7104c7b843510c512133e4f59d20820fc",
									"source": "<template>\n\t<div class=\"demo-layout-1\">\n\t\t<AsamTable :data=\"tableData\" :span-method=\"arraySpanMethod\" border style=\"width: 100%\">\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" sortable label=\"金额 1\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" sortable label=\"金额 2\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" sortable label=\"金额 3\" />\n\t\t</AsamTable>\n\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\t:span-method=\"objectSpanMethod\"\n\t\t\tborder\n\t\t\tstyle=\"width: 100%; margin-top: var(--asam-space-lg)\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" label=\"金额 1\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" label=\"金额 2\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" label=\"金额 3\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageRowspanAndColspanDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nimport type { AsamTableColumnCtx } from '@asam-ui/ui';\n\ninterface User {\n\tid: string;\n\tname: string;\n\tamount1: string;\n\tamount2: string;\n\tamount3: number;\n}\n\ninterface SpanMethodProps {\n\trow: User;\n\tcolumn: AsamTableColumnCtx<User>;\n\trowIndex: number;\n\tcolumnIndex: number;\n}\n\nconst arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {\n\tif (rowIndex % 2 === 0) {\n\t\tif (columnIndex === 0) {\n\t\t\treturn [1, 2];\n\t\t} else if (columnIndex === 1) {\n\t\t\treturn [0, 0];\n\t\t}\n\t}\n};\n\nconst objectSpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {\n\tif (columnIndex === 0) {\n\t\tif (rowIndex % 2 === 0) {\n\t\t\treturn {\n\t\t\t\trowspan: 2,\n\t\t\t\tcolspan: 1\n\t\t\t};\n\t\t} else {\n\t\t\treturn {\n\t\t\t\trowspan: 0,\n\t\t\t\tcolspan: 0\n\t\t\t};\n\t\t}\n\t}\n};\n\nconst tableData: User[] = [\n\t{\n\t\tid: '12987122',\n\t\tname: '汤姆',\n\t\tamount1: '234',\n\t\tamount2: '3.2',\n\t\tamount3: 10\n\t},\n\t{\n\t\tid: '12987123',\n\t\tname: '汤姆',\n\t\tamount1: '165',\n\t\tamount2: '4.43',\n\t\tamount3: 12\n\t},\n\t{\n\t\tid: '12987124',\n\t\tname: '汤姆',\n\t\tamount1: '324',\n\t\tamount2: '1.9',\n\t\tamount3: 9\n\t},\n\t{\n\t\tid: '12987125',\n\t\tname: '汤姆',\n\t\tamount1: '621',\n\t\tamount2: '2.2',\n\t\tamount3: 17\n\t},\n\t{\n\t\tid: '12987126',\n\t\tname: '汤姆',\n\t\tamount1: '539',\n\t\tamount2: '4.1',\n\t\tamount3: 15\n\t}\n];\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-rowspan-and-colspan/js/Demo.vue",
									"sha256": "3d0859510a56d2a736963931277455520f7bad21c3c9678f1ba60ad9833850d7",
									"source": "<template>\n\t<div class=\"demo-layout-1\">\n\t\t<AsamTable :data=\"tableData\" :span-method=\"arraySpanMethod\" border style=\"width: 100%\">\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" sortable label=\"金额 1\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" sortable label=\"金额 2\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" sortable label=\"金额 3\" />\n\t\t</AsamTable>\n\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\t:span-method=\"objectSpanMethod\"\n\t\t\tborder\n\t\t\tstyle=\"width: 100%; margin-top: var(--asam-space-lg)\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" label=\"金额 1\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" label=\"金额 2\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" label=\"金额 3\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageRowspanAndColspanDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst arraySpanMethod = ({ rowIndex, columnIndex }) => {\n\tif (rowIndex % 2 === 0) {\n\t\tif (columnIndex === 0) {\n\t\t\treturn [1, 2];\n\t\t} else if (columnIndex === 1) {\n\t\t\treturn [0, 0];\n\t\t}\n\t}\n};\nconst objectSpanMethod = ({ rowIndex, columnIndex }) => {\n\tif (columnIndex === 0) {\n\t\tif (rowIndex % 2 === 0) {\n\t\t\treturn {\n\t\t\t\trowspan: 2,\n\t\t\t\tcolspan: 1\n\t\t\t};\n\t\t} else {\n\t\t\treturn {\n\t\t\t\trowspan: 0,\n\t\t\t\tcolspan: 0\n\t\t\t};\n\t\t}\n\t}\n};\nconst tableData = [\n\t{\n\t\tid: '12987122',\n\t\tname: '汤姆',\n\t\tamount1: '234',\n\t\tamount2: '3.2',\n\t\tamount3: 10\n\t},\n\t{\n\t\tid: '12987123',\n\t\tname: '汤姆',\n\t\tamount1: '165',\n\t\tamount2: '4.43',\n\t\tamount3: 12\n\t},\n\t{\n\t\tid: '12987124',\n\t\tname: '汤姆',\n\t\tamount1: '324',\n\t\tamount2: '1.9',\n\t\tamount3: 9\n\t},\n\t{\n\t\tid: '12987125',\n\t\tname: '汤姆',\n\t\tamount1: '621',\n\t\tamount2: '2.2',\n\t\tamount3: 17\n\t},\n\t{\n\t\tid: '12987126',\n\t\tname: '汤姆',\n\t\tamount1: '539',\n\t\tamount2: '4.1',\n\t\tamount3: 15\n\t}\n];\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-show-overflow-tooltip",
					"title": "显示溢出工具提示的表格",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-show-overflow-tooltip/ts/Demo.vue",
									"sha256": "2c1af1059053e3b367765def80b660ba78bdd0cd300b0a7326ac166f665c9886",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn type=\"selection\" width=\"55\" />\n\t\t<!-- @vue-generic {User} -->\n\t\t<AsamTableColumn label=\"日期\" width=\"120\">\n\t\t\t<template #default=\"scope\">{{ scope.row.date }}</template>\n\t\t</AsamTableColumn>\n\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn\n\t\t\tproperty=\"address\"\n\t\t\tlabel=\"使用 show-overflow-tooltip\"\n\t\t\twidth=\"240\"\n\t\t\tshow-overflow-tooltip\n\t\t/>\n\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageShowOverflowTooltipDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '艾琳娜·库茨纳',\n\t\taddress: '萨尔州南莉莉洛尔贝格路 86c 号'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '海伦·雅各比',\n\t\taddress: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '布兰登·德克特',\n\t\taddress: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '玛吉·史密斯',\n\t\taddress: '爱达荷州西里卡多温莎路 23618 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-show-overflow-tooltip/js/Demo.vue",
									"sha256": "0110c38025b69dac6e94c0aba857f31eb11b8e11bcba1ae016f371e7038cd860",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn type=\"selection\" width=\"55\" />\n\n\t\t<AsamTableColumn label=\"日期\" width=\"120\">\n\t\t\t<template #default=\"scope\">{{ scope.row.date }}</template>\n\t\t</AsamTableColumn>\n\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn\n\t\t\tproperty=\"address\"\n\t\t\tlabel=\"使用 show-overflow-tooltip\"\n\t\t\twidth=\"240\"\n\t\t\tshow-overflow-tooltip\n\t\t/>\n\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageShowOverflowTooltipDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '艾琳娜·库茨纳',\n\t\taddress: '萨尔州南莉莉洛尔贝格路 86c 号'\n\t},\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '海伦·雅各比',\n\t\taddress: '伊利诺伊州南弗兰克菲尔德 A 街 760 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '布兰登·德克特',\n\t\taddress: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '玛吉·史密斯',\n\t\taddress: '爱达荷州西里卡多温莎路 23618 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-single-select",
					"title": "单选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-single-select/ts/Demo.vue",
									"sha256": "53f941331256e572d65636c3bc944b09058e043003ca4f30106aea4a7b64a61a",
									"source": "<template>\n\t<AsamTable\n\t\tref=\"singleTableRef\"\n\t\t:data=\"tableData\"\n\t\thighlight-current-row\n\t\tstyle=\"width: 100%\"\n\t\t@current-change=\"handleCurrentChange\"\n\t>\n\t\t<AsamTableColumn type=\"index\" width=\"50\" />\n\t\t<AsamTableColumn property=\"date\" label=\"日期\" width=\"120\" />\n\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t</AsamTable>\n\t<div style=\"margin-top: var(--asam-space-lg)\">\n\t\t<AsamButton type=\"default\" @click=\"setCurrent(tableData[1])\">选择第二行</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"setCurrent()\">清除选择</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageSingleSelectDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTableExpose } from '@asam-ui/ui';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst currentRow = ref();\nconst singleTableRef = ref<AsamTableExpose<User>>();\n\nconst setCurrent = (row?: User) => {\n\tsingleTableRef.value!.setCurrentRow(row);\n};\nconst handleCurrentChange = (val: User | null) => {\n\tcurrentRow.value = val;\n};\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-single-select/js/Demo.vue",
									"sha256": "b4270f2e2be5c7def1a17b73acb5952e32785c85e16a32b5ee73e01e4401700c",
									"source": "<template>\n\t<AsamTable\n\t\tref=\"singleTableRef\"\n\t\t:data=\"tableData\"\n\t\thighlight-current-row\n\t\tstyle=\"width: 100%\"\n\t\t@current-change=\"handleCurrentChange\"\n\t>\n\t\t<AsamTableColumn type=\"index\" width=\"50\" />\n\t\t<AsamTableColumn property=\"date\" label=\"日期\" width=\"120\" />\n\t\t<AsamTableColumn property=\"name\" label=\"姓名\" width=\"120\" />\n\t\t<AsamTableColumn property=\"address\" label=\"地址\" />\n\t</AsamTable>\n\t<div style=\"margin-top: var(--asam-space-lg)\">\n\t\t<AsamButton type=\"default\" @click=\"setCurrent(tableData[1])\">选择第二行</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"setCurrent()\">清除选择</AsamButton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageSingleSelectDemo' });\nimport { AsamTable, AsamTableColumn, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst currentRow = ref();\nconst singleTableRef = ref();\nconst setCurrent = (row) => {\n\tsingleTableRef.value.setCurrentRow(row);\n};\nconst handleCurrentChange = (val) => {\n\tcurrentRow.value = val;\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-sort",
					"title": "排序",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-sort/ts/Demo.vue",
									"sha256": "90e13fe54ca8d8ea5fe28185fb0e75c2e0762d709b6dd49b7865ffef1183d199",
									"source": "<template>\n\t<AsamTable\n\t\t:data=\"tableData\"\n\t\t:default-sort=\"{ prop: 'date', order: 'descending' }\"\n\t\tstyle=\"width: 100%\"\n\t>\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" sortable width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" :formatter=\"formatter\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageSortDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst formatter = (row: User) => {\n\treturn row.address;\n};\n\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-sort/js/Demo.vue",
									"sha256": "34fe92ca288fec01c7adf182f799a8cf19f2d199b9b913aa2738c675c53f13cd",
									"source": "<template>\n\t<AsamTable\n\t\t:data=\"tableData\"\n\t\t:default-sort=\"{ prop: 'date', order: 'descending' }\"\n\t\tstyle=\"width: 100%\"\n\t>\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" sortable width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" :formatter=\"formatter\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageSortDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst formatter = (row) => {\n\treturn row.address;\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-striped",
					"title": "带斑马纹表格",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-striped/ts/Demo.vue",
									"sha256": "d95373ef9baa9f58bf7d536a94d8873b50a99f312abdb0bd26112261414b8e1d",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" stripe style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageStripedDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-striped/js/Demo.vue",
									"sha256": "2876a70f5c6df1717b746ba2083d435115820012f6b9ab83a0e8851d9f733471",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" stripe style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageStripedDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-summary",
					"title": "表尾合计行",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-summary/ts/Demo.vue",
									"sha256": "f6b68e695421efa5eeb0f81856d0cd764d10be649418378322a351346d058d52",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTable :data=\"tableData\" border show-summary style=\"width: 100%\">\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" sortable label=\"金额 1\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" sortable label=\"金额 2\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" sortable label=\"金额 3\" />\n\t\t</AsamTable>\n\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\tborder\n\t\t\theight=\"200\"\n\t\t\t:summary-method=\"getSummaries\"\n\t\t\tshow-summary\n\t\t\tstyle=\"width: 100%; margin-top: var(--asam-space-lg)\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" label=\"费用 1 ($)\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" label=\"费用 2 ($)\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" label=\"费用 3 ($)\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageSummaryDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nimport { h } from 'vue';\n\nimport type { VNode } from 'vue';\nimport type { AsamTableColumnCtx } from '@asam-ui/ui';\n\ninterface Product {\n\tid: string;\n\tname: string;\n\tamount1: string;\n\tamount2: string;\n\tamount3: number;\n}\n\ninterface SummaryMethodProps<T extends Product = Product> {\n\tcolumns: AsamTableColumnCtx<T>[];\n\tdata: T[];\n}\n\nconst getSummaries = (param: SummaryMethodProps) => {\n\tconst { columns, data } = param;\n\tconst sums: (string | VNode)[] = [];\n\tcolumns.forEach((column, index) => {\n\t\tif (index === 0) {\n\t\t\tsums[index] = h('div', { style: { textDecoration: 'underline' } }, ['总费用']);\n\t\t\treturn;\n\t\t}\n\t\tconst values = data.map((item) => Number(Reflect.get(item, column.property)));\n\t\tif (!values.every((value) => Number.isNaN(value))) {\n\t\t\tsums[index] = `$ ${values.reduce((prev, curr) => {\n\t\t\t\tconst value = Number(curr);\n\t\t\t\tif (!Number.isNaN(value)) {\n\t\t\t\t\treturn prev + curr;\n\t\t\t\t} else {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t}, 0)}`;\n\t\t} else {\n\t\t\tsums[index] = 'N/A';\n\t\t}\n\t});\n\n\treturn sums;\n};\n\nconst tableData: Product[] = [\n\t{\n\t\tid: '12987122',\n\t\tname: '汤姆',\n\t\tamount1: '234',\n\t\tamount2: '3.2',\n\t\tamount3: 10\n\t},\n\t{\n\t\tid: '12987123',\n\t\tname: '汤姆',\n\t\tamount1: '165',\n\t\tamount2: '4.43',\n\t\tamount3: 12\n\t},\n\t{\n\t\tid: '12987124',\n\t\tname: '汤姆',\n\t\tamount1: '324',\n\t\tamount2: '1.9',\n\t\tamount3: 9\n\t},\n\t{\n\t\tid: '12987125',\n\t\tname: '汤姆',\n\t\tamount1: '621',\n\t\tamount2: '2.2',\n\t\tamount3: 17\n\t},\n\t{\n\t\tid: '12987126',\n\t\tname: '汤姆',\n\t\tamount1: '539',\n\t\tamount2: '4.1',\n\t\tamount3: 15\n\t}\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-summary/js/Demo.vue",
									"sha256": "0e5e37e5c722249b701b9acbb5fa93015c96fcff50de39e330a79fe7667b4ecd",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTable :data=\"tableData\" border show-summary style=\"width: 100%\">\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" sortable label=\"金额 1\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" sortable label=\"金额 2\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" sortable label=\"金额 3\" />\n\t\t</AsamTable>\n\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\tborder\n\t\t\theight=\"200\"\n\t\t\t:summary-method=\"getSummaries\"\n\t\t\tshow-summary\n\t\t\tstyle=\"width: 100%; margin-top: var(--asam-space-lg)\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"ID\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"amount1\" label=\"费用 1 ($)\" />\n\t\t\t<AsamTableColumn prop=\"amount2\" label=\"费用 2 ($)\" />\n\t\t\t<AsamTableColumn prop=\"amount3\" label=\"费用 3 ($)\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageSummaryDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport { h } from 'vue';\nconst getSummaries = (param) => {\n\tconst { columns, data } = param;\n\tconst sums = [];\n\tcolumns.forEach((column, index) => {\n\t\tif (index === 0) {\n\t\t\tsums[index] = h('div', { style: { textDecoration: 'underline' } }, ['总费用']);\n\t\t\treturn;\n\t\t}\n\t\tconst values = data.map((item) => Number(Reflect.get(item, column.property)));\n\t\tif (!values.every((value) => Number.isNaN(value))) {\n\t\t\tsums[index] = `$ ${values.reduce((prev, curr) => {\n\t\t\t\tconst value = Number(curr);\n\t\t\t\tif (!Number.isNaN(value)) {\n\t\t\t\t\treturn prev + curr;\n\t\t\t\t} else {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t}, 0)}`;\n\t\t} else {\n\t\t\tsums[index] = 'N/A';\n\t\t}\n\t});\n\treturn sums;\n};\nconst tableData = [\n\t{\n\t\tid: '12987122',\n\t\tname: '汤姆',\n\t\tamount1: '234',\n\t\tamount2: '3.2',\n\t\tamount3: 10\n\t},\n\t{\n\t\tid: '12987123',\n\t\tname: '汤姆',\n\t\tamount1: '165',\n\t\tamount2: '4.43',\n\t\tamount3: 12\n\t},\n\t{\n\t\tid: '12987124',\n\t\tname: '汤姆',\n\t\tamount1: '324',\n\t\tamount2: '1.9',\n\t\tamount3: 9\n\t},\n\t{\n\t\tid: '12987125',\n\t\tname: '汤姆',\n\t\tamount1: '621',\n\t\tamount2: '2.2',\n\t\tamount3: 17\n\t},\n\t{\n\t\tid: '12987126',\n\t\tname: '汤姆',\n\t\tamount1: '539',\n\t\tamount2: '4.1',\n\t\tamount3: 15\n\t}\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-table-layout",
					"title": "表格布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-table-layout/ts/Demo.vue",
									"sha256": "03a97202f9c0c606767cbff500a722a2836fa4f355b199bd99afabd9994f93d4",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup v-model=\"tableLayout\" class=\"mb-2\">\n\t\t\t<AsamRadioButton value=\"fixed\">fixed</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"auto\">auto</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<AsamTable :data=\"tableData\" :table-layout=\"tableLayout\">\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageTableLayoutDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTableExpose } from '@asam-ui/ui';\n\nconst tableLayout = ref<AsamTableExpose['tableLayout']>('fixed');\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-table-layout/js/Demo.vue",
									"sha256": "5c95b715861f670a0219903ab3916524d7c198c4d67d19615eca23826ca34c9a",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup v-model=\"tableLayout\" class=\"mb-2\">\n\t\t\t<AsamRadioButton value=\"fixed\">fixed</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"auto\">auto</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<AsamTable :data=\"tableData\" :table-layout=\"tableLayout\">\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageTableLayoutDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst tableLayout = ref('fixed');\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-tooltip-formatter",
					"title": "提示内容格式化",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-tooltip-formatter/ts/Demo.vue",
									"sha256": "ad9c1e1c8ce013e77a8dd544a040eed2accb4194b3a080394195028bfb8a917c",
									"source": "<template>\n\t<AsamTable\n\t\t:data=\"tableData\"\n\t\tshow-overflow-tooltip\n\t\t:tooltip-formatter=\"tableRowFormatter\"\n\t\tstyle=\"width: 100%\"\n\t>\n\t\t<AsamTableColumn prop=\"address\" label=\"扩展表格格式化器\" width=\"240\" />\n\t\t<!-- @vue-generic {TableData} -->\n\t\t<AsamTableColumn\n\t\t\tprop=\"tags\"\n\t\t\tlabel=\"格式化对象\"\n\t\t\twidth=\"240\"\n\t\t\t:tooltip-formatter=\"({ row }) => row.tags.join(', ')\"\n\t\t>\n\t\t\t<template #default=\"{ row }\">\n\t\t\t\t<AsamTag v-for=\"tag in row.tags\" :key=\"tag\" class=\"tag-item\" type=\"primary\">\n\t\t\t\t\t{{ tag }}\n\t\t\t\t</AsamTag>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t\t<AsamTableColumn prop=\"url\" label=\"使用 VNode\" width=\"240\" :tooltip-formatter=\"withVNode\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageTooltipFormatterDemo' });\nimport { AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';\n\nimport { h } from 'vue';\nimport { AsamLink, type AsamTableTooltipData } from '@asam-ui/ui';\n\ntype TableData = {\n\taddress: string;\n\ttags: string[];\n\turl: string;\n};\n\nconst tableData: TableData[] = [\n\t{\n\t\taddress: '萨尔州南莉莉洛尔贝格路 86c 号',\n\t\ttags: ['办公室', '家', '公园', '花园'],\n\t\turl: '/component-AsamTable.html'\n\t},\n\t{\n\t\taddress: '伊利诺伊州南弗兰克菲尔德 A 街 760 号',\n\t\ttags: ['error', 'warning', 'success', 'info'],\n\t\turl: '/component-AsamTable.html'\n\t},\n\t{\n\t\taddress: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号',\n\t\ttags: ['one', 'two', 'three', 'four', 'five'],\n\t\turl: '/component-AsamTable.html'\n\t},\n\t{\n\t\taddress: '爱达荷州西里卡多温莎路 23618 号',\n\t\ttags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],\n\t\turl: '/component-AsamTable.html'\n\t}\n];\n\nconst tableRowFormatter = (data: AsamTableTooltipData<TableData>) => {\n\treturn `${data.cellValue}：表格格式化内容`;\n};\n\nconst withVNode = (data: AsamTableTooltipData<TableData>) => {\n\treturn h(AsamLink, { type: 'primary', href: data.cellValue }, () =>\n\t\th('span', null, data.cellValue)\n\t);\n};\n</script>\n\n<style scoped>\np {\n\tmargin: 10px;\n\tpadding: 0;\n}\n\n.tag-item + .tag-item {\n\tmargin-left: 5px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-tooltip-formatter/js/Demo.vue",
									"sha256": "c79f733e23f335d1eafbfe304801df6c7d0f5ad45ea301656e38740bb8be4164",
									"source": "<template>\n\t<AsamTable\n\t\t:data=\"tableData\"\n\t\tshow-overflow-tooltip\n\t\t:tooltip-formatter=\"tableRowFormatter\"\n\t\tstyle=\"width: 100%\"\n\t>\n\t\t<AsamTableColumn prop=\"address\" label=\"扩展表格格式化器\" width=\"240\" />\n\n\t\t<AsamTableColumn\n\t\t\tprop=\"tags\"\n\t\t\tlabel=\"格式化对象\"\n\t\t\twidth=\"240\"\n\t\t\t:tooltip-formatter=\"({ row }) => row.tags.join(', ')\"\n\t\t>\n\t\t\t<template #default=\"{ row }\">\n\t\t\t\t<AsamTag v-for=\"tag in row.tags\" :key=\"tag\" class=\"tag-item\" type=\"primary\">\n\t\t\t\t\t{{ tag }}\n\t\t\t\t</AsamTag>\n\t\t\t</template>\n\t\t</AsamTableColumn>\n\t\t<AsamTableColumn prop=\"url\" label=\"使用 VNode\" width=\"240\" :tooltip-formatter=\"withVNode\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageTooltipFormatterDemo' });\nimport { AsamTable, AsamTableColumn, AsamTag } from '@asam-ui/ui';\nimport { h } from 'vue';\nimport { AsamLink } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\taddress: '萨尔州南莉莉洛尔贝格路 86c 号',\n\t\ttags: ['办公室', '家', '公园', '花园'],\n\t\turl: '/component-AsamTable.html'\n\t},\n\t{\n\t\taddress: '伊利诺伊州南弗兰克菲尔德 A 街 760 号',\n\t\ttags: ['error', 'warning', 'success', 'info'],\n\t\turl: '/component-AsamTable.html'\n\t},\n\t{\n\t\taddress: '图林根州阿尔特马利纳沙伊德阿诺德路 41a 号',\n\t\ttags: ['one', 'two', 'three', 'four', 'five'],\n\t\turl: '/component-AsamTable.html'\n\t},\n\t{\n\t\taddress: '爱达荷州西里卡多温莎路 23618 号',\n\t\ttags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],\n\t\turl: '/component-AsamTable.html'\n\t}\n];\nconst tableRowFormatter = (data) => {\n\treturn `${data.cellValue}：表格格式化内容`;\n};\nconst withVNode = (data) => {\n\treturn h(AsamLink, { type: 'primary', href: data.cellValue }, () =>\n\t\th('span', null, data.cellValue)\n\t);\n};\n</script>\n\n<style scoped>\np {\n\tmargin: 10px;\n\tpadding: 0;\n}\n\n.tag-item + .tag-item {\n\tmargin-left: 5px;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-tree-and-lazy",
					"title": "树形数据与懒加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-tree-and-lazy/ts/Demo.vue",
									"sha256": "c0ab0b8c13337f6bfc6cafa037605c6e4d2ad44b57f76379dbac014839ffbad4",
									"source": "<template>\n\t<div class=\"demo-layout-1\">\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\tstyle=\"width: 100%; margin-bottom: 20px\"\n\t\t\trow-key=\"id\"\n\t\t\tborder\n\t\t\tdefault-expand-all\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" sortable />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" sortable />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" sortable />\n\t\t</AsamTable>\n\n\t\t<AsamTable\n\t\t\t:data=\"tableData1\"\n\t\t\tstyle=\"width: 100%\"\n\t\t\trow-key=\"id\"\n\t\t\tborder\n\t\t\tlazy\n\t\t\t:load=\"load\"\n\t\t\t:tree-props=\"{ children: 'children', hasChildren: 'hasChildren' }\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageTreeAndLazyDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\ninterface User {\n\tid: number;\n\tdate: string;\n\tname: string;\n\taddress: string;\n\thasChildren?: boolean;\n\tchildren?: User[];\n}\n\nconst load = (row: User, treeNode: unknown, resolve: (data: User[]) => void) => {\n\tsetTimeout(() => {\n\t\tresolve([\n\t\t\t{\n\t\t\t\tid: 31,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 32,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t}\n\t\t]);\n\t}, 1000);\n};\n\nconst tableData: User[] = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-02',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-04',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-01',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 31,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 32,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-03',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n\nconst tableData1: User[] = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-02',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-04',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-01',\n\t\tname: '王小虎',\n\t\thasChildren: true,\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-03',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-tree-and-lazy/js/Demo.vue",
									"sha256": "6fba56bda044304a6d6f7618496bf89383451fa7f3476bb922e4b00abbbb0c2f",
									"source": "<template>\n\t<div class=\"demo-layout-1\">\n\t\t<AsamTable\n\t\t\t:data=\"tableData\"\n\t\t\tstyle=\"width: 100%; margin-bottom: 20px\"\n\t\t\trow-key=\"id\"\n\t\t\tborder\n\t\t\tdefault-expand-all\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" sortable />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" sortable />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" sortable />\n\t\t</AsamTable>\n\n\t\t<AsamTable\n\t\t\t:data=\"tableData1\"\n\t\t\tstyle=\"width: 100%\"\n\t\t\trow-key=\"id\"\n\t\t\tborder\n\t\t\tlazy\n\t\t\t:load=\"load\"\n\t\t\t:tree-props=\"{ children: 'children', hasChildren: 'hasChildren' }\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageTreeAndLazyDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst load = (row, treeNode, resolve) => {\n\tsetTimeout(() => {\n\t\tresolve([\n\t\t\t{\n\t\t\t\tid: 31,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 32,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t}\n\t\t]);\n\t}, 1000);\n};\nconst tableData = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-02',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-04',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-01',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 31,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 32,\n\t\t\t\tdate: '2016-05-01',\n\t\t\t\tname: '王小虎',\n\t\t\t\taddress: '洛杉矶格罗夫街 189 号'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-03',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\nconst tableData1 = [\n\t{\n\t\tid: 1,\n\t\tdate: '2016-05-02',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 2,\n\t\tdate: '2016-05-04',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 3,\n\t\tdate: '2016-05-01',\n\t\tname: '王小虎',\n\t\thasChildren: true,\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tid: 4,\n\t\tdate: '2016-05-03',\n\t\tname: '王小虎',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-with-border",
					"title": "带边框表格",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-with-border/ts/Demo.vue",
									"sha256": "c1fc10abfe4534bab61f3e801051dea2658e28a967acf22cccdf22f0faee674c",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" border style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageWithBorderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-with-border/js/Demo.vue",
									"sha256": "8ed75677f11818bdd2b22975b1a1354e9b3e6593979e8504d71e9bccf6680d67",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" border style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageWithBorderDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "usage-with-status",
					"title": "带状态表格",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-with-status/ts/Demo.vue",
									"sha256": "366c20da80b908441a608b0ec3da20d71731085961af4448c7835267cfe4b92b",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\" :row-class-name=\"tableRowClassName\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableUsageWithStatusDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\n\ninterface User {\n\tdate: string;\n\tname: string;\n\taddress: string;\n}\n\nconst tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {\n\tif (rowIndex === 1) {\n\t\treturn 'warning-row';\n\t} else if (rowIndex === 3) {\n\t\treturn 'success-row';\n\t}\n\treturn '';\n};\n\nconst tableData: User[] = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style>\n.el-table .warning-row {\n\t--el-table-tr-bg-color: var(--el-color-warning-light-9);\n}\n\n.el-table .success-row {\n\t--el-table-tr-bg-color: var(--el-color-success-light-9);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTable/usage-with-status/js/Demo.vue",
									"sha256": "00ce23f51bb6d5f5f60eeeef1b873abf5308681d9f976848b55a5379d689f526",
									"source": "<template>\n\t<AsamTable :data=\"tableData\" style=\"width: 100%\" :row-class-name=\"tableRowClassName\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableUsageWithStatusDemo' });\nimport { AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst tableRowClassName = ({ rowIndex }) => {\n\tif (rowIndex === 1) {\n\t\treturn 'warning-row';\n\t} else if (rowIndex === 3) {\n\t\treturn 'success-row';\n\t}\n\treturn '';\n};\nconst tableData = [\n\t{\n\t\tdate: '2016-05-03',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '汤姆',\n\t\taddress: '洛杉矶格罗夫街 189 号'\n\t}\n];\n</script>\n\n<style>\n.el-table .warning-row {\n\t--el-table-tr-bg-color: var(--el-color-warning-light-9);\n}\n\n.el-table .success-row {\n\t--el-table-tr-bg-color: var(--el-color-success-light-9);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTaskCard",
			"documentation": "/component-AsamTaskCard.html",
			"demos": [
				{
					"id": "basic",
					"title": "状态与操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTaskCard/basic/ts/Demo.vue",
									"sha256": "aa943e021ed546f6666527bad63de206db01fc92c3a453ad2b983ca199425ca0",
									"source": "<template>\n\t<AsamTaskCard v-bind=\"task\" @action=\"advance\" />\n\t<p class=\"example-paragraph\">\n\t\t<output>最近操作：{{ lastAction || '尚未操作' }}；状态：{{ task.status }}</output>\n\t</p>\n\t<AsamButton type=\"default\" @click=\"reset\">恢复任务</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTaskCardBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTaskCard } from '@asam-ui/ui';\nimport { createTask } from './task.js';\nconst task = ref(createTask());\nconst lastAction = ref('');\nfunction advance(key: string): void {\n\tlastAction.value = key;\n\tif (key !== 'advance') return;\n\tif (task.value.status === 'pending') {\n\t\ttask.value.status = 'inProgress';\n\t\ttask.value.actions = [{ key: 'advance', label: '完成任务', variant: 'success' }];\n\t} else {\n\t\ttask.value.status = 'completed';\n\t\ttask.value.stage = 'finish';\n\t\ttask.value.actions = [];\n\t}\n}\nfunction reset(): void {\n\ttask.value = createTask();\n\tlastAction.value = '';\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "task.ts",
									"sourcePath": "apps/website/examples/AsamTaskCard/basic/ts/task.ts",
									"sha256": "9340c99accec9946e0be79c7e07a9f0ddbdc3be70f104c8b1b82f43b82fb26e3",
									"source": "import type { AsamTaskCardProps } from '@asam-ui/ui';\n\nexport function createTask(): AsamTaskCardProps {\n\treturn {\n\t\ttaskNo: 'TASK-001',\n\t\treleaseTime: '2026-10-03 08:30:00',\n\t\tbatchCount: 24,\n\t\tproductModel: 'A-01',\n\t\tteamName: '一班',\n\t\tstations: ['装配', '复核'],\n\t\tstatus: 'pending',\n\t\tstage: 'mark',\n\t\tactions: [{ key: 'advance', label: '开始', variant: 'primary' }]\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTaskCard/basic/js/Demo.vue",
									"sha256": "3ce7b2fcc798e79d1139c41eda7a8da2246facc7c0a60e909ed1da043ca14984",
									"source": "<template>\n\t<AsamTaskCard v-bind=\"task\" @action=\"advance\" />\n\t<p class=\"example-paragraph\">\n\t\t<output>最近操作：{{ lastAction || '尚未操作' }}；状态：{{ task.status }}</output>\n\t</p>\n\t<AsamButton type=\"default\" @click=\"reset\">恢复任务</AsamButton>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTaskCardBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTaskCard } from '@asam-ui/ui';\nimport { createTask } from './task.js';\nconst task = ref(createTask());\nconst lastAction = ref('');\nfunction advance(key) {\n\tlastAction.value = key;\n\tif (key !== 'advance') return;\n\tif (task.value.status === 'pending') {\n\t\ttask.value.status = 'inProgress';\n\t\ttask.value.actions = [{ key: 'advance', label: '完成任务', variant: 'success' }];\n\t} else {\n\t\ttask.value.status = 'completed';\n\t\ttask.value.stage = 'finish';\n\t\ttask.value.actions = [];\n\t}\n}\nfunction reset() {\n\ttask.value = createTask();\n\tlastAction.value = '';\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "task.js",
									"sourcePath": "apps/website/examples/AsamTaskCard/basic/js/task.js",
									"sha256": "4e1673d37e94c70fbec7e9ad6f1530b3154a3594fe60b29fe8d3e49f18c3dda6",
									"source": "export function createTask() {\n\treturn {\n\t\ttaskNo: 'TASK-001',\n\t\treleaseTime: '2026-10-03 08:30:00',\n\t\tbatchCount: 24,\n\t\tproductModel: 'A-01',\n\t\tteamName: '一班',\n\t\tstations: ['装配', '复核'],\n\t\tstatus: 'pending',\n\t\tstage: 'mark',\n\t\tactions: [{ key: 'advance', label: '开始', variant: 'primary' }]\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "自定义全部内容插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTaskCard/slots/ts/Demo.vue",
									"sha256": "93162f80045ea186c9bc866f49d287c8772238b33649830e650aad554fdb1bf2",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTaskCard\n\t\t\ttask-no=\"TASK-SLOT\"\n\t\t\trelease-time=\"今日 09:00\"\n\t\t\t:batch-count=\"8\"\n\t\t\tproduct-model=\"B-02\"\n\t\t\tteam-name=\"二班\"\n\t\t\t:stations=\"['检验']\"\n\t\t\tstatus=\"inProgress\"\n\t\t\tstage=\"mark\"\n\t\t>\n\t\t\t<template #icon><span aria-hidden=\"true\">✓</span></template>\n\t\t\t<template #title>检验任务</template>\n\t\t\t<template #subTitle>班组自定义副标题</template>\n\t\t\t<p class=\"example-paragraph\">该内容由 default 插槽提供，任务基础输入仍完整保留。</p>\n\t\t\t<template #action>\n\t\t\t\t<AsamButton size=\"small\" type=\"default\" @click=\"count++\"> 查看记录 </AsamButton>\n\t\t\t</template>\n\t\t</AsamTaskCard>\n\t\t<output>自定义操作次数：{{ count }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTaskCardSlotsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTaskCard } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTaskCard/slots/js/Demo.vue",
									"sha256": "af0aa42ffc5bcf6ab53eb7cf8f0c91f674b84c2d864a3c6656430fef1bafd15b",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTaskCard\n\t\t\ttask-no=\"TASK-SLOT\"\n\t\t\trelease-time=\"今日 09:00\"\n\t\t\t:batch-count=\"8\"\n\t\t\tproduct-model=\"B-02\"\n\t\t\tteam-name=\"二班\"\n\t\t\t:stations=\"['检验']\"\n\t\t\tstatus=\"inProgress\"\n\t\t\tstage=\"mark\"\n\t\t>\n\t\t\t<template #icon><span aria-hidden=\"true\">✓</span></template>\n\t\t\t<template #title>检验任务</template>\n\t\t\t<template #subTitle>班组自定义副标题</template>\n\t\t\t<p class=\"example-paragraph\">该内容由 default 插槽提供，任务基础输入仍完整保留。</p>\n\t\t\t<template #action>\n\t\t\t\t<AsamButton size=\"small\" type=\"default\" @click=\"count++\"> 查看记录 </AsamButton>\n\t\t\t</template>\n\t\t</AsamTaskCard>\n\t\t<output>自定义操作次数：{{ count }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTaskCardSlotsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTaskCard } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "boundaries",
					"title": "任务状态、阶段与动作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTaskCard/boundaries/ts/Demo.vue",
									"sha256": "1c260a18087af82b0ffd49958a8ed08c03ea047ffa6cafb817e7b0b1de6cf09a",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"step = (step + 1) % states.length\"\n\t\t\t>切换任务状态</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"withActions = !withActions\"\n\t\t\t>切换任务动作</AsamButton\n\t\t>\n\t\t<AsamTaskCard\n\t\t\ttask-no=\"TASK-LONG-012345678901234567890123456789\"\n\t\t\trelease-time=\"2026-10-05 08:30:45\"\n\t\t\tbatch-count=\"12\"\n\t\t\tproduct-model=\"长型号测试\"\n\t\t\tteam-name=\"测试班组\"\n\t\t\t:stations=\"['A01', 'A02']\"\n\t\t\t:status=\"states[step]\"\n\t\t\t:stage=\"step === 0 ? 'mark' : 'finish'\"\n\t\t\t:actions=\"withActions ? actions : []\"\n\t\t\t@action=\"action = $event\"\n\t\t/>\n\t\t<output v-bind=\"domDataAttrs('data-task-action')\">{{ action }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport { ref } from 'vue';\nimport { AsamButton, AsamTaskCard } from '@asam-ui/ui';\nimport type { AsamTaskCardAction, AsamTaskCardStatus } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTaskCardBoundariesDemo' });\nconst step = ref(0);\nconst withActions = ref(true);\nconst states: AsamTaskCardStatus[] = ['pending', 'inProgress', 'completed'];\nconst actions: AsamTaskCardAction[] = [{ key: 'confirm', label: '确认任务', variant: 'primary' }];\nconst action = ref('');\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTaskCard/boundaries/js/Demo.vue",
									"sha256": "d7b673c2c489c30e6d3d3592392e51609682263fd3665cde05bd6f82cda8266f",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"step = (step + 1) % states.length\"\n\t\t\t>切换任务状态</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"withActions = !withActions\"\n\t\t\t>切换任务动作</AsamButton\n\t\t>\n\t\t<AsamTaskCard\n\t\t\ttask-no=\"TASK-LONG-012345678901234567890123456789\"\n\t\t\trelease-time=\"2026-10-05 08:30:45\"\n\t\t\tbatch-count=\"12\"\n\t\t\tproduct-model=\"长型号测试\"\n\t\t\tteam-name=\"测试班组\"\n\t\t\t:stations=\"['A01', 'A02']\"\n\t\t\t:status=\"states[step]\"\n\t\t\t:stage=\"step === 0 ? 'mark' : 'finish'\"\n\t\t\t:actions=\"withActions ? actions : []\"\n\t\t\t@action=\"action = $event\"\n\t\t/>\n\t\t<output v-bind=\"domDataAttrs('data-task-action')\">{{ action }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamTaskCard } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTaskCardBoundariesDemo' });\nconst step = ref(0);\nconst withActions = ref(true);\nconst states = ['pending', 'inProgress', 'completed'];\nconst actions = [{ key: 'confirm', label: '确认任务', variant: 'primary' }];\nconst action = ref('');\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTabs",
			"documentation": "/component-AsamTabs.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/basic/ts/Demo.vue",
									"sha256": "254b42dda47f6bdcc67a829f4eeeede730fb1427fe9c40abcfead69a0be4b570",
									"source": "<template>\n\t<AsamTabs\n\t\t:model-value=\"active\"\n\t\t:items=\"items\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') active = value;\n\t\t\t}\n\t\t\"\n\t\t@change=\"changes++\"\n\t>\n\t\t<template #label=\"{ item }\">{{ item.label }}（{{ item.count ?? 0 }}）</template>\n\t</AsamTabs>\n\t<p class=\"example-paragraph\" role=\"status\">当前 {{ active }}；变更 {{ changes }} 次</p>\n\t<AsamTabs\n\t\t:model-value=\"pane\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') pane = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamTabPane label=\"概览\" name=\"overview\">\n\t\t\t<p class=\"example-paragraph\">概览内容</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"明细\" name=\"detail\" lazy>\n\t\t\t<p class=\"example-paragraph\">延迟挂载的明细</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"暂不可用\" name=\"disabled\" disabled />\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport type { AsamTabItem } from '@asam-ui/ui';\nconst active = ref('all');\nconst pane = ref('overview');\nconst changes = ref(0);\nconst items: AsamTabItem[] = [\n\t{ label: '全部', value: 'all', count: 3 },\n\t{ label: '草稿', value: 'draft', count: 1 },\n\t{ label: '锁定', value: 'locked', disabled: true }\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/basic/js/Demo.vue",
									"sha256": "069dadebebf5666f96b3db9f3e50650817214f41ec36cbcf542dd738b08d1ba7",
									"source": "<template>\n\t<AsamTabs\n\t\t:model-value=\"active\"\n\t\t:items=\"items\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') active = value;\n\t\t\t}\n\t\t\"\n\t\t@change=\"changes++\"\n\t>\n\t\t<template #label=\"{ item }\">{{ item.label }}（{{ item.count ?? 0 }}）</template>\n\t</AsamTabs>\n\t<p class=\"example-paragraph\" role=\"status\">当前 {{ active }}；变更 {{ changes }} 次</p>\n\t<AsamTabs\n\t\t:model-value=\"pane\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') pane = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamTabPane label=\"概览\" name=\"overview\">\n\t\t\t<p class=\"example-paragraph\">概览内容</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"明细\" name=\"detail\" lazy>\n\t\t\t<p class=\"example-paragraph\">延迟挂载的明细</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"暂不可用\" name=\"disabled\" disabled />\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nconst active = ref('all');\nconst pane = ref('overview');\nconst changes = ref(0);\nconst items = [\n\t{ label: '全部', value: 'all', count: 3 },\n\t{ label: '草稿', value: 'draft', count: 1 },\n\t{ label: '锁定', value: 'locked', disabled: true }\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-basic/ts/Demo.vue",
									"sha256": "29b467d5c6c15545b1202924e534bd580dd88ac6d0f31fc0a09ef07848548350",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt\n-->\n<template>\n\t<AsamTabs\n\t\t:model-value=\"activeName\"\n\t\tclass=\"demo-tabs\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') activeName = value;\n\t\t\t}\n\t\t\"\n\t\t@tab-click=\"handleClick\"\n\t>\n\t\t<AsamTabPane label=\"用户\" name=\"first\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\" name=\"second\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\" name=\"third\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\" name=\"fourth\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapBasicDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTabsPaneContext } from '@asam-ui/ui';\n\nconst activeName = ref('first');\n\nconst handleClick = (tab: AsamTabsPaneContext, event: Event) => {\n\tconsole.log(tab, event);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "c2bf8a1442f5928b1ecd987fadfd9e4d7bdce6553447423a1c10957ee3df748b",
									"notice": {
										"id": "e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17",
										"url": "/licenses/source-notices/e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt",
										"licenseFilename": "LICENSE-e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/basic.vue",
											"sourceSha256": "c65abfb21c7085f04b1acc79d269f4d2155e334b6200bbdfca19f3ad00ae0189",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-basic/js/Demo.vue",
									"sha256": "10bfedc215a6d86e51adf382cce243aef81f1e81d487c9eb93dee5f271e4e1c3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt\n-->\n<template>\n\t<AsamTabs\n\t\t:model-value=\"activeName\"\n\t\tclass=\"demo-tabs\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') activeName = value;\n\t\t\t}\n\t\t\"\n\t\t@tab-click=\"handleClick\"\n\t>\n\t\t<AsamTabPane label=\"用户\" name=\"first\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\" name=\"second\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\" name=\"third\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\" name=\"fourth\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapBasicDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activeName = ref('first');\nconst handleClick = (tab, event) => {\n\tconsole.log(tab, event);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "0bb5d3a6068539a8524acce21b2f82f18184fc0065a4f754c0952fc3180b3399",
									"notice": {
										"id": "e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17",
										"url": "/licenses/source-notices/e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt",
										"licenseFilename": "LICENSE-e00306ed2d0f0b43c198f31ffebeb3274b3bafe1a894d2ab1d94c0f3c8671a17.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/basic.vue",
											"sourceSha256": "c65abfb21c7085f04b1acc79d269f4d2155e334b6200bbdfca19f3ad00ae0189",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-card-style",
					"title": "卡片风格的标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-card-style/ts/Demo.vue",
									"sha256": "19063c214009a1c169b23f4131c61b5a92b415f8ffed16244ce2c1f192c5bfb7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt\n-->\n<template>\n\t<AsamTabs\n\t\t:model-value=\"activeName\"\n\t\ttype=\"card\"\n\t\tclass=\"demo-tabs\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') activeName = value;\n\t\t\t}\n\t\t\"\n\t\t@tab-click=\"handleClick\"\n\t>\n\t\t<AsamTabPane label=\"用户\" name=\"first\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\" name=\"second\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\" name=\"third\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\" name=\"fourth\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapCardStyleDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTabsPaneContext } from '@asam-ui/ui';\n\nconst activeName = ref('first');\n\nconst handleClick = (tab: AsamTabsPaneContext, event: Event) => {\n\tconsole.log(tab, event);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "d3f8087f0aab69ebc8db959b585c7a75d9f71170550eec8cf123bea8e0963336",
									"notice": {
										"id": "39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89",
										"url": "/licenses/source-notices/39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt",
										"licenseFilename": "LICENSE-39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/card-style.vue",
											"sourceSha256": "2abee06067ea9e08e9c824b30bf73821ce3c0e4673e84e347e39766dbf0039dd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-card-style/js/Demo.vue",
									"sha256": "8b516f1761a9f1f9a53c042f737096a02f8f67ab5b6793095a84e6386a000a5b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt\n-->\n<template>\n\t<AsamTabs\n\t\t:model-value=\"activeName\"\n\t\ttype=\"card\"\n\t\tclass=\"demo-tabs\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') activeName = value;\n\t\t\t}\n\t\t\"\n\t\t@tab-click=\"handleClick\"\n\t>\n\t\t<AsamTabPane label=\"用户\" name=\"first\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\" name=\"second\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\" name=\"third\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\" name=\"fourth\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapCardStyleDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activeName = ref('first');\nconst handleClick = (tab, event) => {\n\tconsole.log(tab, event);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "217fad71b89737a443457bab2cbab422096c87165996271d86ef7918cdc5a99e",
									"notice": {
										"id": "39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89",
										"url": "/licenses/source-notices/39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt",
										"licenseFilename": "LICENSE-39a3d38be4724bc5c6ee7458207147e30b96249d04b1da2ba62750317a73de89.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/card-style.vue",
											"sourceSha256": "2abee06067ea9e08e9c824b30bf73821ce3c0e4673e84e347e39766dbf0039dd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-border-card",
					"title": "带有边框的卡片风格",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-border-card/ts/Demo.vue",
									"sha256": "1f4d554293ed1d02a6b780ccf724670eedb93ebb67d7b4697d5828016352f498",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt\n-->\n<template>\n\t<AsamTabs type=\"border-card\">\n\t\t<AsamTabPane label=\"用户\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapBorderCardDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "c1b162f68bfcb337b7f60e263884cd3c2432a5e6169fe46d3e08a96beced7b3a",
									"notice": {
										"id": "84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c",
										"url": "/licenses/source-notices/84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt",
										"licenseFilename": "LICENSE-84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/border-card.vue",
											"sourceSha256": "4b63a13926756d21f3415b374f1a7bb7aee5d5e07dd8aa30a543756dfc187f8e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-border-card/js/Demo.vue",
									"sha256": "ab8c1819bf8bc90b4149ed5211b0412a18ac1f2aabf7995cd3d8d676f2c8d4d4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt\n-->\n<template>\n\t<AsamTabs type=\"border-card\">\n\t\t<AsamTabPane label=\"用户\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapBorderCardDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "1f4a67000fe29ae3c05ff3c31600dc369818f00d5c735dce15370a48a8ba6092",
									"notice": {
										"id": "84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c",
										"url": "/licenses/source-notices/84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt",
										"licenseFilename": "LICENSE-84b332e248f183a79dc2fd1e465c5f5583c1329d54c1f508fd3b919843f7237c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/border-card.vue",
											"sourceSha256": "4b63a13926756d21f3415b374f1a7bb7aee5d5e07dd8aa30a543756dfc187f8e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-tab-position",
					"title": "标签位置的设置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-tab-position/ts/Demo.vue",
									"sha256": "7f0a4940877c8f321603d22f9f258e94942dc08be7938f4f8cd7a3e7cf21964b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"tabPosition\"\n\t\tstyle=\"margin-bottom: 30px\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (value === 'top' || value === 'bottom' || value === 'left' || value === 'right')\n\t\t\t\t\ttabPosition = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioButton value=\"top\">top</AsamRadioButton>\n\t\t<AsamRadioButton value=\"right\">right</AsamRadioButton>\n\t\t<AsamRadioButton value=\"bottom\">bottom</AsamRadioButton>\n\t\t<AsamRadioButton value=\"left\">left</AsamRadioButton>\n\t</AsamRadioGroup>\n\n\t<AsamTabs :tab-position=\"tabPosition\" style=\"height: 200px\" class=\"demo-tabs\">\n\t\t<AsamTabPane label=\"用户\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapTabPositionDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTabsProps } from '@asam-ui/ui';\n\nconst tabPosition = ref<AsamTabsProps['tabPosition']>('left');\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n.el-tabs--right .el-tabs__content,\n.el-tabs--left .el-tabs__content {\n\theight: 100%;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "d4544aea459a9a8fb657a4cddc1fa720c5a17d51bd120ba029388452f6352c7c",
									"notice": {
										"id": "b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3",
										"url": "/licenses/source-notices/b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt",
										"licenseFilename": "LICENSE-b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/tab-position.vue",
											"sourceSha256": "95115b713d591ae5fea6b553f3f56524de9f931ce738140257f611f6e6df09e2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-tab-position/js/Demo.vue",
									"sha256": "fadfb2d0a81c33d76b78639a355dbeb65be1d5e44bc63c7f11a9d4e5ff15ffbb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"tabPosition\"\n\t\tstyle=\"margin-bottom: 30px\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (value === 'top' || value === 'bottom' || value === 'left' || value === 'right')\n\t\t\t\t\ttabPosition = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioButton value=\"top\">top</AsamRadioButton>\n\t\t<AsamRadioButton value=\"right\">right</AsamRadioButton>\n\t\t<AsamRadioButton value=\"bottom\">bottom</AsamRadioButton>\n\t\t<AsamRadioButton value=\"left\">left</AsamRadioButton>\n\t</AsamRadioGroup>\n\n\t<AsamTabs :tab-position=\"tabPosition\" style=\"height: 200px\" class=\"demo-tabs\">\n\t\t<AsamTabPane label=\"用户\">用户</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapTabPositionDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst tabPosition = ref('left');\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n.el-tabs--right .el-tabs__content,\n.el-tabs--left .el-tabs__content {\n\theight: 100%;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "a8480dc82c1b1e2dcaa4f1befeedf4777c4094e581b24490090a7e254a4f418b",
									"notice": {
										"id": "b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3",
										"url": "/licenses/source-notices/b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt",
										"licenseFilename": "LICENSE-b9d479d5a2cca043aa0041b2893b0da40b34f4f5040d477514a2434b47a06de3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/tab-position.vue",
											"sourceSha256": "95115b713d591ae5fea6b553f3f56524de9f931ce738140257f611f6e6df09e2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-tab",
					"title": "自定义标签页的内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-custom-tab/ts/Demo.vue",
									"sha256": "8a939689bc7dde03754836876cf51aa3449a780663d8327048dbfe15ea4c4065",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt\n-->\n<template>\n\t<AsamTabs type=\"border-card\" class=\"demo-tabs\">\n\t\t<AsamTabPane>\n\t\t\t<template #label>\n\t\t\t\t<span class=\"custom-tabs-label\">\n\t\t\t\t\t<AsamIcon><calendar /></AsamIcon>\n\t\t\t\t\t<span>路由</span>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t路由\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapCustomTabDemo' });\nimport { AsamTabs, AsamTabPane, AsamIcon } from '@asam-ui/ui';\n\nimport { Calendar } from '@asam-ui/icons-vue';\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n.demo-tabs .custom-tabs-label .el-icon {\n\tvertical-align: middle;\n}\n\n.demo-tabs .custom-tabs-label span {\n\tvertical-align: middle;\n\tmargin-left: 4px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "922633111a64beb97a420db0116f716c35e8d5f2c41beb1dbac8c4806263e880",
									"notice": {
										"id": "c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4",
										"url": "/licenses/source-notices/c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt",
										"licenseFilename": "LICENSE-c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/custom-tab.vue",
											"sourceSha256": "0f71681c23306fcbdd87d799fcd4258cfa06ef0aee1a7b5a22cc26567f7be80c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-custom-tab/js/Demo.vue",
									"sha256": "dce4266c712b8f8e68eec124b010cfbe40503044149d2280df9e948e2d357ef8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt\n-->\n<template>\n\t<AsamTabs type=\"border-card\" class=\"demo-tabs\">\n\t\t<AsamTabPane>\n\t\t\t<template #label>\n\t\t\t\t<span class=\"custom-tabs-label\">\n\t\t\t\t\t<AsamIcon><calendar /></AsamIcon>\n\t\t\t\t\t<span>路由</span>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t路由\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"配置\">配置</AsamTabPane>\n\t\t<AsamTabPane label=\"角色\">角色</AsamTabPane>\n\t\t<AsamTabPane label=\"任务\">任务</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapCustomTabDemo' });\nimport { AsamTabs, AsamTabPane, AsamIcon } from '@asam-ui/ui';\nimport { Calendar } from '@asam-ui/icons-vue';\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n.demo-tabs .custom-tabs-label .el-icon {\n\tvertical-align: middle;\n}\n\n.demo-tabs .custom-tabs-label span {\n\tvertical-align: middle;\n\tmargin-left: 4px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "372b01a2f9009516944b116958d59873b4344e1053a3cca74af673158a9d3809",
									"notice": {
										"id": "c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4",
										"url": "/licenses/source-notices/c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt",
										"licenseFilename": "LICENSE-c539406cedbfe46d80b156fa86379296ff145070db143fa2a26337a84b91dad4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/custom-tab.vue",
											"sourceSha256": "0f71681c23306fcbdd87d799fcd4258cfa06ef0aee1a7b5a22cc26567f7be80c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-dynamic-tabs",
					"title": "动态增减标签页",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-dynamic-tabs/ts/Demo.vue",
									"sha256": "a8a2819f32d2054ee19677893ea99505395dbc1407f78693e820c0d6571584b4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt\n-->\n<template>\n\t<AsamTabs\n\t\t:model-value=\"editableTabsValue\"\n\t\ttype=\"card\"\n\t\teditable\n\t\tclass=\"demo-tabs\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') editableTabsValue = value;\n\t\t\t}\n\t\t\"\n\t\t@edit=\"handleTabsEdit\"\n\t>\n\t\t<AsamTabPane\n\t\t\tv-for=\"item in editableTabs\"\n\t\t\t:key=\"item.name\"\n\t\t\t:label=\"item.title\"\n\t\t\t:name=\"item.name\"\n\t\t>\n\t\t\t{{ item.content }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapDynamicTabsDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTabsTabPaneName } from '@asam-ui/ui';\n\nlet tabIndex = 2;\nconst editableTabsValue = ref('2');\nconst editableTabs = ref([\n\t{\n\t\ttitle: '标签页一',\n\t\tname: '1',\n\t\tcontent: 'Tab 1 content'\n\t},\n\t{\n\t\ttitle: '标签页二',\n\t\tname: '2',\n\t\tcontent: '标签页二的内容'\n\t}\n]);\n\nconst handleTabsEdit = (targetName: AsamTabsTabPaneName | undefined, action: 'remove' | 'add') => {\n\tif (action === 'add') {\n\t\tconst newTabName = `${++tabIndex}`;\n\t\teditableTabs.value.push({\n\t\t\ttitle: '新标签页',\n\t\t\tname: newTabName,\n\t\t\tcontent: '新标签页内容'\n\t\t});\n\t\teditableTabsValue.value = newTabName;\n\t} else if (action === 'remove') {\n\t\tconst tabs = editableTabs.value;\n\t\tlet activeName = editableTabsValue.value;\n\t\tif (activeName === targetName) {\n\t\t\ttabs.forEach((tab, index) => {\n\t\t\t\tif (tab.name === targetName) {\n\t\t\t\t\tconst nextTab = tabs[index + 1] || tabs[index - 1];\n\t\t\t\t\tif (nextTab) {\n\t\t\t\t\t\tactiveName = nextTab.name;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\teditableTabsValue.value = activeName;\n\t\teditableTabs.value = tabs.filter((tab) => tab.name !== targetName);\n\t}\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "f0bdc57abace2e7c475c3c0a62c193d6e23863c064c32b93316eaa34ffc6c170",
									"notice": {
										"id": "3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02",
										"url": "/licenses/source-notices/3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt",
										"licenseFilename": "LICENSE-3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/dynamic-tabs.vue",
											"sourceSha256": "396f20eef081fed3d66e2dd2df0ec560f39ec7b1d8fe12388067aab98002455b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-dynamic-tabs/js/Demo.vue",
									"sha256": "88ec9793d57a071425117a4c931850583a989731decf9d26cdb6f3920fcb9925",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt\n-->\n<template>\n\t<AsamTabs\n\t\t:model-value=\"editableTabsValue\"\n\t\ttype=\"card\"\n\t\teditable\n\t\tclass=\"demo-tabs\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') editableTabsValue = value;\n\t\t\t}\n\t\t\"\n\t\t@edit=\"handleTabsEdit\"\n\t>\n\t\t<AsamTabPane\n\t\t\tv-for=\"item in editableTabs\"\n\t\t\t:key=\"item.name\"\n\t\t\t:label=\"item.title\"\n\t\t\t:name=\"item.name\"\n\t\t>\n\t\t\t{{ item.content }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapDynamicTabsDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nlet tabIndex = 2;\nconst editableTabsValue = ref('2');\nconst editableTabs = ref([\n\t{\n\t\ttitle: '标签页一',\n\t\tname: '1',\n\t\tcontent: 'Tab 1 content'\n\t},\n\t{\n\t\ttitle: '标签页二',\n\t\tname: '2',\n\t\tcontent: '标签页二的内容'\n\t}\n]);\nconst handleTabsEdit = (targetName, action) => {\n\tif (action === 'add') {\n\t\tconst newTabName = `${++tabIndex}`;\n\t\teditableTabs.value.push({\n\t\t\ttitle: '新标签页',\n\t\t\tname: newTabName,\n\t\t\tcontent: '新标签页内容'\n\t\t});\n\t\teditableTabsValue.value = newTabName;\n\t} else if (action === 'remove') {\n\t\tconst tabs = editableTabs.value;\n\t\tlet activeName = editableTabsValue.value;\n\t\tif (activeName === targetName) {\n\t\t\ttabs.forEach((tab, index) => {\n\t\t\t\tif (tab.name === targetName) {\n\t\t\t\t\tconst nextTab = tabs[index + 1] || tabs[index - 1];\n\t\t\t\t\tif (nextTab) {\n\t\t\t\t\t\tactiveName = nextTab.name;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\teditableTabsValue.value = activeName;\n\t\teditableTabs.value = tabs.filter((tab) => tab.name !== targetName);\n\t}\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "ca4a9e22ce59b94ee3d6f72a5b7ff1966c069fcba7b11895f993a99e5ce45768",
									"notice": {
										"id": "3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02",
										"url": "/licenses/source-notices/3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt",
										"licenseFilename": "LICENSE-3f75e739406459f7df67cb163bdf92edda174a59914b3124332f1a0f025c1f02.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/dynamic-tabs.vue",
											"sourceSha256": "396f20eef081fed3d66e2dd2df0ec560f39ec7b1d8fe12388067aab98002455b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-add-button-icon",
					"title": "添加按钮自定义图标 2.4.0",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-customized-add-button-icon/ts/Demo.vue",
									"sha256": "d88fd3b17067fd97feb65de2b1e901c08bf5b5565dfb2113d3637a70945ced2f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt\n-->\naddIcon\n<template>\n\t<AsamTabs\n\t\t:model-value=\"editableTabsValue\"\n\t\ttype=\"card\"\n\t\tclass=\"demo-tabs\"\n\t\teditable\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') editableTabsValue = value;\n\t\t\t}\n\t\t\"\n\t\t@edit=\"handleTabsEdit\"\n\t>\n\t\t<template #add-icon>\n\t\t\t<AsamIcon><Select /></AsamIcon>\n\t\t</template>\n\t\t<AsamTabPane\n\t\t\tv-for=\"item in editableTabs\"\n\t\t\t:key=\"item.name\"\n\t\t\t:label=\"item.title\"\n\t\t\t:name=\"item.name\"\n\t\t>\n\t\t\t{{ item.content }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapCustomizedAddButtonIconDemo' });\nimport { AsamTabs, AsamIcon, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { Select } from '@asam-ui/icons-vue';\n\nimport type { AsamTabsTabPaneName } from '@asam-ui/ui';\n\nlet tabIndex = 2;\nconst editableTabsValue = ref('2');\nconst editableTabs = ref([\n\t{\n\t\ttitle: '标签页一',\n\t\tname: '1',\n\t\tcontent: 'Tab 1 content'\n\t},\n\t{\n\t\ttitle: '标签页二',\n\t\tname: '2',\n\t\tcontent: '标签页二的内容'\n\t}\n]);\n\nconst handleTabsEdit = (targetName: AsamTabsTabPaneName | undefined, action: 'remove' | 'add') => {\n\tif (action === 'add') {\n\t\tconst newTabName = `${++tabIndex}`;\n\t\teditableTabs.value.push({\n\t\t\ttitle: '新标签页',\n\t\t\tname: newTabName,\n\t\t\tcontent: '新标签页内容'\n\t\t});\n\t\teditableTabsValue.value = newTabName;\n\t} else if (action === 'remove') {\n\t\tconst tabs = editableTabs.value;\n\t\tlet activeName = editableTabsValue.value;\n\t\tif (activeName === targetName) {\n\t\t\ttabs.forEach((tab, index) => {\n\t\t\t\tif (tab.name === targetName) {\n\t\t\t\t\tconst nextTab = tabs[index + 1] || tabs[index - 1];\n\t\t\t\t\tif (nextTab) {\n\t\t\t\t\t\tactiveName = nextTab.name;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\teditableTabsValue.value = activeName;\n\t\teditableTabs.value = tabs.filter((tab) => tab.name !== targetName);\n\t}\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "9e3bac743f70611afe67cf102bb39809615e09564d8d68cbd9412023b6dd5f2b",
									"notice": {
										"id": "91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f",
										"url": "/licenses/source-notices/91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt",
										"licenseFilename": "LICENSE-91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/customized-add-button-icon.vue",
											"sourceSha256": "2d8ce883b1e4930aa9aaf1e770904f49fb2d91aab48742d40f51803de4f39a2c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-customized-add-button-icon/js/Demo.vue",
									"sha256": "cfeee28b07c89d271d147bfcdc7dc6b3d0046c816003043b7a2c077df57931d8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt\n-->\naddIcon\n<template>\n\t<AsamTabs\n\t\t:model-value=\"editableTabsValue\"\n\t\ttype=\"card\"\n\t\tclass=\"demo-tabs\"\n\t\teditable\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') editableTabsValue = value;\n\t\t\t}\n\t\t\"\n\t\t@edit=\"handleTabsEdit\"\n\t>\n\t\t<template #add-icon>\n\t\t\t<AsamIcon><Select /></AsamIcon>\n\t\t</template>\n\t\t<AsamTabPane\n\t\t\tv-for=\"item in editableTabs\"\n\t\t\t:key=\"item.name\"\n\t\t\t:label=\"item.title\"\n\t\t\t:name=\"item.name\"\n\t\t>\n\t\t\t{{ item.content }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapCustomizedAddButtonIconDemo' });\nimport { AsamTabs, AsamIcon, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { Select } from '@asam-ui/icons-vue';\nlet tabIndex = 2;\nconst editableTabsValue = ref('2');\nconst editableTabs = ref([\n\t{\n\t\ttitle: '标签页一',\n\t\tname: '1',\n\t\tcontent: 'Tab 1 content'\n\t},\n\t{\n\t\ttitle: '标签页二',\n\t\tname: '2',\n\t\tcontent: '标签页二的内容'\n\t}\n]);\nconst handleTabsEdit = (targetName, action) => {\n\tif (action === 'add') {\n\t\tconst newTabName = `${++tabIndex}`;\n\t\teditableTabs.value.push({\n\t\t\ttitle: '新标签页',\n\t\t\tname: newTabName,\n\t\t\tcontent: '新标签页内容'\n\t\t});\n\t\teditableTabsValue.value = newTabName;\n\t} else if (action === 'remove') {\n\t\tconst tabs = editableTabs.value;\n\t\tlet activeName = editableTabsValue.value;\n\t\tif (activeName === targetName) {\n\t\t\ttabs.forEach((tab, index) => {\n\t\t\t\tif (tab.name === targetName) {\n\t\t\t\t\tconst nextTab = tabs[index + 1] || tabs[index - 1];\n\t\t\t\t\tif (nextTab) {\n\t\t\t\t\t\tactiveName = nextTab.name;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\teditableTabsValue.value = activeName;\n\t\teditableTabs.value = tabs.filter((tab) => tab.name !== targetName);\n\t}\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "a2d77d2ddabe231a44d016f65b2784b529005b58b019eed94826ca6009a95f6e",
									"notice": {
										"id": "91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f",
										"url": "/licenses/source-notices/91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt",
										"licenseFilename": "LICENSE-91a04bbd3b6f136cbf549730208b95d43e059c16154f5090fccdc427c3b51d0f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/customized-add-button-icon.vue",
											"sourceSha256": "2d8ce883b1e4930aa9aaf1e770904f49fb2d91aab48742d40f51803de4f39a2c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-trigger",
					"title": "增加标签页触发器自定义",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-customized-trigger/ts/Demo.vue",
									"sha256": "118af35216e83f71fa91b1a0c6a9c1db1d6872dbb7e92c8814effd5c1a56ed21",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt\n-->\n<template>\n\t<div style=\"margin-bottom: 20px\">\n\t\t<AsamButton type=\"default\" size=\"small\" @click=\"addTab(editableTabsValue)\">\n\t\t\t新增标签页\n\t\t</AsamButton>\n\t</div>\n\t<AsamTabs\n\t\t:model-value=\"editableTabsValue\"\n\t\ttype=\"card\"\n\t\tclass=\"demo-tabs\"\n\t\tclosable\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') editableTabsValue = value;\n\t\t\t}\n\t\t\"\n\t\t@tab-remove=\"removeTab\"\n\t>\n\t\t<AsamTabPane\n\t\t\tv-for=\"item in editableTabs\"\n\t\t\t:key=\"item.name\"\n\t\t\t:label=\"item.title\"\n\t\t\t:name=\"item.name\"\n\t\t>\n\t\t\t{{ item.content }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapCustomizedTriggerDemo' });\nimport { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTabsTabPaneName } from '@asam-ui/ui';\n\nlet tabIndex = 2;\nconst editableTabsValue = ref('2');\nconst editableTabs = ref([\n\t{\n\t\ttitle: '标签页一',\n\t\tname: '1',\n\t\tcontent: 'Tab 1 content'\n\t},\n\t{\n\t\ttitle: '标签页二',\n\t\tname: '2',\n\t\tcontent: '标签页二的内容'\n\t}\n]);\n\nconst addTab = (targetName: string) => {\n\tvoid targetName;\n\tconst newTabName = `${++tabIndex}`;\n\teditableTabs.value.push({\n\t\ttitle: '新标签页',\n\t\tname: newTabName,\n\t\tcontent: '新标签页内容'\n\t});\n\teditableTabsValue.value = newTabName;\n};\nconst removeTab = (targetName: AsamTabsTabPaneName) => {\n\tconst tabs = editableTabs.value;\n\tlet activeName = editableTabsValue.value;\n\tif (activeName === targetName) {\n\t\ttabs.forEach((tab, index) => {\n\t\t\tif (tab.name === targetName) {\n\t\t\t\tconst nextTab = tabs[index + 1] || tabs[index - 1];\n\t\t\t\tif (nextTab) {\n\t\t\t\t\tactiveName = nextTab.name;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\teditableTabsValue.value = activeName;\n\teditableTabs.value = tabs.filter((tab) => tab.name !== targetName);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "3b5b616f9473c9a7adec181f51ae9043eee25b803bf23ec9982de0f1a2d37eec",
									"notice": {
										"id": "27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7",
										"url": "/licenses/source-notices/27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt",
										"licenseFilename": "LICENSE-27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/customized-trigger.vue",
											"sourceSha256": "556518b8682314d89626b7c64594b25908b9628e68e724c0b0374ab630771113",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-customized-trigger/js/Demo.vue",
									"sha256": "3ad32cbeaa1cd65e42d3ad508da63b7193525052de8712a0f6f131aebe13a117",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt\n-->\n<template>\n\t<div style=\"margin-bottom: 20px\">\n\t\t<AsamButton type=\"default\" size=\"small\" @click=\"addTab(editableTabsValue)\">\n\t\t\t新增标签页\n\t\t</AsamButton>\n\t</div>\n\t<AsamTabs\n\t\t:model-value=\"editableTabsValue\"\n\t\ttype=\"card\"\n\t\tclass=\"demo-tabs\"\n\t\tclosable\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') editableTabsValue = value;\n\t\t\t}\n\t\t\"\n\t\t@tab-remove=\"removeTab\"\n\t>\n\t\t<AsamTabPane\n\t\t\tv-for=\"item in editableTabs\"\n\t\t\t:key=\"item.name\"\n\t\t\t:label=\"item.title\"\n\t\t\t:name=\"item.name\"\n\t\t>\n\t\t\t{{ item.content }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapCustomizedTriggerDemo' });\nimport { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nlet tabIndex = 2;\nconst editableTabsValue = ref('2');\nconst editableTabs = ref([\n\t{\n\t\ttitle: '标签页一',\n\t\tname: '1',\n\t\tcontent: 'Tab 1 content'\n\t},\n\t{\n\t\ttitle: '标签页二',\n\t\tname: '2',\n\t\tcontent: '标签页二的内容'\n\t}\n]);\nconst addTab = (targetName) => {\n\tvoid targetName;\n\tconst newTabName = `${++tabIndex}`;\n\teditableTabs.value.push({\n\t\ttitle: '新标签页',\n\t\tname: newTabName,\n\t\tcontent: '新标签页内容'\n\t});\n\teditableTabsValue.value = newTabName;\n};\nconst removeTab = (targetName) => {\n\tconst tabs = editableTabs.value;\n\tlet activeName = editableTabsValue.value;\n\tif (activeName === targetName) {\n\t\ttabs.forEach((tab, index) => {\n\t\t\tif (tab.name === targetName) {\n\t\t\t\tconst nextTab = tabs[index + 1] || tabs[index - 1];\n\t\t\t\tif (nextTab) {\n\t\t\t\t\tactiveName = nextTab.name;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\teditableTabsValue.value = activeName;\n\teditableTabs.value = tabs.filter((tab) => tab.name !== targetName);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "25298f9fd878671d597bebbd156c1b2068b8ec169d52d5ef7b60a5e51defe7df",
									"notice": {
										"id": "27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7",
										"url": "/licenses/source-notices/27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt",
										"licenseFilename": "LICENSE-27a1ee50e9ea6238b62b521e5ebaaa3b24e2937491f280afcb35e330fa489cb7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/customized-trigger.vue",
											"sourceSha256": "556518b8682314d89626b7c64594b25908b9628e68e724c0b0374ab630771113",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-default-value",
					"title": "默认值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-default-value/ts/Demo.vue",
									"sha256": "fddcbfe0aca3f767f32ca23bdecbbc2ac8b73ba27c4745f765047e4d4d29344d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt\n-->\n<template>\n\t<AsamTabs v-model=\"activeName\" class=\"demo-tabs\" default-value=\"third\" @tab-click=\"handleClick\">\n\t\t<AsamTabPane v-for=\"tab in tabs\" :key=\"tab.name\" :label=\"tab.label\" :name=\"tab.name\">\n\t\t\tdefault-value：第三项\n\t\t\t<br />\n\t\t\t当前项： {{ activeName }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabsCapDefaultValueDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTabsPaneContext } from '@asam-ui/ui';\n\nconst tabs = ref([\n\t{ label: '用户', name: 'first' },\n\t{ label: '配置', name: 'second' },\n\t{ label: '角色', name: 'third' },\n\t{ label: '任务', name: 'fourth' }\n]);\n\nconst activeName = ref();\n\nconst handleClick = (tab: AsamTabsPaneContext, event: Event) => {\n\tconsole.log(tab, event);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "a8a3e5ec83dd0958abf69df8dd5b04f0c582f6bcbd80df26b1b69c66573b446b",
									"notice": {
										"id": "e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8",
										"url": "/licenses/source-notices/e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt",
										"licenseFilename": "LICENSE-e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/default-value.vue",
											"sourceSha256": "859495b97cfb59a677e81b8af8d5a4645425448bf4648076c842269b1309a2a3",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/cap-default-value/js/Demo.vue",
									"sha256": "2e242ea2b231599c10a6af1c7a8cb2dc2faeddf0037c358a4cf2035b81e5c193",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt\n-->\n<template>\n\t<AsamTabs v-model=\"activeName\" class=\"demo-tabs\" default-value=\"third\" @tab-click=\"handleClick\">\n\t\t<AsamTabPane v-for=\"tab in tabs\" :key=\"tab.name\" :label=\"tab.label\" :name=\"tab.name\">\n\t\t\tdefault-value：第三项\n\t\t\t<br />\n\t\t\t当前项： {{ activeName }}\n\t\t</AsamTabPane>\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabsCapDefaultValueDemo' });\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst tabs = ref([\n\t{ label: '用户', name: 'first' },\n\t{ label: '配置', name: 'second' },\n\t{ label: '角色', name: 'third' },\n\t{ label: '任务', name: 'fourth' }\n]);\nconst activeName = ref();\nconst handleClick = (tab, event) => {\n\tconsole.log(tab, event);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-tabs > .el-tabs__content {\n\tpadding: 32px;\n\tcolor: #6b778c;\n\tfont-size: 32px;\n\tfont-weight: 600;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "562c1f25fe55afcae7c43503a0ec0527a1beace0cae840d332461eeb4d6ac9a0",
									"notice": {
										"id": "e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8",
										"url": "/licenses/source-notices/e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt",
										"licenseFilename": "LICENSE-e5a988abe2c2c898678af0aa757096de6185edd38347f455cf553c1523c605c8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tabs/default-value.vue",
											"sourceSha256": "859495b97cfb59a677e81b8af8d5a4645425448bf4648076c842269b1309a2a3",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "behavior",
					"title": "触摸、键盘与嵌套实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/behavior/ts/Demo.vue",
									"sha256": "9b12f2612348655f79709d98ee75180d466923a7dc97798d69252501c2b1f81c",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tactive = '24';\n\t\t\t\t\ttabs?.tabNavRef?.scrollToActiveTab();\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t选择末项\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"active = '1'\"\n\t\t\t\t>选择首项</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"position = position === 'top' ? 'left' : 'top'\"\n\t\t\t>\n\t\t\t\t切换方向\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>调用嵌套实例</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamTabs\n\t\t\tref=\"tabs\"\n\t\t\t:model-value=\"active\"\n\t\t\t:tab-position=\"position\"\n\t\t\tclass=\"touch-tabs\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'string') active = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamTabPane\n\t\t\t\tv-for=\"i in 24\"\n\t\t\t\t:key=\"i\"\n\t\t\t\t:name=\"String(i)\"\n\t\t\t\t:label=\"'标签 ' + i\"\n\t\t\t\t:disabled=\"i === 2\"\n\t\t\t>\n\t\t\t\t正文 {{ i }}\n\t\t\t</AsamTabPane>\n\t\t</AsamTabs>\n\t\t<output v-bind=\"domDataAttrs('data-state', 'active')\">{{ active }}</output\n\t\t><output v-bind=\"domDataAttrs('data-state', 'nested')\">{{ result }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamTabsBehaviorDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport type { AsamTabsExpose, AsamTabsProps } from '@asam-ui/ui';\nconst active = ref('1');\nconst position = ref<AsamTabsProps['tabPosition']>('top');\nconst tabs = ref<AsamTabsExpose>();\nconst result = ref('');\nconst inspect = async () => {\n\tconst nav = tabs.value?.tabNavRef;\n\tawait nav?.scrollToActiveTab();\n\tawait nav?.focusActiveTab();\n\tnav?.removeFocus();\n\tnav?.tabBarRef?.update();\n\tresult.value = nav?.tabListRef && nav?.tabBarRef?.ref ? 'nested-ready' : 'not-mounted';\n};\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n<style scoped>\n.touch-tabs {\n\twidth: 320px;\n\theight: 240px;\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabs/behavior/js/Demo.vue",
									"sha256": "7808a94f7aef1ab219f66f7750f1425a54b39179925fc526bcda24b1ca57a979",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tactive = '24';\n\t\t\t\t\ttabs?.tabNavRef?.scrollToActiveTab();\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t选择末项\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"active = '1'\"\n\t\t\t\t>选择首项</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"position = position === 'top' ? 'left' : 'top'\"\n\t\t\t>\n\t\t\t\t切换方向\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>调用嵌套实例</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamTabs\n\t\t\tref=\"tabs\"\n\t\t\t:model-value=\"active\"\n\t\t\t:tab-position=\"position\"\n\t\t\tclass=\"touch-tabs\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'string') active = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamTabPane\n\t\t\t\tv-for=\"i in 24\"\n\t\t\t\t:key=\"i\"\n\t\t\t\t:name=\"String(i)\"\n\t\t\t\t:label=\"'标签 ' + i\"\n\t\t\t\t:disabled=\"i === 2\"\n\t\t\t>\n\t\t\t\t正文 {{ i }}\n\t\t\t</AsamTabPane>\n\t\t</AsamTabs>\n\t\t<output v-bind=\"domDataAttrs('data-state', 'active')\">{{ active }}</output\n\t\t><output v-bind=\"domDataAttrs('data-state', 'nested')\">{{ result }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTabsBehaviorDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTabs, AsamTabPane } from '@asam-ui/ui';\nconst active = ref('1');\nconst position = ref('top');\nconst tabs = ref();\nconst result = ref('');\nconst inspect = async () => {\n\tconst nav = tabs.value?.tabNavRef;\n\tawait nav?.scrollToActiveTab();\n\tawait nav?.focusActiveTab();\n\tnav?.removeFocus();\n\tnav?.tabBarRef?.update();\n\tresult.value = nav?.tabListRef && nav?.tabBarRef?.ref ? 'nested-ready' : 'not-mounted';\n};\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n<style scoped>\n.touch-tabs {\n\twidth: 320px;\n\theight: 240px;\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamInput",
			"documentation": "/component-AsamInput.html",
			"demos": [
				{
					"id": "basic",
					"title": "双向绑定与输入状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/basic/ts/Demo.vue",
									"sha256": "504f6caa67bdb7d3ac24a36d40380bacb0b780ecabb7ce0868329b186bfa9b1c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '项目名称' }\"\n\t\t\tplaceholder=\"请输入项目名称\"\n\t\t\tclearable\n\t\t\t:maxlength=\"20\"\n\t\t\tshow-word-limit\n\t\t\t@input=\"event = 'input: ' + $event\"\n\t\t\t@change=\"event = 'change: ' + $event\"\n\t\t\t@clear=\"event = 'clear'\"\n\t\t/>\n\t\t<AsamInput\n\t\t\tmodel-value=\"只读值\"\n\t\t\treadonly\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '只读项目' }\"\n\t\t/>\n\t\t<AsamInput\n\t\t\tmodel-value=\"禁用值\"\n\t\t\tdisabled\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '禁用项目' }\"\n\t\t/>\n\t\t<output>当前值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('ASAM');\nconst event = ref('尚未输入');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/basic/js/Demo.vue",
									"sha256": "e6a0c66d7f08e461dd6ed839dc60f5acce65921e1451f8ddc1b2de207ddf4439",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '项目名称' }\"\n\t\t\tplaceholder=\"请输入项目名称\"\n\t\t\tclearable\n\t\t\t:maxlength=\"20\"\n\t\t\tshow-word-limit\n\t\t\t@input=\"event = 'input: ' + $event\"\n\t\t\t@change=\"event = 'change: ' + $event\"\n\t\t\t@clear=\"event = 'clear'\"\n\t\t/>\n\t\t<AsamInput\n\t\t\tmodel-value=\"只读值\"\n\t\t\treadonly\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '只读项目' }\"\n\t\t/>\n\t\t<AsamInput\n\t\t\tmodel-value=\"禁用值\"\n\t\t\tdisabled\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '禁用项目' }\"\n\t\t/>\n\t\t<output>当前值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('ASAM');\nconst event = ref('尚未输入');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "decoration",
					"title": "图标、前后缀与复合输入",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/decoration/ts/Demo.vue",
									"sha256": "4b957dc40254e085b90640fa623e87b594034dedf62260391cd6fefea4204a77",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"email\"\n\t\t\tclass=\"field\"\n\t\t\ttype=\"email\"\n\t\t\taria-label=\"联系邮箱\"\n\t\t\t:prefix-icon=\"Message\"\n\t\t\t:suffix-icon=\"Check\"\n\t\t/>\n\t\t<AsamInput v-model=\"site\" v-bind=\"{ class: 'field', 'aria-label': '站点名称' }\">\n\t\t\t<template #prepend> https:// </template>\n\t\t\t<template #append> .example </template>\n\t\t</AsamInput>\n\t\t<AsamInput v-model=\"query\" v-bind=\"{ class: 'field', 'aria-label': '搜索关键词' }\">\n\t\t\t<template #prefix>\n\t\t\t\t<Search style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #suffix> 关键词 </template>\n\t\t</AsamInput>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputDecorationExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nimport { Message, Check, Search } from '@asam-ui/icons-vue';\nconst email = ref('team@example.com');\nconst site = ref('asam');\nconst query = ref('');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/decoration/js/Demo.vue",
									"sha256": "03cad43af635f651153ebfecff4f56961cfde3101d27746832c593913d751bea",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"email\"\n\t\t\tclass=\"field\"\n\t\t\ttype=\"email\"\n\t\t\taria-label=\"联系邮箱\"\n\t\t\t:prefix-icon=\"Message\"\n\t\t\t:suffix-icon=\"Check\"\n\t\t/>\n\t\t<AsamInput v-model=\"site\" v-bind=\"{ class: 'field', 'aria-label': '站点名称' }\">\n\t\t\t<template #prepend> https:// </template>\n\t\t\t<template #append> .example </template>\n\t\t</AsamInput>\n\t\t<AsamInput v-model=\"query\" v-bind=\"{ class: 'field', 'aria-label': '搜索关键词' }\">\n\t\t\t<template #prefix>\n\t\t\t\t<Search style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #suffix> 关键词 </template>\n\t\t</AsamInput>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputDecorationExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nimport { Message, Check, Search } from '@asam-ui/icons-vue';\nconst email = ref('team@example.com');\nconst site = ref('asam');\nconst query = ref('');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "format",
					"title": "格式化与解析",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/format/ts/Demo.vue",
									"sha256": "dafc753f1b328c16fb97a34ee1ccfd325927955bcce530f0c67f20421e8253bb",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"amount\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '预算' }\"\n\t\t\t:formatter=\"formatAmount\"\n\t\t\t:parser=\"parseAmount\"\n\t\t/>\n\t\t<output>模型值：{{ amount }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputFormatExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nimport { formatAmount, parseAmount } from './format';\nconst amount = ref('1200');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "format.ts",
									"sourcePath": "apps/website/examples/AsamInput/format/ts/format.ts",
									"sha256": "c5559a23f55d742cfc3c93f03ef988175cc2a027357bbb82a0f3f6e282935731",
									"source": "export function formatAmount(value: string | number) {\n\treturn '$ ' + String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\nexport function parseAmount(value: string) {\n\treturn value.replace(/[$ ,]/g, '');\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/format/js/Demo.vue",
									"sha256": "546869287319eba40db1e8d1656da5a4736e228dba6ba209847b90c288350ca1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"amount\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '预算' }\"\n\t\t\t:formatter=\"formatAmount\"\n\t\t\t:parser=\"parseAmount\"\n\t\t/>\n\t\t<output>模型值：{{ amount }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputFormatExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nimport { formatAmount, parseAmount } from './format';\nconst amount = ref('1200');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "format.js",
									"sourcePath": "apps/website/examples/AsamInput/format/js/format.js",
									"sha256": "c9d54aa9655da651c16896fe201fe905211eea8137bf5f7e8f44c51d4e8939c0",
									"source": "export function formatAmount(value) {\n\treturn '$ ' + String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\nexport function parseAmount(value) {\n\treturn value.replace(/[$ ,]/g, '');\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "聚焦、选中与清空",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/instance/ts/Demo.vue",
									"sha256": "3d546544a5e1a33402144ac76df7442719bda8ef7d8e2df33a28f6f9e9fd6263",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例操作输入' }\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.select()\"> 选中 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.clear()\"> 清空 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t\t<output>当前值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton } from '@asam-ui/ui';\nimport type { AsamInputExpose } from '@asam-ui/ui';\nconst input = ref<AsamInputExpose>();\nconst value = ref('可以选中的文本');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/instance/js/Demo.vue",
									"sha256": "b1c8f9f36176e568c92b8deb4d5d95f7f92d516b6c9abf518b6d149cb1f7a294",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例操作输入' }\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.select()\"> 选中 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.clear()\"> 清空 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t\t<output>当前值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton } from '@asam-ui/ui';\nconst input = ref();\nconst value = ref('可以选中的文本');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/sizes/ts/Demo.vue",
									"sha256": "d79c9b353de3ed3c63278e806ffce8bfcec9db8f4e2f82959e5b2a1bcdd905e1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamInput\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamInput\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamInput\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamInput\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputSizesExample' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/sizes/js/Demo.vue",
									"sha256": "3758529f9792df8466762711311561f29b4a7fa9426848d23a2172c988a6e8a3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamInput\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamInput\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamInput\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamInput\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputSizesExample' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "constraints",
					"title": "原生约束与可访问性",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/constraints/ts/Demo.vue",
									"sha256": "6137eaf6a1c6180e2dcd379fac88bf520c900da0b18c306574bc72e910851769",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\ttype=\"number\"\n\t\t\tmin=\"1\"\n\t\t\tmax=\"10\"\n\t\t\tstep=\"2\"\n\t\t\tname=\"quantity\"\n\t\t\tinputmode=\"numeric\"\n\t\t\taria-label=\"奇数数量\"\n\t\t/><output>字符串模型：{{ value }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tmin/max/step 是浏览器原生有效性约束，不自动裁剪模型；需要数值步进与裁剪时使用数字输入。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputConstraintsExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('3');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/constraints/js/Demo.vue",
									"sha256": "ea6d243784cb89e8c97929a67fb68debb1325686f61a5e22c3ed92eff3f441b1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\ttype=\"number\"\n\t\t\tmin=\"1\"\n\t\t\tmax=\"10\"\n\t\t\tstep=\"2\"\n\t\t\tname=\"quantity\"\n\t\t\tinputmode=\"numeric\"\n\t\t\taria-label=\"奇数数量\"\n\t\t/><output>字符串模型：{{ value }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tmin/max/step 是浏览器原生有效性约束，不自动裁剪模型；需要数值步进与裁剪时使用数字输入。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputConstraintsExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('3');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "graphemes",
					"title": "字素计数与长度限制",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/graphemes/ts/Demo.vue",
									"sha256": "4c5eaeaca82409d22ec47e33760ab94094cb40eca5a7793f11e4f6935d91c7a1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\t:maxlength=\"5\"\n\t\t\t:count-graphemes=\"count\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\taria-label=\"五个字符\"\n\t\t/>\n\t\t<p class=\"example-paragraph\">\n\t\t\t试输组合 emoji、带音调字母。计数按可见字素；传入 countGraphemes 后原生\n\t\t\tminlength/maxlength 不再设置。\n\t\t</p>\n\t\t<output>{{ value }}；{{ count(value) }} 个字素</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputGraphemesExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('👨‍👩‍👧‍👦');\nconst segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\nconst count = (text: string) => Array.from(segmenter.segment(text)).length;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/graphemes/js/Demo.vue",
									"sha256": "8cef639970a1a547a692e60846f0ff8e13dabb6e9a87d4cdeaa0c06bc19abba7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\t:maxlength=\"5\"\n\t\t\t:count-graphemes=\"count\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\taria-label=\"五个字符\"\n\t\t/>\n\t\t<p class=\"example-paragraph\">\n\t\t\t试输组合 emoji、带音调字母。计数按可见字素；传入 countGraphemes 后原生\n\t\t\tminlength/maxlength 不再设置。\n\t\t</p>\n\t\t<output>{{ value }}；{{ count(value) }} 个字素</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputGraphemesExample' });\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('👨‍👩‍👧‍👦');\nconst segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\nconst count = (text) => Array.from(segmenter.segment(text)).length;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "clear-icon",
					"title": "自定义清空与 IME 事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/clear-icon/ts/Demo.vue",
									"sha256": "34b4c5227cc6c7c64d5fb1067908185bdcba977688fca0980f9a761e5678229f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"clearIcon\"\n\t\t\taria-label=\"自定义清空\"\n\t\t\t@clear=\"events.push('clear')\"\n\t\t\t@compositionstart=\"record\"\n\t\t\t@compositionupdate=\"record\"\n\t\t\t@compositionend=\"record\"\n\t\t/><output>{{ events.join(', ') }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputClearIconExample' });\nimport { ref, h } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('可清空');\nconst events = ref<string[]>([]);\nconst clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');\nfunction record(event: CompositionEvent) {\n\tevents.value.push(event.type);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/clear-icon/js/Demo.vue",
									"sha256": "ed95b21bf594cf24a6cc30de01a9126ba8b1c514f5985b3ffb254d5b68a09304",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"clearIcon\"\n\t\t\taria-label=\"自定义清空\"\n\t\t\t@clear=\"events.push('clear')\"\n\t\t\t@compositionstart=\"record\"\n\t\t\t@compositionupdate=\"record\"\n\t\t\t@compositionend=\"record\"\n\t\t/><output>{{ events.join(', ') }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputClearIconExample' });\nimport { ref, h } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\nconst value = ref('可清空');\nconst events = ref([]);\nconst clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');\nfunction record(event) {\n\tevents.value.push(event.type);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "modifiers",
					"title": "模型修饰符与数字更新",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/modifiers/ts/Demo.vue",
									"sha256": "9de15a6842045c011aa683b909ca7d41259480838237e6756f28be6b8b3a2050",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model.trim.number.lazy=\"value\"\n\t\t\taria-label=\"修饰符输入\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy\n\t\t\t在提交时更新。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamInput } from '@asam-ui/ui';\nimport type { AsamInputEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputModifiersExample' });\nconst value = ref<string | number>('');\nconst updates = ref<(string | number)[]>([]);\nfunction record(...[value]: AsamInputEmits['update:modelValue']) {\n\tupdates.value.push(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/modifiers/js/Demo.vue",
									"sha256": "bbdc0b58aa3e0f8077a0affbffe2655a0c8b3aa5df1470c362c68edcdbe4a138",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInput\n\t\t\tv-model.trim.number.lazy=\"value\"\n\t\t\taria-label=\"修饰符输入\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy\n\t\t\t在提交时更新。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamInput } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputModifiersExample' });\nconst value = ref('');\nconst updates = ref([]);\nfunction record(...[value]) {\n\tupdates.value.push(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form-inputs",
					"title": "五入口表单继承与校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/form-inputs/ts/Demo.vue",
									"sha256": "9a3ae0f474c1c59619f4c4dbc496c236424820088b3d00deca764e4e70a02443",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({\n\tinput: '',\n\tpassword: '',\n\ttextarea: '',\n\tautocomplete: '',\n\ttags: [] as string[]\n});\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref<AsamBaseFormExpose>();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref<{ prop: string; valid: boolean }[]>([]);\nfunction record(prop: string | string[], valid: boolean) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/form-inputs/js/Demo.vue",
									"sha256": "55507e95d0a63bc8acfdcc59f65911401ee05d1d2ed8d6ccd72c91ac83fb4cab",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref([]);\nfunction record(prop, valid) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dynamic-type",
					"title": "动态原生类型与状态保留",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/dynamic-type/ts/Demo.vue",
									"sha256": "b7fd22f444f92e3d371e6b6fca553af4bae77ac777250a8f73941ab79471f2a8",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tv-for=\"kind in kinds\"\n\t\t\t\t:key=\"kind\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@pointerdown.prevent\n\t\t\t\t@click=\"type = kind\"\n\t\t\t>\n\t\t\t\t{{ kind }}\n\t\t\t</AsamButton>\n\t\t\t<span>先输入 42，再保持焦点切换类型；前缀按钮的计数应保留。</span>\n\t\t</div>\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\taria-label=\"动态输入类型\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t>\n\t\t\t<template #prefix><SlotCounter /></template>\n\t\t</AsamInput>\n\t\t<output>{{ JSON.stringify({ type, value, inputs }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tnumber 的 min/max/step 保留原生约束；切回 text\n\t\t\t后继续编辑。类型切换与光标行为由底层输入处理。number\n\t\t\t不支持文本选区，调用文本选区方法可能抛出\n\t\t\tInvalidStateError；此入口不补做游标恢复，也不保证未提交编辑值或焦点跨类型保留。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputDynamicTypeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamInput } from '@asam-ui/ui';\nimport SlotCounter from './SlotCounter.vue';\nconst kinds = ['text', 'number'] as const;\nconst type = ref<(typeof kinds)[number]>('text');\nconst value = ref<string | number>('42');\nconst inputs = ref<(string | number)[]>([]);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SlotCounter.vue",
									"sourcePath": "apps/website/examples/AsamInput/dynamic-type/ts/SlotCounter.vue",
									"sha256": "93e28d9d9ad2e9aad8dcbecaeaf990061cc6f3a06af1d4c157c565359a5e1f40",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\"\n\t\t>前缀计数 {{ count }}</AsamButton\n\t>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/dynamic-type/js/Demo.vue",
									"sha256": "0b5eefdca5c166e93c40b6a40dfb278ea4a8ce1dfc737fda03b287984ce05a6d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tv-for=\"kind in kinds\"\n\t\t\t\t:key=\"kind\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@pointerdown.prevent\n\t\t\t\t@click=\"type = kind\"\n\t\t\t>\n\t\t\t\t{{ kind }}\n\t\t\t</AsamButton>\n\t\t\t<span>先输入 42，再保持焦点切换类型；前缀按钮的计数应保留。</span>\n\t\t</div>\n\t\t<AsamInput\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\taria-label=\"动态输入类型\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t>\n\t\t\t<template #prefix><SlotCounter /></template>\n\t\t</AsamInput>\n\t\t<output>{{ JSON.stringify({ type, value, inputs }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tnumber 的 min/max/step 保留原生约束；切回 text\n\t\t\t后继续编辑。类型切换与光标行为由底层输入处理。number\n\t\t\t不支持文本选区，调用文本选区方法可能抛出\n\t\t\tInvalidStateError；此入口不补做游标恢复，也不保证未提交编辑值或焦点跨类型保留。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputDynamicTypeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamInput } from '@asam-ui/ui';\nimport SlotCounter from './SlotCounter.vue';\nconst kinds = ['text', 'number'];\nconst type = ref('text');\nconst value = ref('42');\nconst inputs = ref([]);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SlotCounter.vue",
									"sourcePath": "apps/website/examples/AsamInput/dynamic-type/js/SlotCounter.vue",
									"sha256": "7e9ccded7731443c0828a76d7511bd44223855832daa687a3b8573c76584ead5",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\"\n\t\t>前缀计数 {{ count }}</AsamButton\n\t>\n</template>\n<script setup>\nimport { AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-delegation",
					"title": "原生委托与事件记录",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/native-delegation/ts/Demo.vue",
									"sha256": "d3602dc74cc3b25da4696adc3fa171a8c4b868bcff48749b753e985f7a4b38ec",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamInput\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamInput } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNativeDelegationExample' });\nconst asam = ref<string | number>('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref<{ source: string; event: string; values: unknown[] }[]>([]);\nfunction record(source: string, event: string, ...values: unknown[]) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInput/native-delegation/js/Demo.vue",
									"sha256": "051db71a13a618ee76c48ed0456ea372b1127c827b8b64b394be13efc91a1840",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamInput\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamInput } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNativeDelegationExample' });\nconst asam = ref('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref([]);\nfunction record(source, event, ...values) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamInputOtp",
			"documentation": "/component-AsamInputOtp.html",
			"demos": [
				{
					"id": "basic",
					"title": "输入、完成与组焦点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/basic/ts/Demo.vue",
									"sha256": "1388bc4b9ad917e0bef5a77bd4bb5819a16e1ef11af4b9dcd5efc2eca874fb06",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tv-model=\"code\"\n\t\t\taria-label=\"短信验证码\"\n\t\t\t@finish=\"finished = $event\"\n\t\t\t@change=\"changed = $event\"\n\t\t\t@focus=\"focused = true\"\n\t\t\t@blur=\"focused = false\"\n\t\t/>\n\t\t<output>模型：{{ code }}；完成：{{ finished }}；提交：{{ changed }}；组焦点：{{\n\t\t\tfocused\n\t\t}}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('');\nconst finished = ref('');\nconst changed = ref('');\nconst focused = ref(false);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/basic/js/Demo.vue",
									"sha256": "65bcb57428bb1a415b74dbeb8e7e021cf33f252088a9b1c602fa18d6d44d42ba",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tv-model=\"code\"\n\t\t\taria-label=\"短信验证码\"\n\t\t\t@finish=\"finished = $event\"\n\t\t\t@change=\"changed = $event\"\n\t\t\t@focus=\"focused = true\"\n\t\t\t@blur=\"focused = false\"\n\t\t/>\n\t\t<output>模型：{{ code }}；完成：{{ finished }}；提交：{{ changed }}；组焦点：{{\n\t\t\tfocused\n\t\t}}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('');\nconst finished = ref('');\nconst changed = ref('');\nconst focused = ref(false);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "length",
					"title": "长度与外部模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/length/ts/Demo.vue",
									"sha256": "33b13e0be1d480421761c6cd4627d65db3af97ac8061589a96c74667573c4382",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<label>长度 <AsamInputNumber\n\t\t\tv-model.number=\"length\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"8\"\n\t\t /> </label>\n\t\t<AsamInputOtp v-model=\"code\" :length=\"length\" aria-label=\"可变长度验证码\" />\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"code = '01234567'\">外部填入含前导零的模型</AsamButton>\n\t\t<output>{{ code }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpLengthExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamButton, AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('0123');\nconst length = ref(4);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/length/js/Demo.vue",
									"sha256": "05f524350d3a6324478cfb86944d22e040bf850c73e6149682be89070172feb8",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<label>长度 <AsamInputNumber\n\t\t\tv-model.number=\"length\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"8\"\n\t\t /> </label>\n\t\t<AsamInputOtp v-model=\"code\" :length=\"length\" aria-label=\"可变长度验证码\" />\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"code = '01234567'\">外部填入含前导零的模型</AsamButton>\n\t\t<output>{{ code }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpLengthExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamButton, AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('0123');\nconst length = ref(4);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "types",
					"title": "三种外观",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/types/ts/Demo.vue",
									"sha256": "a863644c4ddda63cd348a3b7f69b1d8e2e2db4cf93b471b2118030e1d0ff6f5d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tv-for=\"type in types\"\n\t\t\t:key=\"type\"\n\t\t\tv-model=\"values[type]\"\n\t\t\t:type=\"type\"\n\t\t\t:length=\"4\"\n\t\t\t:aria-label=\"type\"\n\t\t/>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpTypesExample' });\nimport { ref } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst types = ['outlined', 'filled', 'underlined'] as const;\nconst values = ref({ outlined: '1234', filled: '1234', underlined: '1234' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/types/js/Demo.vue",
									"sha256": "e5562508ad3013b2c453de9ea17ac468fa21a22d4c906cff270aa4b59dfb405f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tv-for=\"type in types\"\n\t\t\t:key=\"type\"\n\t\t\tv-model=\"values[type]\"\n\t\t\t:type=\"type\"\n\t\t\t:length=\"4\"\n\t\t\t:aria-label=\"type\"\n\t\t/>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpTypesExample' });\nimport { ref } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst types = ['outlined', 'filled', 'underlined'];\nconst values = ref({ outlined: '1234', filled: '1234', underlined: '1234' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/sizes/ts/Demo.vue",
									"sha256": "063633e044eefd50957e932fa138b5078bbb84ab8e9a3b43718fbda1e686257c",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamConfigProvider :size=\"providerSize\">\n\t\t\t<label>继承密度\n\t\t\t\t<AsamSelect v-model=\"providerSize\">\n\t\t\t\t\t<AsamOption v-for=\"size in sizes\" :key=\"size\" :label='size' :value='size'>{{ size }}</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<AsamInputOtp v-model=\"code\" :length=\"4\" aria-label=\"继承密度\" />\n\t\t\t<div class=\"row\">\n\t\t\t\t<AsamInputOtp\n\t\t\t\t\tv-for=\"size in sizes\"\n\t\t\t\t\t:key=\"size\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t\tmodel-value=\"12\"\n\t\t\t\t\t:length=\"2\"\n\t\t\t\t\t:aria-label=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamInputOtp, AsamConfigProvider } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'] as const;\nconst providerSize = ref<'large' | 'big' | 'default' | 'small'>('big');\nconst code = ref('');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/sizes/js/Demo.vue",
									"sha256": "12bb66bbf56ec15852b3ad53d1ad2e714638a6f16f2219185545bc1a0082ea47",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamConfigProvider :size=\"providerSize\">\n\t\t\t<label>继承密度\n\t\t\t\t<AsamSelect v-model=\"providerSize\">\n\t\t\t\t\t<AsamOption v-for=\"size in sizes\" :key=\"size\" :label='size' :value='size'>{{ size }}</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<AsamInputOtp v-model=\"code\" :length=\"4\" aria-label=\"继承密度\" />\n\t\t\t<div class=\"row\">\n\t\t\t\t<AsamInputOtp\n\t\t\t\t\tv-for=\"size in sizes\"\n\t\t\t\t\t:key=\"size\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t\tmodel-value=\"12\"\n\t\t\t\t\t:length=\"2\"\n\t\t\t\t\t:aria-label=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamInputOtp, AsamConfigProvider } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\nconst providerSize = ref('big');\nconst code = ref('');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "禁用、只读与 mask",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/states/ts/Demo.vue",
									"sha256": "ec225dfba6e972b3513b6eee7f4db725ed72065bf4aa15a96b7d1a05cf2c45e0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"mask\">隐藏字符</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamInputOtp\n\t\t\tv-model=\"code\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:mask=\"mask\"\n\t\t\taria-label=\"状态验证码\"\n\t\t/><output>{{ code }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('012345');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst mask = ref(true);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/states/js/Demo.vue",
									"sha256": "9faff3ff73b655d3323b3128988aaa1bcce9fd136e4fbf202c416532a9e326de",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"mask\">隐藏字符</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamInputOtp\n\t\t\tv-model=\"code\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:mask=\"mask\"\n\t\t\taria-label=\"状态验证码\"\n\t\t/><output>{{ code }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('012345');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst mask = ref(true);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "separator",
					"title": "文本、VNode、函数与插槽分隔",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/separator/ts/Demo.vue",
									"sha256": "57eb8b174d9d631efeb8dd20f37cfdacf3ecf61a324e03d0949ed20bd8902109",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputOtp model-value=\"123456\" separator=\"-\" aria-label=\"文本分隔\" /><AsamInputOtp\n\t\t\tmodel-value=\"123456\"\n\t\t\t:separator=\"vnode\"\n\t\t\taria-label=\"VNode分隔\"\n\t\t/><AsamInputOtp\n\t\t\tmodel-value=\"123456\"\n\t\t\t:separator=\"separator\"\n\t\t\taria-label=\"函数分隔\"\n\t\t/><AsamInputOtp model-value=\"123456\" aria-label=\"插槽分隔\">\n\t\t\t<template #separator=\"{ index }\">\n\t\t\t\t<span v-if=\"index === 2\">/</span>\n\t\t\t</template>\n\t\t</AsamInputOtp>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpSeparatorExample' });\nimport { h } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst vnode = h('span', { 'aria-hidden': 'true' }, '·');\nconst separator = (index: number) => (index === 2 ? h('span', {}, '—') : '');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/separator/js/Demo.vue",
									"sha256": "27769d3d2a8dc3ac88abce8a95d56fe6d7d6ba46f1c7a5f552283949e3c13ae7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputOtp model-value=\"123456\" separator=\"-\" aria-label=\"文本分隔\" /><AsamInputOtp\n\t\t\tmodel-value=\"123456\"\n\t\t\t:separator=\"vnode\"\n\t\t\taria-label=\"VNode分隔\"\n\t\t/><AsamInputOtp\n\t\t\tmodel-value=\"123456\"\n\t\t\t:separator=\"separator\"\n\t\t\taria-label=\"函数分隔\"\n\t\t/><AsamInputOtp model-value=\"123456\" aria-label=\"插槽分隔\">\n\t\t\t<template #separator=\"{ index }\">\n\t\t\t\t<span v-if=\"index === 2\">/</span>\n\t\t\t</template>\n\t\t</AsamInputOtp>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpSeparatorExample' });\nimport { h } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst vnode = h('span', { 'aria-hidden': 'true' }, '·');\nconst separator = (index) => (index === 2 ? h('span', {}, '—') : '');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "validation",
					"title": "逐字符校验与粘贴",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/validation/ts/Demo.vue",
									"sha256": "a453d6ddb49d1e8915172144bbd3ccdefe8aeb7406a96c6078fa4426554708a5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tv-model=\"code\"\n\t\t\t:validator=\"validator\"\n\t\t\tinputmode=\"numeric\"\n\t\t\taria-label=\"仅数字验证码\"\n\t\t/>\n\t\t<p class=\"example-paragraph\">\n\t\t\t尝试输入或粘贴 01a23456：非法字符忽略，超出长度的字符截断；可用方向键、退格和 Delete\n\t\t\t编辑。\n\t\t</p>\n\t\t<output>字符串模型：{{ code }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpValidationExample' });\nimport { ref } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('');\nconst validator = (char: string, index: number) => /^\\d$/.test(char) && index < 6;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/validation/js/Demo.vue",
									"sha256": "805963e2ca6cb32deffa824255b9d7ab69dde0ad15de499264f8267553a52dcd",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tv-model=\"code\"\n\t\t\t:validator=\"validator\"\n\t\t\tinputmode=\"numeric\"\n\t\t\taria-label=\"仅数字验证码\"\n\t\t/>\n\t\t<p class=\"example-paragraph\">\n\t\t\t尝试输入或粘贴 01a23456：非法字符忽略，超出长度的字符截断；可用方向键、退格和 Delete\n\t\t\t编辑。\n\t\t</p>\n\t\t<output>字符串模型：{{ code }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpValidationExample' });\nimport { ref } from 'vue';\nimport { AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('');\nconst validator = (char, index) => /^\\d$/.test(char) && index < 6;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "公开焦点与原生字段",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/instance/ts/Demo.vue",
									"sha256": "a3f002816748ad4a124cad502fdbeb2c265a151a441f4b5805a4566b30dd7809",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tref=\"control\"\n\t\t\tv-model=\"code\"\n\t\t\t:length=\"4\"\n\t\t\taria-label=\"实例验证码\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.focus(0)\">聚焦首位</AsamButton>\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.focus(3)\">聚焦末位</AsamButton>\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.blur()\">失焦</AsamButton>\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"inspect\">读取字段</AsamButton>\n\t\t</div>\n\t\t<output>{{ fields }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamInputOtp } from '@asam-ui/ui';\nimport type { AsamInputOtpExpose } from '@asam-ui/ui';\nconst code = ref('');\nconst control = ref<AsamInputOtpExpose>();\nconst fields = ref('');\nfunction inspect() {\n\tfields.value = (control.value?.inputRefs ?? []).map((el) => el?.value ?? '').join('|');\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/instance/js/Demo.vue",
									"sha256": "6267c0031b1e80d7ed5cfe85bf538ef5ba402952fdb18f876a82252a2965acd6",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamInputOtp\n\t\t\tref=\"control\"\n\t\t\tv-model=\"code\"\n\t\t\t:length=\"4\"\n\t\t\taria-label=\"实例验证码\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.focus(0)\">聚焦首位</AsamButton>\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.focus(3)\">聚焦末位</AsamButton>\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.blur()\">失焦</AsamButton>\n\t\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"inspect\">读取字段</AsamButton>\n\t\t</div>\n\t\t<output>{{ fields }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamInputOtp } from '@asam-ui/ui';\nconst code = ref('');\nconst control = ref();\nconst fields = ref('');\nfunction inspect() {\n\tfields.value = (control.value?.inputRefs ?? []).map((el) => el?.value ?? '').join('|');\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form",
					"title": "表单关联与校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/form/ts/Demo.vue",
									"sha256": "73a5e885ae1bd4a35cc39cfb3a2778e98a9eb2d169ed36168be0205ed745ad5f",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\"> 自动 change/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tsize=\"big\"\n\t\t>\n\t\t\t<AsamFormItem label=\"验证码\" prop=\"code\">\n\t\t\t\t<AsamInputOtp v-model=\"model.code\" :length=\"4\" :validate-event=\"validateEvent\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validate\">校验</AsamButton>\n\t\t</AsamBaseForm>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputOtpFormExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamInputOtp,\n\tAsamBaseForm,\n\tAsamFormItem\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\nconst model = ref({ code: '' });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref<AsamBaseFormExpose>();\nconst rules = {\n\tcode: [\n\t\t{ required: true, message: '请输入验证码', trigger: 'blur' },\n\t\t{ min: 4, message: '请输入4位', trigger: 'change' }\n\t]\n};\nconst result = ref('');\nasync function validate() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '通过';\n\t} catch {\n\t\tresult.value = '请完善验证码';\n\t}\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputOtp/form/js/Demo.vue",
									"sha256": "803d461648acd012d3ab4fa10a64290c21288d88db9396914a23a6dfdcdb67ca",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\"> 自动 change/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tsize=\"big\"\n\t\t>\n\t\t\t<AsamFormItem label=\"验证码\" prop=\"code\">\n\t\t\t\t<AsamInputOtp v-model=\"model.code\" :length=\"4\" :validate-event=\"validateEvent\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validate\">校验</AsamButton>\n\t\t</AsamBaseForm>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputOtpFormExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamInputOtp,\n\tAsamBaseForm,\n\tAsamFormItem\n} from '@asam-ui/ui';\nconst model = ref({ code: '' });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref();\nconst rules = {\n\tcode: [\n\t\t{ required: true, message: '请输入验证码', trigger: 'blur' },\n\t\t{ min: 4, message: '请输入4位', trigger: 'change' }\n\t]\n};\nconst result = ref('');\nasync function validate() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '通过';\n\t} catch {\n\t\tresult.value = '请完善验证码';\n\t}\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTextarea",
			"documentation": "/component-AsamTextarea.html",
			"demos": [
				{
					"id": "basic",
					"title": "多行与字数限制",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/basic/ts/Demo.vue",
									"sha256": "d9e6c43c28af7da1b00fb4e21e664d312c5523d3a3b4e7e4d32c0d6dd036b26c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '任务说明' }\"\n\t\t\tplaceholder=\"请输入任务说明\"\n\t\t\t:rows=\"3\"\n\t\t\t:maxlength=\"120\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t/>\n\t\t<output>当前说明：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextareaBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea } from '@asam-ui/ui';\nconst value = ref('第一行说明\\n第二行说明');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/basic/js/Demo.vue",
									"sha256": "e471f0b6735a5995e8b062bc718315a9376bdce3c5c705b473d0d38268086f52",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '任务说明' }\"\n\t\t\tplaceholder=\"请输入任务说明\"\n\t\t\t:rows=\"3\"\n\t\t\t:maxlength=\"120\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t/>\n\t\t<output>当前说明：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextareaBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea } from '@asam-ui/ui';\nconst value = ref('第一行说明\\n第二行说明');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "autosize",
					"title": "自适应高度与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/autosize/ts/Demo.vue",
									"sha256": "1b3c85fccbb3f6fc1c4ac1af9a2c441b6bae3c16c3013f461ab51da927b19002",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '自适应说明' }\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 5 }\"\n\t\t\tresize=\"vertical\"\n\t\t/>\n\t\t<AsamTextarea\n\t\t\tmodel-value=\"只读说明\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '只读说明' }\"\n\t\t\treadonly\n\t\t/>\n\t\t<AsamTextarea\n\t\t\tmodel-value=\"禁用说明\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '禁用说明' }\"\n\t\t\tdisabled\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextareaAutosizeExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea } from '@asam-ui/ui';\nconst value = ref('输入更多行以观察高度变化');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/autosize/js/Demo.vue",
									"sha256": "4f25cbe5a92d256a2357547e38448ada34b1ddd411cad1ef81a027038907f68b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '自适应说明' }\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 5 }\"\n\t\t\tresize=\"vertical\"\n\t\t/>\n\t\t<AsamTextarea\n\t\t\tmodel-value=\"只读说明\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '只读说明' }\"\n\t\t\treadonly\n\t\t/>\n\t\t<AsamTextarea\n\t\t\tmodel-value=\"禁用说明\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '禁用说明' }\"\n\t\t\tdisabled\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextareaAutosizeExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea } from '@asam-ui/ui';\nconst value = ref('输入更多行以观察高度变化');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "编辑与重新测量",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/instance/ts/Demo.vue",
									"sha256": "74e6dfc91dd12299e83777daae0e0b806ca8523725d5ef446c7f3176666f9a64",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例多行文本' }\"\n\t\t\tautosize\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦文本 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.select()\"> 选中文本 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.clear()\"> 清空文本 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.resizeTextarea()\"> 重新测量 </AsamButton>\n\t\t</div>\n\t\t<output>{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextareaInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea, AsamButton } from '@asam-ui/ui';\nimport type { AsamTextareaExpose } from '@asam-ui/ui';\nconst input = ref<AsamTextareaExpose>();\nconst value = ref('可编辑的多行文本');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/instance/js/Demo.vue",
									"sha256": "e0242f5b235381ee34c1f5488bc1201bdd5c04c01f8335c4b733ce933744968f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例多行文本' }\"\n\t\t\tautosize\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦文本 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.select()\"> 选中文本 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.clear()\"> 清空文本 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.resizeTextarea()\"> 重新测量 </AsamButton>\n\t\t</div>\n\t\t<output>{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextareaInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea, AsamButton } from '@asam-ui/ui';\nconst input = ref();\nconst value = ref('可编辑的多行文本');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/sizes/ts/Demo.vue",
									"sha256": "4e595c713a3cb186d2bb0b97a414a9f9599b9ea9e872eba0b7e13e38302fa592",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextareaSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/sizes/js/Demo.vue",
									"sha256": "833aabd7f2b7a0d4751d19ec88a2266a931dfb85489c84295299b8b2d739720b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t\t<AsamTextarea\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextareaSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTextarea, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "clear-graphemes",
					"title": "多行清空与字素计数",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/clear-graphemes/ts/Demo.vue",
									"sha256": "f40b50e5a3795976b98649e4e1cbd3e64e3eac1e26fd1ea920f85e3c8176c4aa",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 5 }\"\n\t\t\tresize=\"vertical\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"clearIcon\"\n\t\t\t:count-graphemes=\"count\"\n\t\t\t:maxlength=\"20\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\taria-label=\"可清空多行字素\"\n\t\t\t@clear=\"cleared = true\"\n\t\t/><AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.resizeTextarea()\"\n\t\t\t>重新测量高度</AsamButton\n\t\t><output>已清空：{{ cleared }}；字素数：{{ count(value) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t在Firefox与Chromium中均应按行自适应高度；折叠或隐藏容器重新显示后可调用公开resizeTextarea。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextareaClearGraphemesExample' });\nimport { ref, h } from 'vue';\nimport { AsamButton, AsamTextarea } from '@asam-ui/ui';\nimport type { AsamTextareaExpose } from '@asam-ui/ui';\nconst value = ref('👨‍👩‍👧‍👦\\nASAM');\nconst cleared = ref(false);\nconst control = ref<AsamTextareaExpose>();\nconst segmenter = new Intl.Segmenter();\nconst count = (text: string) => Array.from(segmenter.segment(text)).length;\nconst clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/clear-graphemes/js/Demo.vue",
									"sha256": "97c4eb3903ce61a0961343ada2afdff74a237f4242383183db812fbc586fcf2f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 5 }\"\n\t\t\tresize=\"vertical\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"clearIcon\"\n\t\t\t:count-graphemes=\"count\"\n\t\t\t:maxlength=\"20\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\taria-label=\"可清空多行字素\"\n\t\t\t@clear=\"cleared = true\"\n\t\t/><AsamButton native-type=\"submit\" type=\"default\" @click=\"control?.resizeTextarea()\"\n\t\t\t>重新测量高度</AsamButton\n\t\t><output>已清空：{{ cleared }}；字素数：{{ count(value) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t在Firefox与Chromium中均应按行自适应高度；折叠或隐藏容器重新显示后可调用公开resizeTextarea。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTextareaClearGraphemesExample' });\nimport { ref, h } from 'vue';\nimport { AsamButton, AsamTextarea } from '@asam-ui/ui';\nconst value = ref('👨‍👩‍👧‍👦\\nASAM');\nconst cleared = ref(false);\nconst control = ref();\nconst segmenter = new Intl.Segmenter();\nconst count = (text) => Array.from(segmenter.segment(text)).length;\nconst clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "modifiers",
					"title": "模型修饰符与数字更新",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/modifiers/ts/Demo.vue",
									"sha256": "e294f653657039d07f942f55200430cae653a1d6215c9e83edd75b60dee3805f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model.trim.number.lazy=\"value\"\n\t\t\taria-label=\"修饰符输入\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy\n\t\t\t在提交时更新。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamTextarea } from '@asam-ui/ui';\nimport type { AsamTextareaEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTextareaModifiersExample' });\nconst value = ref<string | number>('');\nconst updates = ref<(string | number)[]>([]);\nfunction record(...[value]: AsamTextareaEmits['update:modelValue']) {\n\tupdates.value.push(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/modifiers/js/Demo.vue",
									"sha256": "7f5ea665b4a45f41f8749142b7487ab2e7eed3a98a5e02cd5764d61e028d9c70",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model.trim.number.lazy=\"value\"\n\t\t\taria-label=\"修饰符输入\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy\n\t\t\t在提交时更新。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamTextarea } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTextareaModifiersExample' });\nconst value = ref('');\nconst updates = ref([]);\nfunction record(...[value]) {\n\tupdates.value.push(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form-inputs",
					"title": "五入口表单继承与校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/form-inputs/ts/Demo.vue",
									"sha256": "9a3ae0f474c1c59619f4c4dbc496c236424820088b3d00deca764e4e70a02443",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({\n\tinput: '',\n\tpassword: '',\n\ttextarea: '',\n\tautocomplete: '',\n\ttags: [] as string[]\n});\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref<AsamBaseFormExpose>();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref<{ prop: string; valid: boolean }[]>([]);\nfunction record(prop: string | string[], valid: boolean) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/form-inputs/js/Demo.vue",
									"sha256": "55507e95d0a63bc8acfdcc59f65911401ee05d1d2ed8d6ccd72c91ac83fb4cab",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref([]);\nfunction record(prop, valid) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "format",
					"title": "多行 formatter/parser 编辑与回填",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/format/ts/Demo.vue",
									"sha256": "914cf22cda1059ba069ef0f36f6020f38775d75d94184c6111584531382c67c2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model=\"value\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\t:rows=\"3\"\n\t\t\taria-label=\"格式化多行\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"value = 'server\\nrow'\">回填两行</AsamButton>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamTextarea, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTextareaFormatExample' });\nconst value = ref<string | number>('seed\\nline');\nfunction formatter(value: string | number) {\n\treturn String(value)\n\t\t.split('\\n')\n\t\t.map((line) => '> ' + line)\n\t\t.join('\\n');\n}\nfunction parser(value: string) {\n\treturn value\n\t\t.split('\\n')\n\t\t.map((line) => line.replace(/^> ?/, ''))\n\t\t.join('\\n');\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTextarea/format/js/Demo.vue",
									"sha256": "eba1ae867296a359e58c07dc03204ff38814b2f506ce507aae5d2655debd2ecf",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTextarea\n\t\t\tv-model=\"value\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\t:rows=\"3\"\n\t\t\taria-label=\"格式化多行\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"value = 'server\\nrow'\">回填两行</AsamButton>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamTextarea, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTextareaFormatExample' });\nconst value = ref('seed\\nline');\nfunction formatter(value) {\n\treturn String(value)\n\t\t.split('\\n')\n\t\t.map((line) => '> ' + line)\n\t\t.join('\\n');\n}\nfunction parser(value) {\n\treturn value\n\t\t.split('\\n')\n\t\t.map((line) => line.replace(/^> ?/, ''))\n\t\t.join('\\n');\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamInputNumber",
			"documentation": "/component-AsamInputNumber.html",
			"demos": [
				{
					"id": "basic",
					"title": "范围与步进",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/basic/ts/Demo.vue",
									"sha256": "6a56356e1daf3079cd9c45461676e36b545f6a24f89ee67f5a4d75db3b3e3056",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '采购数量' }\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"20\"\n\t\t\t:step=\"2\"\n\t\t\tstep-strictly\n\t\t\t@change=\"(next, previous) => (change = String(previous) + ' → ' + String(next))\"\n\t\t/>\n\t\t<output>数量：{{ value }}；变化：{{ change }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputNumberBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber } from '@asam-ui/ui';\nconst value = ref<number | null | undefined>(4);\nconst change = ref('尚未变化');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/basic/js/Demo.vue",
									"sha256": "cf7435187afcbfb943f0c70dc58d8ae79fc8a997cbf6c115784109659fa56b3c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '采购数量' }\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"20\"\n\t\t\t:step=\"2\"\n\t\t\tstep-strictly\n\t\t\t@change=\"(next, previous) => (change = String(previous) + ' → ' + String(next))\"\n\t\t/>\n\t\t<output>数量：{{ value }}；变化：{{ change }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputNumberBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber } from '@asam-ui/ui';\nconst value = ref(4);\nconst change = ref('尚未变化');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "precision",
					"title": "精度与清空值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/precision/ts/Demo.vue",
									"sha256": "72c6a2d1bf34b2a59ca2fd04f0b309dc07530c58b9131b79e90a93b9d8c299bc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '单价' }\"\n\t\t\t:precision=\"2\"\n\t\t\t:step=\"0.25\"\n\t\t\t:min=\"0\"\n\t\t\t:value-on-clear=\"0\"\n\t\t\tcontrols-position=\"right\"\n\t\t\tdisabled-scientific\n\t\t/>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"plain\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '无控制按钮数字' }\"\n\t\t\t:controls=\"false\"\n\t\t\talign=\"left\"\n\t\t/>\n\t\t<output>单价：{{ value }}；普通数值：{{ plain }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputNumberPrecisionExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber } from '@asam-ui/ui';\nconst value = ref<number | null | undefined>(12.5);\nconst plain = ref<number | null | undefined>(3);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/precision/js/Demo.vue",
									"sha256": "3eb1d340008743e5d9f1e59068b1ca82a8efe5453c02d682599c5c4c123d1d7c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '单价' }\"\n\t\t\t:precision=\"2\"\n\t\t\t:step=\"0.25\"\n\t\t\t:min=\"0\"\n\t\t\t:value-on-clear=\"0\"\n\t\t\tcontrols-position=\"right\"\n\t\t\tdisabled-scientific\n\t\t/>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"plain\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '无控制按钮数字' }\"\n\t\t\t:controls=\"false\"\n\t\t\talign=\"left\"\n\t\t/>\n\t\t<output>单价：{{ value }}；普通数值：{{ plain }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputNumberPrecisionExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber } from '@asam-ui/ui';\nconst value = ref(12.5);\nconst plain = ref(3);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "icons",
					"title": "单位与控制图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/icons/ts/Demo.vue",
									"sha256": "281d6a6676da96388730d2d75197957332a8b4ca37aa535bc0f5712b125be48b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '重量' }\"\n\t\t>\n\t\t\t<template #prefix> 重量 </template>\n\t\t\t<template #suffix> kg </template>\n\t\t\t<template #increase-icon>\n\t\t\t\t<Plus style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #decrease-icon>\n\t\t\t\t<Minus style=\"width: 16px\" />\n\t\t\t</template>\n\t\t</AsamInputNumber>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦数字 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.blur()\"> 失焦数字 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputNumberIconsExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamButton } from '@asam-ui/ui';\nimport type { AsamInputNumberExpose } from '@asam-ui/ui';\nimport { Plus, Minus } from '@asam-ui/icons-vue';\nconst input = ref<AsamInputNumberExpose>();\nconst value = ref<number | null | undefined>(8);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/icons/js/Demo.vue",
									"sha256": "40452552050918a8f4823009858e5bfdd4f5815c5718b16a6d75b511809fe183",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '重量' }\"\n\t\t>\n\t\t\t<template #prefix> 重量 </template>\n\t\t\t<template #suffix> kg </template>\n\t\t\t<template #increase-icon>\n\t\t\t\t<Plus style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #decrease-icon>\n\t\t\t\t<Minus style=\"width: 16px\" />\n\t\t\t</template>\n\t\t</AsamInputNumber>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦数字 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.blur()\"> 失焦数字 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputNumberIconsExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamButton } from '@asam-ui/ui';\nimport { Plus, Minus } from '@asam-ui/icons-vue';\nconst input = ref();\nconst value = ref(8);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/sizes/ts/Demo.vue",
									"sha256": "0d0adef0905fca1403e5931f1afeae030653d9a4e6de11ab65a1e472a73c110b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamInputNumber\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\t:model-value=\"8\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputNumberSizesExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/sizes/js/Demo.vue",
									"sha256": "472d2ba20c42d81e182cb2da1e6e033f0e52439c4b7d70ee5f6607e428619634",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t\t<AsamInputNumber\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\t:model-value=\"8\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamInputNumber\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\t:model-value=\"8\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputNumberSizesExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "format",
					"title": "格式化、解析与内部 tabindex",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/format/ts/Demo.vue",
									"sha256": "a7bc5a8133346abad1951bc35a01b433434604a4ec9bb26f22b0ef1596854aa5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"amount\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"10000\"\n\t\t\t:tabindex=\"7\"\n\t\t\taria-label=\"格式化金额\"\n\t\t/><output>数值模型：{{ amount }}；类型：{{ typeof amount }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t编辑 $2,345 后提交或失焦，模型为数字 2345。formatter 只改变显示；parser\n\t\t\t移除装饰后再进行范围/精度校验。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputNumberFormatExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber } from '@asam-ui/ui';\nconst amount = ref<number | null | undefined>(1234);\nconst formatter = (value: string | number) =>\n\tvalue === '' ? '' : '$' + String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value: string) => value.replace(/[$,]/g, '');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/format/js/Demo.vue",
									"sha256": "51b210d2184c797a8dfbb8b45c3c2a0a5078d9af37cea1c2a93231da42ee15aa",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"amount\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"10000\"\n\t\t\t:tabindex=\"7\"\n\t\t\taria-label=\"格式化金额\"\n\t\t/><output>数值模型：{{ amount }}；类型：{{ typeof amount }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t编辑 $2,345 后提交或失焦，模型为数字 2345。formatter 只改变显示；parser\n\t\t\t移除装饰后再进行范围/精度校验。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputNumberFormatExample' });\nimport { ref } from 'vue';\nimport { AsamInputNumber } from '@asam-ui/ui';\nconst amount = ref(1234);\nconst formatter = (value) =>\n\tvalue === '' ? '' : '$' + String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value) => value.replace(/[$,]/g, '');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "boundaries",
					"title": "严格步进、精度和输入边界",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/boundaries/ts/Demo.vue",
									"sha256": "628d39f6f980e886705015374496df0e12bbee2b8574bd3d71890b98592542bf",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"controls\">控制按钮</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"12\"\n\t\t\t:step=\"3\"\n\t\t\tstep-strictly\n\t\t\t:value-on-clear=\"0\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:controls=\"controls\"\n\t\t\tcontrols-position=\"right\"\n\t\t\tdisabled-scientific\n\t\t\taria-label=\"严格倍数\"\n\t\t\t@change=\"(next, previous) => (message = String(previous) + ' → ' + String(next))\"\n\t\t/><AsamInputNumber\n\t\t\tv-model=\"decimal\"\n\t\t\t:step=\"0.1\"\n\t\t\t:precision=\"2\"\n\t\t\taria-label=\"两位小数\"\n\t\t/><output>{{ message }}；精度值 {{ decimal }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t范围外输入在提交时裁剪；清空后回到0；e/E科学记数输入被禁止。无效文本不会变成 NaN 模型。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputNumberBoundariesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamInputNumber } from '@asam-ui/ui';\nconst value = ref<number | null | undefined>(3);\nconst decimal = ref<number | null | undefined>(1.23);\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst controls = ref(true);\nconst message = ref('');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/boundaries/js/Demo.vue",
									"sha256": "2f62c65ba625fdb4eaaa7a9a62b6c229290d12a9cacf4c2d64982f167a2ce2ca",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem\n\t\t\t><AsamCheckboxItem v-model=\"controls\">控制按钮</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"12\"\n\t\t\t:step=\"3\"\n\t\t\tstep-strictly\n\t\t\t:value-on-clear=\"0\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:controls=\"controls\"\n\t\t\tcontrols-position=\"right\"\n\t\t\tdisabled-scientific\n\t\t\taria-label=\"严格倍数\"\n\t\t\t@change=\"(next, previous) => (message = String(previous) + ' → ' + String(next))\"\n\t\t/><AsamInputNumber\n\t\t\tv-model=\"decimal\"\n\t\t\t:step=\"0.1\"\n\t\t\t:precision=\"2\"\n\t\t\taria-label=\"两位小数\"\n\t\t/><output>{{ message }}；精度值 {{ decimal }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t范围外输入在提交时裁剪；清空后回到0；e/E科学记数输入被禁止。无效文本不会变成 NaN 模型。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputNumberBoundariesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamInputNumber } from '@asam-ui/ui';\nconst value = ref(3);\nconst decimal = ref(1.23);\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst controls = ref(true);\nconst message = ref('');\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "null-values",
					"title": "空值、非法格式与恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/null-values/ts/Demo.vue",
									"sha256": "1e14f29818e7c7e1d48a32518d2ae94e54716f963292b42db992e39d202d3570",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\taria-label=\"默认清空数字\"\n\t\t\t@input=\"record('input', [$event])\"\n\t\t\t@update:model-value=\"record('update', [$event])\"\n\t\t\t@change=\"recordChange\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = 1\">恢复为 1</AsamButton>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"amount\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"非法格式金额\"\n\t\t\t@change=\"recordAmountChange\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交格式金额</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, amount, events }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t清空默认产生 null；输入非法格式也可产生 null。重新输入数字会从空值恢复，change\n\t\t\t保留新旧值。\n\t\t</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamInputNumber } from '@asam-ui/ui';\nimport type { AsamInputNumberEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberNullValuesExample' });\nconst value = ref<number | null | undefined>(1);\nconst amount = ref<number | null | undefined>(2);\nconst events = ref<{ name: string; args: (number | null | undefined)[] }[]>([]);\nfunction record(name: string, args: (number | null | undefined)[]) {\n\tevents.value.push({ name, args });\n}\nfunction recordChange(...args: AsamInputNumberEmits['change']) {\n\trecord('change', args);\n}\nfunction recordAmountChange(...args: AsamInputNumberEmits['change']) {\n\trecord('amount-change', args);\n}\nconst formatter = (value: string) => (value === '' ? '' : '$' + value);\nconst parser = (value: string) => value.replace(/[$,]/g, '');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/null-values/js/Demo.vue",
									"sha256": "74cc039d937c730f9ddca2fc9a736d22ee7e859774b1eadd8bf284f1e15acd0c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber\n\t\t\tv-model=\"value\"\n\t\t\taria-label=\"默认清空数字\"\n\t\t\t@input=\"record('input', [$event])\"\n\t\t\t@update:model-value=\"record('update', [$event])\"\n\t\t\t@change=\"recordChange\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = 1\">恢复为 1</AsamButton>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"amount\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"非法格式金额\"\n\t\t\t@change=\"recordAmountChange\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交格式金额</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, amount, events }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t清空默认产生 null；输入非法格式也可产生 null。重新输入数字会从空值恢复，change\n\t\t\t保留新旧值。\n\t\t</p>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberNullValuesExample' });\nconst value = ref(1);\nconst amount = ref(2);\nconst events = ref([]);\nfunction record(name, args) {\n\tevents.value.push({ name, args });\n}\nfunction recordChange(...args) {\n\trecord('change', args);\n}\nfunction recordAmountChange(...args) {\n\trecord('amount-change', args);\n}\nconst formatter = (value) => (value === '' ? '' : '$' + value);\nconst parser = (value) => value.replace(/[$,]/g, '');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "safe-integers",
					"title": "默认安全整数边界",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/safe-integers/ts/Demo.vue",
									"sha256": "4fa0728cbe7340b7356cf2c2fd561b47aee7266d5b619e1410e1a6a9b2aadfaa",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber v-model=\"value\" aria-label=\"默认安全整数\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t省略 min/max 时边界为 -9007199254740991 到\n\t\t\t9007199254740991；提交更大或更小的值会裁剪到边界。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberSafeIntegersExample' });\nconst value = ref<number | null | undefined>(1);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/safe-integers/js/Demo.vue",
									"sha256": "bf3ec8bf1157f41df1194a8f1443fe67cc1c5462a006959867a8e28f790b8d42",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputNumber v-model=\"value\" aria-label=\"默认安全整数\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t省略 min/max 时边界为 -9007199254740991 到\n\t\t\t9007199254740991；提交更大或更小的值会裁剪到边界。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberSafeIntegersExample' });\nconst value = ref(1);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dynamic-state",
					"title": "动态表单状态与无障碍范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/dynamic-state/ts/Demo.vue",
									"sha256": "9fe4a1ce31a4a59e57780ea23e3dd3e9f14e5588f07ce7c201d4d4409de56be7",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用表单</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\t:model=\"{ value }\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\t\t\t<AsamInputNumber\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:min=\"min\"\n\t\t\t\t:max=\"max\"\n\t\t\t\taria-label=\"动态数字范围\"\n\t\t\t/>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tmin = 2;\n\t\t\t\tmax = 8;\n\t\t\t\"\n\t\t>\n\t\t\t范围 2–8\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tmin = -Infinity;\n\t\t\t\tmax = Infinity;\n\t\t\t\"\n\t\t>\n\t\t\t显式无限范围\n\t\t</AsamButton>\n\t\t<output>{{\n\t\t\tJSON.stringify({ value, disabled, min: String(min), max: String(max) })\n\t\t}}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamBaseForm, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberDynamicStateExample' });\nconst value = ref<number | null | undefined>(3);\nconst disabled = ref(true);\nconst min = ref(0);\nconst max = ref(10);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/dynamic-state/js/Demo.vue",
									"sha256": "ce0ed567a718320bcf7cfb2361476fefd8f041921f4433046518739d5641bb65",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用表单</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\t:model=\"{ value }\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\t\t\t<AsamInputNumber\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:min=\"min\"\n\t\t\t\t:max=\"max\"\n\t\t\t\taria-label=\"动态数字范围\"\n\t\t\t/>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tmin = 2;\n\t\t\t\tmax = 8;\n\t\t\t\"\n\t\t>\n\t\t\t范围 2–8\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tmin = -Infinity;\n\t\t\t\tmax = Infinity;\n\t\t\t\"\n\t\t>\n\t\t\t显式无限范围\n\t\t</AsamButton>\n\t\t<output>{{\n\t\t\tJSON.stringify({ value, disabled, min: String(min), max: String(max) })\n\t\t}}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamBaseForm, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberDynamicStateExample' });\nconst value = ref(3);\nconst disabled = ref(true);\nconst min = ref(0);\nconst max = ref(10);\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-delegation",
					"title": "原生委托与事件记录",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/native-delegation/ts/Demo.vue",
									"sha256": "f20cc7f24c4a8238770b3eeb57219053e3c2fe19e6506505a0876a2c556ab9e4",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberNativeDelegationExample' });\nconst asam = ref<number | null | undefined>(1);\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref<{ source: string; event: string; values: unknown[] }[]>([]);\nfunction record(source: string, event: string, ...values: unknown[]) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputNumber/native-delegation/js/Demo.vue",
									"sha256": "a86873b52866fd5d27f86c655d65ef8675bfb99cfd96bcf9cdc91cfaff4f050d",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamInputNumber\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamInputNumber } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputNumberNativeDelegationExample' });\nconst asam = ref(1);\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref([]);\nfunction record(source, event, ...values) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPassword",
			"documentation": "/component-AsamPassword.html",
			"demos": [
				{
					"id": "basic",
					"title": "密码与可见性切换",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/basic/ts/Demo.vue",
									"sha256": "25165c836a6c57a2cac9e3e3903f07d3223d13504fa577e9d958136744f6409e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tv-model=\"password\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '演示密码' }\"\n\t\t\tautocomplete=\"new-password\"\n\t\t\tplaceholder=\"请输入密码\"\n\t\t\tclearable\n\t\t\t:maxlength=\"24\"\n\t\t/>\n\t\t<AsamPassword\n\t\t\tv-model=\"locked\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '无切换密码' }\"\n\t\t\t:show-password=\"false\"\n\t\t/>\n\t\t<output>已输入 {{ password.length }} 个字符</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPasswordBasicExample' });\nimport { ref } from 'vue';\nimport { AsamPassword } from '@asam-ui/ui';\nconst password = ref('demo-password');\nconst locked = ref('local-demo');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/basic/js/Demo.vue",
									"sha256": "3af71490d334eef340994247b9a662c8b924e1fb42f3662f23e21ba0906ebb87",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tv-model=\"password\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '演示密码' }\"\n\t\t\tautocomplete=\"new-password\"\n\t\t\tplaceholder=\"请输入密码\"\n\t\t\tclearable\n\t\t\t:maxlength=\"24\"\n\t\t/>\n\t\t<AsamPassword\n\t\t\tv-model=\"locked\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '无切换密码' }\"\n\t\t\t:show-password=\"false\"\n\t\t/>\n\t\t<output>已输入 {{ password.length }} 个字符</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPasswordBasicExample' });\nimport { ref } from 'vue';\nimport { AsamPassword } from '@asam-ui/ui';\nconst password = ref('demo-password');\nconst locked = ref('local-demo');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "icons",
					"title": "自定义密码图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/icons/ts/Demo.vue",
									"sha256": "e8127b554d765a48d82aa24b174da5f031e6620c5191607391a96950851981e3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword v-model=\"value\" v-bind=\"{ class: 'field', 'aria-label': '自定义图标密码' }\">\n\t\t\t<template #prefix>\n\t\t\t\t<Lock style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #suffix> 安全 </template>\n\t\t\t<template #prepend> 账号 </template>\n\t\t\t<template #append> 密码 </template>\n\t\t\t<template #password-icon=\"{ visible }\">\n\t\t\t\t<component :is=\"visible ? View : Hide\" style=\"width: 16px\" />\n\t\t\t</template>\n\t\t</AsamPassword>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPasswordIconsExample' });\nimport { ref } from 'vue';\nimport { AsamPassword } from '@asam-ui/ui';\nimport { Lock, View, Hide } from '@asam-ui/icons-vue';\nconst value = ref('demo-secret');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/icons/js/Demo.vue",
									"sha256": "5d419b54cf17f704ea52fbeb56c7476fdd2fa819328e8c433796f08fa68f29b0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword v-model=\"value\" v-bind=\"{ class: 'field', 'aria-label': '自定义图标密码' }\">\n\t\t\t<template #prefix>\n\t\t\t\t<Lock style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #suffix> 安全 </template>\n\t\t\t<template #prepend> 账号 </template>\n\t\t\t<template #append> 密码 </template>\n\t\t\t<template #password-icon=\"{ visible }\">\n\t\t\t\t<component :is=\"visible ? View : Hide\" style=\"width: 16px\" />\n\t\t\t</template>\n\t\t</AsamPassword>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPasswordIconsExample' });\nimport { ref } from 'vue';\nimport { AsamPassword } from '@asam-ui/ui';\nimport { Lock, View, Hide } from '@asam-ui/icons-vue';\nconst value = ref('demo-secret');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "实例可见状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/instance/ts/Demo.vue",
									"sha256": "44b1038b102d27abfcbde2ff4844cc5adf3804968baad3d8fb2f0014e0a74461",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例密码' }\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦密码 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.select()\"> 选中密码 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.clear()\"> 清空密码 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"visible = input?.passwordVisible ?? false\">\n\t\t\t\t读取可见状态\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<output>可见：{{ visible }}；字符数：{{ value.length }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPasswordInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamPassword, AsamButton } from '@asam-ui/ui';\nimport type { AsamPasswordExpose } from '@asam-ui/ui';\nconst input = ref<AsamPasswordExpose>();\nconst value = ref('local-password');\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/instance/js/Demo.vue",
									"sha256": "40c4aa6d4cfb31b2cb870dc8fe9c4ae495270fcbb47c9d35671b8aabd90a2467",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例密码' }\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦密码 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.select()\"> 选中密码 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.clear()\"> 清空密码 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"visible = input?.passwordVisible ?? false\">\n\t\t\t\t读取可见状态\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<output>可见：{{ visible }}；字符数：{{ value.length }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPasswordInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamPassword, AsamButton } from '@asam-ui/ui';\nconst input = ref();\nconst value = ref('local-password');\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/sizes/ts/Demo.vue",
									"sha256": "8b8d6a6ed13830f3211aa1a09de14d6c276e071cc73b119f2eddb9733949d76d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"demo\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPasswordSizesExample' });\nimport { ref } from 'vue';\nimport { AsamPassword, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/sizes/js/Demo.vue",
									"sha256": "5178cadf734a647d3692118a86fe0add48df2377e4996c584d321a61552958d5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t\t<AsamPassword\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"demo\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"demo\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPasswordSizesExample' });\nimport { ref } from 'vue';\nimport { AsamPassword, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "modifiers",
					"title": "模型修饰符与数字更新",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/modifiers/ts/Demo.vue",
									"sha256": "a4c958941518daba337981855cf2c216b09a299a81dfc1724757dfb472cc9a06",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tv-model.trim.number.lazy=\"value\"\n\t\t\taria-label=\"修饰符输入\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy\n\t\t\t在提交时更新。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamPassword } from '@asam-ui/ui';\nimport type { AsamPasswordEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordModifiersExample' });\nconst value = ref<string | number>('');\nconst updates = ref<(string | number)[]>([]);\nfunction record(...[value]: AsamPasswordEmits['update:modelValue']) {\n\tupdates.value.push(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/modifiers/js/Demo.vue",
									"sha256": "77906f5fe2dbec87fd35cc2f959b25bb508727c8e08ce4474b78fc75697ba292",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tv-model.trim.number.lazy=\"value\"\n\t\t\taria-label=\"修饰符输入\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点以提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, type: typeof value, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入数字并失焦后，更新为 number；非数字文本仍为 string。trim 移除两端空白，lazy\n\t\t\t在提交时更新。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamPassword } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordModifiersExample' });\nconst value = ref('');\nconst updates = ref([]);\nfunction record(...[value]) {\n\tupdates.value.push(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form-inputs",
					"title": "五入口表单继承与校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/form-inputs/ts/Demo.vue",
									"sha256": "9a3ae0f474c1c59619f4c4dbc496c236424820088b3d00deca764e4e70a02443",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({\n\tinput: '',\n\tpassword: '',\n\ttextarea: '',\n\tautocomplete: '',\n\ttags: [] as string[]\n});\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref<AsamBaseFormExpose>();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref<{ prop: string; valid: boolean }[]>([]);\nfunction record(prop: string | string[], valid: boolean) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/form-inputs/js/Demo.vue",
									"sha256": "55507e95d0a63bc8acfdcc59f65911401ee05d1d2ed8d6ccd72c91ac83fb4cab",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref([]);\nfunction record(prop, valid) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "commit",
					"title": "密码显隐与修饰符提交",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/commit/ts/Demo.vue",
									"sha256": "c44919ba1156e95eef5f06dfa52aba4322aa59d8eb6f7d9ce5a4dd4a4e7acacf",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('none')\">无修饰符</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('trim')\">去除空白（trim）</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('number')\">转换数字（number）</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('combined')\">失焦更新、去除空白并转换数字</AsamButton>\n\t\t<AsamPassword\n\t\t\tv-model=\"value\"\n\t\t\t:model-modifiers=\"modifiers\"\n\t\t\tclearable\n\t\t\taria-label=\"密码提交\"\n\t\t\t@update:model-value=\"updates.push($event)\"\n\t\t\t@change=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点提交密码</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, updates, changes }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamPassword } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordCommitExample' });\nconst value = ref<string | number>('');\nconst modifiers = ref<{ trim?: true; number?: true; lazy?: true }>({});\nconst updates = ref<(string | number)[]>([]);\nconst changes = ref<{ value: string; trusted: boolean | null }[]>([]);\nfunction record(value: string, event?: Event) {\n\tchanges.value.push({ value, trusted: event?.isTrusted ?? null });\n}\nfunction reset(mode: string) {\n\tmodifiers.value =\n\t\tmode === 'combined'\n\t\t\t? { trim: true, number: true, lazy: true }\n\t\t\t: mode === 'none'\n\t\t\t\t? {}\n\t\t\t\t: { [mode]: true };\n\tvalue.value = '';\n\tupdates.value = [];\n\tchanges.value = [];\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/commit/js/Demo.vue",
									"sha256": "dc90d0e3e6ff7b962759cdd59f2a50e674e5fe7816b8529dca133a09bda581fb",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('none')\">无修饰符</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('trim')\">去除空白（trim）</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('number')\">转换数字（number）</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('combined')\">失焦更新、去除空白并转换数字</AsamButton>\n\t\t<AsamPassword\n\t\t\tv-model=\"value\"\n\t\t\t:model-modifiers=\"modifiers\"\n\t\t\tclearable\n\t\t\taria-label=\"密码提交\"\n\t\t\t@update:model-value=\"updates.push($event)\"\n\t\t\t@change=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点提交密码</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, updates, changes }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamPassword } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordCommitExample' });\nconst value = ref('');\nconst modifiers = ref({});\nconst updates = ref([]);\nconst changes = ref([]);\nfunction record(value, event) {\n\tchanges.value.push({ value, trusted: event?.isTrusted ?? null });\n}\nfunction reset(mode) {\n\tmodifiers.value =\n\t\tmode === 'combined'\n\t\t\t? { trim: true, number: true, lazy: true }\n\t\t\t: mode === 'none'\n\t\t\t\t? {}\n\t\t\t\t: { [mode]: true };\n\tvalue.value = '';\n\tupdates.value = [];\n\tchanges.value = [];\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "format",
					"title": "密码 formatter/parser 编辑与回填",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/format/ts/Demo.vue",
									"sha256": "5676129952f8067008d27b2b35f0fd4412e56cf8ec0e0533c505dba01cc3900f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tv-model=\"value\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"格式化密码\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"value = 'server'\">回填密码</AsamButton>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamPassword, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordFormatExample' });\nconst value = ref<string | number>('seed');\nfunction formatter(value: string | number) {\n\treturn 'ID:' + value;\n}\nfunction parser(value: string) {\n\treturn value.replace(/^ID:/, '');\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/format/js/Demo.vue",
									"sha256": "b2912f97829d3ee709c971e3445b20c01a5602b0c0be10f9b0a5d71b85a5dacc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamPassword\n\t\t\tv-model=\"value\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"格式化密码\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"value = 'server'\">回填密码</AsamButton>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamPassword, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordFormatExample' });\nconst value = ref('seed');\nfunction formatter(value) {\n\treturn 'ID:' + value;\n}\nfunction parser(value) {\n\treturn value.replace(/^ID:/, '');\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-delegation",
					"title": "原生委托与事件记录",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/native-delegation/ts/Demo.vue",
									"sha256": "bd421cf7a114a5eb16b753f8e9156aa8edf1629fddbb2bb9c47f24ca1c5b2392",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamPassword\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\tshow-password\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamPassword } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordNativeDelegationExample' });\nconst asam = ref<string | number>('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref<{ source: string; event: string; values: unknown[] }[]>([]);\nfunction record(source: string, event: string, ...values: unknown[]) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPassword/native-delegation/js/Demo.vue",
									"sha256": "fa2b19b744b3a31c9af015c9f5e4b534a82badb29388866a88bf92e539eeedac",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamPassword\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\tshow-password\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamPassword } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPasswordNativeDelegationExample' });\nconst asam = ref('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref([]);\nfunction record(source, event, ...values) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAutocomplete",
			"documentation": "/component-AsamAutocomplete.html",
			"demos": [
				{
					"id": "options",
					"title": "ASAM 静态选项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/options/ts/Demo.vue",
									"sha256": "2f0ce65ba986480dddf6f3188839db37e913fe1798dc7865d663bda332fde1d8",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '城市补全' }\"\n\t\t\t:options=\"options\"\n\t\t\t:max-suggestions=\"3\"\n\t\t\tclearable\n\t\t\t@select=\"(item) => (selected = JSON.stringify(item))\"\n\t\t/>\n\t\t<output>文本：{{ value }}；选项：{{ selected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteOptionsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nimport type { AsamOption } from '@asam-ui/ui';\nconst value = ref('');\nconst selected = ref('尚未选择');\nconst options: AsamOption<string>[] = [\n\t{ value: 'shanghai', label: '上海', raw: { code: 'SH' } },\n\t{ value: 'beijing', label: '北京', raw: { code: 'BJ' } },\n\t{ value: 'closed', label: '停用城市', disabled: true, raw: { code: 'OFF' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/options/js/Demo.vue",
									"sha256": "d2db42335de37208a01dcc4928d5f3e81f7090741c2a8e54db6073bc0726d91c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '城市补全' }\"\n\t\t\t:options=\"options\"\n\t\t\t:max-suggestions=\"3\"\n\t\t\tclearable\n\t\t\t@select=\"(item) => (selected = JSON.stringify(item))\"\n\t\t/>\n\t\t<output>文本：{{ value }}；选项：{{ selected }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteOptionsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nconst value = ref('');\nconst selected = ref('尚未选择');\nconst options = [\n\t{ value: 'shanghai', label: '上海', raw: { code: 'SH' } },\n\t{ value: 'beijing', label: '北京', raw: { code: 'BJ' } },\n\t{ value: 'closed', label: '停用城市', disabled: true, raw: { code: 'OFF' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "suggestions",
					"title": "函数建议与多文件数据",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/suggestions/ts/Demo.vue",
									"sha256": "7be778e3ad1e8cbfa6045e20ac898a6cfb63a20c7aae61c19f09d51aac4a778c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '服务补全' }\"\n\t\t\t:fetch-suggestions=\"suggest\"\n\t\t\tvalue-key=\"label\"\n\t\t\t:debounce=\"150\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\thighlight-first-item\n\t\t\t@select=\"(item) => (selected = 'label' in item ? item.label : String(item.value))\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t{{ item.label }} · {{ 'code' in item ? item.code : item.value }}\n\t\t\t</template>\n\t\t\t<template #header> 本地服务建议 </template>\n\t\t\t<template #footer> 输入名称检索 </template>\n\t\t</AsamAutocomplete>\n\t\t<output>选择：{{ selected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteSuggestionsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nimport { suggest } from './suggestions';\nconst value = ref('');\nconst selected = ref('');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "suggestions.ts",
									"sourcePath": "apps/website/examples/AsamAutocomplete/suggestions/ts/suggestions.ts",
									"sha256": "a99f8ef60e83c875f4cb999e26e3ef3a071339550d86b48ffcedab4527bbbfda",
									"source": "export interface ServiceSuggestion {\n\tlabel: string;\n\tcode: string;\n}\nconst services: ServiceSuggestion[] = [\n\t{ label: '设计服务', code: 'DES' },\n\t{ label: '开发服务', code: 'DEV' }\n];\nexport async function suggest(query: string): Promise<ServiceSuggestion[]> {\n\treturn services.filter((item) => item.label.includes(query));\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/suggestions/js/Demo.vue",
									"sha256": "179e798acc4990b7413f56b64333d00bb5374a3c4da2422d246e494370e38127",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '服务补全' }\"\n\t\t\t:fetch-suggestions=\"suggest\"\n\t\t\tvalue-key=\"label\"\n\t\t\t:debounce=\"150\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\thighlight-first-item\n\t\t\t@select=\"(item) => (selected = 'label' in item ? item.label : String(item.value))\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t{{ item.label }} · {{ 'code' in item ? item.code : item.value }}\n\t\t\t</template>\n\t\t\t<template #header> 本地服务建议 </template>\n\t\t\t<template #footer> 输入名称检索 </template>\n\t\t</AsamAutocomplete>\n\t\t<output>选择：{{ selected }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteSuggestionsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nimport { suggest } from './suggestions';\nconst value = ref('');\nconst selected = ref('');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "suggestions.js",
									"sourcePath": "apps/website/examples/AsamAutocomplete/suggestions/js/suggestions.js",
									"sha256": "90db551ed54803494fa8a3109d8e6078da168f72570bd411a018ab3293929e04",
									"source": "const services = [\n\t{ label: '设计服务', code: 'DES' },\n\t{ label: '开发服务', code: 'DEV' }\n];\nexport async function suggest(query) {\n\treturn services.filter((item) => item.label.includes(query));\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "装饰与建议实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/instance/ts/Demo.vue",
									"sha256": "f70f4eaec61ef67ff40b24baadec3553de51308cc1554434e11f23c12eb9691b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"focusInput\"> 聚焦补全 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"getCitySuggestions\"> 获取建议 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"highlightFirst\"> 高亮首项 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.close()\"> 关闭建议 </AsamButton>\n\t\t</div>\n\t\t<AsamAutocomplete\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例补全' }\"\n\t\t\t:options=\"options\"\n\t\t\t:debounce=\"0\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"Close\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<Search style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #suffix> 补全 </template>\n\t\t\t<template #prepend> 城市搜索 </template>\n\t\t\t<template #append> 城市 </template>\n\t\t</AsamAutocomplete>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteInstanceExample' });\nimport { nextTick, ref } from 'vue';\nimport { AsamAutocomplete, AsamButton } from '@asam-ui/ui';\nimport type { AsamAutocompleteExpose, AsamOption } from '@asam-ui/ui';\nimport { Search, Close } from '@asam-ui/icons-vue';\nconst input = ref<AsamAutocompleteExpose>();\nconst value = ref('');\nconst options: AsamOption<string>[] = [\n\t{ value: 'shanghai', label: '上海', raw: { code: 'SH' } },\n\t{ value: 'beijing', label: '北京', raw: { code: 'BJ' } }\n];\nasync function prepareSuggestions(query: string) {\n\t// The button takes focus first. Let the previous native blur close finish\n\t// before establishing a new focused, rendered suggestions panel.\n\tawait new Promise<void>((resolve) => setTimeout(resolve, 0));\n\tconst control = input.value;\n\tif (!control) return;\n\tcontrol.focus();\n\tawait nextTick();\n\tawait control.getData(query);\n\tawait nextTick();\n}\nasync function focusInput() {\n\tawait prepareSuggestions(value.value);\n}\nasync function getCitySuggestions() {\n\tawait prepareSuggestions('上');\n}\nasync function highlightFirst() {\n\tawait prepareSuggestions('上');\n\tinput.value?.highlight(0);\n}\n</script>\n\n<style scoped>\n.example {\n\t--asam-layout-control-width: 100%;\n\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/instance/js/Demo.vue",
									"sha256": "dc7e6370f50c8f6f80da6e1261891bbb0a45aa2dcd41cf199808eda6ead04475",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"focusInput\"> 聚焦补全 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"getCitySuggestions\"> 获取建议 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"highlightFirst\"> 高亮首项 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.close()\"> 关闭建议 </AsamButton>\n\t\t</div>\n\t\t<AsamAutocomplete\n\t\t\tref=\"input\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '实例补全' }\"\n\t\t\t:options=\"options\"\n\t\t\t:debounce=\"0\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"Close\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<Search style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #suffix> 补全 </template>\n\t\t\t<template #prepend> 城市搜索 </template>\n\t\t\t<template #append> 城市 </template>\n\t\t</AsamAutocomplete>\n\t\t<output>{{ JSON.stringify({ value }) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteInstanceExample' });\nimport { nextTick, ref } from 'vue';\nimport { AsamAutocomplete, AsamButton } from '@asam-ui/ui';\nimport { Search, Close } from '@asam-ui/icons-vue';\nconst input = ref();\nconst value = ref('');\nconst options = [\n\t{ value: 'shanghai', label: '上海', raw: { code: 'SH' } },\n\t{ value: 'beijing', label: '北京', raw: { code: 'BJ' } }\n];\nasync function prepareSuggestions(query) {\n\t// The button takes focus first. Let the previous native blur close finish\n\t// before establishing a new focused, rendered suggestions panel.\n\tawait new Promise((resolve) => setTimeout(resolve, 0));\n\tconst control = input.value;\n\tif (!control) return;\n\tcontrol.focus();\n\tawait nextTick();\n\tawait control.getData(query);\n\tawait nextTick();\n}\nasync function focusInput() {\n\tawait prepareSuggestions(value.value);\n}\nasync function getCitySuggestions() {\n\tawait prepareSuggestions('上');\n}\nasync function highlightFirst() {\n\tawait prepareSuggestions('上');\n\tinput.value?.highlight(0);\n}\n</script>\n\n<style scoped>\n.example {\n\t--asam-layout-control-width: 100%;\n\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/sizes/ts/Demo.vue",
									"sha256": "89f2c4a199af2b26907521ba5f85deafc4f6ba5e94b5bc567a84a083b6e7c243",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteSizesExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/sizes/js/Demo.vue",
									"sha256": "034fa733c19615a36dd070ad4c0432267f19d1c24793230678e0fd92dff48cb6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t\t<AsamAutocomplete\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"ASAM\"\n\t\t\t\t\t:fetch-suggestions=\"[]\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteSizesExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popper",
					"title": "浮层定位、箭头与容器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/popper/ts/Demo.vue",
									"sha256": "f616fd63ebe3e1d830745fc79fd9f786271ccd4909b46940b6017d30015d043a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"arrow\">显示箭头</AsamCheckboxItem\n\t\t><AsamCheckboxItem v-model=\"teleported\">传送到 body</AsamCheckboxItem\n\t\t><AsamAutocomplete\n\t\t\tv-model=\"query\"\n\t\t\t:options=\"options\"\n\t\t\t:show-arrow=\"arrow\"\n\t\t\t:popper-options=\"popperOptions\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:fit-input-width=\"true\"\n\t\t\tpopper-class=\"example-suggestion\"\n\t\t\taria-label=\"定位建议\"\n\t\t>\n\t\t\t<template #header>建议列表</template><template #footer>方向键选择，Esc关闭</template>\n\t\t</AsamAutocomplete>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompletePopperExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamAutocomplete } from '@asam-ui/ui';\nconst query = ref('');\nconst arrow = ref(true);\nconst teleported = ref(true);\nconst options = [\n\t{ value: 'a', label: 'Alpha', raw: {} },\n\t{ value: 'b', label: 'Beta', raw: {} }\n];\nconst popperOptions = {\n\tstrategy: 'fixed' as const,\n\tmodifiers: [{ name: 'offset', options: { offset: [0, 20] } }]\n};\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/popper/js/Demo.vue",
									"sha256": "bd931917e34726d27fdf64ddb76cbeb4383ce8c8c4b13cf2bf92103d67e5f23e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"arrow\">显示箭头</AsamCheckboxItem\n\t\t><AsamCheckboxItem v-model=\"teleported\">传送到 body</AsamCheckboxItem\n\t\t><AsamAutocomplete\n\t\t\tv-model=\"query\"\n\t\t\t:options=\"options\"\n\t\t\t:show-arrow=\"arrow\"\n\t\t\t:popper-options=\"popperOptions\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:fit-input-width=\"true\"\n\t\t\tpopper-class=\"example-suggestion\"\n\t\t\taria-label=\"定位建议\"\n\t\t>\n\t\t\t<template #header>建议列表</template><template #footer>方向键选择，Esc关闭</template>\n\t\t</AsamAutocomplete>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamAutocompletePopperExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamAutocomplete } from '@asam-ui/ui';\nconst query = ref('');\nconst arrow = ref(true);\nconst teleported = ref(true);\nconst options = [\n\t{ value: 'a', label: 'Alpha', raw: {} },\n\t{ value: 'b', label: 'Beta', raw: {} }\n];\nconst popperOptions = {\n\tstrategy: 'fixed',\n\tmodifiers: [{ name: 'offset', options: { offset: [0, 20] } }]\n};\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "async",
					"title": "异步建议、加载与未匹配提交",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/async/ts/Demo.vue",
									"sha256": "603d718c7785d7e1e70d9a4893c54a0180bb1a70c49f3a55cf2f61416d1861c7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"query\"\n\t\t\t:fetch-suggestions=\"fetchSuggestions\"\n\t\t\t:debounce=\"100\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\tselect-when-unmatched\n\t\t\thighlight-first-item\n\t\t\t:loop-navigation=\"false\"\n\t\t\taria-label=\"异步建议\"\n\t\t\t@select=\"handleSelect\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t{{ item.value }} · {{ 'id' in item ? item.id : '' }}\n\t\t\t</template>\n\t\t\t<template #loading>查询中，请稍候</template>\n\t\t</AsamAutocomplete>\n\t\t<output>选择：{{ selected }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入后等待本地异步建议，选择建议查看完整对象。输入“自由输入”后等待空建议再按\n\t\t\tEnter，查看只有 value 的载荷；消费方先收窄再读取完整候选字段。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteAsyncExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nimport type { AsamAutocompleteEmits, AsamValue, AsamRecord } from '@asam-ui/ui';\ninterface Suggestion {\n\tvalue: string;\n\tid: number;\n}\nconst query = ref('');\nconst selected = ref('');\nasync function fetchSuggestions(query: string): Promise<Suggestion[]> {\n\tawait new Promise((resolve) => setTimeout(resolve, 400));\n\treturn query === '自由输入' ? [] : [{ value: query + ' suggestion', id: 42 }];\n}\nfunction handleSelect(item: AsamAutocompleteEmits<AsamValue, AsamRecord, Suggestion>['select'][0]) {\n\tif ('id' in item) selected.value = `匹配建议 #${item.id}：${JSON.stringify(item)}`;\n\telse if ('label' in item) selected.value = `匹配选项 ${item.label}：${JSON.stringify(item)}`;\n\telse selected.value = `未匹配：${JSON.stringify(item)}`;\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/async/js/Demo.vue",
									"sha256": "3d0f320282db00be12f9d2c8a2e80e8abe1bb43023b22c6cf813afa68611bd6a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"query\"\n\t\t\t:fetch-suggestions=\"fetchSuggestions\"\n\t\t\t:debounce=\"100\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\tselect-when-unmatched\n\t\t\thighlight-first-item\n\t\t\t:loop-navigation=\"false\"\n\t\t\taria-label=\"异步建议\"\n\t\t\t@select=\"handleSelect\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t{{ item.value }} · {{ 'id' in item ? item.id : '' }}\n\t\t\t</template>\n\t\t\t<template #loading>查询中，请稍候</template>\n\t\t</AsamAutocomplete>\n\t\t<output>选择：{{ selected }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t输入后等待本地异步建议，选择建议查看完整对象。输入“自由输入”后等待空建议再按\n\t\t\tEnter，查看只有 value 的载荷；消费方先收窄再读取完整候选字段。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteAsyncExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nconst query = ref('');\nconst selected = ref('');\nasync function fetchSuggestions(query) {\n\tawait new Promise((resolve) => setTimeout(resolve, 400));\n\treturn query === '自由输入' ? [] : [{ value: query + ' suggestion', id: 42 }];\n}\nfunction handleSelect(item) {\n\tif ('id' in item) selected.value = `匹配建议 #${item.id}：${JSON.stringify(item)}`;\n\telse if ('label' in item) selected.value = `匹配选项 ${item.label}：${JSON.stringify(item)}`;\n\telse selected.value = `未匹配：${JSON.stringify(item)}`;\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-protocols",
					"title": "数组、回调和 Promise 协议",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/native-protocols/ts/Demo.vue",
									"sha256": "2a471006c40207c30c3ec4e80ec190988cc1c49bedef40d3459120c1295d7368",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"arrayValue\"\n\t\t\t:fetch-suggestions=\"items\"\n\t\t\taria-label=\"数组建议\"\n\t\t/><AsamAutocomplete\n\t\t\tv-model=\"callbackValue\"\n\t\t\t:fetch-suggestions=\"callback\"\n\t\t\tselect-when-unmatched\n\t\t\taria-label=\"回调建议\"\n\t\t\t@select=\"selected = JSON.stringify($event)\"\n\t\t/><AsamAutocomplete\n\t\t\tv-model=\"promiseValue\"\n\t\t\t:fetch-suggestions=\"promise\"\n\t\t\taria-label=\"Promise建议\"\n\t\t/><output>{{ selected }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteNativeProtocolsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nconst arrayValue = ref('');\nconst callbackValue = ref('');\nconst promiseValue = ref('');\nconst selected = ref('');\nconst items = [\n\t{ value: 'Alpha', code: 'a' },\n\t{ value: 'Beta', code: 'b' }\n];\nconst filter = (query: string) =>\n\titems.filter((item) => item.value.toLowerCase().includes(query.toLowerCase()));\nfunction callback(query: string, done: (items: { value: string; code: string }[]) => void) {\n\tdone(filter(query));\n}\nasync function promise(query: string) {\n\treturn filter(query);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/native-protocols/js/Demo.vue",
									"sha256": "fad85025db7ebf39ad70954a96c610bfded661d3ddc5d8ab734a12e8deb8d4ba",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"arrayValue\"\n\t\t\t:fetch-suggestions=\"items\"\n\t\t\taria-label=\"数组建议\"\n\t\t/><AsamAutocomplete\n\t\t\tv-model=\"callbackValue\"\n\t\t\t:fetch-suggestions=\"callback\"\n\t\t\tselect-when-unmatched\n\t\t\taria-label=\"回调建议\"\n\t\t\t@select=\"selected = JSON.stringify($event)\"\n\t\t/><AsamAutocomplete\n\t\t\tv-model=\"promiseValue\"\n\t\t\t:fetch-suggestions=\"promise\"\n\t\t\taria-label=\"Promise建议\"\n\t\t/><output>{{ selected }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteNativeProtocolsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nconst arrayValue = ref('');\nconst callbackValue = ref('');\nconst promiseValue = ref('');\nconst selected = ref('');\nconst items = [\n\t{ value: 'Alpha', code: 'a' },\n\t{ value: 'Beta', code: 'b' }\n];\nconst filter = (query) =>\n\titems.filter((item) => item.value.toLowerCase().includes(query.toLowerCase()));\nfunction callback(query, done) {\n\tdone(filter(query));\n}\nasync function promise(query) {\n\treturn filter(query);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-input",
					"title": "完整继承输入组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/native-input/ts/Demo.vue",
									"sha256": "3387825fe563db0ba039f1b7a1500e6ce29833caad49a5502d0b6f3b35a8bf7e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"numeric\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\ttype=\"number\"\n\t\t\t:min=\"1\"\n\t\t\t:max=\"9\"\n\t\t\t:step=\"0.5\"\n\t\t\taria-label=\"原生约束\"\n\t\t/>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"amount\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"继承格式化\"\n\t\t/>\n\t\t<AsamAutocomplete\n\t\t\tv-model.trim.number.lazy=\"modified\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\taria-label=\"提及或建议修饰符\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"modified = 42\"\n\t\t\t>外部设置 42</AsamButton\n\t\t>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"text\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\ttype=\"textarea\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 4 }\"\n\t\t\t:maxlength=\"3\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\t:count-graphemes=\"countGraphemes\"\n\t\t\taria-label=\"多行建议与字素\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ numeric, amount, modified, text, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t原生数字约束作用于实际 input；formatter/parser 改变显示并解析模型；number\n\t\t\t修饰符可更新为数字，再传入仍正确显示；textarea 与字素计数适用于本入口的提及或建议。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamAutocomplete } from '@asam-ui/ui';\nimport type { AsamAutocompleteEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteNativeInputExample' });\nconst options = [{ value: 'Alice', label: 'Alice' }];\nconst numeric = ref<string | number>('1');\nconst amount = ref<string | number>('1234');\nconst modified = ref<string | number>('');\nconst text = ref('👩‍👩‍👧‍👦');\nconst updates = ref<(string | number)[]>([]);\nfunction record(...[value]: AsamAutocompleteEmits['update:modelValue']) {\n\tupdates.value.push(value);\n}\nconst formatter = (value: string) =>\n\tvalue === '' ? '' : '$' + value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value: string) => value.replace(/[$,]/g, '');\nconst countGraphemes = (value: string) => Array.from(new Intl.Segmenter().segment(value)).length;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/native-input/js/Demo.vue",
									"sha256": "5a930e3cd1cf2dc25dcd37972d66eeb88c396bbd0e6995e14deb1be8156497fb",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"numeric\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\ttype=\"number\"\n\t\t\t:min=\"1\"\n\t\t\t:max=\"9\"\n\t\t\t:step=\"0.5\"\n\t\t\taria-label=\"原生约束\"\n\t\t/>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"amount\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"继承格式化\"\n\t\t/>\n\t\t<AsamAutocomplete\n\t\t\tv-model.trim.number.lazy=\"modified\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\taria-label=\"提及或建议修饰符\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"modified = 42\"\n\t\t\t>外部设置 42</AsamButton\n\t\t>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"text\"\n\t\t\t:fetch-suggestions=\"options\"\n\t\t\ttype=\"textarea\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 4 }\"\n\t\t\t:maxlength=\"3\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\t:count-graphemes=\"countGraphemes\"\n\t\t\taria-label=\"多行建议与字素\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ numeric, amount, modified, text, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t原生数字约束作用于实际 input；formatter/parser 改变显示并解析模型；number\n\t\t\t修饰符可更新为数字，再传入仍正确显示；textarea 与字素计数适用于本入口的提及或建议。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamAutocomplete } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteNativeInputExample' });\nconst options = [{ value: 'Alice', label: 'Alice' }];\nconst numeric = ref('1');\nconst amount = ref('1234');\nconst modified = ref('');\nconst text = ref('👩‍👩‍👧‍👦');\nconst updates = ref([]);\nfunction record(...[value]) {\n\tupdates.value.push(value);\n}\nconst formatter = (value) =>\n\tvalue === '' ? '' : '$' + value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value) => value.replace(/[$,]/g, '');\nconst countGraphemes = (value) => Array.from(new Intl.Segmenter().segment(value)).length;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form-inputs",
					"title": "五入口表单继承与校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/form-inputs/ts/Demo.vue",
									"sha256": "9a3ae0f474c1c59619f4c4dbc496c236424820088b3d00deca764e4e70a02443",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({\n\tinput: '',\n\tpassword: '',\n\ttextarea: '',\n\tautocomplete: '',\n\ttags: [] as string[]\n});\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref<AsamBaseFormExpose>();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref<{ prop: string; valid: boolean }[]>([]);\nfunction record(prop: string | string[], valid: boolean) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/form-inputs/js/Demo.vue",
									"sha256": "55507e95d0a63bc8acfdcc59f65911401ee05d1d2ed8d6ccd72c91ac83fb4cab",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref([]);\nfunction record(prop, valid) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "state",
					"title": "异步建议与动态只读禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/state/ts/Demo.vue",
									"sha256": "d70f5bace9b21be363f09a11112125d3ea305f40ab3be683f402a97599c07249",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用表单</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\t:model=\"{ value }\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\t\t\t<AsamAutocomplete\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\thighlight-first-item\n\t\t\t\taria-label=\"动态异步建议\"\n\t\t\t\t@update:model-value=\"events.push('update')\"\n\t\t\t\t@select=\"events.push('select')\"\n\t\t\t/>\n\t\t</AsamBaseForm>\n\t\t<output>{{ JSON.stringify({ value, readonly, disabled, events }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamBaseForm, AsamAutocomplete } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteStateExample' });\nconst value = ref('');\nconst readonly = ref(true);\nconst disabled = ref(false);\nconst events = ref<string[]>([]);\nasync function suggestions() {\n\tawait new Promise((resolve) => setTimeout(resolve, 150));\n\treturn [{ value: 'Alpha' }];\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/state/js/Demo.vue",
									"sha256": "bdc9fdaada1aedb3d0fe770c4a765a91d38463d3b014d04f7a04977f26b7f29c",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用表单</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\t:model=\"{ value }\"\n\t\t\t:disabled=\"disabled\"\n\t\t>\n\t\t\t<AsamAutocomplete\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\thighlight-first-item\n\t\t\t\taria-label=\"动态异步建议\"\n\t\t\t\t@update:model-value=\"events.push('update')\"\n\t\t\t\t@select=\"events.push('select')\"\n\t\t\t/>\n\t\t</AsamBaseForm>\n\t\t<output>{{ JSON.stringify({ value, readonly, disabled, events }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamBaseForm, AsamAutocomplete } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteStateExample' });\nconst value = ref('');\nconst readonly = ref(true);\nconst disabled = ref(false);\nconst events = ref([]);\nasync function suggestions() {\n\tawait new Promise((resolve) => setTimeout(resolve, 150));\n\treturn [{ value: 'Alpha' }];\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "events",
					"title": "继承输入事件与候选键盘操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/events/ts/Demo.vue",
									"sha256": "ccb2ea063e28ddaba5bec287512cdf400de39250f915adfcac5c4567a94bceb7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:debounce=\"0\"\n\t\t\tclearable\n\t\t\taria-label=\"补全继承输入事件\"\n\t\t\t@keydown=\"keyed\"\n\t\t\t@mouseenter=\"entered\"\n\t\t\t@mouseleave=\"left\"\n\t\t\t@compositionstart=\"started\"\n\t\t\t@compositionupdate=\"updated\"\n\t\t\t@compositionend=\"ended\"\n\t\t\t@select=\"record('select', $event)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出输入焦点</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, events }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamAutocomplete } from '@asam-ui/ui';\nimport type { AsamAutocompleteEmits } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamAutocompleteEventsDemo' });\nconst value = ref('');\nconst options = [{ value: 'alpha', label: 'Alpha', raw: { id: 'alpha' } }];\nconst events = ref<{ name: string; value: unknown }[]>([]);\nfunction record(name: string, value: unknown) {\n\tevents.value.push({ name, value });\n}\nfunction keyed(...[event]: AsamAutocompleteEmits['keydown']) {\n\trecord('keydown', event instanceof KeyboardEvent ? event.key : event.type);\n}\nfunction entered(...[event]: AsamAutocompleteEmits['mouseenter']) {\n\trecord('mouseenter', event.type);\n}\nfunction left(...[event]: AsamAutocompleteEmits['mouseleave']) {\n\trecord('mouseleave', event.type);\n}\nfunction started(...[event]: AsamAutocompleteEmits['compositionstart']) {\n\trecord('compositionstart', event.data);\n}\nfunction updated(...[event]: AsamAutocompleteEmits['compositionupdate']) {\n\trecord('compositionupdate', event.data);\n}\nfunction ended(...[event]: AsamAutocompleteEmits['compositionend']) {\n\trecord('compositionend', event.data);\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/events/js/Demo.vue",
									"sha256": "6296f56715f4f0d24dbb0681d6f6179ee2a9177a8210a56a9662caa672702841",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:debounce=\"0\"\n\t\t\tclearable\n\t\t\taria-label=\"补全继承输入事件\"\n\t\t\t@keydown=\"keyed\"\n\t\t\t@mouseenter=\"entered\"\n\t\t\t@mouseleave=\"left\"\n\t\t\t@compositionstart=\"started\"\n\t\t\t@compositionupdate=\"updated\"\n\t\t\t@compositionend=\"ended\"\n\t\t\t@select=\"record('select', $event)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出输入焦点</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, events }) }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamAutocomplete } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteEventsDemo' });\nconst value = ref('');\nconst options = [{ value: 'alpha', label: 'Alpha', raw: { id: 'alpha' } }];\nconst events = ref([]);\nfunction record(name, value) {\n\tevents.value.push({ name, value });\n}\nfunction keyed(...[event]) {\n\trecord('keydown', event instanceof KeyboardEvent ? event.key : event.type);\n}\nfunction entered(...[event]) {\n\trecord('mouseenter', event.type);\n}\nfunction left(...[event]) {\n\trecord('mouseleave', event.type);\n}\nfunction started(...[event]) {\n\trecord('compositionstart', event.data);\n}\nfunction updated(...[event]) {\n\trecord('compositionupdate', event.data);\n}\nfunction ended(...[event]) {\n\trecord('compositionend', event.data);\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dynamic-type",
					"title": "动态原生类型与状态保留",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/dynamic-type/ts/Demo.vue",
									"sha256": "72b56d58205e89fe272a7d93a821b9ab95bcf4d9d7ddb172c9462eb32f231619",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tv-for=\"kind in kinds\"\n\t\t\t\t:key=\"kind\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@pointerdown.prevent\n\t\t\t\t@click=\"type = kind\"\n\t\t\t>\n\t\t\t\t{{ kind }}\n\t\t\t</AsamButton>\n\t\t\t<span>先输入 42，再保持焦点切换类型；前缀按钮的计数应保留。</span>\n\t\t</div>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\taria-label=\"动态输入类型\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t>\n\t\t\t<template #prefix><SlotCounter /></template>\n\t\t</AsamAutocomplete>\n\t\t<output>{{ JSON.stringify({ type, value, inputs }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tnumber 的 min/max/step 保留原生约束；切回 text 或 password\n\t\t\t后继续编辑。类型切换与光标行为由底层输入处理。number\n\t\t\t不支持文本选区，调用文本选区方法可能抛出\n\t\t\tInvalidStateError；此入口不补做游标恢复，也不保证未提交编辑值或焦点跨类型保留。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteDynamicTypeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamAutocomplete } from '@asam-ui/ui';\nimport SlotCounter from './SlotCounter.vue';\nconst kinds = ['text', 'password', 'number'] as const;\nconst type = ref<(typeof kinds)[number]>('text');\nconst value = ref<string | number>('42');\nconst inputs = ref<(string | number)[]>([]);\nconst suggestions = [{ value: '4', label: '四' }];\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SlotCounter.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/dynamic-type/ts/SlotCounter.vue",
									"sha256": "93e28d9d9ad2e9aad8dcbecaeaf990061cc6f3a06af1d4c157c565359a5e1f40",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\"\n\t\t>前缀计数 {{ count }}</AsamButton\n\t>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/dynamic-type/js/Demo.vue",
									"sha256": "d6117c7e6ce5a7bbcf428fd465f186ebce4258bb0caf4f5a5dcc68f123c8c5ee",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tv-for=\"kind in kinds\"\n\t\t\t\t:key=\"kind\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@pointerdown.prevent\n\t\t\t\t@click=\"type = kind\"\n\t\t\t>\n\t\t\t\t{{ kind }}\n\t\t\t</AsamButton>\n\t\t\t<span>先输入 42，再保持焦点切换类型；前缀按钮的计数应保留。</span>\n\t\t</div>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\taria-label=\"动态输入类型\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t>\n\t\t\t<template #prefix><SlotCounter /></template>\n\t\t</AsamAutocomplete>\n\t\t<output>{{ JSON.stringify({ type, value, inputs }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tnumber 的 min/max/step 保留原生约束；切回 text 或 password\n\t\t\t后继续编辑。类型切换与光标行为由底层输入处理。number\n\t\t\t不支持文本选区，调用文本选区方法可能抛出\n\t\t\tInvalidStateError；此入口不补做游标恢复，也不保证未提交编辑值或焦点跨类型保留。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteDynamicTypeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamAutocomplete } from '@asam-ui/ui';\nimport SlotCounter from './SlotCounter.vue';\nconst kinds = ['text', 'password', 'number'];\nconst type = ref('text');\nconst value = ref('42');\nconst inputs = ref([]);\nconst suggestions = [{ value: '4', label: '四' }];\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SlotCounter.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/dynamic-type/js/SlotCounter.vue",
									"sha256": "7e9ccded7731443c0828a76d7511bd44223855832daa687a3b8573c76584ead5",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\"\n\t\t>前缀计数 {{ count }}</AsamButton\n\t>\n</template>\n<script setup>\nimport { AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-delegation",
					"title": "原生委托与事件记录",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/native-delegation/ts/Demo.vue",
									"sha256": "845e38bac77e8109c95352762ea4a72a39262df1d2f6df9161e484f82b6c8aec",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t:debounce=\"0\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamAutocomplete } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteNativeDelegationExample' });\nconst asam = ref<string | number>('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst suggestions = [{ value: 'Alpha', label: 'Alpha' }];\nconst events = ref<{ source: string; event: string; values: unknown[] }[]>([]);\nfunction record(source: string, event: string, ...values: unknown[]) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/native-delegation/js/Demo.vue",
									"sha256": "21005e26b7f86c6608db1570a22f6f491f1a58a154211637b831e7405d1a18d5",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamAutocomplete\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t:debounce=\"0\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamAutocomplete } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamAutocompleteNativeDelegationExample' });\nconst asam = ref('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst suggestions = [{ value: 'Alpha', label: 'Alpha' }];\nconst events = ref([]);\nfunction record(source, event, ...values) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/popup-container/ts/Demo.vue",
									"sha256": "11835174aa589f24c9dd3a13fb4d1010937f00bd79f267ddf563152f6aa29672",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamAutocomplete\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '城市补全' }\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:max-suggestions=\"3\"\n\t\t\t\tclearable\n\t\t\t\t@select=\"(item) => (selected = JSON.stringify(item))\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t/>\n\t\t\t<output>文本：{{ value }}；选项：{{ selected }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutocompleteOptionsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nimport type { AsamOption } from '@asam-ui/ui';\nconst value = ref('');\nconst selected = ref('尚未选择');\nconst options: AsamOption<string>[] = [\n\t{ value: 'shanghai', label: '上海', raw: { code: 'SH' } },\n\t{ value: 'beijing', label: '北京', raw: { code: 'BJ' } },\n\t{ value: 'closed', label: '停用城市', disabled: true, raw: { code: 'OFF' } }\n];\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutocomplete/popup-container/js/Demo.vue",
									"sha256": "38d6e18b0d4099b0e48f3e126f7efc6fbeca084ab1f79d2aefce30fda1458f74",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamAutocomplete\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '城市补全' }\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:max-suggestions=\"3\"\n\t\t\t\tclearable\n\t\t\t\t@select=\"(item) => (selected = JSON.stringify(item))\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t/>\n\t\t\t<output>文本：{{ value }}；选项：{{ selected }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAutocompleteOptionsExample' });\nimport { ref } from 'vue';\nimport { AsamAutocomplete } from '@asam-ui/ui';\nconst value = ref('');\nconst selected = ref('尚未选择');\nconst options = [\n\t{ value: 'shanghai', label: '上海', raw: { code: 'SH' } },\n\t{ value: 'beijing', label: '北京', raw: { code: 'BJ' } },\n\t{ value: 'closed', label: '停用城市', disabled: true, raw: { code: 'OFF' } }\n];\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteAutocomplete",
			"documentation": "/component-AsamRemoteAutocomplete.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/basic/ts/Demo.vue",
									"sha256": "75541cdcf34ccdb840e5246fbf9d705056657bdad972ef51a16618f046b4ce25",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t/>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type { AsamRemoteAutocompleteExpose, AsamApiRequest } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamRemoteAutocompleteBasicDemoExample' });\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | number>('');\nconst active = ref(true);\nconst control = ref<AsamRemoteAutocompleteExpose<string, Item>>();\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nfunction source(text: string) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/basic/js/Demo.vue",
									"sha256": "4db619e6571dfa6aaee6ec13fbe3769fda903c3c31a75e73ced139396b8df0e1",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t/>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamRemoteAutocompleteBasicDemoExample' });\nconst value = ref('');\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nfunction source(text) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-data",
					"title": "浮层、完整建议项与错误恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/Demo.vue",
									"sha256": "3fafe8e107aae2429bf82eacdcdb320c2647b0adc4ba392b0bce21a44f1c5654",
									"source": "<template>\n\t<section class=\"autocomplete-demo\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"showQueryContract = !showQueryContract\"\n\t\t\t>\n\t\t\t\t展示建议查询协议\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取公开实例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showArrow = true\"\n\t\t\t\t>显示浮层箭头</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showArrow = false\"\n\t\t\t\t>隐藏浮层箭头</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showArrow = undefined\"\n\t\t\t\t>恢复默认箭头</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"offset = 0\"\n\t\t\t\t>取消额外偏移</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"offset = 16\"\n\t\t\t\t>恢复额外偏移</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\t:show-arrow=\"showArrow\"\n\t\t\t:popper-options=\"popperOptions\"\n\t\t\t:debounce=\"100\"\n\t\t\t:loop-navigation=\"false\"\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\taria-label=\"搜索成员\"\n\t\t\tplaceholder=\"输入 Alpha 或 Beta\"\n\t\t\t@update:model-value=\"recordValue('update:modelValue', $event)\"\n\t\t\t@input=\"recordValue('input', $event)\"\n\t\t\t@change=\"recordValue('change', $event)\"\n\t\t\t@select=\"recordSelect\"\n\t\t\t@clear=\"events.push({ name: 'clear', payload: null })\"\n\t\t\t@focus=\"recordDom('focus', $event)\"\n\t\t\t@blur=\"recordDom('blur', $event)\"\n\t\t\t@mouseenter=\"recordDom('mouseenter', $event)\"\n\t\t\t@mouseleave=\"recordDom('mouseleave', $event)\"\n\t\t\t@compositionstart=\"recordDom('compositionstart', $event)\"\n\t\t\t@compositionupdate=\"recordDom('compositionupdate', $event)\"\n\t\t\t@compositionend=\"recordDom('compositionend', $event)\"\n\t\t\t@keydown=\"recordKey\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"autocomplete-prefix\">找</span></template>\n\t\t\t<template #suffix><span data-testid=\"autocomplete-suffix\">本地</span></template>\n\t\t\t<template #prepend><span data-testid=\"autocomplete-prepend\">成员</span></template>\n\t\t\t<template #append>\n\t\t\t\t<AsamCollapse\n\t\t\t\t\t@mousedown=\"keepHeaderFocus\"\n\t\t\t\t\tclass=\"instance-controls\"\n\t\t\t\t\tdata-testid=\"autocomplete-append\"\n\t\t\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t\t\t<template #title><span @mousedown.prevent>实例控制</span></template>\n\t\t\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"inspect\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t读取实例状态\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.focus()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例聚焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例失焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.close()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例关闭建议\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"loadAll\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例读取全部建议\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(0)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例高亮首项\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(-1)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例取消高亮\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"selectFirst\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例选择首项\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"enter\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例提交 Enter\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t\t\t>\n\t\t\t</template>\n\t\t\t<template #header>\n\t\t\t\t<p class=\"panel-caption example-paragraph\" data-testid=\"autocomplete-header\">本地异步成员建议</p>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"panel-caption example-paragraph\" data-testid=\"autocomplete-footer\">\n\t\t\t\t\t匹配建议保留 raw；未匹配 Enter 只有 value\n\t\t\t\t</p>\n\t\t\t</template>\n\t\t\t<template #loading>\n\t\t\t\t<p class=\"panel-caption example-paragraph\" data-testid=\"autocomplete-loading\">正在加载成员…</p>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t<span data-testid=\"autocomplete-option\">{{ item.label }} · {{ item.raw.id }}</span>\n\t\t\t</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<p class=\"example-paragraph\">模型：{{ value }}；最近按键：{{ lastKey }}；请求次数：{{ requests }}</p>\n\t\t<pre>{{ JSON.stringify({ selected, instance, methodResult, events }, null, 2) }}</pre>\n\t\t<QueryContract v-if=\"showQueryContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showSelectContract = !showSelectContract\"\n\t\t>\n\t\t\t展示选择载荷契约\n\t\t</AsamButton>\n\t\t<SelectContract v-if=\"showSelectContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showNativeInputContract = !showNativeInputContract\"\n\t\t>\n\t\t\t展示原生输入协议\n\t\t</AsamButton>\n\t\t<NativeInputContract v-if=\"showNativeInputContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPopupContract = !showPopupContract\"\n\t\t>\n\t\t\t展示建议浮层协议\n\t\t</AsamButton>\n\t\t<PopupContract v-if=\"showPopupContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showSourceLifecycleContract = !showSourceLifecycleContract\"\n\t\t>\n\t\t\t展示来源生命周期\n\t\t</AsamButton>\n\t\t<SourceLifecycleContract v-if=\"showSourceLifecycleContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPresentationContract = !showPresentationContract\"\n\t\t>\n\t\t\t展示建议外观协议\n\t\t</AsamButton>\n\t\t<PresentationContract v-if=\"showPresentationContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showFormattingContract = !showFormattingContract\"\n\t\t>\n\t\t\t展示建议格式协议\n\t\t</AsamButton>\n\t\t<FormattingContract v-if=\"showFormattingContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showTextCapabilityContract = !showTextCapabilityContract\"\n\t\t>\n\t\t\t展示建议文本能力\n\t\t</AsamButton>\n\t\t<TextCapabilityContract v-if=\"showTextCapabilityContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showValidationContract = !showValidationContract\"\n\t\t>\n\t\t\t展示建议验证协议\n\t\t</AsamButton>\n\t\t<ValidationContract v-if=\"showValidationContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showInputInstanceContract = !showInputInstanceContract\"\n\t\t>\n\t\t\t展示建议输入实例协议\n\t\t</AsamButton>\n\t\t<InputInstanceContract v-if=\"showInputInstanceContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showOfficialInputContract = !showOfficialInputContract\"\n\t\t>\n\t\t\t展示官方输入组合协议\n\t\t</AsamButton>\n\t\t<OfficialInputContract v-if=\"showOfficialInputContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showOfficialLayoutContract = !showOfficialLayoutContract\"\n\t\t>\n\t\t\t展示官方输入布局协议\n\t\t</AsamButton>\n\t\t<OfficialLayoutContract v-if=\"showOfficialLayoutContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showOfficialSuggestionContract = !showOfficialSuggestionContract\"\n\t\t>\n\t\t\t展示官方建议分支协议\n\t\t</AsamButton>\n\t\t<OfficialSuggestionContract v-if=\"showOfficialSuggestionContract\" />\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport SelectContract from './SelectContract.vue';\nimport NativeInputContract from './NativeInputContract.vue';\nimport PopupContract from './PopupContract.vue';\nimport SourceLifecycleContract from './SourceLifecycleContract.vue';\nimport PresentationContract from './PresentationContract.vue';\nimport FormattingContract from './FormattingContract.vue';\nimport TextCapabilityContract from './TextCapabilityContract.vue';\nimport ValidationContract from './ValidationContract.vue';\nimport InputInstanceContract from './InputInstanceContract.vue';\nimport OfficialInputContract from './OfficialInputContract.vue';\nimport OfficialLayoutContract from './OfficialLayoutContract.vue';\nimport OfficialSuggestionContract from './OfficialSuggestionContract.vue';\ndefineOptions({ name: 'AsamRemoteAutocompleteNativeDataDemo' });\nimport { computed, ref } from 'vue';\nimport QueryContract from './QueryContract.vue';\nconst showQueryContract = ref(false);\nconst showSelectContract = ref(false);\nconst showNativeInputContract = ref(false);\nconst showPopupContract = ref(false);\nconst showSourceLifecycleContract = ref(false);\nconst showPresentationContract = ref(false);\nconst showFormattingContract = ref(false);\nconst showTextCapabilityContract = ref(false);\nconst showValidationContract = ref(false);\nconst showInputInstanceContract = ref(false);\nconst showOfficialInputContract = ref(false);\nconst showOfficialLayoutContract = ref(false);\nconst showOfficialSuggestionContract = ref(false);\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type {\n\tAsamApiRequest,\n\tAsamRemoteAutocompleteEmits,\n\tAsamOption,\n\tAsamRemoteAutocompleteExpose,\n\tAsamRemoteAutocompleteProps,\n\tAsamDataError\n} from '@asam-ui/ui';\n\ninterface Member {\n\tid: number;\n\tlabel: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | number>('');\nconst active = ref(true);\nconst failure = ref(false);\nconst requests = ref(0);\nconst control = ref<AsamRemoteAutocompleteExpose<string, Member>>();\nconst selected = ref<AsamRemoteAutocompleteEmits<string, Member>['select'][0]>();\nconst instance = ref<object>({});\nconst message = ref('');\nconst result = ref('');\nconst lastKey = ref('');\nconst methodResult = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nconst showArrow = ref<boolean | undefined>(false);\nconst offset = ref(16);\nfunction recordKey(event: Event | KeyboardEvent): void {\n\tlastKey.value = event instanceof KeyboardEvent ? event.key : '';\n\trecordDom('keydown', event);\n}\nfunction recordValue(name: string, value: string | number): void {\n\tevents.value.push({ name, payload: value });\n}\nfunction recordDom(name: string, event: Event): void {\n\tevents.value.push({\n\t\tname,\n\t\tpayload: {\n\t\t\ttype: event.type,\n\t\t\tconstructor: event.constructor.name,\n\t\t\ttrusted: event.isTrusted,\n\t\t\tkey: event instanceof KeyboardEvent ? event.key : undefined,\n\t\t\tdata: event instanceof CompositionEvent ? event.data : undefined\n\t\t}\n\t});\n}\nfunction recordSelect(option: AsamRemoteAutocompleteEmits<string, Member>['select'][0]): void {\n\tselected.value = option;\n\tevents.value.push({ name: 'select', payload: option });\n}\nfunction recordError(error: AsamDataError): void {\n\tmessage.value = error.message;\n\tevents.value.push({ name: 'error', payload: { kind: error.kind, message: error.message } });\n}\nfunction recordSuccess(options: readonly AsamOption<string, Member>[]): void {\n\tmessage.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst members: readonly Member[] = [\n\t{ id: 1, label: 'Alpha', value: 'alpha' },\n\t{ id: 2, label: 'Beta', value: 'beta' }\n];\nconst popperOptions = computed<AsamRemoteAutocompleteProps<string, Member>['popperOptions']>(\n\t() => ({\n\t\tmodifiers: [{ name: 'offset', options: { offset: [0, offset.value] } }]\n\t})\n);\nconst api: AsamApiRequest<Query, readonly Member[]> = async (query, context) => {\n\trequests.value += 1;\n\tawait new Promise<void>((done) => setTimeout(done, 180));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示接口失败');\n\treturn members.filter((member) =>\n\t\tmember.label.toLowerCase().includes(query.text.toLowerCase())\n\t);\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (response: readonly Member[]) => response;\nfunction source(text: string) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function loadAll() {\n\tmethodResult.value = 'getData:pending';\n\tawait control.value?.getData('');\n\tmethodResult.value = 'getData:done';\n}\nasync function selectFirst() {\n\tconst first = control.value?.suggestions[0];\n\tif (!first) return;\n\tawait control.value?.handleSelect(first);\n\tmethodResult.value = 'handleSelect:done';\n}\nasync function enter() {\n\tawait control.value?.handleKeyEnter();\n\tmethodResult.value = 'handleKeyEnter:done';\n}\nfunction inspect() {\n\tconst current = control.value;\n\tinstance.value = {\n\t\thighlightedIndex: current?.highlightedIndex,\n\t\tactivated: current?.activated,\n\t\tloading: current?.loading,\n\t\tsuggestions: current?.suggestions,\n\t\tinputReady: !!current?.inputRef,\n\t\tpopperReady: !!current?.popperRef\n\t};\n}\n\nfunction keepHeaderFocus(event: MouseEvent) {\n\tif (event.target instanceof HTMLElement && event.target.closest('[role=button]'))\n\t\tevent.preventDefault();\n}\n</script>\n\n<style scoped>\n.autocomplete-demo {\n\t--asam-layout-control-width: 100%;\n\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.panel-caption {\n\tmargin: var(--asam-space-xs) var(--asam-space-sm);\n}\n\n.instance-controls {\n\tposition: relative;\n}\n\n.instance-controls .actions {\n\tposition: absolute;\n\tbottom: 100%;\n\tright: 0;\n\tz-index: 2;\n\twidth: max-content;\n\tmax-width: 80vw;\n\tpadding: var(--asam-space-sm);\n\tbackground: var(--el-bg-color);\n}\n\npre {\n\tmax-height: 32rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "QueryContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/QueryContract.vue",
									"sha256": "824d8f493000284862f0d15200c5d0ac567030f2e59133192ed74f4e78299e07",
									"source": "<template>\n\t<section data-testid=\"autocomplete-query-contract\">\n\t\t<h3>建议查询与键盘设置</h3>\n\t\t<div>\n\t\t\t<label>\n\t\t\t\t<span>建议数量</span>\n\t\t\t\t<AsamSelect v-model=\"limitControl\" aria-label=\"建议数量\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"1\" :label=\"'一项'\">一项</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"2\" :label=\"'两项'\">两项</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>聚焦查询</span>\n\t\t\t\t<AsamSelect v-model=\"triggerControl\" aria-label=\"聚焦查询\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>自动高亮首项</span>\n\t\t\t\t<AsamSelect v-model=\"highlightFirstControl\" aria-label=\"自动高亮首项\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>循环导航</span>\n\t\t\t\t<AsamSelect v-model=\"loopControl\" aria-label=\"循环导航\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>未匹配时选择</span>\n\t\t\t\t<AsamSelect v-model=\"unmatchedControl\" aria-label=\"未匹配时选择\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>隐藏加载内容</span>\n\t\t\t\t<AsamSelect v-model=\"hideLoadingControl\" aria-label=\"隐藏加载内容\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>查询防抖</span>\n\t\t\t\t<AsamSelect v-model=\"debounceControl\" aria-label=\"查询防抖\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"0\" :label=\"'立即'\">立即</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"180\" :label=\"'180ms'\">180ms</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>持有本地请求</span>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"hold\" />\n\t\t\t</label>\n\t\t</div>\n\t\t<AsamButton type=\"default\" v-if=\"!mounted\" native-type=\"button\" @click=\"mounted = true\"\n\t\t\t>恢复协议输入</AsamButton\n\t\t>\n\t\t<AsamRemoteAutocomplete\n\t\t\tv-if=\"mounted\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"model\"\n\t\t\t:source=\"source\"\n\t\t\tv-bind=\"limit === undefined ? {} : { maxSuggestions: limit }\"\n\t\t\t:trigger-on-focus=\"trigger\"\n\t\t\t:highlight-first-item=\"highlightFirst\"\n\t\t\t:loop-navigation=\"loop\"\n\t\t\t:select-when-unmatched=\"unmatched\"\n\t\t\t:hide-loading=\"hideLoading\"\n\t\t\t:debounce=\"debounce\"\n\t\t\t:teleported=\"false\"\n\t\t\tplacement=\"bottom-start\"\n\t\t\t:popper-options=\"{ modifiers: [{ name: 'flip', enabled: false }] }\"\n\t\t\taria-label=\"建议查询协议\"\n\t\t\t@select=\"selected.push($event)\"\n\t\t>\n\t\t\t<template #append>\n\t\t\t\t<AsamCollapse @mousedown=\"keepHeaderFocus\" class=\"query-instance-controls\"\n\t\t\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t\t\t<template #title><span @mousedown.prevent>协议实例控制</span></template>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.focus()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议聚焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议失焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.close()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议关闭\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"load\"\n\t\t\t\t\t\t\t\t>协议读取全部</AsamButton\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(-1)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议负索引\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(0)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议首索引\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"enter\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议提交 Enter\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\"\n\t\t\t\t\t\t\t\t>释放本地等待</AsamButton\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"invalidLimits\"\n\t\t\t\t\t\t\t\t>检查无效数量</AsamButton\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"unmountInput\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t停用协议输入\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t\t\t>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t<span data-testid=\"query-item\">{{ item.label }} / {{ item.raw.id }}</span>\n\t\t\t</template>\n\t\t\t<template #loading>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"query-contract-loading\">本地等待中</p>\n\t\t\t</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<pre data-testid=\"query-contract-state\">{{ JSON.stringify(snapshot, null, 2) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type {\n\tAsamApiRequest,\n\tAsamRemoteAutocompleteEmits,\n\tAsamRemoteAutocompleteExpose\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tlabel: string;\n\tvalue: string;\n\tdisabled?: boolean;\n}\nconst members: readonly Member[] = [\n\t{ id: 1, label: 'Alpha', value: 'alpha' },\n\t{ id: 2, label: 'Beta', value: 'beta' },\n\t{ id: 3, label: '禁用', value: 'disabled', disabled: true },\n\t{ id: 4, label: 'Delta', value: 'delta' }\n];\nconst control = ref<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('');\nconst mounted = ref(true);\nconst detachedReferences = ref<{\n\tcontrolPresent: boolean;\n\tinputReady: boolean;\n\tpopperReady: boolean;\n}>();\nconst limit = ref<number | undefined>();\nconst trigger = ref<boolean | undefined>();\nconst highlightFirst = ref<boolean | undefined>();\nconst loop = ref<boolean | undefined>();\nconst unmatched = ref<boolean | undefined>();\nconst hideLoading = ref<boolean | undefined>();\nconst debounce = ref<number | undefined>();\nconst hold = ref(false);\nconst pendingCount = ref(0);\nconst calls = ref<string[]>([]);\nconst selected = ref<AsamRemoteAutocompleteEmits<string, Member>['select'][0][]>([]);\nconst methodResult = ref('');\nconst guardErrors = ref<{ limit: string; message: string }[]>([]);\nconst pending = new Set<() => void>();\nfunction release(): void {\n\tfor (const done of pending) done();\n\tpending.clear();\n\tpendingCount.value = 0;\n}\nconst api: AsamApiRequest<{ text: string }, readonly Member[]> = async (query, context) => {\n\tcalls.value.push(query.text);\n\tif (hold.value) {\n\t\tawait new Promise<void>((done) => {\n\t\t\tpending.add(done);\n\t\t\tpendingCount.value = pending.size;\n\t\t});\n\t}\n\tcontext.signal.throwIfAborted();\n\treturn members.filter((member) =>\n\t\tmember.label.toLowerCase().includes(query.text.toLowerCase())\n\t);\n};\nconst factory = defineAsamOptions<string, Member>();\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n\t});\nasync function load(): Promise<void> {\n\tmethodResult.value = 'getData:pending';\n\tawait control.value?.getData('');\n\tmethodResult.value = 'getData:done';\n}\nasync function enter(): Promise<void> {\n\tmethodResult.value = 'enter:pending';\n\tawait control.value?.handleKeyEnter();\n\tmethodResult.value = 'enter:done';\n}\nasync function invalidLimits(): Promise<void> {\n\tcontrol.value?.close();\n\tmethodResult.value = 'guard:pending';\n\tfor (const invalid of [0, -1, 1.5, NaN, Infinity]) {\n\t\tlimit.value = invalid;\n\t\tawait nextTick();\n\t\ttry {\n\t\t\tawait control.value?.getData('');\n\t\t} catch (error) {\n\t\t\tguardErrors.value.push({\n\t\t\t\tlimit: String(invalid),\n\t\t\t\tmessage: error instanceof Error ? error.message : String(error)\n\t\t\t});\n\t\t}\n\t}\n\tlimit.value = undefined;\n\tawait nextTick();\n\tawait control.value?.getData('');\n\tcontrol.value?.close();\n\tmethodResult.value = 'guard:done';\n}\nasync function unmountInput(): Promise<void> {\n\tconst saved = control.value;\n\tmounted.value = false;\n\tawait nextTick();\n\tdetachedReferences.value = {\n\t\tcontrolPresent: !!control.value,\n\t\tinputReady: !!saved?.inputRef,\n\t\tpopperReady: !!saved?.popperRef\n\t};\n}\nconst snapshot = computed(() => ({\n\tmounted: mounted.value,\n\tdetachedReferences: detachedReferences.value,\n\tmodel: model.value,\n\tcalls: calls.value,\n\tselected: selected.value,\n\tpending: pendingCount.value,\n\tmethodResult: methodResult.value,\n\tguardErrors: guardErrors.value,\n\tindex: control.value?.highlightedIndex,\n\tloading: control.value?.loading,\n\tactivated: control.value?.activated,\n\tsuggestions: control.value?.suggestions,\n\tinputReady: !!control.value?.inputRef,\n\tpopperReady: !!control.value?.popperRef\n}));\nonBeforeUnmount(() => {\n\tcontrol.value?.cancel();\n\trelease();\n});\n\nconst limitControl = computed({\n\tget: () => limit.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\tlimit.value =\n\t\t\tvalue === '__asam_example_unconfigured__' ? undefined : (value as typeof limit.value);\n\t}\n});\nconst triggerControl = computed({\n\tget: () => trigger.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\ttrigger.value =\n\t\t\tvalue === '__asam_example_unconfigured__' ? undefined : (value as typeof trigger.value);\n\t}\n});\nconst highlightFirstControl = computed({\n\tget: () => highlightFirst.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\thighlightFirst.value =\n\t\t\tvalue === '__asam_example_unconfigured__'\n\t\t\t\t? undefined\n\t\t\t\t: (value as typeof highlightFirst.value);\n\t}\n});\nconst loopControl = computed({\n\tget: () => loop.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\tloop.value =\n\t\t\tvalue === '__asam_example_unconfigured__' ? undefined : (value as typeof loop.value);\n\t}\n});\nconst unmatchedControl = computed({\n\tget: () => unmatched.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\tunmatched.value =\n\t\t\tvalue === '__asam_example_unconfigured__'\n\t\t\t\t? undefined\n\t\t\t\t: (value as typeof unmatched.value);\n\t}\n});\nconst hideLoadingControl = computed({\n\tget: () => hideLoading.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\thideLoading.value =\n\t\t\tvalue === '__asam_example_unconfigured__'\n\t\t\t\t? undefined\n\t\t\t\t: (value as typeof hideLoading.value);\n\t}\n});\nconst debounceControl = computed({\n\tget: () => debounce.value ?? '__asam_example_unconfigured__',\n\tset: (value: unknown) => {\n\t\tdebounce.value =\n\t\t\tvalue === '__asam_example_unconfigured__'\n\t\t\t\t? undefined\n\t\t\t\t: (value as typeof debounce.value);\n\t}\n});\n\nfunction keepHeaderFocus(event: MouseEvent) {\n\tif (event.target instanceof HTMLElement && event.target.closest('[role=button]'))\n\t\tevent.preventDefault();\n}\n</script>\n\n<style scoped>\n.query-instance-controls {\n\tposition: relative;\n}\n\n.query-instance-controls > div {\n\tposition: absolute;\n\tbottom: 100%;\n\tright: 0;\n\tz-index: 2;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, auto);\n\tgap: var(--asam-space-xs);\n\twidth: max-content;\n\tmax-width: 80vw;\n\tpadding: var(--asam-space-sm);\n\tbackground: var(--el-bg-color);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SelectContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/SelectContract.vue",
									"sha256": "cac96a5a4ad053cfc555a573ce3953cbecec7abd06d3cd17fa0a6dcaf90538c5",
									"source": "<template>\n\t<AsamCollapse data-testid=\"select-union-contract\"\n\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t<template #title><span>匹配建议与未匹配 Enter</span></template>\n\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t<div class=\"demo-slot-actions\">\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"runMatched\"\n\t\t\t\t\t\t>验证六种匹配来源</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"runUnmatched\"\n\t\t\t\t\t\t>验证实例未匹配 Enter</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"prepareKeyboard\"\n\t\t\t\t\t\t>准备实际键盘未匹配 Enter</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t\t<!-- @vue-generic {string, Member, Native} -->\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-if=\"mounted && mode !== 'remote'\"\n\t\t\t\t\t:key=\"mode\"\n\t\t\t\t\tref=\"control\"\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\t:value-key=\"mode === 'static' ? 'value' : 'caption'\"\n\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t...(mode === 'static' ? { options: [option] } : { fetchSuggestions }),\n\t\t\t\t\t\t...(policy === undefined ? {} : { selectWhenUnmatched: policy })\n\t\t\t\t\t}\"\n\t\t\t\t\t:debounce=\"0\"\n\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\taria-label=\"选择载荷契约\"\n\t\t\t\t\t@select=\"recordSelection\"\n\t\t\t\t>\n\t\t\t\t\t<template #default=\"{ item }\">\n\t\t\t\t\t\t<span>{{ 'raw' in item ? item.raw.id : item.code }}</span>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamAutocomplete>\n\t\t\t\t<AsamRemoteAutocomplete\n\t\t\t\t\tv-else-if=\"mounted\"\n\t\t\t\t\tref=\"control\"\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\t:source=\"remoteSource\"\n\t\t\t\t\t:debounce=\"0\"\n\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\taria-label=\"选择载荷契约\"\n\t\t\t\t\t@select=\"recordSelection\"\n\t\t\t\t\t@success=\"remoteOptions = $event\"\n\t\t\t\t/>\n\t\t\t\t<pre data-testid=\"select-union-result\">{{\n\t\t\t\t\tJSON.stringify({ busy, observations, selected })\n\t\t\t\t}}</pre>\n\t\t\t</div>\n\t\t</AsamCollapseItem></AsamCollapse\n\t>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref, shallowRef, toRaw } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamButton,\n\tAsamAutocomplete,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type {\n\tAsamAutocompleteExpose,\n\tAsamAutocompleteFetchSuggestions,\n\tAsamOption\n} from '@asam-ui/ui';\n\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Native {\n\tcode: number;\n\tcaption: string;\n\tvalue: string;\n}\ntype Mode = 'static' | 'array' | 'sync' | 'callback' | 'promise' | 'remote' | 'empty';\ntype Selection = Native | AsamOption<string, Member> | { value: string | number };\nconst member: Member = { id: 7, name: 'Alpha', value: 'alpha' };\nconst option: AsamOption<string, Member> = { label: 'Alpha', value: 'alpha', raw: member };\nconst native: Native = { code: 7, caption: 'Alpha', value: 'alpha' };\nconst factory = defineAsamOptions<string, Member>();\nconst remoteSource = (query: string) =>\n\tfactory.api({\n\t\tapi: async () => [member],\n\t\tparams: { query },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst mode = ref<Mode>('static');\nconst mounted = ref(false);\nconst busy = ref(false);\nconst model = ref<string | number>('');\nconst policy = ref<boolean>();\nconst control = shallowRef<AsamAutocompleteExpose<Native | AsamOption<string, Member>>>();\nconst selected = shallowRef<Selection[]>([]);\nconst remoteOptions = shallowRef<readonly AsamOption<string, Member>[]>([]);\nconst observations = ref<object[]>([]);\nconst fetchSuggestions = computed<AsamAutocompleteFetchSuggestions<Native>>(() => {\n\tif (mode.value === 'array') return [native];\n\tif (mode.value === 'sync') return () => [native];\n\tif (mode.value === 'callback') return (_query, callback) => callback([native]);\n\tif (mode.value === 'promise') return async () => [native];\n\treturn [];\n});\nfunction recordSelection(item: Selection) {\n\tselected.value = [...selected.value, item];\n}\nasync function mount(next: Mode, value: string | number = '') {\n\tmounted.value = false;\n\tawait nextTick();\n\tmode.value = next;\n\tmodel.value = value;\n\tmounted.value = true;\n\tawait nextTick();\n}\nasync function runMatched() {\n\tbusy.value = true;\n\tobservations.value = [];\n\tfor (const next of ['static', 'array', 'sync', 'callback', 'promise', 'remote'] as const) {\n\t\tawait mount(next);\n\t\tawait control.value?.getData('Alpha');\n\t\tconst suggestion = control.value?.suggestions[0];\n\t\tif (!suggestion) {\n\t\t\tobservations.value.push({ phase: next, missingSuggestion: true });\n\t\t\tcontinue;\n\t\t}\n\t\tawait control.value?.handleSelect(suggestion);\n\t\tconst item = selected.value.at(-1);\n\t\tobservations.value.push({\n\t\t\tphase: next,\n\t\t\tsameSuggestionObject: item === suggestion,\n\t\t\tsameOriginalObject:\n\t\t\t\titem &&\n\t\t\t\ttoRaw(item) ===\n\t\t\t\t\t(next === 'remote'\n\t\t\t\t\t\t? toRaw(remoteOptions.value[0])\n\t\t\t\t\t\t: next === 'static'\n\t\t\t\t\t\t\t? option\n\t\t\t\t\t\t\t: native),\n\t\t\tcompleteMatchedPayload:\n\t\t\t\titem &&\n\t\t\t\t('raw' in item\n\t\t\t\t\t? item.raw.id === 7 &&\n\t\t\t\t\t\titem.raw.name === 'Alpha' &&\n\t\t\t\t\t\titem.raw.value === 'alpha' &&\n\t\t\t\t\t\titem.label === 'Alpha' &&\n\t\t\t\t\t\ttoRaw(item.raw) ===\n\t\t\t\t\t\t\t(next === 'remote' ? toRaw(remoteOptions.value[0]?.raw) : member)\n\t\t\t\t\t: 'code' in item && item.code === 7 && item.caption === 'Alpha'),\n\t\t\tvalue: item?.value,\n\t\t\tsuggestionsStillComplete: control.value?.suggestions.every(\n\t\t\t\t(item) => 'raw' in item || 'code' in item\n\t\t\t)\n\t\t});\n\t}\n\tbusy.value = false;\n}\nasync function runUnmatched() {\n\tbusy.value = true;\n\tobservations.value = [];\n\tfor (const value of ['Unmatched', 42]) {\n\t\tfor (const nextPolicy of [undefined, false, true]) {\n\t\t\tpolicy.value = nextPolicy;\n\t\t\tawait mount('empty', value);\n\t\t\tawait control.value?.getData('missing');\n\t\t\tconst before = selected.value.length;\n\t\t\tawait control.value?.handleKeyEnter();\n\t\t\tobservations.value.push({\n\t\t\t\tphase: 'instance-unmatched',\n\t\t\t\tmodel: value,\n\t\t\t\tpolicy: nextPolicy ?? 'undefined',\n\t\t\t\tadded: selected.value.length - before,\n\t\t\t\titem: selected.value.length > before ? selected.value.at(-1) : null,\n\t\t\t\tsuggestionCount: control.value?.suggestions.length\n\t\t\t});\n\t\t}\n\t}\n\tbusy.value = false;\n}\nasync function prepareKeyboard() {\n\tpolicy.value = true;\n\tawait mount('empty', 'Keyboard unmatched');\n\tawait control.value?.getData('missing');\n\tcontrol.value?.focus();\n}\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								},
								{
									"name": "NativeInputContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/NativeInputContract.vue",
									"sha256": "e15e2d65046bac941974af7ef35f05317a190f2ed3d3b7cb82e754ea3a9554c7",
									"source": "<template>\n\t<section data-testid=\"autocomplete-native-input-contract\">\n\t\t<form id=\"data009-input-owner\" @submit.prevent />\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mode = 'explicit'\"\n\t\t\t\t>设置完整输入属性</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mode = 'omitted'\"\n\t\t\t\t>恢复省略属性</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 42\"\n\t\t\t\t>写入数字模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 'seed'\"\n\t\t\t\t>写入字符串模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"remount\"\n\t\t\t\t>重新挂载输入</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mountNumber\"\n\t\t\t\t>全新挂载数字输入</AsamButton\n\t\t\t>\n\t\t\t<label for=\"data009-native-input-type\">输入类型</label>\n\t\t\t<AsamSelect id=\"data009-native-input-type\" v-model=\"type\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'password'\" :value=\"'password'\">password</AsamOption>\n\t\t\t\t<AsamOption :label=\"'number'\" :value=\"'number'\">number</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"readonly\">协议只读</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">协议禁用</AsamCheckboxItem>\n\t\t</div>\n\t\t<!-- @vue-generic {string, Member} -->\n\t\t<AsamRemoteAutocomplete\n\t\t\tv-if=\"mounted\"\n\t\t\tv-model=\"model\"\n\t\t\tv-bind=\"configuration\"\n\t\t\t:source=\"source\"\n\t\t\t:type=\"type\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:debounce=\"0\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\t:teleported=\"false\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t\t@update:model-value=\"updates.push($event)\"\n\t\t/>\n\t\t<pre data-testid=\"native-input-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tmode,\n\t\t\t\ttype,\n\t\t\t\treadonly,\n\t\t\t\tdisabled,\n\t\t\t\tmounted,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tqueries\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type { AsamApiRequest, AsamRemoteAutocompleteProps } from '@asam-ui/ui';\n\ninterface Member {\n\tid: number;\n\tlabel: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ntype Props = AsamRemoteAutocompleteProps<string, Member>;\ntype Configuration = Pick<\n\tProps,\n\t| 'id'\n\t| 'ariaLabel'\n\t| 'tabindex'\n\t| 'form'\n\t| 'name'\n\t| 'autocomplete'\n\t| 'inputmode'\n\t| 'placeholder'\n\t| 'minlength'\n\t| 'maxlength'\n\t| 'min'\n\t| 'max'\n\t| 'step'\n\t| 'autofocus'\n\t| 'rows'\n\t| 'resize'\n>;\nconst configurations = {\n\texplicit: {\n\t\tid: 'data009-native-input',\n\t\tariaLabel: '原生输入契约',\n\t\ttabindex: 3,\n\t\tform: 'data009-input-owner',\n\t\tname: 'native-query',\n\t\tautocomplete: 'on',\n\t\tinputmode: 'search',\n\t\tplaceholder: 'Input contract',\n\t\tminlength: 2,\n\t\tmaxlength: 8,\n\t\tmin: 2,\n\t\tmax: 10,\n\t\tstep: 2,\n\t\tautofocus: true,\n\t\trows: 4,\n\t\tresize: 'none'\n\t},\n\tomitted: {}\n} satisfies Record<string, Configuration>;\nconst mode = ref<'explicit' | 'omitted'>('explicit');\nconst type = ref<'text' | 'password' | 'number' | 'textarea'>('text');\nconst model = ref<string | number>('seed');\nconst readonly = ref(false);\nconst disabled = ref(false);\nconst mounted = ref(true);\nconst inputs = ref<(string | number)[]>([]);\nconst updates = ref<(string | number)[]>([]);\nconst queries = ref<string[]>([]);\nconst configuration = computed(() => configurations[mode.value]);\nconst factory = defineAsamOptions<string, Member>();\nconst api: AsamApiRequest<Query, readonly Member[]> = async (query, context) => {\n\tcontext.signal.throwIfAborted();\n\tqueries.value.push(query.text);\n\treturn [{ id: 7, label: query.text, value: query.text }];\n};\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (items) => items,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\nasync function remount() {\n\tmounted.value = false;\n\tawait nextTick();\n\tmounted.value = true;\n}\nasync function mountNumber() {\n\tmounted.value = false;\n\tawait nextTick();\n\tmodel.value = 4;\n\ttype.value = 'number';\n\tmounted.value = true;\n}\n</script>\n"
								},
								{
									"name": "PopupContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/PopupContract.vue",
									"sha256": "a81804f8fa2a78d1073d4a489a34b8f19437395578952156a985a90daedff3d0",
									"source": "<template>\n\t<section data-testid=\"autocomplete-popup-case\">\n\t\t<label for=\"autocomplete-popup-scenario\">建议浮层配置</label>\n\t\t<AsamSelect id=\"autocomplete-popup-scenario\" v-model=\"scenario\">\n\t\t\t<AsamOption\n\t\t\t\tv-for=\"item in scenarios\"\n\t\t\t\t:key=\"item.value\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:label=\"item.label\"\n\t\t\t>\n\t\t\t\t{{ item.label }}\n\t\t\t</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open\">打开配置后的建议</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tv-if=\"scenario === 'role'\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"liveRole = 'group'\"\n\t\t>\n\t\t\t切换已挂载输入角色\n\t\t</AsamButton>\n\t\t<div id=\"autocomplete-popup-host\" ref=\"host\" data-testid=\"autocomplete-popup-host\" />\n\t\t<div class=\"popup-input-area\">\n\t\t\t<AsamRemoteAutocomplete\n\t\t\t\tv-if=\"mounted\"\n\t\t\t\t:key=\"generation\"\n\t\t\t\tref=\"control\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:source=\"source\"\n\t\t\t\t:debounce=\"0\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\taria-label=\"浮层协议成员\"\n\t\t\t>\n\t\t\t\t<template #header>\n\t\t\t\t\t<span data-testid=\"autocomplete-popup-header\">配置后的建议</span>\n\t\t\t\t</template>\n\t\t\t\t<template #default=\"{ item }\">\n\t\t\t\t\t<span>{{ item.label }} · {{ item.raw.id }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamRemoteAutocomplete>\n\t\t</div>\n\t\t<p class=\"example-paragraph\">当前配置：{{ scenario }}；模型：{{ value }}</p>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type { AsamRemoteAutocompleteProps, AsamRemoteAutocompleteExpose } from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\nconst scenarios = [\n\t{ value: 'default', label: '省略配置' },\n\t...['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].map((value) => ({\n\t\tvalue,\n\t\tlabel: value\n\t})),\n\t{ value: 'style-object', label: '自定义类与对象样式' },\n\t{ value: 'style-string', label: '字符串样式' },\n\t{ value: 'style-array', label: '组合样式' },\n\t{ value: 'local', label: '就地显示，忽略附加目标' },\n\t{ value: 'selector', label: '传送到指定选择器' },\n\t{ value: 'element', label: '传送到实际元素' },\n\t{ value: 'fit', label: '固定为输入宽度' },\n\t{ value: 'min', label: '输入宽度作为最小宽度' },\n\t{ value: 'role', label: '自定义输入角色' }\n];\nconst scenario = ref('default');\nconst liveRole = ref('searchbox');\nconst host = ref<HTMLElement>();\nconst value = ref('');\nconst mounted = ref(true);\nconst generation = ref(0);\nconst control = ref<AsamRemoteAutocompleteExpose<string, Member>>();\nconst member = {\n\tid: 7,\n\tvalue: 'alpha',\n\tname: 'Alpha member with a deliberately long suggestion label for popup width comparison'\n};\nconst factory = defineAsamOptions<string, Member>();\nconst source: AsamRemoteAutocompleteProps<string, Member>['source'] = (text) =>\n\tfactory.api({\n\t\tapi: async (_params, context) => {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\treturn [member];\n\t\t},\n\t\tparams: { text },\n\t\ttransform: (items) => items,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed((): Partial<AsamRemoteAutocompleteProps<string, Member>> => {\n\tif (\n\t\t['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].includes(\n\t\t\tscenario.value\n\t\t)\n\t)\n\t\treturn {\n\t\t\tplacement: scenario.value as AsamRemoteAutocompleteProps<string, Member>['placement']\n\t\t};\n\tif (scenario.value === 'style-object')\n\t\treturn {\n\t\t\tpopperClass: 'data009-popup-custom',\n\t\t\tpopperStyle: { backgroundColor: 'rgb(11, 22, 33)', borderWidth: '3px' }\n\t\t};\n\tif (scenario.value === 'style-string')\n\t\treturn { popperStyle: 'background-color: rgb(22, 33, 44); border-width: 4px;' };\n\tif (scenario.value === 'style-array')\n\t\treturn { popperStyle: [{ backgroundColor: 'rgb(33, 44, 55)' }, { borderWidth: '5px' }] };\n\tif (scenario.value === 'local')\n\t\treturn { teleported: false, appendTo: '#autocomplete-popup-host' };\n\tif (scenario.value === 'selector')\n\t\treturn { teleported: true, appendTo: '#autocomplete-popup-host' };\n\tif (scenario.value === 'element') return { teleported: true, appendTo: host.value };\n\tif (scenario.value === 'fit') return { fitInputWidth: true };\n\tif (scenario.value === 'min') return { fitInputWidth: false };\n\tif (scenario.value === 'role') return { containerRole: liveRole.value };\n\treturn {};\n});\nasync function open() {\n\tliveRole.value = 'searchbox';\n\tcontrol.value?.close();\n\tmounted.value = false;\n\tawait nextTick();\n\tvalue.value = '';\n\tgeneration.value++;\n\tmounted.value = true;\n\tawait nextTick();\n\tcontrol.value?.focus();\n\tawait control.value?.getData('');\n}\n</script>\n\n<style scoped>\n.popup-input-area {\n\twidth: 260px;\n\tmargin-block: 180px;\n\tmargin-inline: auto;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SourceLifecycleContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/SourceLifecycleContract.vue",
									"sha256": "78a0ba9342ca4c12b6289db454152388d19df043e2d7932bc1202f433c0ed884",
									"source": "<template>\n\t<section data-testid=\"autocomplete-source-lifecycle-case\">\n\t\t<label for=\"autocomplete-source-kind\">来源类型</label>\n\t\t<AsamSelect id=\"autocomplete-source-kind\" v-model=\"kind\">\n\t\t\t<AsamOption value=\"api\" :label=\"'API 参数与返回值'\">API 参数与返回值</AsamOption>\n\t\t\t<AsamOption value=\"request\" :label=\"'URL、参数与 provider'\"\n\t\t\t\t>URL、参数与 provider</AsamOption\n\t\t\t>\n\t\t</AsamSelect>\n\t\t<label for=\"autocomplete-source-active\">请求开关</label>\n\t\t<AsamSelect id=\"autocomplete-source-active\" v-model=\"activeMode\">\n\t\t\t<AsamOption value=\"omitted\" :label=\"'省略'\">省略</AsamOption>\n\t\t\t<AsamOption value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t<AsamOption value=\"false\" :label=\"'停用'\">停用</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"autocomplete-source-query\">请求查询</label>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamInput id=\"autocomplete-source-query\" v-model=\"draft\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"getData\">读取查询建议</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload()\">省略重载选项</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload(false)\">普通重载</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload(true)\"\n\t\t\t>强制重载来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消当前来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"selectFirst\"\n\t\t\t>选择完整首项</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"hold = true\"\n\t\t\t>持有后续响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"hold = false\"\n\t\t\t>即时后续响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failure = true\"\n\t\t\t>后续接口失败</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failure = false\"\n\t\t\t>恢复接口</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release(false)\"\n\t\t\t>完成最早持有响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release(true)\"\n\t\t\t>拒绝最早持有响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mountControl\"\n\t\t\t>重新挂载来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"detach\">卸载来源</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reloadDetached\"\n\t\t\t>读取卸载后的重载结果</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"savedControl?.cancel()\"\n\t\t\t>取消卸载后的来源</AsamButton\n\t\t>\n\t\t<div ref=\"host\" class=\"source-control-host\" />\n\t\t<pre data-testid=\"autocomplete-source-lifecycle-result\">{{\n\t\t\tJSON.stringify(snapshot, null, 2)\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport type { App } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamInput,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type {\n\tAsamApiRequest,\n\tAsamDataProvider,\n\tAsamRemoteAutocompleteExpose,\n\tAsamRemoteAutocompleteProps,\n\tAsamRequestContext,\n\tAsamReloadResult\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ninterface Call {\n\tkind: string;\n\ttext: string;\n\trequestId: number;\n\taborted: boolean;\n\turl?: string;\n\tmethod?: string;\n}\ninterface Deferred {\n\tresolve: (items: readonly Member[]) => void;\n\treject: (reason: Error) => void;\n\tcall: Call;\n}\nconst kind = ref<'api' | 'request'>('api');\nconst activeMode = ref('omitted');\nconst active = computed(() =>\n\tactiveMode.value === 'omitted' ? undefined : activeMode.value === 'true'\n);\nconst draft = ref('Alpha');\nconst model = ref<string | number>('retained-model');\nconst host = ref<HTMLElement>();\nconst control = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst calls = ref<Call[]>([]);\nconst results = ref<unknown[]>([]);\nconst successes = ref<unknown[]>([]);\nconst errors = ref<unknown[]>([]);\nconst hold = ref(false);\nconst failure = ref(false);\nconst deferred: Deferred[] = [];\nconst pendingCount = ref(0);\nconst mounted = ref(false);\nconst lastAction = ref('unloaded');\nlet app: App | undefined;\nlet savedControl: AsamRemoteAutocompleteExpose<string, Member> | undefined;\nconst factory = defineAsamOptions<string, Member>();\nconst fields = { label: 'name', value: 'value' } as const;\nconst cache = { ttlMs: 60000 };\nfunction members(text: string): readonly Member[] {\n\treturn [{ id: 7, name: text, value: text.toLowerCase() }];\n}\nasync function load(call: Call, context: AsamRequestContext): Promise<readonly Member[]> {\n\tcontext.signal.throwIfAborted();\n\tcalls.value.push(call);\n\tconst recorded = calls.value.at(-1)!;\n\tcontext.signal.addEventListener(\n\t\t'abort',\n\t\t() => {\n\t\t\trecorded.aborted = true;\n\t\t},\n\t\t{ once: true }\n\t);\n\tif (hold.value)\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tdeferred.push({ resolve, reject, call: recorded });\n\t\t\tpendingCount.value = deferred.length;\n\t\t});\n\tif (failure.value) throw new Error('source lifecycle API failure');\n\treturn members(call.text);\n}\nconst api: AsamApiRequest<Query, readonly Member[]> = (params, context) =>\n\tload({ kind: 'api', text: params.text, requestId: context.requestId, aborted: false }, context);\nconst transformApi = (items: readonly Member[]) => items;\nfunction isMember(value: unknown): value is Member {\n\treturn (\n\t\ttypeof value === 'object' &&\n\t\tvalue !== null &&\n\t\t'id' in value &&\n\t\ttypeof value.id === 'number' &&\n\t\t'name' in value &&\n\t\ttypeof value.name === 'string' &&\n\t\t'value' in value &&\n\t\ttypeof value.value === 'string'\n\t);\n}\nfunction transformRequest(response: unknown): readonly Member[] {\n\tif (!Array.isArray(response) || !response.every(isMember))\n\t\tthrow new Error('invalid member response');\n\treturn response;\n}\nconst provider: AsamDataProvider = {\n\trequest: async (config, context) => {\n\t\tconst text = config.params?.text;\n\t\tif (typeof text !== 'string')\n\t\t\tthrow new Error('query must reach the real request parameters');\n\t\treturn load(\n\t\t\t{\n\t\t\t\tkind: 'request',\n\t\t\t\ttext,\n\t\t\t\trequestId: context.requestId,\n\t\t\t\taborted: false,\n\t\t\t\turl: config.url,\n\t\t\t\t...(config.method === undefined ? {} : { method: config.method })\n\t\t\t},\n\t\t\tcontext\n\t\t);\n\t}\n};\nconst source: AsamRemoteAutocompleteProps<string, Member>['source'] = (text) =>\n\tkind.value === 'api'\n\t\t? factory.api({ api, params: { text }, transform: transformApi, fieldNames: fields, cache })\n\t\t: factory.request({\n\t\t\t\trequest: { url: '/data009/autocomplete-members', params: { text } },\n\t\t\t\ttransform: transformRequest,\n\t\t\t\tfieldNames: fields,\n\t\t\t\tcache\n\t\t\t});\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nconst snapshot = computed(() => ({\n\tkind: kind.value,\n\tactive: active.value ?? 'omitted',\n\tmounted: mounted.value,\n\tdetachedSuggestions: !mounted.value ? (savedControl?.suggestions ?? []) : undefined,\n\tdraft: draft.value,\n\tmodel: model.value,\n\tcalls: calls.value,\n\tpending: pendingCount.value,\n\tloading: control.value?.loading ?? false,\n\tsuggestions: control.value?.suggestions ?? [],\n\tlastAction: lastAction.value,\n\tresults: results.value,\n\tsuccesses: successes.value,\n\terrors: errors.value\n}));\nasync function mountControl() {\n\tdetach();\n\tawait nextTick();\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\tref: control,\n\t\t\t\tmodelValue: model.value,\n\t\t\t\tsource,\n\t\t\t\t...(active.value === undefined ? {} : { active: active.value }),\n\t\t\t\tdebounce: 0,\n\t\t\t\ttriggerOnFocus: false,\n\t\t\t\tariaLabel: '来源生命周期成员',\n\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t},\n\t\t\t\tonSuccess: (items: readonly AsamOption<string, Member>[]) => {\n\t\t\t\t\tsuccesses.value.push(items);\n\t\t\t\t},\n\t\t\t\tonError: (error: unknown) => {\n\t\t\t\t\terrors.value.push(error);\n\t\t\t\t}\n\t\t\t})\n\t});\n\tprovideAsamData(app, provider, { scope: 'data009-autocomplete-source-lifecycle' });\n\tapp.mount(host.value);\n\tmounted.value = true;\n\tlastAction.value = 'mounted';\n}\nfunction detach() {\n\tif (control.value) savedControl = control.value;\n\tapp?.unmount();\n\tapp = undefined;\n\tcontrol.value = undefined;\n\tmounted.value = false;\n\tlastAction.value = 'unmounted';\n}\nasync function getData() {\n\tlastAction.value = 'query-pending';\n\tawait control.value?.getData(draft.value);\n\tlastAction.value = 'query-settled';\n}\nasync function reload(force?: boolean) {\n\tlastAction.value = 'reload-pending';\n\tconst result: AsamReloadResult<readonly AsamOption<string, Member>[]> | undefined =\n\t\tawait control.value?.reload(force === undefined ? undefined : { force });\n\tresults.value.push(result ?? { status: 'detached' });\n\tlastAction.value = 'reload-settled';\n}\nasync function reloadDetached() {\n\tconst result = await savedControl?.reload({ force: true });\n\tresults.value.push(result ?? { status: 'missing-saved-control' });\n}\nasync function selectFirst() {\n\tconst item = control.value?.suggestions[0];\n\tif (item) await control.value?.handleSelect(item);\n}\nfunction release(reject: boolean) {\n\tconst next = deferred.shift();\n\tpendingCount.value = deferred.length;\n\tif (!next) return;\n\tif (reject) next.reject(new Error('held source lifecycle failure'));\n\telse next.resolve(members(next.call.text));\n}\nonMounted(mountControl);\nonBeforeUnmount(detach);\n</script>\n\n<style scoped>\n.source-control-host {\n\twidth: 300px;\n\tmargin-block: 24px;\n}\n</style>\n"
								},
								{
									"name": "PresentationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/PresentationContract.vue",
									"sha256": "3e67c558b129676991ed205017b2c009737c2a7fde070b83e742fbfd22bd3765",
									"source": "<template>\n\t<section data-testid=\"autocomplete-presentation-contract\">\n\t\t<div class=\"presentation-controls\">\n\t\t\t<label for=\"data009-presentation-size\">输入尺寸</label>\n\t\t\t<AsamSelect id=\"data009-presentation-size\" v-model=\"size\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-providerSize\">提供者尺寸</label>\n\t\t\t<AsamSelect id=\"data009-presentation-providerSize\" v-model=\"providerSize\">\n\t\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-clearable\">清除开关</label>\n\t\t\t<AsamSelect id=\"data009-presentation-clearable\" v-model=\"clearable\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-icons\">图标形式</label>\n\t\t\t<AsamSelect id=\"data009-presentation-icons\" v-model=\"icons\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'component'\" :value=\"'component'\">component</AsamOption>\n\t\t\t\t<AsamOption :label=\"'string'\" :value=\"'string'\">string</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-styleMode\">输入样式</label>\n\t\t\t<AsamSelect id=\"data009-presentation-styleMode\" v-model=\"styleMode\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'object'\" :value=\"'object'\">object</AsamOption>\n\t\t\t\t<AsamOption :label=\"'string'\" :value=\"'string'\">string</AsamOption>\n\t\t\t\t<AsamOption :label=\"'array'\" :value=\"'array'\">array</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"readonly\">外观只读</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">外观禁用</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 'Alpha'\"\n\t\t\t\t>恢复外观模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\">读取外观来源</AsamButton>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"presentation-host\" />\n\t\t<pre data-testid=\"autocomplete-presentation-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tclears,\n\t\t\t\trequests,\n\t\t\t\tsuggestions,\n\t\t\t\tsize,\n\t\t\t\tproviderSize,\n\t\t\t\tclearable,\n\t\t\t\ticons,\n\t\t\t\tstyleMode,\n\t\t\t\treadonly,\n\t\t\t\tdisabled\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamConfigProvider,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type {\n\tAsamApiRequest,\n\tAsamControlSize,\n\tAsamRemoteAutocompleteExpose,\n\tAsamRemoteAutocompleteProps\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ntype Props = AsamRemoteAutocompleteProps<string, Member>;\nconst host = ref<HTMLDivElement>();\nconst control = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('Alpha');\nconst size = ref<AsamControlSize | 'omitted'>('omitted');\nconst providerSize = ref<AsamControlSize>('big');\nconst clearable = ref<'omitted' | 'true' | 'false'>('omitted');\nconst icons = ref<'omitted' | 'component' | 'string'>('omitted');\nconst styleMode = ref<'omitted' | 'object' | 'string' | 'array'>('omitted');\nconst readonly = ref(false),\n\tdisabled = ref(false);\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]);\nconst clears = ref(0),\n\trequests = ref<string[]>([]);\nconst suggestions = ref<AsamRemoteAutocompleteExpose<string, Member>['suggestions']>([]);\nconst icon = (name: string, path: string) => () =>\n\th('svg', { viewBox: '0 0 16 16', 'data-presentation-icon': name, 'aria-hidden': 'true' }, [\n\t\th('path', { d: path, fill: 'currentColor' })\n\t]);\nconst Prefix = icon('Data009Prefix', 'M2 2h6v6H2z');\nconst Suffix = icon('Data009Suffix', 'M8 8h6v6H8z');\nconst Clear = icon('Data009Clear', 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z');\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed<Props>(() => ({\n\tsource,\n\tmodelValue: model.value,\n\treadonly: readonly.value,\n\tdisabled: disabled.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议外观输入',\n\t...(size.value === 'omitted' ? {} : { size: size.value }),\n\t...(clearable.value === 'omitted' ? {} : { clearable: clearable.value === 'true' }),\n\t...(icons.value === 'omitted'\n\t\t? {}\n\t\t: {\n\t\t\t\tprefixIcon: icons.value === 'component' ? Prefix : 'Data009Prefix',\n\t\t\t\tsuffixIcon: icons.value === 'component' ? Suffix : 'Data009Suffix',\n\t\t\t\tclearIcon: icons.value === 'component' ? Clear : 'Data009Clear'\n\t\t\t}),\n\t...(styleMode.value === 'omitted'\n\t\t? {}\n\t\t: {\n\t\t\t\tinputStyle:\n\t\t\t\t\tstyleMode.value === 'object'\n\t\t\t\t\t\t? { color: '#064e3b', backgroundColor: '#f0fdf4', paddingLeft: '18px' }\n\t\t\t\t\t\t: styleMode.value === 'string'\n\t\t\t\t\t\t\t? 'color: rgb(120, 53, 15); letter-spacing: 2px;'\n\t\t\t\t\t\t\t: [{ color: '#1e3a8a' }, { fontWeight: '600', paddingRight: '22px' }]\n\t\t\t})\n}));\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(AsamConfigProvider, { size: providerSize.value }, () =>\n\t\t\t\th(TypedRemote, {\n\t\t\t\t\t...configuration.value,\n\t\t\t\t\tref: control,\n\t\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\t\tmodel.value = value;\n\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t},\n\t\t\t\t\tonInput: (value: string | number) => inputs.value.push(value),\n\t\t\t\t\tonClear: () => clears.value++\n\t\t\t\t})\n\t\t\t)\n\t});\n\tapp.component('Data009Prefix', Prefix);\n\tapp.component('Data009Suffix', Suffix);\n\tapp.component('Data009Clear', Clear);\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.presentation-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.presentation-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "FormattingContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/FormattingContract.vue",
									"sha256": "df0c36e345b6e1eeaff12a3d74375705b7d730d83618eebf1bddb679e6fca8cc",
									"source": "<template>\n\t<section data-testid=\"autocomplete-formatting-contract\">\n\t\t<div class=\"formatting-controls\">\n\t\t\t<label for=\"data009-format-mode\">格式协议</label>\n\t\t\t<AsamSelect id=\"data009-format-mode\" v-model=\"mode\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'formatter'\" :value=\"'formatter'\">formatter</AsamOption>\n\t\t\t\t<AsamOption :label=\"'pair'\" :value=\"'pair'\">pair</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-format-modifier\">模型修饰符</label>\n\t\t\t<AsamSelect id=\"data009-format-modifier\" v-model=\"modifier\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'empty'\" :value=\"'empty'\">empty</AsamOption>\n\t\t\t\t<AsamOption :label=\"'trim'\" :value=\"'trim'\">trim</AsamOption>\n\t\t\t\t<AsamOption :label=\"'number'\" :value=\"'number'\">number</AsamOption>\n\t\t\t\t<AsamOption :label=\"'trim-number'\" :value=\"'trim-number'\">trim-number</AsamOption>\n\t\t\t\t<AsamOption :label=\"'lazy'\" :value=\"'lazy'\">lazy</AsamOption>\n\t\t\t\t<AsamOption :label=\"'lazy-trim-number'\" :value=\"'lazy-trim-number'\"\n\t\t\t\t\t>lazy-trim-number</AsamOption\n\t\t\t\t>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('1234')\"\n\t\t\t\t>恢复格式数值</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('Base')\"\n\t\t\t\t>恢复格式文本</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取格式模型来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"formatting-host\" />\n\t\t<pre data-testid=\"autocomplete-formatting-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tchanges,\n\t\t\t\trequests,\n\t\t\t\tsuggestions,\n\t\t\t\tmode,\n\t\t\t\tmodifier\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type {\n\tAsamApiRequest,\n\tAsamRemoteAutocompleteExpose,\n\tAsamRemoteAutocompleteProps\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ntype Props = AsamRemoteAutocompleteProps<string, Member>;\nconst host = ref<HTMLDivElement>();\nconst control = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('1234');\nconst mode = ref<'omitted' | 'formatter' | 'pair'>('omitted');\nconst modifier = ref<\n\t'omitted' | 'empty' | 'trim' | 'number' | 'trim-number' | 'lazy' | 'lazy-trim-number'\n>('omitted');\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]),\n\tchanges = ref<(string | number)[]>([]),\n\trequests = ref<string[]>([]);\nconst suggestions = ref<AsamRemoteAutocompleteExpose<string, Member>['suggestions']>([]);\nconst formatter: NonNullable<Props['formatter']> = (value) =>\n\t'¤' + String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser: NonNullable<Props['parser']> = (value) => value.replace(/[¤,]/g, '');\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst modifiers = computed<Props['modelModifiers']>(() => {\n\tif (modifier.value === 'omitted') return undefined;\n\treturn {\n\t\t...(modifier.value.includes('trim') ? { trim: true } : {}),\n\t\t...(modifier.value.includes('number') ? { number: true } : {}),\n\t\t...(modifier.value.includes('lazy') ? { lazy: true } : {})\n\t};\n});\nconst configuration = computed<Props>(() => ({\n\tsource,\n\tmodelValue: model.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议格式输入',\n\t...(mode.value === 'omitted' ? {} : { formatter }),\n\t...(mode.value === 'pair' ? { parser } : {}),\n\t...(modifier.value === 'omitted' ? {} : { modelModifiers: modifiers.value })\n}));\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\t...configuration.value,\n\t\t\t\tref: control,\n\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t},\n\t\t\t\tonInput: (value: string | number) => inputs.value.push(value),\n\t\t\t\tonChange: (value: string | number) => changes.value.push(value)\n\t\t\t})\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-formatting' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nfunction reset(value: string) {\n\tmodel.value = value;\n\tinputs.value = [];\n\tupdates.value = [];\n\tchanges.value = [];\n}\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.formatting-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.formatting-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "TextCapabilityContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/TextCapabilityContract.vue",
									"sha256": "9c3e87a0d91a79b23248b2f8c6c6186863e40c2cd5b4310e44724be5f1200e5a",
									"source": "<template>\n\t<section data-testid=\"autocomplete-text-capability-contract\">\n\t\t<div class=\"text-controls\">\n\t\t\t<label for=\"data009-text-kind\">计数输入类型</label>\n\t\t\t<AsamSelect id=\"data009-text-kind\" v-model=\"kind\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-limit\">显示字数</label>\n\t\t\t<AsamSelect id=\"data009-text-limit\" v-model=\"limit\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-position\">字数位置</label>\n\t\t\t<AsamSelect id=\"data009-text-position\" v-model=\"position\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'inside'\" :value=\"'inside'\">inside</AsamOption>\n\t\t\t\t<AsamOption :label=\"'outside'\" :value=\"'outside'\">outside</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-graphemes\">字素计数</label>\n\t\t\t<AsamSelect id=\"data009-text-graphemes\" v-model=\"graphemes\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'segmenter'\" :value=\"'segmenter'\">segmenter</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-autosize\">文本域自适应</label>\n\t\t\t<AsamSelect id=\"data009-text-autosize\" v-model=\"autosize\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'bounded'\" :value=\"'bounded'\">bounded</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-password\">密码显示开关</label>\n\t\t\t<AsamSelect id=\"data009-text-password\" v-model=\"password\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"readonly\">计数只读</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">计数禁用</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 'AB'\"\n\t\t\t\t>恢复计数模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取计数模型来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"text-host\" />\n\t\t<pre data-testid=\"autocomplete-text-capability-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tchanges,\n\t\t\t\trequests,\n\t\t\t\tsuggestions,\n\t\t\t\tkind,\n\t\t\t\tlimit,\n\t\t\t\tposition,\n\t\t\t\tgraphemes,\n\t\t\t\tautosize,\n\t\t\t\tpassword,\n\t\t\t\treadonly,\n\t\t\t\tdisabled\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type {\n\tAsamApiRequest,\n\tAsamRemoteAutocompleteExpose,\n\tAsamRemoteAutocompleteProps\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ntype Props = AsamRemoteAutocompleteProps<string, Member>;\nconst host = ref<HTMLDivElement>();\nconst control = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('AB');\nconst kind = ref<'text' | 'textarea'>('text');\nconst limit = ref<'omitted' | 'true' | 'false'>('omitted');\nconst position = ref<'omitted' | 'inside' | 'outside'>('omitted');\nconst graphemes = ref<'omitted' | 'segmenter'>('omitted');\nconst autosize = ref<'omitted' | 'false' | 'true' | 'bounded'>('omitted');\nconst password = ref<'omitted' | 'true' | 'false'>('omitted');\nconst readonly = ref(false),\n\tdisabled = ref(false);\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]),\n\tchanges = ref<(string | number)[]>([]),\n\trequests = ref<string[]>([]);\nconst suggestions = ref<AsamRemoteAutocompleteExpose<string, Member>['suggestions']>([]);\nconst segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\nconst countGraphemes: NonNullable<Props['countGraphemes']> = (value) =>\n\tArray.from(segmenter.segment(value)).length;\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed<Props>(() => ({\n\tsource,\n\tmodelValue: model.value,\n\ttype: kind.value,\n\trows: 2,\n\tmaxlength: kind.value === 'text' ? 3 : undefined,\n\treadonly: readonly.value,\n\tdisabled: disabled.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议文本能力输入',\n\t...(limit.value === 'omitted' ? {} : { showWordLimit: limit.value === 'true' }),\n\t...(position.value === 'omitted' ? {} : { wordLimitPosition: position.value }),\n\t...(graphemes.value === 'omitted' ? {} : { countGraphemes }),\n\t...(password.value === 'omitted' ? {} : { showPassword: password.value === 'true' }),\n\t...(autosize.value === 'omitted'\n\t\t? {}\n\t\t: {\n\t\t\t\tautosize:\n\t\t\t\t\tautosize.value === 'bounded'\n\t\t\t\t\t\t? { minRows: 2, maxRows: 4 }\n\t\t\t\t\t\t: autosize.value === 'true'\n\t\t\t})\n}));\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\t...configuration.value,\n\t\t\t\tref: control,\n\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t},\n\t\t\t\tonInput: (value: string | number) => inputs.value.push(value),\n\t\t\t\tonChange: (value: string | number) => changes.value.push(value)\n\t\t\t})\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-text-capabilities' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.text-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.text-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "ValidationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/ValidationContract.vue",
									"sha256": "54e4101f30f682b6a8e2919e5753842021bb706b8a344e45152f61114fe38367",
									"source": "<template>\n\t<section data-testid=\"autocomplete-validation-contract\">\n\t\t<div class=\"validation-controls\">\n\t\t\t<label for=\"data009-validation-mode\">建议验证事件</label>\n\t\t\t<AsamSelect id=\"data009-validation-mode\" v-model=\"mode\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-validation-lazy\">建议验证提交</label>\n\t\t\t<AsamSelect id=\"data009-validation-lazy\" v-model=\"lazy\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'lazy'\" :value=\"'lazy'\">lazy</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">恢复建议验证</AsamButton>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"validation-host\" />\n\t\t<pre data-testid=\"autocomplete-validation-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel: fields.value,\n\t\t\t\tmode,\n\t\t\t\tlazy,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tchanges,\n\t\t\t\tvalidations,\n\t\t\t\tvalidateEvents,\n\t\t\t\tvalidationState: item?.validateState,\n\t\t\t\tvalidationMessage: item?.validateMessage\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tcomputed,\n\tcreateApp,\n\th,\n\tnextTick,\n\tonBeforeUnmount,\n\tonMounted,\n\treactive,\n\tref,\n\tshallowRef\n} from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type {\n\tAsamApiRequest,\n\tAsamFormItemExpose,\n\tAsamFormItemProps,\n\tAsamRemoteAutocompleteProps\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ntype Props = AsamRemoteAutocompleteProps<string, Member>;\nconst host = ref<HTMLDivElement>();\nconst item = shallowRef<AsamFormItemExpose>();\nconst fields = reactive({ value: 'Seed' });\nconst mode = ref<'omitted' | 'true' | 'false'>('omitted');\nconst lazy = ref<'omitted' | 'lazy'>('omitted');\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]),\n\tchanges = ref<(string | number)[]>([]),\n\tvalidations = ref<string[]>([]);\nconst validateEvents = ref<{ property: unknown; valid: boolean; message: string }[]>([]);\ntype ItemRule = Exclude<AsamFormItemProps['rules'], readonly unknown[] | undefined>;\nconst rule: ItemRule = {\n\ttrigger: ['change', 'blur'],\n\tvalidator: (_rule, value, callback) => {\n\t\tvalidations.value.push(String(value));\n\t\tcallback(String(value).includes('!') ? new Error('建议值禁止感叹号') : undefined);\n\t}\n};\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed<Props>(() => ({\n\tsource,\n\tmodelValue: fields.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议验证输入',\n\t...(mode.value === 'omitted' ? {} : { validateEvent: mode.value === 'true' }),\n\t...(lazy.value === 'omitted' ? {} : { modelModifiers: { lazy: true } })\n}));\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(\n\t\t\t\tAsamBaseForm,\n\t\t\t\t{\n\t\t\t\t\tmodel: fields,\n\t\t\t\t\tonValidate: (property: unknown, valid: boolean, message: string) =>\n\t\t\t\t\t\tvalidateEvents.value.push({ property, valid, message })\n\t\t\t\t},\n\t\t\t\t() =>\n\t\t\t\t\th(AsamFormItem, { prop: 'value', rules: rule, ref: item }, () =>\n\t\t\t\t\t\th(TypedRemote, {\n\t\t\t\t\t\t\t...configuration.value,\n\t\t\t\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\t\t\t\tfields.value = String(value);\n\t\t\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonInput: (value: string | number) => inputs.value.push(value),\n\t\t\t\t\t\t\tonChange: (value: string | number) => changes.value.push(value)\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t)\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-validation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function reset() {\n\tfields.value = 'Seed';\n\tawait nextTick();\n\tawait nextTick();\n\t// Finish the queued blur validation before starting this measurement window.\n\tawait new Promise<void>((resolve) => setTimeout(resolve, 20));\n\tawait nextTick();\n\titem.value?.clearValidate();\n\tvalidations.value = [];\n\tvalidateEvents.value = [];\n\tinputs.value = [];\n\tupdates.value = [];\n\tchanges.value = [];\n}\n</script>\n\n<style scoped>\n.validation-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.validation-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "InputInstanceContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/InputInstanceContract.vue",
									"sha256": "58331d433e0486f2320f0dff7ec04f2cfde24dc693156a8c0240ff23f366e436",
									"source": "<template>\n\t<section data-testid=\"autocomplete-input-instance-contract\">\n\t\t<div class=\"instance-actions\">\n\t\t\t<label for=\"data009-instance-kind\">建议实例输入类型</label>\n\t\t\t<AsamSelect id=\"data009-instance-kind\" v-model=\"kind\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'password'\" :value=\"'password'\">password</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取建议输入实例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('focus')\"\n\t\t\t\t>实例输入聚焦</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('blur')\"\n\t\t\t\t>实例输入失焦</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('select')\"\n\t\t\t\t>实例选择文本</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('clear')\"\n\t\t\t\t>实例清除文本</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('resizeTextarea')\"\n\t\t\t\t>实例调整文本域</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t>恢复输入实例记录</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"instance-host\" />\n\t\t<pre data-testid=\"autocomplete-input-instance-result\">{{\n\t\t\tJSON.stringify({ model, kind, events, inputs, updates, changes, clears, inspection })\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type { AsamApiRequest, AsamRemoteAutocompleteExpose } from '@asam-ui/ui';\n\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\nconst host = ref<HTMLDivElement>();\nconst control = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('Seed');\nconst kind = ref<'text' | 'password' | 'textarea'>('text');\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]),\n\tchanges = ref<(string | number)[]>([]),\n\tclears = ref(0);\nconst events = ref<\n\t{\n\t\tname: string;\n\t\ttype: string;\n\t\tconstructor: string;\n\t\tnativePayloadSame: boolean;\n\t\tkey?: string;\n\t\tdata?: string | null;\n\t}[]\n>([]);\nconst inspection = ref<Record<string, unknown>>({});\nconst nativeEvents = new WeakSet<Event>();\nconst names = [\n\t'focus',\n\t'blur',\n\t'keydown',\n\t'compositionstart',\n\t'compositionupdate',\n\t'compositionend',\n\t'mouseenter',\n\t'mouseleave'\n];\nconst capture = (event: Event) => nativeEvents.add(event);\nfunction record(name: string, event: Event) {\n\tevents.value.push({\n\t\tname,\n\t\ttype: event.type,\n\t\tconstructor: event.constructor.name,\n\t\tnativePayloadSame: nativeEvents.has(event),\n\t\t...(event instanceof KeyboardEvent ? { key: event.key } : {}),\n\t\t...(event instanceof CompositionEvent ? { data: event.data } : {})\n\t});\n}\nconst factory = defineAsamOptions<string, Member>();\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst transform = (members: readonly Member[]) => members;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tfor (const name of names) host.value.addEventListener(name, capture, true);\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\tref: control,\n\t\t\t\tsource,\n\t\t\t\tmodelValue: model.value,\n\t\t\t\ttype: kind.value,\n\t\t\t\tariaLabel: '建议实例输入',\n\t\t\t\tdebounce: 0,\n\t\t\t\ttriggerOnFocus: false,\n\t\t\t\tteleported: false,\n\t\t\t\tshowPassword: kind.value === 'password',\n\t\t\t\trows: 2,\n\t\t\t\tautosize: { minRows: 2, maxRows: 4 },\n\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t},\n\t\t\t\tonInput: (value: string | number) => inputs.value.push(value),\n\t\t\t\tonChange: (value: string | number) => changes.value.push(value),\n\t\t\t\tonClear: () => clears.value++,\n\t\t\t\tonFocus: (event: FocusEvent) => record('focus', event),\n\t\t\t\tonBlur: (event: FocusEvent) => record('blur', event),\n\t\t\t\tonKeydown: (event: Event | KeyboardEvent) => record('keydown', event),\n\t\t\t\tonCompositionstart: (event: CompositionEvent) => record('compositionstart', event),\n\t\t\t\tonCompositionupdate: (event: CompositionEvent) =>\n\t\t\t\t\trecord('compositionupdate', event),\n\t\t\t\tonCompositionend: (event: CompositionEvent) => record('compositionend', event),\n\t\t\t\tonMouseenter: (event: MouseEvent) => record('mouseenter', event),\n\t\t\t\tonMouseleave: (event: MouseEvent) => record('mouseleave', event)\n\t\t\t})\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-input-instance' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => {\n\tapp?.unmount();\n\tfor (const name of names) host.value?.removeEventListener(name, capture, true);\n});\nfunction inspect() {\n\tconst instance = control.value?.inputRef;\n\tinspection.value = {\n\t\tready: !!instance,\n\t\tinputTag: instance?.input?.tagName ?? null,\n\t\ttextareaTag: instance?.textarea?.tagName ?? null,\n\t\trefTag: instance?.ref?.tagName ?? null,\n\t\trefMatchesInput: !!instance?.input && instance.ref === instance.input,\n\t\trefMatchesTextarea: !!instance?.textarea && instance.ref === instance.textarea,\n\t\tisComposing: instance?.isComposing,\n\t\tpasswordVisible: instance?.passwordVisible,\n\t\ttextareaStyle: instance?.textareaStyle,\n\t\trootInputMembersAbsent: [\n\t\t\t'input',\n\t\t\t'textarea',\n\t\t\t'ref',\n\t\t\t'select',\n\t\t\t'clear',\n\t\t\t'resizeTextarea',\n\t\t\t'isComposing',\n\t\t\t'passwordVisible',\n\t\t\t'textareaStyle'\n\t\t].every((name) => !(name in (control.value ?? {})))\n\t};\n}\nasync function operate(name: 'focus' | 'blur' | 'select' | 'clear' | 'resizeTextarea') {\n\tcontrol.value?.inputRef?.[name]();\n\tawait nextTick();\n\tinspect();\n}\nasync function reset() {\n\tmodel.value = 'Seed';\n\tawait nextTick();\n\tawait new Promise<void>((resolve) => setTimeout(resolve, 20));\n\tevents.value = [];\n\tinputs.value = [];\n\tupdates.value = [];\n\tchanges.value = [];\n\tclears.value = 0;\n\tinspect();\n}\n</script>\n\n<style scoped>\n.instance-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.instance-host {\n\twidth: 300px;\n\tmargin-block: var(--asam-space-md);\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "OfficialInputContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/OfficialInputContract.vue",
									"sha256": "c3d58a4217227f8ca7291d7a63c5137a658b55e1c37d371093036fb5388c06a7",
									"source": "<template>\n\t<section data-testid=\"autocomplete-official-input-contract\">\n\t\t<div class=\"official-controls\">\n\t\t\t<label for=\"data009-official-kind\">官方组合输入类型</label>\n\t\t\t<AsamSelect id=\"data009-official-kind\" v-model=\"kind\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-official-icon\">官方清除图标</label>\n\t\t\t<AsamSelect id=\"data009-official-icon\" v-model=\"icon\">\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'custom'\" :value=\"'custom'\">custom</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-official-position\">官方计数位置</label>\n\t\t\t<AsamSelect id=\"data009-official-position\" v-model=\"position\">\n\t\t\t\t<AsamOption :label=\"'inside'\" :value=\"'inside'\">inside</AsamOption>\n\t\t\t\t<AsamOption :label=\"'outside'\" :value=\"'outside'\">outside</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-official-count\">官方计数方式</label>\n\t\t\t<AsamSelect id=\"data009-official-count\" v-model=\"count\">\n\t\t\t\t<AsamOption :label=\"'native'\" :value=\"'native'\">native</AsamOption>\n\t\t\t\t<AsamOption :label=\"'codepoints'\" :value=\"'codepoints'\">codepoints</AsamOption>\n\t\t\t\t<AsamOption :label=\"'graphemes'\" :value=\"'graphemes'\">graphemes</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t>恢复官方组合模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取官方组合来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"official-host\" />\n\t\t<pre data-testid=\"autocomplete-official-input-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tkind,\n\t\t\t\ticon,\n\t\t\t\tposition,\n\t\t\t\tcount,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tclears,\n\t\t\t\tsuggestions,\n\t\t\t\tpassword\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamPassword,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type {\n\tAsamApiRequest,\n\tAsamRemoteAutocompleteExpose,\n\tAsamRemoteAutocompleteProps\n} from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\ntype Props = AsamRemoteAutocompleteProps<string, Member>;\nconst host = ref<HTMLDivElement>();\nconst control = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('AB'),\n\tpassword = ref<string | number>('Secret');\nconst kind = ref<'text' | 'textarea'>('text'),\n\ticon = ref<'default' | 'custom'>('default'),\n\tposition = ref<'inside' | 'outside'>('inside'),\n\tcount = ref<'native' | 'codepoints' | 'graphemes'>('native');\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]),\n\tclears = ref(0);\nconst suggestions = ref<AsamRemoteAutocompleteExpose<string, Member>['suggestions']>([]);\nconst segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\nconst countCodepoints: NonNullable<Props['countGraphemes']> = (value) => Array.from(value).length;\nconst countGraphemes: NonNullable<Props['countGraphemes']> = (value) =>\n\tArray.from(segmenter.segment(value)).length;\nconst Clear = () =>\n\th(\n\t\t'svg',\n\t\t{ viewBox: '0 0 16 16', 'data-official-clear-icon': 'custom', 'aria-hidden': 'true' },\n\t\t[\n\t\t\th('path', {\n\t\t\t\td: 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z',\n\t\t\t\tfill: 'currentColor'\n\t\t\t})\n\t\t]\n\t);\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (members: readonly Member[]) => members;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed<Props>(() => ({\n\tsource,\n\tmodelValue: model.value,\n\ttype: kind.value,\n\tariaLabel: '官方组合建议输入',\n\trows: 2,\n\tmaxlength: 3,\n\tclearable: true,\n\tshowWordLimit: true,\n\twordLimitPosition: position.value,\n\t...(icon.value === 'custom' ? { clearIcon: Clear } : {}),\n\t...(count.value === 'native'\n\t\t? {}\n\t\t: { countGraphemes: count.value === 'codepoints' ? countCodepoints : countGraphemes }),\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tteleported: false\n}));\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th('div', [\n\t\t\t\th(TypedRemote, {\n\t\t\t\t\t...configuration.value,\n\t\t\t\t\tref: control,\n\t\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\t\tmodel.value = value;\n\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t},\n\t\t\t\t\tonInput: (value: string | number) => inputs.value.push(value),\n\t\t\t\t\tonClear: () => clears.value++\n\t\t\t\t}),\n\t\t\t\th('div', { 'data-testid': 'official-default-password' }, [\n\t\t\t\t\th(AsamPassword, {\n\t\t\t\t\t\tmodelValue: password.value,\n\t\t\t\t\t\tshowPassword: true,\n\t\t\t\t\t\tariaLabel: '官方默认密码输入',\n\t\t\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\t\t\tpassword.value = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t]),\n\t\t\t\th('div', { 'data-testid': 'official-base-password' }, [\n\t\t\t\t\th(\n\t\t\t\t\t\tAsamPassword,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmodelValue: password.value,\n\t\t\t\t\t\t\tshowPassword: true,\n\t\t\t\t\t\t\tariaLabel: '官方密码图标输入',\n\t\t\t\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\t\t\t\tpassword.value = value;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'password-icon': ({ visible }: { visible: boolean }) =>\n\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t'span',\n\t\t\t\t\t\t\t\t\t{ 'data-testid': 'official-password-icon' },\n\t\t\t\t\t\t\t\t\tvisible ? '公开' : '隐藏'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t)\n\t\t\t\t])\n\t\t\t])\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-official-input' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function reset() {\n\tmodel.value = 'AB';\n\tawait nextTick();\n\tinputs.value = [];\n\tupdates.value = [];\n\tclears.value = 0;\n\tsuggestions.value = [];\n}\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.official-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.official-host {\n\twidth: 300px;\n\tmargin-block: var(--asam-space-md);\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "OfficialLayoutContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/OfficialLayoutContract.vue",
									"sha256": "cd2d9b82a0c55cf80bcd2f08c01602cac7aa3f6b6bfebd53ccbb3d5e21c7da4c",
									"source": "<template>\n\t<section data-testid=\"autocomplete-official-layout-contract\">\n\t\t<div class=\"layout-controls\">\n\t\t\t<label for=\"data009-layout-size\">官方布局尺寸</label>\n\t\t\t<AsamSelect id=\"data009-layout-size\" v-model=\"size\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-layout-icon\">官方布局图标</label>\n\t\t\t<AsamSelect id=\"data009-layout-icon\" v-model=\"iconMode\">\n\t\t\t\t<AsamOption :label=\"'plain'\" :value=\"'plain'\">plain</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prefixIcon'\" :value=\"'prefixIcon'\">prefixIcon</AsamOption>\n\t\t\t\t<AsamOption :label=\"'suffixIcon'\" :value=\"'suffixIcon'\">suffixIcon</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prefixSlot'\" :value=\"'prefixSlot'\">prefixSlot</AsamOption>\n\t\t\t\t<AsamOption :label=\"'suffixSlot'\" :value=\"'suffixSlot'\">suffixSlot</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-layout-mixed\">官方附加内容</label>\n\t\t\t<AsamSelect id=\"data009-layout-mixed\" v-model=\"mixed\">\n\t\t\t\t<AsamOption :label=\"'none'\" :value=\"'none'\">none</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prependText'\" :value=\"'prependText'\">prependText</AsamOption>\n\t\t\t\t<AsamOption :label=\"'appendText'\" :value=\"'appendText'\">appendText</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prependSelect'\" :value=\"'prependSelect'\"\n\t\t\t\t\t>prependSelect</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption :label=\"'appendSelect'\" :value=\"'appendSelect'\"\n\t\t\t\t\t>appendSelect</AsamOption\n\t\t\t\t>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取官方布局来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"layout-host\" />\n\t\t<pre data-testid=\"autocomplete-official-layout-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tsize,\n\t\t\t\ticonMode,\n\t\t\t\tmixed,\n\t\t\t\tselected,\n\t\t\t\tchildChanges,\n\t\t\t\tclicks,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\trequests,\n\t\t\t\tsuggestions\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamButton,\n\tAsamConfigProvider,\n\tAsamOption,\n\tAsamRemoteAutocomplete,\n\tAsamSelect,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type { AsamApiRequest, AsamControlSize, AsamRemoteAutocompleteExpose } from '@asam-ui/ui';\ninterface Member {\n\tid: number;\n\tname: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\nconst host = ref<HTMLDivElement>(),\n\tcontrol = shallowRef<AsamRemoteAutocompleteExpose<string, Member>>();\nconst model = ref<string | number>('Alpha');\nconst size = ref<AsamControlSize | 'omitted'>('omitted');\nconst iconMode = ref('plain'),\n\tmixed = ref('none'),\n\tselected = ref('1');\nconst childChanges = ref<string[]>([]),\n\tclicks = ref(0);\nconst inputs = ref<(string | number)[]>([]),\n\tupdates = ref<(string | number)[]>([]);\nconst requests = ref<string[]>([]),\n\tsuggestions = ref<AsamRemoteAutocompleteExpose<string, Member>['suggestions']>([]);\nconst icon = () =>\n\th(\n\t\t'svg',\n\t\t{\n\t\t\tviewBox: '0 0 16 16',\n\t\t\t'data-official-layout-icon': iconMode.value,\n\t\t\t'aria-hidden': 'true'\n\t\t},\n\t\t[h('path', { d: 'M2 2h8v8H2zM10 10l4 4', fill: 'none', stroke: 'currentColor' })]\n\t);\nconst api: AsamApiRequest<Query, readonly Member[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions<string, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\ttransform,\n\t\tparams: { text },\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst TypedRemote = AsamRemoteAutocomplete<string, Member>;\nconst options = [\n\t{ label: 'Restaurant', value: '1' },\n\t{ label: 'Order No.', value: '2' },\n\t{ label: 'Tel', value: '3' }\n];\nfunction selectChild() {\n\treturn h('div', { 'data-testid': 'official-layout-child-select' }, [\n\t\th(\n\t\t\tAsamSelect,\n\t\t\t{\n\t\t\t\tmodelValue: selected.value,\n\t\t\t\tvalueMode: 'native',\n\t\t\t\tplaceholder: '选择',\n\t\t\t\tstyle: { width: '115px' },\n\t\t\t\t'onUpdate:modelValue': (value: unknown) => {\n\t\t\t\t\tif (typeof value === 'string') {\n\t\t\t\t\t\tselected.value = value;\n\t\t\t\t\t\tchildChanges.value.push(value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t() =>\n\t\t\t\toptions.map((option) => h(AsamOption, { label: option.label, value: option.value }))\n\t\t)\n\t]);\n}\nfunction buttonChild() {\n\treturn h(AsamButton, { 'aria-label': '官方附加搜索', icon, onClick: () => clicks.value++ });\n}\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(AsamConfigProvider, { size: 'default' }, () =>\n\t\t\t\th(\n\t\t\t\t\tTypedRemote,\n\t\t\t\t\t{\n\t\t\t\t\t\tsource,\n\t\t\t\t\t\tkey: iconMode.value + ':' + mixed.value,\n\t\t\t\t\t\tmodelValue: model.value,\n\t\t\t\t\t\tariaLabel: '官方布局建议输入',\n\t\t\t\t\t\ttriggerOnFocus: false,\n\t\t\t\t\t\tdebounce: 0,\n\t\t\t\t\t\t...(size.value === 'omitted' ? {} : { size: size.value }),\n\t\t\t\t\t\t...(iconMode.value === 'prefixIcon' ? { prefixIcon: icon } : {}),\n\t\t\t\t\t\t...(iconMode.value === 'suffixIcon' ? { suffixIcon: icon } : {}),\n\t\t\t\t\t\tref: control,\n\t\t\t\t\t\t'onUpdate:modelValue': (value: string | number) => {\n\t\t\t\t\t\t\tmodel.value = value;\n\t\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonInput: (value: string | number) => inputs.value.push(value)\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t...(iconMode.value === 'prefixSlot' ? { prefix: icon } : {}),\n\t\t\t\t\t\t...(iconMode.value === 'suffixSlot' ? { suffix: icon } : {}),\n\t\t\t\t\t\t...(mixed.value === 'prependText' ? { prepend: () => 'Http://' } : {}),\n\t\t\t\t\t\t...(mixed.value === 'appendText' ? { append: () => '.com' } : {}),\n\t\t\t\t\t\t...(mixed.value === 'prependSelect'\n\t\t\t\t\t\t\t? { prepend: selectChild, append: buttonChild }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t...(mixed.value === 'appendSelect'\n\t\t\t\t\t\t\t? { prepend: buttonChild, append: selectChild }\n\t\t\t\t\t\t\t: {})\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t)\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-official-layout' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.layout-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.layout-host {\n\twidth: 600px;\n\tmax-width: 100%;\n\tmargin-block: var(--asam-space-md);\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "OfficialSuggestionContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/ts/OfficialSuggestionContract.vue",
									"sha256": "b37c492dd468263712018289d6da7b975e4ab2062985ba11a779a2d3ce219d09",
									"source": "<template>\n\t<section data-testid=\"autocomplete-official-suggestion-contract\">\n\t\t<p class=\"example-paragraph\">八个独立控件保留官方基础、模板、远程、加载及页眉页脚分支。</p>\n\t\t<div ref=\"host\" class=\"data009-official-suggestion-host\" />\n\t\t<pre data-testid=\"autocomplete-official-suggestion-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodels,\n\t\t\t\tloadingModel,\n\t\t\t\tqueries,\n\t\t\t\tselections,\n\t\t\t\ticonClicks,\n\t\t\t\tfooterClears,\n\t\t\t\tpending\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamButton,\n\tAsamIcon,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport type { App } from 'vue';\nimport type { AsamApiRequest, AsamOption, AsamRemoteAutocompleteExpose } from '@asam-ui/ui';\n\ninterface LinkItem {\n\tvalue: string;\n\tlink: string;\n}\ntype CaseId =\n\t| 'basic-focus'\n\t| 'basic-input'\n\t| 'template'\n\t| 'remote'\n\t| 'loading-ring'\n\t| 'loading-dots'\n\t| 'header'\n\t| 'footer';\ntype Selection = AsamOption<string, LinkItem> | { readonly value: string | number };\nconst names: readonly CaseId[] = [\n\t'basic-focus',\n\t'basic-input',\n\t'template',\n\t'remote',\n\t'loading-ring',\n\t'loading-dots',\n\t'header',\n\t'footer'\n];\nconst links: readonly LinkItem[] = [\n\t{ value: 'vue', link: 'https://github.com/vuejs/vue' },\n\t{ value: 'element', link: 'https://github.com/ElemeFE/element' },\n\t{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },\n\t{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },\n\t{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },\n\t{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },\n\t{ value: 'babel', link: 'https://github.com/babel/babel' }\n];\nconst host = ref<HTMLElement>();\nconst models = ref<Record<CaseId, string | number>>({\n\t'basic-focus': '',\n\t'basic-input': '',\n\ttemplate: '',\n\tremote: '',\n\t'loading-ring': '',\n\t'loading-dots': '',\n\theader: '',\n\tfooter: ''\n});\nconst loadingModel = ref<string | number>('');\nconst queries = ref<{ control: CaseId; query: string; results: readonly LinkItem[] }[]>([]);\nconst selections = ref<{ control: CaseId; item: Selection }[]>([]);\nconst iconClicks = ref<{ type: string; nativeMouse: boolean }[]>([]);\nconst footerClears = ref(0);\nconst pending = ref<CaseId[]>([]);\nconst footer = shallowRef<AsamRemoteAutocompleteExpose<string, LinkItem>>();\nconst releases = new Map<CaseId, () => void>();\nconst factory = defineAsamOptions<string, LinkItem>();\nconst TypedRemote = AsamRemoteAutocomplete<string, LinkItem>;\nconst isLoadingCase = (name: CaseId) => name === 'loading-ring' || name === 'loading-dots';\nconst model = (name: CaseId) => (isLoadingCase(name) ? loadingModel.value : models.value[name]);\nconst setModel = (name: CaseId, value: string | number) => {\n\tif (isLoadingCase(name)) loadingModel.value = value;\n\telse models.value[name] = value;\n};\nconst api: AsamApiRequest<{ control: CaseId; query: string }, readonly LinkItem[]> = async (\n\tparams: { control: CaseId; query: string },\n\tcontext\n) => {\n\tcontext.signal.throwIfAborted();\n\tconst results = links.filter((item) =>\n\t\titem.value.toLowerCase().startsWith(params.query.toLowerCase())\n\t);\n\tqueries.value.push({ ...params, results });\n\tif (isLoadingCase(params.control)) {\n\t\tpending.value.push(params.control);\n\t\ttry {\n\t\t\tawait new Promise<void>((resolve, reject) => {\n\t\t\t\tconst abort = () => reject(context.signal.reason);\n\t\t\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\t\t\treleases.set(params.control, () => {\n\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\tresolve();\n\t\t\t\t});\n\t\t\t});\n\t\t} finally {\n\t\t\tpending.value = pending.value.filter((name) => name !== params.control);\n\t\t\treleases.delete(params.control);\n\t\t}\n\t} else if (\n\t\tparams.control === 'remote' ||\n\t\tparams.control === 'header' ||\n\t\tparams.control === 'footer'\n\t) {\n\t\tawait new Promise<void>((resolve) => setTimeout(resolve, 60));\n\t}\n\tcontext.signal.throwIfAborted();\n\treturn results;\n};\nconst source = (control: CaseId, query: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { control, query },\n\t\ttransform: (rows) => rows,\n\t\tfieldNames: { label: 'value', value: 'value' }\n\t});\nconst cases = names.map((name) => ({ name, source: (query: string) => source(name, query) }));\nconst circle = () =>\n\th('svg', { class: 'circular', viewBox: '0 0 50 50', 'data-testid': 'official-ring-loader' }, [\n\t\th('circle', { class: 'path', cx: 25, cy: 25, r: 20, fill: 'none' })\n\t]);\nconst dots = () =>\n\th(\n\t\tAsamIcon,\n\t\t{ class: 'is-loading', 'data-testid': 'official-dots-loader' },\n\t\t{\n\t\t\tdefault: () =>\n\t\t\t\th('svg', { class: 'circular', viewBox: '0 0 20 20' }, [\n\t\t\t\t\th(\n\t\t\t\t\t\t'g',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclass: 'path2 loading-path',\n\t\t\t\t\t\t\t'stroke-width': 0,\n\t\t\t\t\t\t\tstyle: { animation: 'none', stroke: 'none' }\n\t\t\t\t\t\t},\n\t\t\t\t\t\t['dot1', 'dot2', 'dot4', 'dot3'].map((name) =>\n\t\t\t\t\t\t\th('circle', { r: 3.375, class: name, rx: 0, ry: 0 })\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t])\n\t\t}\n\t);\nasync function clearFooter() {\n\tmodels.value.footer = '';\n\tfooterClears.value++;\n\tawait nextTick();\n\tawait footer.value?.getData('');\n}\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(\n\t\t\t\t'div',\n\t\t\t\t{ class: 'suggestion-grid' },\n\t\t\t\tcases.map(({ name, source: caseSource }) =>\n\t\t\t\t\th('article', { 'data-testid': 'official-suggestion-' + name }, [\n\t\t\t\t\t\th('h3', name),\n\t\t\t\t\t\t...(isLoadingCase(name)\n\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\tAsamButton,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\t\t\t\t\t\tnativeType: 'button',\n\t\t\t\t\t\t\t\t\t\t\tonMousedown: (event: MouseEvent) =>\n\t\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault(),\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => releases.get(name)?.()\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t{ default: () => '完成官方加载 ' + name }\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t: []),\n\t\t\t\t\t\th(\n\t\t\t\t\t\t\tTypedRemote,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t...(name === 'footer' ? { ref: footer } : {}),\n\t\t\t\t\t\t\t\tmodelValue: model(name),\n\t\t\t\t\t\t\t\t'onUpdate:modelValue': (value: string | number) =>\n\t\t\t\t\t\t\t\t\tsetModel(name, value),\n\t\t\t\t\t\t\t\tsource: caseSource,\n\t\t\t\t\t\t\t\tariaLabel: '官方建议 ' + name,\n\t\t\t\t\t\t\t\tplaceholder:\n\t\t\t\t\t\t\t\t\tname === 'basic-focus' || name === 'basic-input'\n\t\t\t\t\t\t\t\t\t\t? '请输入内容'\n\t\t\t\t\t\t\t\t\t\t: '输入查询内容',\n\t\t\t\t\t\t\t\tclearable: name === 'basic-focus' || name === 'basic-input',\n\t\t\t\t\t\t\t\tteleported: false,\n\t\t\t\t\t\t\t\tdebounce: 0,\n\t\t\t\t\t\t\t\t...(name === 'basic-input' ? { triggerOnFocus: false } : {}),\n\t\t\t\t\t\t\t\t...(name === 'template'\n\t\t\t\t\t\t\t\t\t? { popperClass: 'data009-official-template-popper' }\n\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\tonSelect: (item: Selection) =>\n\t\t\t\t\t\t\t\t\tselections.value.push({ control: name, item })\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t...(name === 'template'\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tsuffix: () =>\n\t\t\t\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\t\t\t\tAsamIcon,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass: 'el-input__icon',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'data-testid': 'official-template-suffix',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: (event: MouseEvent) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticonClicks.value.push({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: event.type,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnativeMouse:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tevent instanceof MouseEvent\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefault: () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\th('svg', { viewBox: '0 0 16 16' }, [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\th('path', {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\td: 'M2 11l8-8 3 3-8 8H2z',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill: 'currentColor'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t])\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tdefault: ({\n\t\t\t\t\t\t\t\t\t\t\t\titem\n\t\t\t\t\t\t\t\t\t\t\t}: {\n\t\t\t\t\t\t\t\t\t\t\t\titem: AsamOption<string, LinkItem>;\n\t\t\t\t\t\t\t\t\t\t\t}) => [\n\t\t\t\t\t\t\t\t\t\t\t\th('div', { class: 'value' }, item.value),\n\t\t\t\t\t\t\t\t\t\t\t\th('span', { class: 'link' }, item.raw.link)\n\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t...(name === 'loading-ring' ? { loading: circle } : {}),\n\t\t\t\t\t\t\t\t...(name === 'loading-dots' ? { loading: dots } : {}),\n\t\t\t\t\t\t\t\t...(name === 'header'\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\theader: () =>\n\t\t\t\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'span',\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ 'data-testid': 'official-header-content' },\n\t\t\t\t\t\t\t\t\t\t\t\t\t'页眉内容'\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t...(name === 'footer'\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tfooter: () =>\n\t\t\t\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\t\t\t\tAsamButton,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlink: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: clearFooter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'data-testid': 'official-footer-clear'\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ default: () => '清空' }\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: {})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t)\n\t\t\t\t\t])\n\t\t\t\t)\n\t\t\t)\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-official-suggestions' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => {\n\tfor (const release of releases.values()) release();\n\tapp?.unmount();\n});\n</script>\n\n<style>\n.data009-official-suggestion-host {\n\tmargin-block: var(--asam-space-md);\n}\n\n[data-testid='autocomplete-official-suggestion-contract'] pre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n\n.data009-official-suggestion-host .suggestion-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.data009-official-suggestion-host .circular {\n\tdisplay: inline;\n\theight: 30px;\n\twidth: 30px;\n\tanimation: data009-official-loading-rotate 2s linear infinite;\n}\n\n.data009-official-suggestion-host .path {\n\tanimation: data009-official-loading-dash 1.5s ease-in-out infinite;\n\tstroke-dasharray: 90, 150;\n\tstroke-dashoffset: 0;\n\tstroke-width: 2;\n\tstroke: var(--el-color-primary);\n\tstroke-linecap: round;\n}\n\n.data009-official-suggestion-host .loading-path .dot1 {\n\ttransform: translate(3.75px, 3.75px);\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n}\n\n.data009-official-suggestion-host .loading-path .dot2 {\n\ttransform: translate(calc(100% - 3.75px), 3.75px);\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n\tanimation-delay: 0.4s;\n}\n\n.data009-official-suggestion-host .loading-path .dot3 {\n\ttransform: translate(3.75px, calc(100% - 3.75px));\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n\tanimation-delay: 1.2s;\n}\n\n.data009-official-suggestion-host .loading-path .dot4 {\n\ttransform: translate(calc(100% - 3.75px), calc(100% - 3.75px));\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n\tanimation-delay: 0.8s;\n}\n\n@keyframes data009-official-loading-rotate {\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes data009-official-loading-dash {\n\t0% {\n\t\tstroke-dasharray: 1, 200;\n\t\tstroke-dashoffset: 0;\n\t}\n\n\t50% {\n\t\tstroke-dasharray: 90, 150;\n\t\tstroke-dashoffset: -40px;\n\t}\n\n\t100% {\n\t\tstroke-dasharray: 90, 150;\n\t\tstroke-dashoffset: -120px;\n\t}\n}\n\n@keyframes data009-official-custom-spin-move {\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n.data009-official-suggestion-host .data009-official-template-popper li {\n\tline-height: normal;\n\tpadding: 7px;\n}\n\n.data009-official-suggestion-host .data009-official-template-popper .value {\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n}\n\n.data009-official-suggestion-host .data009-official-template-popper .link {\n\tfont-size: 12px;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/Demo.vue",
									"sha256": "1aa0ba92349e77a3c5b290aafa2c8c5a1b47d9342f20b23979e230b6abc3142e",
									"source": "<template>\n\t<section class=\"autocomplete-demo\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"showQueryContract = !showQueryContract\"\n\t\t\t>\n\t\t\t\t展示建议查询协议\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取公开实例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showArrow = true\"\n\t\t\t\t>显示浮层箭头</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showArrow = false\"\n\t\t\t\t>隐藏浮层箭头</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showArrow = undefined\"\n\t\t\t\t>恢复默认箭头</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"offset = 0\"\n\t\t\t\t>取消额外偏移</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"offset = 16\"\n\t\t\t\t>恢复额外偏移</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\t:show-arrow=\"showArrow\"\n\t\t\t:popper-options=\"popperOptions\"\n\t\t\t:debounce=\"100\"\n\t\t\t:loop-navigation=\"false\"\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\taria-label=\"搜索成员\"\n\t\t\tplaceholder=\"输入 Alpha 或 Beta\"\n\t\t\t@update:model-value=\"recordValue('update:modelValue', $event)\"\n\t\t\t@input=\"recordValue('input', $event)\"\n\t\t\t@change=\"recordValue('change', $event)\"\n\t\t\t@select=\"recordSelect\"\n\t\t\t@clear=\"events.push({ name: 'clear', payload: null })\"\n\t\t\t@focus=\"recordDom('focus', $event)\"\n\t\t\t@blur=\"recordDom('blur', $event)\"\n\t\t\t@mouseenter=\"recordDom('mouseenter', $event)\"\n\t\t\t@mouseleave=\"recordDom('mouseleave', $event)\"\n\t\t\t@compositionstart=\"recordDom('compositionstart', $event)\"\n\t\t\t@compositionupdate=\"recordDom('compositionupdate', $event)\"\n\t\t\t@compositionend=\"recordDom('compositionend', $event)\"\n\t\t\t@keydown=\"recordKey\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"autocomplete-prefix\">找</span></template>\n\t\t\t<template #suffix><span data-testid=\"autocomplete-suffix\">本地</span></template>\n\t\t\t<template #prepend><span data-testid=\"autocomplete-prepend\">成员</span></template>\n\t\t\t<template #append>\n\t\t\t\t<AsamCollapse\n\t\t\t\t\t@mousedown=\"keepHeaderFocus\"\n\t\t\t\t\tclass=\"instance-controls\"\n\t\t\t\t\tdata-testid=\"autocomplete-append\"\n\t\t\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t\t\t<template #title><span @mousedown.prevent>实例控制</span></template>\n\t\t\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"inspect\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t读取实例状态\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.focus()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例聚焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例失焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.close()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例关闭建议\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"loadAll\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例读取全部建议\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(0)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例高亮首项\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(-1)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例取消高亮\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"selectFirst\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例选择首项\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"enter\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t实例提交 Enter\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t\t\t>\n\t\t\t</template>\n\t\t\t<template #header>\n\t\t\t\t<p class=\"panel-caption example-paragraph\" data-testid=\"autocomplete-header\">本地异步成员建议</p>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"panel-caption example-paragraph\" data-testid=\"autocomplete-footer\">\n\t\t\t\t\t匹配建议保留 raw；未匹配 Enter 只有 value\n\t\t\t\t</p>\n\t\t\t</template>\n\t\t\t<template #loading>\n\t\t\t\t<p class=\"panel-caption example-paragraph\" data-testid=\"autocomplete-loading\">正在加载成员…</p>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t<span data-testid=\"autocomplete-option\">{{ item.label }} · {{ item.raw.id }}</span>\n\t\t\t</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<p class=\"example-paragraph\">模型：{{ value }}；最近按键：{{ lastKey }}；请求次数：{{ requests }}</p>\n\t\t<pre>{{ JSON.stringify({ selected, instance, methodResult, events }, null, 2) }}</pre>\n\t\t<QueryContract v-if=\"showQueryContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showSelectContract = !showSelectContract\"\n\t\t>\n\t\t\t展示选择载荷契约\n\t\t</AsamButton>\n\t\t<SelectContract v-if=\"showSelectContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showNativeInputContract = !showNativeInputContract\"\n\t\t>\n\t\t\t展示原生输入协议\n\t\t</AsamButton>\n\t\t<NativeInputContract v-if=\"showNativeInputContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPopupContract = !showPopupContract\"\n\t\t>\n\t\t\t展示建议浮层协议\n\t\t</AsamButton>\n\t\t<PopupContract v-if=\"showPopupContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showSourceLifecycleContract = !showSourceLifecycleContract\"\n\t\t>\n\t\t\t展示来源生命周期\n\t\t</AsamButton>\n\t\t<SourceLifecycleContract v-if=\"showSourceLifecycleContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPresentationContract = !showPresentationContract\"\n\t\t>\n\t\t\t展示建议外观协议\n\t\t</AsamButton>\n\t\t<PresentationContract v-if=\"showPresentationContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showFormattingContract = !showFormattingContract\"\n\t\t>\n\t\t\t展示建议格式协议\n\t\t</AsamButton>\n\t\t<FormattingContract v-if=\"showFormattingContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showTextCapabilityContract = !showTextCapabilityContract\"\n\t\t>\n\t\t\t展示建议文本能力\n\t\t</AsamButton>\n\t\t<TextCapabilityContract v-if=\"showTextCapabilityContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showValidationContract = !showValidationContract\"\n\t\t>\n\t\t\t展示建议验证协议\n\t\t</AsamButton>\n\t\t<ValidationContract v-if=\"showValidationContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showInputInstanceContract = !showInputInstanceContract\"\n\t\t>\n\t\t\t展示建议输入实例协议\n\t\t</AsamButton>\n\t\t<InputInstanceContract v-if=\"showInputInstanceContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showOfficialInputContract = !showOfficialInputContract\"\n\t\t>\n\t\t\t展示官方输入组合协议\n\t\t</AsamButton>\n\t\t<OfficialInputContract v-if=\"showOfficialInputContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showOfficialLayoutContract = !showOfficialLayoutContract\"\n\t\t>\n\t\t\t展示官方输入布局协议\n\t\t</AsamButton>\n\t\t<OfficialLayoutContract v-if=\"showOfficialLayoutContract\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showOfficialSuggestionContract = !showOfficialSuggestionContract\"\n\t\t>\n\t\t\t展示官方建议分支协议\n\t\t</AsamButton>\n\t\t<OfficialSuggestionContract v-if=\"showOfficialSuggestionContract\" />\n\t</section>\n</template>\n\n<script setup>\nimport SelectContract from './SelectContract.vue';\nimport NativeInputContract from './NativeInputContract.vue';\nimport PopupContract from './PopupContract.vue';\nimport SourceLifecycleContract from './SourceLifecycleContract.vue';\nimport PresentationContract from './PresentationContract.vue';\nimport FormattingContract from './FormattingContract.vue';\nimport TextCapabilityContract from './TextCapabilityContract.vue';\nimport ValidationContract from './ValidationContract.vue';\nimport InputInstanceContract from './InputInstanceContract.vue';\nimport OfficialInputContract from './OfficialInputContract.vue';\nimport OfficialLayoutContract from './OfficialLayoutContract.vue';\nimport OfficialSuggestionContract from './OfficialSuggestionContract.vue';\ndefineOptions({ name: 'AsamRemoteAutocompleteNativeDataDemo' });\nimport { computed, ref } from 'vue';\nimport QueryContract from './QueryContract.vue';\nconst showQueryContract = ref(false);\nconst showSelectContract = ref(false);\nconst showNativeInputContract = ref(false);\nconst showPopupContract = ref(false);\nconst showSourceLifecycleContract = ref(false);\nconst showPresentationContract = ref(false);\nconst showFormattingContract = ref(false);\nconst showTextCapabilityContract = ref(false);\nconst showValidationContract = ref(false);\nconst showInputInstanceContract = ref(false);\nconst showOfficialInputContract = ref(false);\nconst showOfficialLayoutContract = ref(false);\nconst showOfficialSuggestionContract = ref(false);\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst value = ref('');\nconst active = ref(true);\nconst failure = ref(false);\nconst requests = ref(0);\nconst control = ref();\nconst selected = ref();\nconst instance = ref({});\nconst message = ref('');\nconst result = ref('');\nconst lastKey = ref('');\nconst methodResult = ref('');\nconst events = ref([]);\nconst showArrow = ref(false);\nconst offset = ref(16);\nfunction recordKey(event) {\n\tlastKey.value = event instanceof KeyboardEvent ? event.key : '';\n\trecordDom('keydown', event);\n}\nfunction recordValue(name, value) {\n\tevents.value.push({ name, payload: value });\n}\nfunction recordDom(name, event) {\n\tevents.value.push({\n\t\tname,\n\t\tpayload: {\n\t\t\ttype: event.type,\n\t\t\tconstructor: event.constructor.name,\n\t\t\ttrusted: event.isTrusted,\n\t\t\tkey: event instanceof KeyboardEvent ? event.key : undefined,\n\t\t\tdata: event instanceof CompositionEvent ? event.data : undefined\n\t\t}\n\t});\n}\nfunction recordSelect(option) {\n\tselected.value = option;\n\tevents.value.push({ name: 'select', payload: option });\n}\nfunction recordError(error) {\n\tmessage.value = error.message;\n\tevents.value.push({ name: 'error', payload: { kind: error.kind, message: error.message } });\n}\nfunction recordSuccess(options) {\n\tmessage.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst members = [\n\t{ id: 1, label: 'Alpha', value: 'alpha' },\n\t{ id: 2, label: 'Beta', value: 'beta' }\n];\nconst popperOptions = computed(() => ({\n\tmodifiers: [{ name: 'offset', options: { offset: [0, offset.value] } }]\n}));\nconst api = async (query, context) => {\n\trequests.value += 1;\n\tawait new Promise((done) => setTimeout(done, 180));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示接口失败');\n\treturn members.filter((member) =>\n\t\tmember.label.toLowerCase().includes(query.text.toLowerCase())\n\t);\n};\nconst factory = defineAsamOptions();\nconst transform = (response) => response;\nfunction source(text) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function loadAll() {\n\tmethodResult.value = 'getData:pending';\n\tawait control.value?.getData('');\n\tmethodResult.value = 'getData:done';\n}\nasync function selectFirst() {\n\tconst first = control.value?.suggestions[0];\n\tif (!first) return;\n\tawait control.value?.handleSelect(first);\n\tmethodResult.value = 'handleSelect:done';\n}\nasync function enter() {\n\tawait control.value?.handleKeyEnter();\n\tmethodResult.value = 'handleKeyEnter:done';\n}\nfunction inspect() {\n\tconst current = control.value;\n\tinstance.value = {\n\t\thighlightedIndex: current?.highlightedIndex,\n\t\tactivated: current?.activated,\n\t\tloading: current?.loading,\n\t\tsuggestions: current?.suggestions,\n\t\tinputReady: !!current?.inputRef,\n\t\tpopperReady: !!current?.popperRef\n\t};\n}\n\nfunction keepHeaderFocus(event) {\n\tif (event.target instanceof HTMLElement && event.target.closest('[role=button]'))\n\t\tevent.preventDefault();\n}\n</script>\n\n<style scoped>\n.autocomplete-demo {\n\t--asam-layout-control-width: 100%;\n\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.panel-caption {\n\tmargin: var(--asam-space-xs) var(--asam-space-sm);\n}\n\n.instance-controls {\n\tposition: relative;\n}\n\n.instance-controls .actions {\n\tposition: absolute;\n\tbottom: 100%;\n\tright: 0;\n\tz-index: 2;\n\twidth: max-content;\n\tmax-width: 80vw;\n\tpadding: var(--asam-space-sm);\n\tbackground: var(--el-bg-color);\n}\n\npre {\n\tmax-height: 32rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "QueryContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/QueryContract.vue",
									"sha256": "856babb1b35b4afcc86cb7aac442b471fe32a6a625526243df38c7d296efed81",
									"source": "<template>\n\t<section data-testid=\"autocomplete-query-contract\">\n\t\t<h3>建议查询与键盘设置</h3>\n\t\t<div>\n\t\t\t<label>\n\t\t\t\t<span>建议数量</span>\n\t\t\t\t<AsamSelect v-model=\"limitControl\" aria-label=\"建议数量\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"1\" :label=\"'一项'\">一项</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"2\" :label=\"'两项'\">两项</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>聚焦查询</span>\n\t\t\t\t<AsamSelect v-model=\"triggerControl\" aria-label=\"聚焦查询\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>自动高亮首项</span>\n\t\t\t\t<AsamSelect v-model=\"highlightFirstControl\" aria-label=\"自动高亮首项\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>循环导航</span>\n\t\t\t\t<AsamSelect v-model=\"loopControl\" aria-label=\"循环导航\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>未匹配时选择</span>\n\t\t\t\t<AsamSelect v-model=\"unmatchedControl\" aria-label=\"未匹配时选择\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>隐藏加载内容</span>\n\t\t\t\t<AsamSelect v-model=\"hideLoadingControl\" aria-label=\"隐藏加载内容\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"false\" :label=\"'关闭'\">关闭</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>查询防抖</span>\n\t\t\t\t<AsamSelect v-model=\"debounceControl\" aria-label=\"查询防抖\">\n\t\t\t\t\t<AsamOption value=\"__asam_example_unconfigured__\" :label=\"'原默认'\"\n\t\t\t\t\t\t>原默认</AsamOption\n\t\t\t\t\t>\n\t\t\t\t\t<AsamOption :value=\"0\" :label=\"'立即'\">立即</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"180\" :label=\"'180ms'\">180ms</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<label>\n\t\t\t\t<span>持有本地请求</span>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"hold\" />\n\t\t\t</label>\n\t\t</div>\n\t\t<AsamButton type=\"default\" v-if=\"!mounted\" native-type=\"button\" @click=\"mounted = true\"\n\t\t\t>恢复协议输入</AsamButton\n\t\t>\n\t\t<AsamRemoteAutocomplete\n\t\t\tv-if=\"mounted\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"model\"\n\t\t\t:source=\"source\"\n\t\t\tv-bind=\"limit === undefined ? {} : { maxSuggestions: limit }\"\n\t\t\t:trigger-on-focus=\"trigger\"\n\t\t\t:highlight-first-item=\"highlightFirst\"\n\t\t\t:loop-navigation=\"loop\"\n\t\t\t:select-when-unmatched=\"unmatched\"\n\t\t\t:hide-loading=\"hideLoading\"\n\t\t\t:debounce=\"debounce\"\n\t\t\t:teleported=\"false\"\n\t\t\tplacement=\"bottom-start\"\n\t\t\t:popper-options=\"{ modifiers: [{ name: 'flip', enabled: false }] }\"\n\t\t\taria-label=\"建议查询协议\"\n\t\t\t@select=\"selected.push($event)\"\n\t\t>\n\t\t\t<template #append>\n\t\t\t\t<AsamCollapse @mousedown=\"keepHeaderFocus\" class=\"query-instance-controls\"\n\t\t\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t\t\t<template #title><span @mousedown.prevent>协议实例控制</span></template>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.focus()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议聚焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议失焦\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.close()\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议关闭\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"load\"\n\t\t\t\t\t\t\t\t>协议读取全部</AsamButton\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(-1)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议负索引\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"control?.highlight(0)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议首索引\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"enter\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t协议提交 Enter\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\"\n\t\t\t\t\t\t\t\t>释放本地等待</AsamButton\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"invalidLimits\"\n\t\t\t\t\t\t\t\t>检查无效数量</AsamButton\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t@mousedown.prevent\n\t\t\t\t\t\t\t\t@click=\"unmountInput\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t停用协议输入\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t\t\t>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t<span data-testid=\"query-item\">{{ item.label }} / {{ item.raw.id }}</span>\n\t\t\t</template>\n\t\t\t<template #loading>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"query-contract-loading\">本地等待中</p>\n\t\t\t</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<pre data-testid=\"query-contract-state\">{{ JSON.stringify(snapshot, null, 2) }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, nextTick, onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst members = [\n\t{ id: 1, label: 'Alpha', value: 'alpha' },\n\t{ id: 2, label: 'Beta', value: 'beta' },\n\t{ id: 3, label: '禁用', value: 'disabled', disabled: true },\n\t{ id: 4, label: 'Delta', value: 'delta' }\n];\nconst control = ref();\nconst model = ref('');\nconst mounted = ref(true);\nconst detachedReferences = ref();\nconst limit = ref();\nconst trigger = ref();\nconst highlightFirst = ref();\nconst loop = ref();\nconst unmatched = ref();\nconst hideLoading = ref();\nconst debounce = ref();\nconst hold = ref(false);\nconst pendingCount = ref(0);\nconst calls = ref([]);\nconst selected = ref([]);\nconst methodResult = ref('');\nconst guardErrors = ref([]);\nconst pending = new Set();\nfunction release() {\n\tfor (const done of pending) done();\n\tpending.clear();\n\tpendingCount.value = 0;\n}\nconst api = async (query, context) => {\n\tcalls.value.push(query.text);\n\tif (hold.value) {\n\t\tawait new Promise((done) => {\n\t\t\tpending.add(done);\n\t\t\tpendingCount.value = pending.size;\n\t\t});\n\t}\n\tcontext.signal.throwIfAborted();\n\treturn members.filter((member) =>\n\t\tmember.label.toLowerCase().includes(query.text.toLowerCase())\n\t);\n};\nconst factory = defineAsamOptions();\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n\t});\nasync function load() {\n\tmethodResult.value = 'getData:pending';\n\tawait control.value?.getData('');\n\tmethodResult.value = 'getData:done';\n}\nasync function enter() {\n\tmethodResult.value = 'enter:pending';\n\tawait control.value?.handleKeyEnter();\n\tmethodResult.value = 'enter:done';\n}\nasync function invalidLimits() {\n\tcontrol.value?.close();\n\tmethodResult.value = 'guard:pending';\n\tfor (const invalid of [0, -1, 1.5, NaN, Infinity]) {\n\t\tlimit.value = invalid;\n\t\tawait nextTick();\n\t\ttry {\n\t\t\tawait control.value?.getData('');\n\t\t} catch (error) {\n\t\t\tguardErrors.value.push({\n\t\t\t\tlimit: String(invalid),\n\t\t\t\tmessage: error instanceof Error ? error.message : String(error)\n\t\t\t});\n\t\t}\n\t}\n\tlimit.value = undefined;\n\tawait nextTick();\n\tawait control.value?.getData('');\n\tcontrol.value?.close();\n\tmethodResult.value = 'guard:done';\n}\nasync function unmountInput() {\n\tconst saved = control.value;\n\tmounted.value = false;\n\tawait nextTick();\n\tdetachedReferences.value = {\n\t\tcontrolPresent: !!control.value,\n\t\tinputReady: !!saved?.inputRef,\n\t\tpopperReady: !!saved?.popperRef\n\t};\n}\nconst snapshot = computed(() => ({\n\tmounted: mounted.value,\n\tdetachedReferences: detachedReferences.value,\n\tmodel: model.value,\n\tcalls: calls.value,\n\tselected: selected.value,\n\tpending: pendingCount.value,\n\tmethodResult: methodResult.value,\n\tguardErrors: guardErrors.value,\n\tindex: control.value?.highlightedIndex,\n\tloading: control.value?.loading,\n\tactivated: control.value?.activated,\n\tsuggestions: control.value?.suggestions,\n\tinputReady: !!control.value?.inputRef,\n\tpopperReady: !!control.value?.popperRef\n}));\nonBeforeUnmount(() => {\n\tcontrol.value?.cancel();\n\trelease();\n});\n\nconst limitControl = computed({\n\tget: () => limit.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\tlimit.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\nconst triggerControl = computed({\n\tget: () => trigger.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\ttrigger.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\nconst highlightFirstControl = computed({\n\tget: () => highlightFirst.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\thighlightFirst.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\nconst loopControl = computed({\n\tget: () => loop.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\tloop.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\nconst unmatchedControl = computed({\n\tget: () => unmatched.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\tunmatched.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\nconst hideLoadingControl = computed({\n\tget: () => hideLoading.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\thideLoading.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\nconst debounceControl = computed({\n\tget: () => debounce.value ?? '__asam_example_unconfigured__',\n\tset: (value) => {\n\t\tdebounce.value = value === '__asam_example_unconfigured__' ? undefined : value;\n\t}\n});\n\nfunction keepHeaderFocus(event) {\n\tif (event.target instanceof HTMLElement && event.target.closest('[role=button]'))\n\t\tevent.preventDefault();\n}\n</script>\n\n<style scoped>\n.query-instance-controls {\n\tposition: relative;\n}\n\n.query-instance-controls > div {\n\tposition: absolute;\n\tbottom: 100%;\n\tright: 0;\n\tz-index: 2;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, auto);\n\tgap: var(--asam-space-xs);\n\twidth: max-content;\n\tmax-width: 80vw;\n\tpadding: var(--asam-space-sm);\n\tbackground: var(--el-bg-color);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SelectContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/SelectContract.vue",
									"sha256": "b98debccbd8be7d51d8774bb2264c1fac246f65e5ff6c371e1977e068655b995",
									"source": "<template>\n\t<AsamCollapse data-testid=\"select-union-contract\"\n\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t<template #title><span>匹配建议与未匹配 Enter</span></template>\n\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t<div class=\"demo-slot-actions\">\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"runMatched\"\n\t\t\t\t\t\t>验证六种匹配来源</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"runUnmatched\"\n\t\t\t\t\t\t>验证实例未匹配 Enter</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"prepareKeyboard\"\n\t\t\t\t\t\t>准备实际键盘未匹配 Enter</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-if=\"mounted && mode !== 'remote'\"\n\t\t\t\t\t:key=\"mode\"\n\t\t\t\t\tref=\"control\"\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\t:value-key=\"mode === 'static' ? 'value' : 'caption'\"\n\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t...(mode === 'static' ? { options: [option] } : { fetchSuggestions }),\n\t\t\t\t\t\t...(policy === undefined ? {} : { selectWhenUnmatched: policy })\n\t\t\t\t\t}\"\n\t\t\t\t\t:debounce=\"0\"\n\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\taria-label=\"选择载荷契约\"\n\t\t\t\t\t@select=\"recordSelection\"\n\t\t\t\t>\n\t\t\t\t\t<template #default=\"{ item }\">\n\t\t\t\t\t\t<span>{{ 'raw' in item ? item.raw.id : item.code }}</span>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamAutocomplete>\n\t\t\t\t<AsamRemoteAutocomplete\n\t\t\t\t\tv-else-if=\"mounted\"\n\t\t\t\t\tref=\"control\"\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\t:source=\"remoteSource\"\n\t\t\t\t\t:debounce=\"0\"\n\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\taria-label=\"选择载荷契约\"\n\t\t\t\t\t@select=\"recordSelection\"\n\t\t\t\t\t@success=\"remoteOptions = $event\"\n\t\t\t\t/>\n\t\t\t\t<pre data-testid=\"select-union-result\">{{\n\t\t\t\t\tJSON.stringify({ busy, observations, selected })\n\t\t\t\t}}</pre>\n\t\t\t</div>\n\t\t</AsamCollapseItem></AsamCollapse\n\t>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, shallowRef, toRaw } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamButton,\n\tAsamAutocomplete,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst member = { id: 7, name: 'Alpha', value: 'alpha' };\nconst option = { label: 'Alpha', value: 'alpha', raw: member };\nconst native = { code: 7, caption: 'Alpha', value: 'alpha' };\nconst factory = defineAsamOptions();\nconst remoteSource = (query) =>\n\tfactory.api({\n\t\tapi: async () => [member],\n\t\tparams: { query },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst mode = ref('static');\nconst mounted = ref(false);\nconst busy = ref(false);\nconst model = ref('');\nconst policy = ref();\nconst control = shallowRef();\nconst selected = shallowRef([]);\nconst remoteOptions = shallowRef([]);\nconst observations = ref([]);\nconst fetchSuggestions = computed(() => {\n\tif (mode.value === 'array') return [native];\n\tif (mode.value === 'sync') return () => [native];\n\tif (mode.value === 'callback') return (_query, callback) => callback([native]);\n\tif (mode.value === 'promise') return async () => [native];\n\treturn [];\n});\nfunction recordSelection(item) {\n\tselected.value = [...selected.value, item];\n}\nasync function mount(next, value = '') {\n\tmounted.value = false;\n\tawait nextTick();\n\tmode.value = next;\n\tmodel.value = value;\n\tmounted.value = true;\n\tawait nextTick();\n}\nasync function runMatched() {\n\tbusy.value = true;\n\tobservations.value = [];\n\tfor (const next of ['static', 'array', 'sync', 'callback', 'promise', 'remote']) {\n\t\tawait mount(next);\n\t\tawait control.value?.getData('Alpha');\n\t\tconst suggestion = control.value?.suggestions[0];\n\t\tif (!suggestion) {\n\t\t\tobservations.value.push({ phase: next, missingSuggestion: true });\n\t\t\tcontinue;\n\t\t}\n\t\tawait control.value?.handleSelect(suggestion);\n\t\tconst item = selected.value.at(-1);\n\t\tobservations.value.push({\n\t\t\tphase: next,\n\t\t\tsameSuggestionObject: item === suggestion,\n\t\t\tsameOriginalObject:\n\t\t\t\titem &&\n\t\t\t\ttoRaw(item) ===\n\t\t\t\t\t(next === 'remote'\n\t\t\t\t\t\t? toRaw(remoteOptions.value[0])\n\t\t\t\t\t\t: next === 'static'\n\t\t\t\t\t\t\t? option\n\t\t\t\t\t\t\t: native),\n\t\t\tcompleteMatchedPayload:\n\t\t\t\titem &&\n\t\t\t\t('raw' in item\n\t\t\t\t\t? item.raw.id === 7 &&\n\t\t\t\t\t\titem.raw.name === 'Alpha' &&\n\t\t\t\t\t\titem.raw.value === 'alpha' &&\n\t\t\t\t\t\titem.label === 'Alpha' &&\n\t\t\t\t\t\ttoRaw(item.raw) ===\n\t\t\t\t\t\t\t(next === 'remote' ? toRaw(remoteOptions.value[0]?.raw) : member)\n\t\t\t\t\t: 'code' in item && item.code === 7 && item.caption === 'Alpha'),\n\t\t\tvalue: item?.value,\n\t\t\tsuggestionsStillComplete: control.value?.suggestions.every(\n\t\t\t\t(item) => 'raw' in item || 'code' in item\n\t\t\t)\n\t\t});\n\t}\n\tbusy.value = false;\n}\nasync function runUnmatched() {\n\tbusy.value = true;\n\tobservations.value = [];\n\tfor (const value of ['Unmatched', 42]) {\n\t\tfor (const nextPolicy of [undefined, false, true]) {\n\t\t\tpolicy.value = nextPolicy;\n\t\t\tawait mount('empty', value);\n\t\t\tawait control.value?.getData('missing');\n\t\t\tconst before = selected.value.length;\n\t\t\tawait control.value?.handleKeyEnter();\n\t\t\tobservations.value.push({\n\t\t\t\tphase: 'instance-unmatched',\n\t\t\t\tmodel: value,\n\t\t\t\tpolicy: nextPolicy ?? 'undefined',\n\t\t\t\tadded: selected.value.length - before,\n\t\t\t\titem: selected.value.length > before ? selected.value.at(-1) : null,\n\t\t\t\tsuggestionCount: control.value?.suggestions.length\n\t\t\t});\n\t\t}\n\t}\n\tbusy.value = false;\n}\nasync function prepareKeyboard() {\n\tpolicy.value = true;\n\tawait mount('empty', 'Keyboard unmatched');\n\tawait control.value?.getData('missing');\n\tcontrol.value?.focus();\n}\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								},
								{
									"name": "NativeInputContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/NativeInputContract.vue",
									"sha256": "31667a2459de19e7100c6036493685b3245a9485dcdc94a6b7b12beb82aff549",
									"source": "<template>\n\t<section data-testid=\"autocomplete-native-input-contract\">\n\t\t<form id=\"data009-input-owner\" @submit.prevent />\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mode = 'explicit'\"\n\t\t\t\t>设置完整输入属性</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mode = 'omitted'\"\n\t\t\t\t>恢复省略属性</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 42\"\n\t\t\t\t>写入数字模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 'seed'\"\n\t\t\t\t>写入字符串模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"remount\"\n\t\t\t\t>重新挂载输入</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mountNumber\"\n\t\t\t\t>全新挂载数字输入</AsamButton\n\t\t\t>\n\t\t\t<label for=\"data009-native-input-type\">输入类型</label>\n\t\t\t<AsamSelect id=\"data009-native-input-type\" v-model=\"type\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'password'\" :value=\"'password'\">password</AsamOption>\n\t\t\t\t<AsamOption :label=\"'number'\" :value=\"'number'\">number</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"readonly\">协议只读</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">协议禁用</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamRemoteAutocomplete\n\t\t\tv-if=\"mounted\"\n\t\t\tv-model=\"model\"\n\t\t\tv-bind=\"configuration\"\n\t\t\t:source=\"source\"\n\t\t\t:type=\"type\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:debounce=\"0\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\t:teleported=\"false\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t\t@update:model-value=\"updates.push($event)\"\n\t\t/>\n\t\t<pre data-testid=\"native-input-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tmode,\n\t\t\t\ttype,\n\t\t\t\treadonly,\n\t\t\t\tdisabled,\n\t\t\t\tmounted,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tqueries\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst configurations = {\n\texplicit: {\n\t\tid: 'data009-native-input',\n\t\tariaLabel: '原生输入契约',\n\t\ttabindex: 3,\n\t\tform: 'data009-input-owner',\n\t\tname: 'native-query',\n\t\tautocomplete: 'on',\n\t\tinputmode: 'search',\n\t\tplaceholder: 'Input contract',\n\t\tminlength: 2,\n\t\tmaxlength: 8,\n\t\tmin: 2,\n\t\tmax: 10,\n\t\tstep: 2,\n\t\tautofocus: true,\n\t\trows: 4,\n\t\tresize: 'none'\n\t},\n\tomitted: {}\n};\nconst mode = ref('explicit');\nconst type = ref('text');\nconst model = ref('seed');\nconst readonly = ref(false);\nconst disabled = ref(false);\nconst mounted = ref(true);\nconst inputs = ref([]);\nconst updates = ref([]);\nconst queries = ref([]);\nconst configuration = computed(() => configurations[mode.value]);\nconst factory = defineAsamOptions();\nconst api = async (query, context) => {\n\tcontext.signal.throwIfAborted();\n\tqueries.value.push(query.text);\n\treturn [{ id: 7, label: query.text, value: query.text }];\n};\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (items) => items,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\nasync function remount() {\n\tmounted.value = false;\n\tawait nextTick();\n\tmounted.value = true;\n}\nasync function mountNumber() {\n\tmounted.value = false;\n\tawait nextTick();\n\tmodel.value = 4;\n\ttype.value = 'number';\n\tmounted.value = true;\n}\n</script>\n"
								},
								{
									"name": "PopupContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/PopupContract.vue",
									"sha256": "da014fd8907be447f60325a93818ad157b7a8f596ff121d366ff6ac96ab7e42a",
									"source": "<template>\n\t<section data-testid=\"autocomplete-popup-case\">\n\t\t<label for=\"autocomplete-popup-scenario\">建议浮层配置</label>\n\t\t<AsamSelect id=\"autocomplete-popup-scenario\" v-model=\"scenario\">\n\t\t\t<AsamOption\n\t\t\t\tv-for=\"item in scenarios\"\n\t\t\t\t:key=\"item.value\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:label=\"item.label\"\n\t\t\t>\n\t\t\t\t{{ item.label }}\n\t\t\t</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open\">打开配置后的建议</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tv-if=\"scenario === 'role'\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"liveRole = 'group'\"\n\t\t>\n\t\t\t切换已挂载输入角色\n\t\t</AsamButton>\n\t\t<div id=\"autocomplete-popup-host\" ref=\"host\" data-testid=\"autocomplete-popup-host\" />\n\t\t<div class=\"popup-input-area\">\n\t\t\t<AsamRemoteAutocomplete\n\t\t\t\tv-if=\"mounted\"\n\t\t\t\t:key=\"generation\"\n\t\t\t\tref=\"control\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:source=\"source\"\n\t\t\t\t:debounce=\"0\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\taria-label=\"浮层协议成员\"\n\t\t\t>\n\t\t\t\t<template #header>\n\t\t\t\t\t<span data-testid=\"autocomplete-popup-header\">配置后的建议</span>\n\t\t\t\t</template>\n\t\t\t\t<template #default=\"{ item }\">\n\t\t\t\t\t<span>{{ item.label }} · {{ item.raw.id }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamRemoteAutocomplete>\n\t\t</div>\n\t\t<p class=\"example-paragraph\">当前配置：{{ scenario }}；模型：{{ value }}</p>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst scenarios = [\n\t{ value: 'default', label: '省略配置' },\n\t...['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].map((value) => ({\n\t\tvalue,\n\t\tlabel: value\n\t})),\n\t{ value: 'style-object', label: '自定义类与对象样式' },\n\t{ value: 'style-string', label: '字符串样式' },\n\t{ value: 'style-array', label: '组合样式' },\n\t{ value: 'local', label: '就地显示，忽略附加目标' },\n\t{ value: 'selector', label: '传送到指定选择器' },\n\t{ value: 'element', label: '传送到实际元素' },\n\t{ value: 'fit', label: '固定为输入宽度' },\n\t{ value: 'min', label: '输入宽度作为最小宽度' },\n\t{ value: 'role', label: '自定义输入角色' }\n];\nconst scenario = ref('default');\nconst liveRole = ref('searchbox');\nconst host = ref();\nconst value = ref('');\nconst mounted = ref(true);\nconst generation = ref(0);\nconst control = ref();\nconst member = {\n\tid: 7,\n\tvalue: 'alpha',\n\tname: 'Alpha member with a deliberately long suggestion label for popup width comparison'\n};\nconst factory = defineAsamOptions();\nconst source = (text) =>\n\tfactory.api({\n\t\tapi: async (_params, context) => {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\treturn [member];\n\t\t},\n\t\tparams: { text },\n\t\ttransform: (items) => items,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed(() => {\n\tif (\n\t\t['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].includes(\n\t\t\tscenario.value\n\t\t)\n\t)\n\t\treturn {\n\t\t\tplacement: scenario.value\n\t\t};\n\tif (scenario.value === 'style-object')\n\t\treturn {\n\t\t\tpopperClass: 'data009-popup-custom',\n\t\t\tpopperStyle: { backgroundColor: 'rgb(11, 22, 33)', borderWidth: '3px' }\n\t\t};\n\tif (scenario.value === 'style-string')\n\t\treturn { popperStyle: 'background-color: rgb(22, 33, 44); border-width: 4px;' };\n\tif (scenario.value === 'style-array')\n\t\treturn { popperStyle: [{ backgroundColor: 'rgb(33, 44, 55)' }, { borderWidth: '5px' }] };\n\tif (scenario.value === 'local')\n\t\treturn { teleported: false, appendTo: '#autocomplete-popup-host' };\n\tif (scenario.value === 'selector')\n\t\treturn { teleported: true, appendTo: '#autocomplete-popup-host' };\n\tif (scenario.value === 'element') return { teleported: true, appendTo: host.value };\n\tif (scenario.value === 'fit') return { fitInputWidth: true };\n\tif (scenario.value === 'min') return { fitInputWidth: false };\n\tif (scenario.value === 'role') return { containerRole: liveRole.value };\n\treturn {};\n});\nasync function open() {\n\tliveRole.value = 'searchbox';\n\tcontrol.value?.close();\n\tmounted.value = false;\n\tawait nextTick();\n\tvalue.value = '';\n\tgeneration.value++;\n\tmounted.value = true;\n\tawait nextTick();\n\tcontrol.value?.focus();\n\tawait control.value?.getData('');\n}\n</script>\n\n<style scoped>\n.popup-input-area {\n\twidth: 260px;\n\tmargin-block: 180px;\n\tmargin-inline: auto;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SourceLifecycleContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/SourceLifecycleContract.vue",
									"sha256": "dff5b92aee768f1896a9598d886761ebf87690b0f3ea8b2892db83cbecd62afa",
									"source": "<template>\n\t<section data-testid=\"autocomplete-source-lifecycle-case\">\n\t\t<label for=\"autocomplete-source-kind\">来源类型</label>\n\t\t<AsamSelect id=\"autocomplete-source-kind\" v-model=\"kind\">\n\t\t\t<AsamOption value=\"api\" :label=\"'API 参数与返回值'\">API 参数与返回值</AsamOption>\n\t\t\t<AsamOption value=\"request\" :label=\"'URL、参数与 provider'\"\n\t\t\t\t>URL、参数与 provider</AsamOption\n\t\t\t>\n\t\t</AsamSelect>\n\t\t<label for=\"autocomplete-source-active\">请求开关</label>\n\t\t<AsamSelect id=\"autocomplete-source-active\" v-model=\"activeMode\">\n\t\t\t<AsamOption value=\"omitted\" :label=\"'省略'\">省略</AsamOption>\n\t\t\t<AsamOption value=\"true\" :label=\"'启用'\">启用</AsamOption>\n\t\t\t<AsamOption value=\"false\" :label=\"'停用'\">停用</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"autocomplete-source-query\">请求查询</label>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamInput id=\"autocomplete-source-query\" v-model=\"draft\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"getData\">读取查询建议</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload()\">省略重载选项</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload(false)\">普通重载</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload(true)\"\n\t\t\t>强制重载来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消当前来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"selectFirst\"\n\t\t\t>选择完整首项</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"hold = true\"\n\t\t\t>持有后续响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"hold = false\"\n\t\t\t>即时后续响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failure = true\"\n\t\t\t>后续接口失败</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failure = false\"\n\t\t\t>恢复接口</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release(false)\"\n\t\t\t>完成最早持有响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release(true)\"\n\t\t\t>拒绝最早持有响应</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mountControl\"\n\t\t\t>重新挂载来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"detach\">卸载来源</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reloadDetached\"\n\t\t\t>读取卸载后的重载结果</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"savedControl?.cancel()\"\n\t\t\t>取消卸载后的来源</AsamButton\n\t\t>\n\t\t<div ref=\"host\" class=\"source-control-host\" />\n\t\t<pre data-testid=\"autocomplete-source-lifecycle-result\">{{\n\t\t\tJSON.stringify(snapshot, null, 2)\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamInput,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst kind = ref('api');\nconst activeMode = ref('omitted');\nconst active = computed(() =>\n\tactiveMode.value === 'omitted' ? undefined : activeMode.value === 'true'\n);\nconst draft = ref('Alpha');\nconst model = ref('retained-model');\nconst host = ref();\nconst control = shallowRef();\nconst calls = ref([]);\nconst results = ref([]);\nconst successes = ref([]);\nconst errors = ref([]);\nconst hold = ref(false);\nconst failure = ref(false);\nconst deferred = [];\nconst pendingCount = ref(0);\nconst mounted = ref(false);\nconst lastAction = ref('unloaded');\nlet app;\nlet savedControl;\nconst factory = defineAsamOptions();\nconst fields = { label: 'name', value: 'value' };\nconst cache = { ttlMs: 60000 };\nfunction members(text) {\n\treturn [{ id: 7, name: text, value: text.toLowerCase() }];\n}\nasync function load(call, context) {\n\tcontext.signal.throwIfAborted();\n\tcalls.value.push(call);\n\tconst recorded = calls.value.at(-1);\n\tcontext.signal.addEventListener(\n\t\t'abort',\n\t\t() => {\n\t\t\trecorded.aborted = true;\n\t\t},\n\t\t{ once: true }\n\t);\n\tif (hold.value)\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tdeferred.push({ resolve, reject, call: recorded });\n\t\t\tpendingCount.value = deferred.length;\n\t\t});\n\tif (failure.value) throw new Error('source lifecycle API failure');\n\treturn members(call.text);\n}\nconst api = (params, context) =>\n\tload({ kind: 'api', text: params.text, requestId: context.requestId, aborted: false }, context);\nconst transformApi = (items) => items;\nfunction isMember(value) {\n\treturn (\n\t\ttypeof value === 'object' &&\n\t\tvalue !== null &&\n\t\t'id' in value &&\n\t\ttypeof value.id === 'number' &&\n\t\t'name' in value &&\n\t\ttypeof value.name === 'string' &&\n\t\t'value' in value &&\n\t\ttypeof value.value === 'string'\n\t);\n}\nfunction transformRequest(response) {\n\tif (!Array.isArray(response) || !response.every(isMember))\n\t\tthrow new Error('invalid member response');\n\treturn response;\n}\nconst provider = {\n\trequest: async (config, context) => {\n\t\tconst text = config.params?.text;\n\t\tif (typeof text !== 'string')\n\t\t\tthrow new Error('query must reach the real request parameters');\n\t\treturn load(\n\t\t\t{\n\t\t\t\tkind: 'request',\n\t\t\t\ttext,\n\t\t\t\trequestId: context.requestId,\n\t\t\t\taborted: false,\n\t\t\t\turl: config.url,\n\t\t\t\t...(config.method === undefined ? {} : { method: config.method })\n\t\t\t},\n\t\t\tcontext\n\t\t);\n\t}\n};\nconst source = (text) =>\n\tkind.value === 'api'\n\t\t? factory.api({ api, params: { text }, transform: transformApi, fieldNames: fields, cache })\n\t\t: factory.request({\n\t\t\t\trequest: { url: '/data009/autocomplete-members', params: { text } },\n\t\t\t\ttransform: transformRequest,\n\t\t\t\tfieldNames: fields,\n\t\t\t\tcache\n\t\t\t});\nconst TypedRemote = AsamRemoteAutocomplete;\nconst snapshot = computed(() => ({\n\tkind: kind.value,\n\tactive: active.value ?? 'omitted',\n\tmounted: mounted.value,\n\tdetachedSuggestions: !mounted.value ? (savedControl?.suggestions ?? []) : undefined,\n\tdraft: draft.value,\n\tmodel: model.value,\n\tcalls: calls.value,\n\tpending: pendingCount.value,\n\tloading: control.value?.loading ?? false,\n\tsuggestions: control.value?.suggestions ?? [],\n\tlastAction: lastAction.value,\n\tresults: results.value,\n\tsuccesses: successes.value,\n\terrors: errors.value\n}));\nasync function mountControl() {\n\tdetach();\n\tawait nextTick();\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\tref: control,\n\t\t\t\tmodelValue: model.value,\n\t\t\t\tsource,\n\t\t\t\t...(active.value === undefined ? {} : { active: active.value }),\n\t\t\t\tdebounce: 0,\n\t\t\t\ttriggerOnFocus: false,\n\t\t\t\tariaLabel: '来源生命周期成员',\n\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t},\n\t\t\t\tonSuccess: (items) => {\n\t\t\t\t\tsuccesses.value.push(items);\n\t\t\t\t},\n\t\t\t\tonError: (error) => {\n\t\t\t\t\terrors.value.push(error);\n\t\t\t\t}\n\t\t\t})\n\t});\n\tprovideAsamData(app, provider, { scope: 'data009-autocomplete-source-lifecycle' });\n\tapp.mount(host.value);\n\tmounted.value = true;\n\tlastAction.value = 'mounted';\n}\nfunction detach() {\n\tif (control.value) savedControl = control.value;\n\tapp?.unmount();\n\tapp = undefined;\n\tcontrol.value = undefined;\n\tmounted.value = false;\n\tlastAction.value = 'unmounted';\n}\nasync function getData() {\n\tlastAction.value = 'query-pending';\n\tawait control.value?.getData(draft.value);\n\tlastAction.value = 'query-settled';\n}\nasync function reload(force) {\n\tlastAction.value = 'reload-pending';\n\tconst result = await control.value?.reload(force === undefined ? undefined : { force });\n\tresults.value.push(result ?? { status: 'detached' });\n\tlastAction.value = 'reload-settled';\n}\nasync function reloadDetached() {\n\tconst result = await savedControl?.reload({ force: true });\n\tresults.value.push(result ?? { status: 'missing-saved-control' });\n}\nasync function selectFirst() {\n\tconst item = control.value?.suggestions[0];\n\tif (item) await control.value?.handleSelect(item);\n}\nfunction release(reject) {\n\tconst next = deferred.shift();\n\tpendingCount.value = deferred.length;\n\tif (!next) return;\n\tif (reject) next.reject(new Error('held source lifecycle failure'));\n\telse next.resolve(members(next.call.text));\n}\nonMounted(mountControl);\nonBeforeUnmount(detach);\n</script>\n\n<style scoped>\n.source-control-host {\n\twidth: 300px;\n\tmargin-block: 24px;\n}\n</style>\n"
								},
								{
									"name": "PresentationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/PresentationContract.vue",
									"sha256": "8739b989cb12094b4dae365450a1346c215602abf66c811020c95b78a7e8997a",
									"source": "<template>\n\t<section data-testid=\"autocomplete-presentation-contract\">\n\t\t<div class=\"presentation-controls\">\n\t\t\t<label for=\"data009-presentation-size\">输入尺寸</label>\n\t\t\t<AsamSelect id=\"data009-presentation-size\" v-model=\"size\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-providerSize\">提供者尺寸</label>\n\t\t\t<AsamSelect id=\"data009-presentation-providerSize\" v-model=\"providerSize\">\n\t\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-clearable\">清除开关</label>\n\t\t\t<AsamSelect id=\"data009-presentation-clearable\" v-model=\"clearable\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-icons\">图标形式</label>\n\t\t\t<AsamSelect id=\"data009-presentation-icons\" v-model=\"icons\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'component'\" :value=\"'component'\">component</AsamOption>\n\t\t\t\t<AsamOption :label=\"'string'\" :value=\"'string'\">string</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-presentation-styleMode\">输入样式</label>\n\t\t\t<AsamSelect id=\"data009-presentation-styleMode\" v-model=\"styleMode\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'object'\" :value=\"'object'\">object</AsamOption>\n\t\t\t\t<AsamOption :label=\"'string'\" :value=\"'string'\">string</AsamOption>\n\t\t\t\t<AsamOption :label=\"'array'\" :value=\"'array'\">array</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"readonly\">外观只读</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">外观禁用</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 'Alpha'\"\n\t\t\t\t>恢复外观模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\">读取外观来源</AsamButton>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"presentation-host\" />\n\t\t<pre data-testid=\"autocomplete-presentation-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tclears,\n\t\t\t\trequests,\n\t\t\t\tsuggestions,\n\t\t\t\tsize,\n\t\t\t\tproviderSize,\n\t\t\t\tclearable,\n\t\t\t\ticons,\n\t\t\t\tstyleMode,\n\t\t\t\treadonly,\n\t\t\t\tdisabled\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamConfigProvider,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref();\nconst control = shallowRef();\nconst model = ref('Alpha');\nconst size = ref('omitted');\nconst providerSize = ref('big');\nconst clearable = ref('omitted');\nconst icons = ref('omitted');\nconst styleMode = ref('omitted');\nconst readonly = ref(false),\n\tdisabled = ref(false);\nconst inputs = ref([]),\n\tupdates = ref([]);\nconst clears = ref(0),\n\trequests = ref([]);\nconst suggestions = ref([]);\nconst icon = (name, path) => () =>\n\th('svg', { viewBox: '0 0 16 16', 'data-presentation-icon': name, 'aria-hidden': 'true' }, [\n\t\th('path', { d: path, fill: 'currentColor' })\n\t]);\nconst Prefix = icon('Data009Prefix', 'M2 2h6v6H2z');\nconst Suffix = icon('Data009Suffix', 'M8 8h6v6H8z');\nconst Clear = icon('Data009Clear', 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z');\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed(() => ({\n\tsource,\n\tmodelValue: model.value,\n\treadonly: readonly.value,\n\tdisabled: disabled.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议外观输入',\n\t...(size.value === 'omitted' ? {} : { size: size.value }),\n\t...(clearable.value === 'omitted' ? {} : { clearable: clearable.value === 'true' }),\n\t...(icons.value === 'omitted'\n\t\t? {}\n\t\t: {\n\t\t\t\tprefixIcon: icons.value === 'component' ? Prefix : 'Data009Prefix',\n\t\t\t\tsuffixIcon: icons.value === 'component' ? Suffix : 'Data009Suffix',\n\t\t\t\tclearIcon: icons.value === 'component' ? Clear : 'Data009Clear'\n\t\t\t}),\n\t...(styleMode.value === 'omitted'\n\t\t? {}\n\t\t: {\n\t\t\t\tinputStyle:\n\t\t\t\t\tstyleMode.value === 'object'\n\t\t\t\t\t\t? { color: '#064e3b', backgroundColor: '#f0fdf4', paddingLeft: '18px' }\n\t\t\t\t\t\t: styleMode.value === 'string'\n\t\t\t\t\t\t\t? 'color: rgb(120, 53, 15); letter-spacing: 2px;'\n\t\t\t\t\t\t\t: [{ color: '#1e3a8a' }, { fontWeight: '600', paddingRight: '22px' }]\n\t\t\t})\n}));\nconst TypedRemote = AsamRemoteAutocomplete;\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(AsamConfigProvider, { size: providerSize.value }, () =>\n\t\t\t\th(TypedRemote, {\n\t\t\t\t\t...configuration.value,\n\t\t\t\t\tref: control,\n\t\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\t\tmodel.value = value;\n\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t},\n\t\t\t\t\tonInput: (value) => inputs.value.push(value),\n\t\t\t\t\tonClear: () => clears.value++\n\t\t\t\t})\n\t\t\t)\n\t});\n\tapp.component('Data009Prefix', Prefix);\n\tapp.component('Data009Suffix', Suffix);\n\tapp.component('Data009Clear', Clear);\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.presentation-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.presentation-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "FormattingContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/FormattingContract.vue",
									"sha256": "cd8223bcfbc67e77303e1081ece1453733000f0c653e0a80c86d13175ff716b7",
									"source": "<template>\n\t<section data-testid=\"autocomplete-formatting-contract\">\n\t\t<div class=\"formatting-controls\">\n\t\t\t<label for=\"data009-format-mode\">格式协议</label>\n\t\t\t<AsamSelect id=\"data009-format-mode\" v-model=\"mode\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'formatter'\" :value=\"'formatter'\">formatter</AsamOption>\n\t\t\t\t<AsamOption :label=\"'pair'\" :value=\"'pair'\">pair</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-format-modifier\">模型修饰符</label>\n\t\t\t<AsamSelect id=\"data009-format-modifier\" v-model=\"modifier\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'empty'\" :value=\"'empty'\">empty</AsamOption>\n\t\t\t\t<AsamOption :label=\"'trim'\" :value=\"'trim'\">trim</AsamOption>\n\t\t\t\t<AsamOption :label=\"'number'\" :value=\"'number'\">number</AsamOption>\n\t\t\t\t<AsamOption :label=\"'trim-number'\" :value=\"'trim-number'\">trim-number</AsamOption>\n\t\t\t\t<AsamOption :label=\"'lazy'\" :value=\"'lazy'\">lazy</AsamOption>\n\t\t\t\t<AsamOption :label=\"'lazy-trim-number'\" :value=\"'lazy-trim-number'\"\n\t\t\t\t\t>lazy-trim-number</AsamOption\n\t\t\t\t>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('1234')\"\n\t\t\t\t>恢复格式数值</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset('Base')\"\n\t\t\t\t>恢复格式文本</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取格式模型来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"formatting-host\" />\n\t\t<pre data-testid=\"autocomplete-formatting-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tchanges,\n\t\t\t\trequests,\n\t\t\t\tsuggestions,\n\t\t\t\tmode,\n\t\t\t\tmodifier\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref();\nconst control = shallowRef();\nconst model = ref('1234');\nconst mode = ref('omitted');\nconst modifier = ref('omitted');\nconst inputs = ref([]),\n\tupdates = ref([]),\n\tchanges = ref([]),\n\trequests = ref([]);\nconst suggestions = ref([]);\nconst formatter = (value) => '¤' + String(value).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value) => value.replace(/[¤,]/g, '');\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst modifiers = computed(() => {\n\tif (modifier.value === 'omitted') return undefined;\n\treturn {\n\t\t...(modifier.value.includes('trim') ? { trim: true } : {}),\n\t\t...(modifier.value.includes('number') ? { number: true } : {}),\n\t\t...(modifier.value.includes('lazy') ? { lazy: true } : {})\n\t};\n});\nconst configuration = computed(() => ({\n\tsource,\n\tmodelValue: model.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议格式输入',\n\t...(mode.value === 'omitted' ? {} : { formatter }),\n\t...(mode.value === 'pair' ? { parser } : {}),\n\t...(modifier.value === 'omitted' ? {} : { modelModifiers: modifiers.value })\n}));\nconst TypedRemote = AsamRemoteAutocomplete;\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\t...configuration.value,\n\t\t\t\tref: control,\n\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t},\n\t\t\t\tonInput: (value) => inputs.value.push(value),\n\t\t\t\tonChange: (value) => changes.value.push(value)\n\t\t\t})\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-formatting' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nfunction reset(value) {\n\tmodel.value = value;\n\tinputs.value = [];\n\tupdates.value = [];\n\tchanges.value = [];\n}\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.formatting-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.formatting-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "TextCapabilityContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/TextCapabilityContract.vue",
									"sha256": "b016a5aa497ed2f2475f59425f6cf7729a6df55d3b57a38a65cf493af1b96185",
									"source": "<template>\n\t<section data-testid=\"autocomplete-text-capability-contract\">\n\t\t<div class=\"text-controls\">\n\t\t\t<label for=\"data009-text-kind\">计数输入类型</label>\n\t\t\t<AsamSelect id=\"data009-text-kind\" v-model=\"kind\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-limit\">显示字数</label>\n\t\t\t<AsamSelect id=\"data009-text-limit\" v-model=\"limit\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-position\">字数位置</label>\n\t\t\t<AsamSelect id=\"data009-text-position\" v-model=\"position\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'inside'\" :value=\"'inside'\">inside</AsamOption>\n\t\t\t\t<AsamOption :label=\"'outside'\" :value=\"'outside'\">outside</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-graphemes\">字素计数</label>\n\t\t\t<AsamSelect id=\"data009-text-graphemes\" v-model=\"graphemes\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'segmenter'\" :value=\"'segmenter'\">segmenter</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-autosize\">文本域自适应</label>\n\t\t\t<AsamSelect id=\"data009-text-autosize\" v-model=\"autosize\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'bounded'\" :value=\"'bounded'\">bounded</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-text-password\">密码显示开关</label>\n\t\t\t<AsamSelect id=\"data009-text-password\" v-model=\"password\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"readonly\">计数只读</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disabled\">计数禁用</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"model = 'AB'\"\n\t\t\t\t>恢复计数模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取计数模型来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"text-host\" />\n\t\t<pre data-testid=\"autocomplete-text-capability-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tchanges,\n\t\t\t\trequests,\n\t\t\t\tsuggestions,\n\t\t\t\tkind,\n\t\t\t\tlimit,\n\t\t\t\tposition,\n\t\t\t\tgraphemes,\n\t\t\t\tautosize,\n\t\t\t\tpassword,\n\t\t\t\treadonly,\n\t\t\t\tdisabled\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref();\nconst control = shallowRef();\nconst model = ref('AB');\nconst kind = ref('text');\nconst limit = ref('omitted');\nconst position = ref('omitted');\nconst graphemes = ref('omitted');\nconst autosize = ref('omitted');\nconst password = ref('omitted');\nconst readonly = ref(false),\n\tdisabled = ref(false);\nconst inputs = ref([]),\n\tupdates = ref([]),\n\tchanges = ref([]),\n\trequests = ref([]);\nconst suggestions = ref([]);\nconst segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\nconst countGraphemes = (value) => Array.from(segmenter.segment(value)).length;\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed(() => ({\n\tsource,\n\tmodelValue: model.value,\n\ttype: kind.value,\n\trows: 2,\n\tmaxlength: kind.value === 'text' ? 3 : undefined,\n\treadonly: readonly.value,\n\tdisabled: disabled.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议文本能力输入',\n\t...(limit.value === 'omitted' ? {} : { showWordLimit: limit.value === 'true' }),\n\t...(position.value === 'omitted' ? {} : { wordLimitPosition: position.value }),\n\t...(graphemes.value === 'omitted' ? {} : { countGraphemes }),\n\t...(password.value === 'omitted' ? {} : { showPassword: password.value === 'true' }),\n\t...(autosize.value === 'omitted'\n\t\t? {}\n\t\t: {\n\t\t\t\tautosize:\n\t\t\t\t\tautosize.value === 'bounded'\n\t\t\t\t\t\t? { minRows: 2, maxRows: 4 }\n\t\t\t\t\t\t: autosize.value === 'true'\n\t\t\t})\n}));\nconst TypedRemote = AsamRemoteAutocomplete;\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\t...configuration.value,\n\t\t\t\tref: control,\n\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t},\n\t\t\t\tonInput: (value) => inputs.value.push(value),\n\t\t\t\tonChange: (value) => changes.value.push(value)\n\t\t\t})\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-text-capabilities' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.text-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.text-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "ValidationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/ValidationContract.vue",
									"sha256": "016999caa28cec112aeb3790e0da869a2e9c6931cc8d375556ddb6e13f7920a3",
									"source": "<template>\n\t<section data-testid=\"autocomplete-validation-contract\">\n\t\t<div class=\"validation-controls\">\n\t\t\t<label for=\"data009-validation-mode\">建议验证事件</label>\n\t\t\t<AsamSelect id=\"data009-validation-mode\" v-model=\"mode\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-validation-lazy\">建议验证提交</label>\n\t\t\t<AsamSelect id=\"data009-validation-lazy\" v-model=\"lazy\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'lazy'\" :value=\"'lazy'\">lazy</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">恢复建议验证</AsamButton>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"validation-host\" />\n\t\t<pre data-testid=\"autocomplete-validation-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel: fields.value,\n\t\t\t\tmode,\n\t\t\t\tlazy,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tchanges,\n\t\t\t\tvalidations,\n\t\t\t\tvalidateEvents,\n\t\t\t\tvalidationState: item?.validateState,\n\t\t\t\tvalidationMessage: item?.validateMessage\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport {\n\tcomputed,\n\tcreateApp,\n\th,\n\tnextTick,\n\tonBeforeUnmount,\n\tonMounted,\n\treactive,\n\tref,\n\tshallowRef\n} from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref();\nconst item = shallowRef();\nconst fields = reactive({ value: 'Seed' });\nconst mode = ref('omitted');\nconst lazy = ref('omitted');\nconst inputs = ref([]),\n\tupdates = ref([]),\n\tchanges = ref([]),\n\tvalidations = ref([]);\nconst validateEvents = ref([]);\nconst rule = {\n\ttrigger: ['change', 'blur'],\n\tvalidator: (_rule, value, callback) => {\n\t\tvalidations.value.push(String(value));\n\t\tcallback(String(value).includes('!') ? new Error('建议值禁止感叹号') : undefined);\n\t}\n};\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed(() => ({\n\tsource,\n\tmodelValue: fields.value,\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tariaLabel: '建议验证输入',\n\t...(mode.value === 'omitted' ? {} : { validateEvent: mode.value === 'true' }),\n\t...(lazy.value === 'omitted' ? {} : { modelModifiers: { lazy: true } })\n}));\nconst TypedRemote = AsamRemoteAutocomplete;\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(\n\t\t\t\tAsamBaseForm,\n\t\t\t\t{\n\t\t\t\t\tmodel: fields,\n\t\t\t\t\tonValidate: (property, valid, message) =>\n\t\t\t\t\t\tvalidateEvents.value.push({ property, valid, message })\n\t\t\t\t},\n\t\t\t\t() =>\n\t\t\t\t\th(AsamFormItem, { prop: 'value', rules: rule, ref: item }, () =>\n\t\t\t\t\t\th(TypedRemote, {\n\t\t\t\t\t\t\t...configuration.value,\n\t\t\t\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\t\t\t\tfields.value = String(value);\n\t\t\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonInput: (value) => inputs.value.push(value),\n\t\t\t\t\t\t\tonChange: (value) => changes.value.push(value)\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t)\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-validation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function reset() {\n\tfields.value = 'Seed';\n\tawait nextTick();\n\tawait nextTick();\n\t// Finish the queued blur validation before starting this measurement window.\n\tawait new Promise((resolve) => setTimeout(resolve, 20));\n\tawait nextTick();\n\titem.value?.clearValidate();\n\tvalidations.value = [];\n\tvalidateEvents.value = [];\n\tinputs.value = [];\n\tupdates.value = [];\n\tchanges.value = [];\n}\n</script>\n\n<style scoped>\n.validation-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.validation-host {\n\tmargin-block: var(--asam-space-md);\n\twidth: 300px;\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "InputInstanceContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/InputInstanceContract.vue",
									"sha256": "ea2d1efb6381305624f931afbc829b7a92c3b0c00f71911ae279a151d9605a30",
									"source": "<template>\n\t<section data-testid=\"autocomplete-input-instance-contract\">\n\t\t<div class=\"instance-actions\">\n\t\t\t<label for=\"data009-instance-kind\">建议实例输入类型</label>\n\t\t\t<AsamSelect id=\"data009-instance-kind\" v-model=\"kind\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'password'\" :value=\"'password'\">password</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取建议输入实例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('focus')\"\n\t\t\t\t>实例输入聚焦</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('blur')\"\n\t\t\t\t>实例输入失焦</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('select')\"\n\t\t\t\t>实例选择文本</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('clear')\"\n\t\t\t\t>实例清除文本</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"operate('resizeTextarea')\"\n\t\t\t\t>实例调整文本域</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t>恢复输入实例记录</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"instance-host\" />\n\t\t<pre data-testid=\"autocomplete-input-instance-result\">{{\n\t\t\tJSON.stringify({ model, kind, events, inputs, updates, changes, clears, inspection })\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref();\nconst control = shallowRef();\nconst model = ref('Seed');\nconst kind = ref('text');\nconst inputs = ref([]),\n\tupdates = ref([]),\n\tchanges = ref([]),\n\tclears = ref(0);\nconst events = ref([]);\nconst inspection = ref({});\nconst nativeEvents = new WeakSet();\nconst names = [\n\t'focus',\n\t'blur',\n\t'keydown',\n\t'compositionstart',\n\t'compositionupdate',\n\t'compositionend',\n\t'mouseenter',\n\t'mouseleave'\n];\nconst capture = (event) => nativeEvents.add(event);\nfunction record(name, event) {\n\tevents.value.push({\n\t\tname,\n\t\ttype: event.type,\n\t\tconstructor: event.constructor.name,\n\t\tnativePayloadSame: nativeEvents.has(event),\n\t\t...(event instanceof KeyboardEvent ? { key: event.key } : {}),\n\t\t...(event instanceof CompositionEvent ? { data: event.data } : {})\n\t});\n}\nconst factory = defineAsamOptions();\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst transform = (members) => members;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst TypedRemote = AsamRemoteAutocomplete;\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tfor (const name of names) host.value.addEventListener(name, capture, true);\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(TypedRemote, {\n\t\t\t\tref: control,\n\t\t\t\tsource,\n\t\t\t\tmodelValue: model.value,\n\t\t\t\ttype: kind.value,\n\t\t\t\tariaLabel: '建议实例输入',\n\t\t\t\tdebounce: 0,\n\t\t\t\ttriggerOnFocus: false,\n\t\t\t\tteleported: false,\n\t\t\t\tshowPassword: kind.value === 'password',\n\t\t\t\trows: 2,\n\t\t\t\tautosize: { minRows: 2, maxRows: 4 },\n\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\tmodel.value = value;\n\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t},\n\t\t\t\tonInput: (value) => inputs.value.push(value),\n\t\t\t\tonChange: (value) => changes.value.push(value),\n\t\t\t\tonClear: () => clears.value++,\n\t\t\t\tonFocus: (event) => record('focus', event),\n\t\t\t\tonBlur: (event) => record('blur', event),\n\t\t\t\tonKeydown: (event) => record('keydown', event),\n\t\t\t\tonCompositionstart: (event) => record('compositionstart', event),\n\t\t\t\tonCompositionupdate: (event) => record('compositionupdate', event),\n\t\t\t\tonCompositionend: (event) => record('compositionend', event),\n\t\t\t\tonMouseenter: (event) => record('mouseenter', event),\n\t\t\t\tonMouseleave: (event) => record('mouseleave', event)\n\t\t\t})\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-input-instance' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => {\n\tapp?.unmount();\n\tfor (const name of names) host.value?.removeEventListener(name, capture, true);\n});\nfunction inspect() {\n\tconst instance = control.value?.inputRef;\n\tinspection.value = {\n\t\tready: !!instance,\n\t\tinputTag: instance?.input?.tagName ?? null,\n\t\ttextareaTag: instance?.textarea?.tagName ?? null,\n\t\trefTag: instance?.ref?.tagName ?? null,\n\t\trefMatchesInput: !!instance?.input && instance.ref === instance.input,\n\t\trefMatchesTextarea: !!instance?.textarea && instance.ref === instance.textarea,\n\t\tisComposing: instance?.isComposing,\n\t\tpasswordVisible: instance?.passwordVisible,\n\t\ttextareaStyle: instance?.textareaStyle,\n\t\trootInputMembersAbsent: [\n\t\t\t'input',\n\t\t\t'textarea',\n\t\t\t'ref',\n\t\t\t'select',\n\t\t\t'clear',\n\t\t\t'resizeTextarea',\n\t\t\t'isComposing',\n\t\t\t'passwordVisible',\n\t\t\t'textareaStyle'\n\t\t].every((name) => !(name in (control.value ?? {})))\n\t};\n}\nasync function operate(name) {\n\tcontrol.value?.inputRef?.[name]();\n\tawait nextTick();\n\tinspect();\n}\nasync function reset() {\n\tmodel.value = 'Seed';\n\tawait nextTick();\n\tawait new Promise((resolve) => setTimeout(resolve, 20));\n\tevents.value = [];\n\tinputs.value = [];\n\tupdates.value = [];\n\tchanges.value = [];\n\tclears.value = 0;\n\tinspect();\n}\n</script>\n\n<style scoped>\n.instance-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.instance-host {\n\twidth: 300px;\n\tmargin-block: var(--asam-space-md);\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "OfficialInputContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/OfficialInputContract.vue",
									"sha256": "fcf0c73593580753168bea8730278487afcb2ee01ddff8587f76c12939184338",
									"source": "<template>\n\t<section data-testid=\"autocomplete-official-input-contract\">\n\t\t<div class=\"official-controls\">\n\t\t\t<label for=\"data009-official-kind\">官方组合输入类型</label>\n\t\t\t<AsamSelect id=\"data009-official-kind\" v-model=\"kind\">\n\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t<AsamOption :label=\"'textarea'\" :value=\"'textarea'\">textarea</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-official-icon\">官方清除图标</label>\n\t\t\t<AsamSelect id=\"data009-official-icon\" v-model=\"icon\">\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'custom'\" :value=\"'custom'\">custom</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-official-position\">官方计数位置</label>\n\t\t\t<AsamSelect id=\"data009-official-position\" v-model=\"position\">\n\t\t\t\t<AsamOption :label=\"'inside'\" :value=\"'inside'\">inside</AsamOption>\n\t\t\t\t<AsamOption :label=\"'outside'\" :value=\"'outside'\">outside</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-official-count\">官方计数方式</label>\n\t\t\t<AsamSelect id=\"data009-official-count\" v-model=\"count\">\n\t\t\t\t<AsamOption :label=\"'native'\" :value=\"'native'\">native</AsamOption>\n\t\t\t\t<AsamOption :label=\"'codepoints'\" :value=\"'codepoints'\">codepoints</AsamOption>\n\t\t\t\t<AsamOption :label=\"'graphemes'\" :value=\"'graphemes'\">graphemes</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t>恢复官方组合模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取官方组合来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"official-host\" />\n\t\t<pre data-testid=\"autocomplete-official-input-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tkind,\n\t\t\t\ticon,\n\t\t\t\tposition,\n\t\t\t\tcount,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\tclears,\n\t\t\t\tsuggestions,\n\t\t\t\tpassword\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamPassword,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref();\nconst control = shallowRef();\nconst model = ref('AB'),\n\tpassword = ref('Secret');\nconst kind = ref('text'),\n\ticon = ref('default'),\n\tposition = ref('inside'),\n\tcount = ref('native');\nconst inputs = ref([]),\n\tupdates = ref([]),\n\tclears = ref(0);\nconst suggestions = ref([]);\nconst segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\nconst countCodepoints = (value) => Array.from(value).length;\nconst countGraphemes = (value) => Array.from(segmenter.segment(value)).length;\nconst Clear = () =>\n\th(\n\t\t'svg',\n\t\t{ viewBox: '0 0 16 16', 'data-official-clear-icon': 'custom', 'aria-hidden': 'true' },\n\t\t[\n\t\t\th('path', {\n\t\t\t\td: 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z',\n\t\t\t\tfill: 'currentColor'\n\t\t\t})\n\t\t]\n\t);\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions();\nconst transform = (members) => members;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst configuration = computed(() => ({\n\tsource,\n\tmodelValue: model.value,\n\ttype: kind.value,\n\tariaLabel: '官方组合建议输入',\n\trows: 2,\n\tmaxlength: 3,\n\tclearable: true,\n\tshowWordLimit: true,\n\twordLimitPosition: position.value,\n\t...(icon.value === 'custom' ? { clearIcon: Clear } : {}),\n\t...(count.value === 'native'\n\t\t? {}\n\t\t: { countGraphemes: count.value === 'codepoints' ? countCodepoints : countGraphemes }),\n\ttriggerOnFocus: false,\n\tdebounce: 0,\n\tteleported: false\n}));\nconst TypedRemote = AsamRemoteAutocomplete;\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th('div', [\n\t\t\t\th(TypedRemote, {\n\t\t\t\t\t...configuration.value,\n\t\t\t\t\tref: control,\n\t\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\t\tmodel.value = value;\n\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t},\n\t\t\t\t\tonInput: (value) => inputs.value.push(value),\n\t\t\t\t\tonClear: () => clears.value++\n\t\t\t\t}),\n\t\t\t\th('div', { 'data-testid': 'official-default-password' }, [\n\t\t\t\t\th(AsamPassword, {\n\t\t\t\t\t\tmodelValue: password.value,\n\t\t\t\t\t\tshowPassword: true,\n\t\t\t\t\t\tariaLabel: '官方默认密码输入',\n\t\t\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\t\t\tpassword.value = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t]),\n\t\t\t\th('div', { 'data-testid': 'official-base-password' }, [\n\t\t\t\t\th(\n\t\t\t\t\t\tAsamPassword,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tmodelValue: password.value,\n\t\t\t\t\t\t\tshowPassword: true,\n\t\t\t\t\t\t\tariaLabel: '官方密码图标输入',\n\t\t\t\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\t\t\t\tpassword.value = value;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'password-icon': ({ visible }) =>\n\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t'span',\n\t\t\t\t\t\t\t\t\t{ 'data-testid': 'official-password-icon' },\n\t\t\t\t\t\t\t\t\tvisible ? '公开' : '隐藏'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t)\n\t\t\t\t])\n\t\t\t])\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-official-input' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function reset() {\n\tmodel.value = 'AB';\n\tawait nextTick();\n\tinputs.value = [];\n\tupdates.value = [];\n\tclears.value = 0;\n\tsuggestions.value = [];\n}\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.official-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.official-host {\n\twidth: 300px;\n\tmargin-block: var(--asam-space-md);\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "OfficialLayoutContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/OfficialLayoutContract.vue",
									"sha256": "7a3255d4ba60ba4aea1fd5c1cb32f00c21f2dc2ab68ddd9ac26e05607151ccc7",
									"source": "<template>\n\t<section data-testid=\"autocomplete-official-layout-contract\">\n\t\t<div class=\"layout-controls\">\n\t\t\t<label for=\"data009-layout-size\">官方布局尺寸</label>\n\t\t\t<AsamSelect id=\"data009-layout-size\" v-model=\"size\">\n\t\t\t\t<AsamOption :label=\"'omitted'\" :value=\"'omitted'\">omitted</AsamOption>\n\t\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-layout-icon\">官方布局图标</label>\n\t\t\t<AsamSelect id=\"data009-layout-icon\" v-model=\"iconMode\">\n\t\t\t\t<AsamOption :label=\"'plain'\" :value=\"'plain'\">plain</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prefixIcon'\" :value=\"'prefixIcon'\">prefixIcon</AsamOption>\n\t\t\t\t<AsamOption :label=\"'suffixIcon'\" :value=\"'suffixIcon'\">suffixIcon</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prefixSlot'\" :value=\"'prefixSlot'\">prefixSlot</AsamOption>\n\t\t\t\t<AsamOption :label=\"'suffixSlot'\" :value=\"'suffixSlot'\">suffixSlot</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<label for=\"data009-layout-mixed\">官方附加内容</label>\n\t\t\t<AsamSelect id=\"data009-layout-mixed\" v-model=\"mixed\">\n\t\t\t\t<AsamOption :label=\"'none'\" :value=\"'none'\">none</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prependText'\" :value=\"'prependText'\">prependText</AsamOption>\n\t\t\t\t<AsamOption :label=\"'appendText'\" :value=\"'appendText'\">appendText</AsamOption>\n\t\t\t\t<AsamOption :label=\"'prependSelect'\" :value=\"'prependSelect'\"\n\t\t\t\t\t>prependSelect</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption :label=\"'appendSelect'\" :value=\"'appendSelect'\"\n\t\t\t\t\t>appendSelect</AsamOption\n\t\t\t\t>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"query\"\n\t\t\t\t>读取官方布局来源</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<div ref=\"host\" class=\"layout-host\" />\n\t\t<pre data-testid=\"autocomplete-official-layout-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodel,\n\t\t\t\tsize,\n\t\t\t\ticonMode,\n\t\t\t\tmixed,\n\t\t\t\tselected,\n\t\t\t\tchildChanges,\n\t\t\t\tclicks,\n\t\t\t\tinputs,\n\t\t\t\tupdates,\n\t\t\t\trequests,\n\t\t\t\tsuggestions\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { createApp, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamButton,\n\tAsamConfigProvider,\n\tAsamOption,\n\tAsamRemoteAutocomplete,\n\tAsamSelect,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst host = ref(),\n\tcontrol = shallowRef();\nconst model = ref('Alpha');\nconst size = ref('omitted');\nconst iconMode = ref('plain'),\n\tmixed = ref('none'),\n\tselected = ref('1');\nconst childChanges = ref([]),\n\tclicks = ref(0);\nconst inputs = ref([]),\n\tupdates = ref([]);\nconst requests = ref([]),\n\tsuggestions = ref([]);\nconst icon = () =>\n\th(\n\t\t'svg',\n\t\t{\n\t\t\tviewBox: '0 0 16 16',\n\t\t\t'data-official-layout-icon': iconMode.value,\n\t\t\t'aria-hidden': 'true'\n\t\t},\n\t\t[h('path', { d: 'M2 2h8v8H2zM10 10l4 4', fill: 'none', stroke: 'currentColor' })]\n\t);\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\trequests.value.push(params.text);\n\treturn [{ id: 7, name: params.text, value: params.text.toLowerCase() }];\n};\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\ttransform,\n\t\tparams: { text },\n\t\tfieldNames: { label: 'name', value: 'value' }\n\t});\nconst TypedRemote = AsamRemoteAutocomplete;\nconst options = [\n\t{ label: 'Restaurant', value: '1' },\n\t{ label: 'Order No.', value: '2' },\n\t{ label: 'Tel', value: '3' }\n];\nfunction selectChild() {\n\treturn h('div', { 'data-testid': 'official-layout-child-select' }, [\n\t\th(\n\t\t\tAsamSelect,\n\t\t\t{\n\t\t\t\tmodelValue: selected.value,\n\t\t\t\tvalueMode: 'native',\n\t\t\t\tplaceholder: '选择',\n\t\t\t\tstyle: { width: '115px' },\n\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\tif (typeof value === 'string') {\n\t\t\t\t\t\tselected.value = value;\n\t\t\t\t\t\tchildChanges.value.push(value);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t() =>\n\t\t\t\toptions.map((option) => h(AsamOption, { label: option.label, value: option.value }))\n\t\t)\n\t]);\n}\nfunction buttonChild() {\n\treturn h(AsamButton, { 'aria-label': '官方附加搜索', icon, onClick: () => clicks.value++ });\n}\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(AsamConfigProvider, { size: 'default' }, () =>\n\t\t\t\th(\n\t\t\t\t\tTypedRemote,\n\t\t\t\t\t{\n\t\t\t\t\t\tsource,\n\t\t\t\t\t\tkey: iconMode.value + ':' + mixed.value,\n\t\t\t\t\t\tmodelValue: model.value,\n\t\t\t\t\t\tariaLabel: '官方布局建议输入',\n\t\t\t\t\t\ttriggerOnFocus: false,\n\t\t\t\t\t\tdebounce: 0,\n\t\t\t\t\t\t...(size.value === 'omitted' ? {} : { size: size.value }),\n\t\t\t\t\t\t...(iconMode.value === 'prefixIcon' ? { prefixIcon: icon } : {}),\n\t\t\t\t\t\t...(iconMode.value === 'suffixIcon' ? { suffixIcon: icon } : {}),\n\t\t\t\t\t\tref: control,\n\t\t\t\t\t\t'onUpdate:modelValue': (value) => {\n\t\t\t\t\t\t\tmodel.value = value;\n\t\t\t\t\t\t\tupdates.value.push(value);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tonInput: (value) => inputs.value.push(value)\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t...(iconMode.value === 'prefixSlot' ? { prefix: icon } : {}),\n\t\t\t\t\t\t...(iconMode.value === 'suffixSlot' ? { suffix: icon } : {}),\n\t\t\t\t\t\t...(mixed.value === 'prependText' ? { prepend: () => 'Http://' } : {}),\n\t\t\t\t\t\t...(mixed.value === 'appendText' ? { append: () => '.com' } : {}),\n\t\t\t\t\t\t...(mixed.value === 'prependSelect'\n\t\t\t\t\t\t\t? { prepend: selectChild, append: buttonChild }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t...(mixed.value === 'appendSelect'\n\t\t\t\t\t\t\t? { prepend: buttonChild, append: selectChild }\n\t\t\t\t\t\t\t: {})\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t)\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-official-layout' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nasync function query() {\n\tawait control.value?.getData(String(model.value));\n\tsuggestions.value = control.value?.suggestions ?? [];\n}\n</script>\n\n<style scoped>\n.layout-controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n\talign-items: center;\n}\n\n.layout-host {\n\twidth: 600px;\n\tmax-width: 100%;\n\tmargin-block: var(--asam-space-md);\n}\n\npre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "OfficialSuggestionContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/native-data/js/OfficialSuggestionContract.vue",
									"sha256": "98ba1576e037105261d0ec9f6e3f5d000db614f89fdda3cf8300a0f94987b62a",
									"source": "<template>\n\t<section data-testid=\"autocomplete-official-suggestion-contract\">\n\t\t<p class=\"example-paragraph\">八个独立控件保留官方基础、模板、远程、加载及页眉页脚分支。</p>\n\t\t<div ref=\"host\" class=\"data009-official-suggestion-host\" />\n\t\t<pre data-testid=\"autocomplete-official-suggestion-result\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tmodels,\n\t\t\t\tloadingModel,\n\t\t\t\tqueries,\n\t\t\t\tselections,\n\t\t\t\ticonClicks,\n\t\t\t\tfooterClears,\n\t\t\t\tpending\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { createApp, h, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';\nimport {\n\tAsamButton,\n\tAsamIcon,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nconst names = [\n\t'basic-focus',\n\t'basic-input',\n\t'template',\n\t'remote',\n\t'loading-ring',\n\t'loading-dots',\n\t'header',\n\t'footer'\n];\nconst links = [\n\t{ value: 'vue', link: 'https://github.com/vuejs/vue' },\n\t{ value: 'element', link: 'https://github.com/ElemeFE/element' },\n\t{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },\n\t{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },\n\t{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },\n\t{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },\n\t{ value: 'babel', link: 'https://github.com/babel/babel' }\n];\nconst host = ref();\nconst models = ref({\n\t'basic-focus': '',\n\t'basic-input': '',\n\ttemplate: '',\n\tremote: '',\n\t'loading-ring': '',\n\t'loading-dots': '',\n\theader: '',\n\tfooter: ''\n});\nconst loadingModel = ref('');\nconst queries = ref([]);\nconst selections = ref([]);\nconst iconClicks = ref([]);\nconst footerClears = ref(0);\nconst pending = ref([]);\nconst footer = shallowRef();\nconst releases = new Map();\nconst factory = defineAsamOptions();\nconst TypedRemote = AsamRemoteAutocomplete;\nconst isLoadingCase = (name) => name === 'loading-ring' || name === 'loading-dots';\nconst model = (name) => (isLoadingCase(name) ? loadingModel.value : models.value[name]);\nconst setModel = (name, value) => {\n\tif (isLoadingCase(name)) loadingModel.value = value;\n\telse models.value[name] = value;\n};\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\tconst results = links.filter((item) =>\n\t\titem.value.toLowerCase().startsWith(params.query.toLowerCase())\n\t);\n\tqueries.value.push({ ...params, results });\n\tif (isLoadingCase(params.control)) {\n\t\tpending.value.push(params.control);\n\t\ttry {\n\t\t\tawait new Promise((resolve, reject) => {\n\t\t\t\tconst abort = () => reject(context.signal.reason);\n\t\t\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\t\t\treleases.set(params.control, () => {\n\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\tresolve();\n\t\t\t\t});\n\t\t\t});\n\t\t} finally {\n\t\t\tpending.value = pending.value.filter((name) => name !== params.control);\n\t\t\treleases.delete(params.control);\n\t\t}\n\t} else if (\n\t\tparams.control === 'remote' ||\n\t\tparams.control === 'header' ||\n\t\tparams.control === 'footer'\n\t) {\n\t\tawait new Promise((resolve) => setTimeout(resolve, 60));\n\t}\n\tcontext.signal.throwIfAborted();\n\treturn results;\n};\nconst source = (control, query) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { control, query },\n\t\ttransform: (rows) => rows,\n\t\tfieldNames: { label: 'value', value: 'value' }\n\t});\nconst cases = names.map((name) => ({ name, source: (query) => source(name, query) }));\nconst circle = () =>\n\th('svg', { class: 'circular', viewBox: '0 0 50 50', 'data-testid': 'official-ring-loader' }, [\n\t\th('circle', { class: 'path', cx: 25, cy: 25, r: 20, fill: 'none' })\n\t]);\nconst dots = () =>\n\th(\n\t\tAsamIcon,\n\t\t{ class: 'is-loading', 'data-testid': 'official-dots-loader' },\n\t\t{\n\t\t\tdefault: () =>\n\t\t\t\th('svg', { class: 'circular', viewBox: '0 0 20 20' }, [\n\t\t\t\t\th(\n\t\t\t\t\t\t'g',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tclass: 'path2 loading-path',\n\t\t\t\t\t\t\t'stroke-width': 0,\n\t\t\t\t\t\t\tstyle: { animation: 'none', stroke: 'none' }\n\t\t\t\t\t\t},\n\t\t\t\t\t\t['dot1', 'dot2', 'dot4', 'dot3'].map((name) =>\n\t\t\t\t\t\t\th('circle', { r: 3.375, class: name, rx: 0, ry: 0 })\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t])\n\t\t}\n\t);\nasync function clearFooter() {\n\tmodels.value.footer = '';\n\tfooterClears.value++;\n\tawait nextTick();\n\tawait footer.value?.getData('');\n}\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp({\n\t\trender: () =>\n\t\t\th(\n\t\t\t\t'div',\n\t\t\t\t{ class: 'suggestion-grid' },\n\t\t\t\tcases.map(({ name, source: caseSource }) =>\n\t\t\t\t\th('article', { 'data-testid': 'official-suggestion-' + name }, [\n\t\t\t\t\t\th('h3', name),\n\t\t\t\t\t\t...(isLoadingCase(name)\n\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\tAsamButton,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\t\t\t\t\t\tnativeType: 'button',\n\t\t\t\t\t\t\t\t\t\t\tonMousedown: (event) => event.preventDefault(),\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => releases.get(name)?.()\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t{ default: () => '完成官方加载 ' + name }\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t: []),\n\t\t\t\t\t\th(\n\t\t\t\t\t\t\tTypedRemote,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t...(name === 'footer' ? { ref: footer } : {}),\n\t\t\t\t\t\t\t\tmodelValue: model(name),\n\t\t\t\t\t\t\t\t'onUpdate:modelValue': (value) => setModel(name, value),\n\t\t\t\t\t\t\t\tsource: caseSource,\n\t\t\t\t\t\t\t\tariaLabel: '官方建议 ' + name,\n\t\t\t\t\t\t\t\tplaceholder:\n\t\t\t\t\t\t\t\t\tname === 'basic-focus' || name === 'basic-input'\n\t\t\t\t\t\t\t\t\t\t? '请输入内容'\n\t\t\t\t\t\t\t\t\t\t: '输入查询内容',\n\t\t\t\t\t\t\t\tclearable: name === 'basic-focus' || name === 'basic-input',\n\t\t\t\t\t\t\t\tteleported: false,\n\t\t\t\t\t\t\t\tdebounce: 0,\n\t\t\t\t\t\t\t\t...(name === 'basic-input' ? { triggerOnFocus: false } : {}),\n\t\t\t\t\t\t\t\t...(name === 'template'\n\t\t\t\t\t\t\t\t\t? { popperClass: 'data009-official-template-popper' }\n\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\tonSelect: (item) => selections.value.push({ control: name, item })\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t...(name === 'template'\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tsuffix: () =>\n\t\t\t\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\t\t\t\tAsamIcon,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass: 'el-input__icon',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'data-testid': 'official-template-suffix',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: (event) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticonClicks.value.push({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: event.type,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnativeMouse:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tevent instanceof MouseEvent\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdefault: () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\th('svg', { viewBox: '0 0 16 16' }, [\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\th('path', {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\td: 'M2 11l8-8 3 3-8 8H2z',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill: 'currentColor'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t])\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\tdefault: ({ item }) => [\n\t\t\t\t\t\t\t\t\t\t\t\th('div', { class: 'value' }, item.value),\n\t\t\t\t\t\t\t\t\t\t\t\th('span', { class: 'link' }, item.raw.link)\n\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t...(name === 'loading-ring' ? { loading: circle } : {}),\n\t\t\t\t\t\t\t\t...(name === 'loading-dots' ? { loading: dots } : {}),\n\t\t\t\t\t\t\t\t...(name === 'header'\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\theader: () =>\n\t\t\t\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'span',\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ 'data-testid': 'official-header-content' },\n\t\t\t\t\t\t\t\t\t\t\t\t\t'页眉内容'\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t...(name === 'footer'\n\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\tfooter: () =>\n\t\t\t\t\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t\t\t\t\tAsamButton,\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlink: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: clearFooter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'data-testid': 'official-footer-clear'\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ default: () => '清空' }\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t: {})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t)\n\t\t\t\t\t])\n\t\t\t\t)\n\t\t\t)\n\t});\n\tprovideAsamData(app, {}, { scope: 'data009-autocomplete-official-suggestions' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => {\n\tfor (const release of releases.values()) release();\n\tapp?.unmount();\n});\n</script>\n\n<style>\n.data009-official-suggestion-host {\n\tmargin-block: var(--asam-space-md);\n}\n\n[data-testid='autocomplete-official-suggestion-contract'] pre {\n\tmax-height: 24rem;\n\toverflow: auto;\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n\n.data009-official-suggestion-host .suggestion-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.data009-official-suggestion-host .circular {\n\tdisplay: inline;\n\theight: 30px;\n\twidth: 30px;\n\tanimation: data009-official-loading-rotate 2s linear infinite;\n}\n\n.data009-official-suggestion-host .path {\n\tanimation: data009-official-loading-dash 1.5s ease-in-out infinite;\n\tstroke-dasharray: 90, 150;\n\tstroke-dashoffset: 0;\n\tstroke-width: 2;\n\tstroke: var(--el-color-primary);\n\tstroke-linecap: round;\n}\n\n.data009-official-suggestion-host .loading-path .dot1 {\n\ttransform: translate(3.75px, 3.75px);\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n}\n\n.data009-official-suggestion-host .loading-path .dot2 {\n\ttransform: translate(calc(100% - 3.75px), 3.75px);\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n\tanimation-delay: 0.4s;\n}\n\n.data009-official-suggestion-host .loading-path .dot3 {\n\ttransform: translate(3.75px, calc(100% - 3.75px));\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n\tanimation-delay: 1.2s;\n}\n\n.data009-official-suggestion-host .loading-path .dot4 {\n\ttransform: translate(calc(100% - 3.75px), calc(100% - 3.75px));\n\tfill: var(--el-color-primary);\n\tanimation: data009-official-custom-spin-move 1s infinite linear alternate;\n\topacity: 0.3;\n\tanimation-delay: 0.8s;\n}\n\n@keyframes data009-official-loading-rotate {\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes data009-official-loading-dash {\n\t0% {\n\t\tstroke-dasharray: 1, 200;\n\t\tstroke-dashoffset: 0;\n\t}\n\n\t50% {\n\t\tstroke-dasharray: 90, 150;\n\t\tstroke-dashoffset: -40px;\n\t}\n\n\t100% {\n\t\tstroke-dasharray: 90, 150;\n\t\tstroke-dashoffset: -120px;\n\t}\n}\n\n@keyframes data009-official-custom-spin-move {\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n.data009-official-suggestion-host .data009-official-template-popper li {\n\tline-height: normal;\n\tpadding: 7px;\n}\n\n.data009-official-suggestion-host .data009-official-template-popper .value {\n\ttext-overflow: ellipsis;\n\toverflow: hidden;\n}\n\n.data009-official-suggestion-host .data009-official-template-popper .link {\n\tfont-size: 12px;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "lazy-query",
					"title": "模型修饰符与输入状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/lazy-query/ts/Demo.vue",
									"sha256": "789c0fc5b821c9111c37b8cc6dc66ca07345496e415dc420a5ed572eced28b2e",
									"source": "<template>\n\t<main class=\"demo-layout-1\">\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model.lazy=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce=\"0\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:teleported=\"false\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\tclearable\n\t\t\taria-label=\"延迟提交建议\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t\t@change=\"changes.push($event)\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">{{ item.label }} · {{ item.raw.id }}</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" data-testid=\"blur-target\"\n\t\t\t>移出输入</AsamButton\n\t\t>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<pre data-testid=\"lazy-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"lazy-calls\">{{ JSON.stringify(calls) }}</pre>\n\t\t<pre data-testid=\"lazy-events\">{{ JSON.stringify({ inputs, changes }) }}</pre>\n\t</main>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteAutocompleteLazyDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type { AsamApiRequest, AsamRemoteAutocompleteExpose } from '@asam-ui/ui';\ninterface Item {\n\tid: string;\n\tlabel: string;\n\tvalue: string;\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | number>('seed');\nconst control = ref<AsamRemoteAutocompleteExpose<string, Item>>();\nconst readonly = ref(false);\nconst disabled = ref(false);\nconst inputs = ref<(string | number)[]>([]);\nconst changes = ref<(string | number)[]>([]);\nconst calls = ref<string[]>([]);\nconst api: AsamApiRequest<Query, readonly Item[]> = async (query, context) => {\n\tcalls.value.push(query.text);\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: query.text, label: query.text, value: query.text }];\n};\nconst factory = defineAsamOptions<string, Item>();\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (rows) => rows,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/lazy-query/js/Demo.vue",
									"sha256": "8adfcaaa7a765aabc3a18ec17ab4a72d2e87ec4e92201042eac59b8ec5d78210",
									"source": "<template>\n\t<main class=\"demo-layout-1\">\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model.lazy=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce=\"0\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:teleported=\"false\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\tclearable\n\t\t\taria-label=\"延迟提交建议\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t\t@change=\"changes.push($event)\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">{{ item.label }} · {{ item.raw.id }}</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" data-testid=\"blur-target\"\n\t\t\t>移出输入</AsamButton\n\t\t>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<pre data-testid=\"lazy-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"lazy-calls\">{{ JSON.stringify(calls) }}</pre>\n\t\t<pre data-testid=\"lazy-events\">{{ JSON.stringify({ inputs, changes }) }}</pre>\n\t</main>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteAutocompleteLazyDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteAutocomplete,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst value = ref('seed');\nconst control = ref();\nconst readonly = ref(false);\nconst disabled = ref(false);\nconst inputs = ref([]);\nconst changes = ref([]);\nconst calls = ref([]);\nconst api = async (query, context) => {\n\tcalls.value.push(query.text);\n\tcontext.signal.throwIfAborted();\n\treturn [{ id: query.text, label: query.text, value: query.text }];\n};\nconst factory = defineAsamOptions();\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (rows) => rows,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/local-error/ts/Demo.vue",
									"sha256": "e1ced11c3e89e47f1a0a0a52034884220f03679ae8b9627e4fc5eeefdfc64530",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteAutocompleteDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteAutocomplete-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/local-error/ts/Child.vue",
									"sha256": "8b5a7920829798130d9452a81c3a19fece44c80612147929dd1f1638af05de02",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteAutocompleteChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteAutocomplete, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteAutocompleteExpose, AsamRemoteAutocompleteSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string>('');\nconst control = ref<AsamRemoteAutocompleteExpose<string, Item>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nconst source = () => dataSource;\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamRemoteAutocompleteSlots<string, Item>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/local-error/js/Demo.vue",
									"sha256": "bdace430f31ea5aa193d594a4f1be2e61ee937e366907dd6fb8c01913aae4a60",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteAutocompleteDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteAutocomplete-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/local-error/js/Child.vue",
									"sha256": "1271395c436c4b2f5bae0648f24f3077a9678c2f0fc6356c4d359874cad7ff1b",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteAutocomplete\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:trigger-on-focus=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteAutocomplete>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteAutocompleteChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteAutocomplete, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref('');\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nconst source = () => dataSource;\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteAutocomplete/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDataTable",
			"documentation": "/component-AsamDataTable.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地分页与跨页选择",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/basic/ts/Demo.vue",
									"sha256": "3c79780f8ba16c964c87edd4cb25a6579098e77f246606df2a498ef6214fab72",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"query\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:row-key=\"rowKey\"\n\t\t\t:page-size=\"2\"\n\t\t\t:page-sizes=\"[2, 5]\"\n\t\t\tselectable\n\t\t\tsize=\"default\"\n\t\t\t@selection-change=\"selection = $event\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"编号\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" />\n\t\t\t<template #toolbar=\"{ selection: selected, loading, stale }\">\n\t\t\t\t<span>已选 {{ selected.keys.length }} 项</span>\n\t\t\t\t<AsamButton\n\t\t\t\t\tnative-type=\"submit\"\n\t\t\t\t type=\"default\"\n\t\t\t\t\t:disabled=\"loading || stale\"\n\t\t\t\t\t@click=\"table?.clearSelection()\"\n\t\t\t\t\t>清空选择</AsamButton\n\t\t\t\t>\n\t\t\t</template>\n\t\t</AsamDataTable>\n\t\t<pre>{{ selection }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nimport type {\n\tAsamApiRequest,\n\tAsamPage,\n\tAsamPageRequest,\n\tAsamDataTableExpose,\n\tAsamTableSelection\n} from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDataTableBasicDemoExample' });\ninterface Row {\n\tid: number;\n\tname: string;\n}\ninterface Query {\n\ttext: string;\n}\ninterface Params extends Query {\n\tcurrentPage: number;\n\tpageSize: number;\n}\n\nconst query = { text: '' };\nconst table = ref<AsamDataTableExpose<Row>>();\nconst selection = ref<AsamTableSelection<Row>>({ keys: [], rows: [] });\nconst rows: Row[] = Array.from({ length: 6 }, (_, index) => ({\n\tid: index + 1,\n\tname: '记录 ' + (index + 1)\n}));\nconst rowKey = (row: Row) => row.id;\nconst buildPageParams = (input: Query, page: AsamPageRequest) => ({ ...input, ...page });\nconst api: AsamApiRequest<Params, AsamPage<Row>> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\tconst matched = rows.filter((row) => row.name.includes(params.text));\n\tconst start = (params.currentPage - 1) * params.pageSize;\n\treturn { list: matched.slice(start, start + params.pageSize), total: matched.length };\n};\nconst transform = (response: AsamPage<Row>) => response;\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/basic/js/Demo.vue",
									"sha256": "598aed2d4df7a14596d03176791c1f7563373e6d93e0da109a55cd4a1eb30313",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"query\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:row-key=\"rowKey\"\n\t\t\t:page-size=\"2\"\n\t\t\t:page-sizes=\"[2, 5]\"\n\t\t\tselectable\n\t\t\tsize=\"default\"\n\t\t\t@selection-change=\"selection = $event\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"编号\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" />\n\t\t\t<template #toolbar=\"{ selection: selected, loading, stale }\">\n\t\t\t\t<span>已选 {{ selected.keys.length }} 项</span>\n\t\t\t\t<AsamButton\n\t\t\t\t\tnative-type=\"submit\"\n\t\t\t\t type=\"default\"\n\t\t\t\t\t:disabled=\"loading || stale\"\n\t\t\t\t\t@click=\"table?.clearSelection()\"\n\t\t\t\t\t>清空选择</AsamButton\n\t\t\t\t>\n\t\t\t</template>\n\t\t</AsamDataTable>\n\t\t<pre>{{ selection }}</pre>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDataTableBasicDemoExample' });\n\nconst query = { text: '' };\nconst table = ref();\nconst selection = ref({ keys: [], rows: [] });\nconst rows = Array.from({ length: 6 }, (_, index) => ({\n\tid: index + 1,\n\tname: '记录 ' + (index + 1)\n}));\nconst rowKey = (row) => row.id;\nconst buildPageParams = (input, page) => ({ ...input, ...page });\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\tconst matched = rows.filter((row) => row.name.includes(params.text));\n\tconst start = (params.currentPage - 1) * params.pageSize;\n\treturn { list: matched.slice(start, start + params.pageSize), total: matched.length };\n};\nconst transform = (response) => response;\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "lifecycle",
					"title": "跨页选择、陈旧恢复与取消",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lifecycle/ts/Demo.vue",
									"sha256": "8c6e622e9464a9b127fb772ca9223d9ac3d428baf22a290687c673f83315f119",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCollapse data-testid=\"paged-state-contract-case\"\n\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t<template #title><span>完整分页状态与生命周期</span></template>\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"pagedStateContractBusy\"\n\t\t\t\t\t\t@click=\"runPagedStateContract\"\n\t\t\t\t\t>\n\t\t\t\t\t\t验证分页状态与生命周期\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<div ref=\"pagedStateInjectionTarget\" />\n\t\t\t\t\t<pre data-testid=\"paged-state-contract-result\">{{\n\t\t\t\t\t\tJSON.stringify(pagedStateContractResult)\n\t\t\t\t\t}}</pre>\n\t\t\t\t</div>\n\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t>\n\n\t\t<AsamCheckboxItem v-model=\"failure\">\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t模拟接口失败\n\t\t</AsamCheckboxItem>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdReload\"\n\t\t\t>开始持有分页请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"releaseHeld\"\n\t\t\t>完成持有分页请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\">取消慢请求</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearSelection()\"\n\t\t\t>清空全部选择</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.sort('id', 'descending')\"\n\t\t\t>按编号倒序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取跨页选择</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleFirst(true)\"\n\t\t\t>选择当前页首行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleFirst(false)\"\n\t\t\t>取消当前页首行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleFirst()\"\n\t\t\t>切换当前页首行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleLast()\"\n\t\t\t>选择当前页末行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.toggleAllSelection()\"\n\t\t\t>切换当前页全选</AsamButton\n\t\t>\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"query\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:row-key=\"rowKey\"\n\t\t\t:page-size=\"2\"\n\t\t\t:page-sizes=\"[2, 4]\"\n\t\t\t:pagination=\"{ layout: 'sizes, prev, pager, next, total' }\"\n\t\t\tselectable\n\t\t\tborder\n\t\t\tstripe\n\t\t\tsize=\"default\"\n\t\t\t@update:current-page=\"recordPage('update:currentPage', $event)\"\n\t\t\t@update:page-size=\"recordPage('update:pageSize', $event)\"\n\t\t\t@page-change=\"recordPage('page-change', $event)\"\n\t\t\t@page-size-change=\"recordPage('page-size-change', $event)\"\n\t\t\t@selection-change=\"recordSelection\"\n\t\t\t@success=\"recordSuccess\"\n\t\t\t@sort-change=\"sortEvents++\"\n\t\t\t@row-click=\"rowEvents.push($event.id)\"\n\t\t\t@error=\"recordError\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"编号\" sortable />\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"成员\">\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span :data-row-id=\"row.id\">{{ row.name }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<template #toolbar=\"{ loading, stale, selection: snapshot }\">\n\t\t\t\t<p class=\"example-paragraph\"\n\t\t\t\t\tdata-testid=\"table-toolbar\"\n\t\t\t\t\t:data-slot-loading=\"String(loading)\"\n\t\t\t\t\t:data-slot-stale=\"String(stale)\"\n\t\t\t\t\t:data-slot-keys=\"JSON.stringify(snapshot.keys)\"\n\t\t\t\t\t:data-slot-rows=\"JSON.stringify(snapshot.rows)\"\n\t\t\t\t>\n\t\t\t\t\t已选 {{ snapshot.keys.length }}；loading={{ loading }}；stale={{ stale }}\n\t\t\t\t</p>\n\t\t\t</template>\n\t\t\t<template #append><p class=\"example-paragraph\" data-testid=\"table-append\">成员只在本地生成</p></template>\n\t\t\t<template #empty><p class=\"example-paragraph\">当前没有成员</p></template>\n\t\t</AsamDataTable>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"table-selection\">{{ JSON.stringify(selection) }}</pre>\n\t\t<pre data-testid=\"table-observation\">{{ JSON.stringify(observation) }}</pre>\n\t\t<pre class=\"lifecycle-events\" data-testid=\"table-lifecycle-events\">{{\n\t\t\tJSON.stringify(events)\n\t\t}}</pre>\n\t\t<pre data-testid=\"table-events\">{{ JSON.stringify({ sortEvents, rowEvents }) }}</pre>\n\t\t<RowKeyContract />\n\t\t<NativeSlotsContract />\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport NativeSlotsContract from './NativeSlotsContract.vue';\nimport RowKeyContract from './RowKeyContract.vue';\ndefineOptions({ name: 'AsamDataTableLifecycleDemo' });\nimport { ref, computed, effectScope, createApp, defineComponent, h, nextTick } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamDataTable,\n\tAsamTableColumn,\n\tcreateAsamDataRuntime,\n\tuseAsamPagedData,\n\tprovideAsamData,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nimport type {\n\tAsamRecord,\n\tAsamRowKey,\n\tAsamPagedInput,\n\tAsamPagedConfig,\n\tAsamPagedState,\n\tAsamRequestContext,\n\tAsamApiRequest,\n\tAsamPage,\n\tAsamPageRequest,\n\tAsamDataTableExpose,\n\tAsamTableSelection,\n\tAsamDataError\n} from '@asam-ui/ui';\nimport type { EffectScope } from 'vue';\ninterface Row {\n\tid: number;\n\tname: string;\n}\ninterface Query {\n\ttext: string;\n}\ninterface Params extends Query, AsamPageRequest {}\nconst table = ref<AsamDataTableExpose<Row>>();\nconst query = { text: '' };\nconst failure = ref(false);\nconst slow = ref(false);\nconst held = ref(false);\nconst pendingReleases = new Set<() => void>();\nfunction holdReload() {\n\theld.value = true;\n\tvoid reload();\n}\nfunction releaseHeld() {\n\theld.value = false;\n\tfor (const finish of [...pendingReleases]) finish();\n}\nasync function waitHeld(signal: AbortSignal) {\n\tsignal.throwIfAborted();\n\tif (!held.value) return;\n\tawait new Promise<void>((done, reject) => {\n\t\tconst finish = () => {\n\t\t\tpendingReleases.delete(finish);\n\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\tdone();\n\t\t};\n\t\tconst abort = () => {\n\t\t\tpendingReleases.delete(finish);\n\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\treject(signal.reason);\n\t\t};\n\t\tpendingReleases.add(finish);\n\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\tif (signal.aborted) abort();\n\t});\n\tsignal.throwIfAborted();\n}\nconst result = ref('');\nconst error = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nfunction recordPage(\n\tname: 'update:currentPage' | 'update:pageSize' | 'page-change' | 'page-size-change',\n\tvalue: number\n) {\n\tevents.value.push({ name, payload: value });\n}\nfunction recordSelection(value: AsamTableSelection<Row>) {\n\tselection.value = value;\n\tevents.value.push({\n\t\tname: 'selection-change',\n\t\tpayload: { keys: [...value.keys], rows: value.rows.map((row) => ({ ...row })) }\n\t});\n}\nfunction recordSuccess(value: AsamPage<Row>) {\n\tpageRows.value = value.list;\n\tsuccesses.value++;\n\tevents.value.push({\n\t\tname: 'success',\n\t\tpayload: { list: value.list.map((row) => ({ ...row })), total: value.total }\n\t});\n}\nfunction recordError(value: AsamDataError) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nconst successes = ref(0);\nconst sortEvents = ref(0);\nconst rowEvents = ref<number[]>([]);\nconst pageRows = ref<readonly Row[]>([]);\nconst selection = ref<AsamTableSelection<Row>>({ keys: [], rows: [] });\nconst observation = ref<{ keys: readonly (string | number)[]; rows: readonly Row[] }>({\n\tkeys: [],\n\trows: []\n});\nconst rows: Row[] = Array.from({ length: 6 }, (_, index) => ({\n\tid: index + 1,\n\tname: '成员 ' + (index + 1)\n}));\nconst rowKey = (row: Row) => row.id;\nconst buildPageParams = (input: Query, page: AsamPageRequest) => ({ ...input, ...page });\nconst api: AsamApiRequest<Params, AsamPage<Row>> = async (params, context) => {\n\tawait waitHeld(context.signal);\n\tawait new Promise<void>((done) => setTimeout(done, slow.value ? 500 : 100));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示分页接口失败');\n\tconst matched = rows.filter((row) => row.name.includes(params.text));\n\tconst start = (params.currentPage - 1) * params.pageSize;\n\treturn { list: matched.slice(start, start + params.pageSize), total: matched.length };\n};\nconst transform = (page: AsamPage<Row>) => page;\nasync function reload() {\n\tconst response = await table.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n\tif (response?.status === 'success') error.value = '';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = table.value?.reload({ force: true });\n\tsetTimeout(() => table.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tconst snapshot = table.value?.getSelection();\n\tobservation.value = { keys: snapshot?.keys ?? [], rows: table.value?.getSelectionRows() ?? [] };\n}\nfunction toggleFirst(selected?: boolean) {\n\tconst first = pageRows.value[0];\n\tif (first) table.value?.toggleRowSelection(first, selected);\n}\nfunction toggleLast() {\n\tconst last = pageRows.value.at(-1);\n\tif (last) table.value?.toggleRowSelection(last, true);\n}\ntype PagedContractInput = AsamPagedInput<AsamRecord, AsamRecord, AsamPage<AsamRecord>, AsamRecord>;\nconst pagedStateContractResult = ref<{ phase: string; state: Record<string, unknown> }[]>([]);\nconst pagedStateContractBusy = ref(false);\nconst pagedStateInjectionTarget = ref<HTMLElement>();\nasync function runPagedStateContract() {\n\tpagedStateContractBusy.value = true;\n\tpagedStateContractResult.value = [];\n\tconst observations: { phase: string; state: Record<string, unknown> }[] = [],\n\t\tscopes: EffectScope[] = [];\n\tconst record = (phase: string, state: Record<string, unknown>) =>\n\t\tobservations.push({ phase, state });\n\tconst attach = (\n\t\tconfig: AsamPagedConfig<AsamRecord, AsamRecord, AsamPage<AsamRecord>, AsamRecord>\n\t) => {\n\t\tconst scope = effectScope();\n\t\tscopes.push(scope);\n\t\tconst state = scope.run(() => useAsamPagedData(config));\n\t\tif (!state) throw Error('Missing paged state');\n\t\treturn { state, scope };\n\t};\n\tconst snapshot = (state: AsamPagedState<AsamRecord>) => ({\n\t\tids: state.data.value.list.map((row) => row.id),\n\t\ttotal: state.data.value.total,\n\t\tloading: state.loading.value,\n\t\terror: state.error.value?.kind ?? null,\n\t\terrorMessage: state.error.value?.message ?? null,\n\t\tstale: state.stale.value,\n\t\thasSucceeded: state.hasSucceeded.value,\n\t\tempty: state.empty.value,\n\t\tcurrentPage: state.currentPage.value,\n\t\tpageSize: state.pageSize.value,\n\t\tdataKeySet: state.dataKey.value !== null,\n\t\trequestKeySet: state.requestKey.value !== null,\n\t\tkeysMatch: state.dataKey.value !== null && state.dataKey.value === state.requestKey.value,\n\t\tresolved:\n\t\t\tstate.resolvedPage.value === null\n\t\t\t\t? null\n\t\t\t\t: {\n\t\t\t\t\t\tcurrentPage: state.resolvedPage.value.currentPage,\n\t\t\t\t\t\tpageSize: state.resolvedPage.value.pageSize,\n\t\t\t\t\t\tqueryKeyNonempty: state.resolvedPage.value.queryKey.length > 0\n\t\t\t\t\t},\n\t\tselection: {\n\t\t\tkeys: state.selection.value.keys,\n\t\t\tids: state.selection.value.rows.map((row) => row.id)\n\t\t}\n\t});\n\tconst build = (query: AsamRecord, page: AsamPageRequest): AsamRecord => ({\n\t\t...query,\n\t\tp: page.currentPage,\n\t\ts: page.pageSize\n\t});\n\tconst gate = () => {\n\t\tlet release: (value: AsamPage<AsamRecord>) => void = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t},\n\t\t\treject: (cause: unknown) => void = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t};\n\t\tconst promise = new Promise<AsamPage<AsamRecord>>((done, fail) => {\n\t\t\trelease = done;\n\t\t\treject = fail;\n\t\t});\n\t\treturn { promise, release, reject };\n\t};\n\tconst settle = async (check: () => boolean) => {\n\t\tfor (let i = 0; i < 100 && !check(); i++) await Promise.resolve();\n\t\tif (!check()) throw Error('Paged state did not settle within microtasks');\n\t};\n\ttry {\n\t\tconst firstGate = gate(),\n\t\t\tnextGate = gate(),\n\t\t\tfailedGate = gate(),\n\t\t\temptyGate = gate(),\n\t\t\tjobs = [firstGate, nextGate, failedGate, emptyGate];\n\t\tlet calls = 0,\n\t\t\tsuccesses = 0,\n\t\t\tlocalErrors = 0,\n\t\t\tnotifications = 0,\n\t\t\tsuccessSame = false;\n\t\tconst pageEvents: number[] = [],\n\t\t\tsizeEvents: number[] = [],\n\t\t\tselectionEvents: (readonly AsamRowKey[])[] = [],\n\t\t\tparameters: AsamRecord[] = [],\n\t\t\tcontexts: Record<string, unknown>[] = [];\n\t\tconst runtime = createAsamDataRuntime({\n\t\t\t\tscope: 'paged-contract',\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\tnotifications++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\towner = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: (params, context) => {\n\t\t\t\t\t\tparameters.push(params);\n\t\t\t\t\t\tcontexts.push({\n\t\t\t\t\t\t\tscope: context.scope,\n\t\t\t\t\t\t\tepoch: context.epoch,\n\t\t\t\t\t\t\tsignalAborted: context.signal.aborted\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn jobs[calls++]!.promise;\n\t\t\t\t\t},\n\t\t\t\t\tquery: { term: 'initial' },\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: 2,\n\t\t\t\t\tpageSize: 2,\n\t\t\t\t\tdefaultSelectedRowKeys: [1, '1', 'future'],\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime,\n\t\t\t\tonSuccess: (data) => {\n\t\t\t\t\tsuccesses++;\n\t\t\t\t\tsuccessSame = data === owner.state.data.value;\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tlocalErrors++;\n\t\t\t\t},\n\t\t\t\tonPageChange: (page) => pageEvents.push(page),\n\t\t\t\tonPageSizeChange: (size) => sizeEvents.push(size),\n\t\t\t\tonSelectionChange: (selection) => selectionEvents.push(selection.keys)\n\t\t\t}),\n\t\t\tstate = owner.state;\n\t\trecord('paged-state-complete-public-members-initial-default-keys-and-pagination', {\n\t\t\tmembers: Object.keys(state),\n\t\t\tsnapshot: snapshot(state),\n\t\t\tcalls,\n\t\t\tselectionEvents: [...selectionEvents]\n\t\t});\n\t\tconst first = state.reload();\n\t\trecord('paged-state-held-api-build-params-and-original-context', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tcalls,\n\t\t\tparameters: [...parameters],\n\t\t\tcontexts: [...contexts]\n\t\t});\n\t\tconst host = {\n\t\t\tlist: [\n\t\t\t\t{ id: 1, name: 'Numeric', meta: { count: 1 } },\n\t\t\t\t{ id: '1', name: 'String', meta: { count: 1 } }\n\t\t\t],\n\t\t\ttotal: 6\n\t\t};\n\t\tfirstGate.release(host);\n\t\tconst firstResult = await first;\n\t\thost.list[0]!.meta.count = 9;\n\t\trecord('paged-state-success-resolved-page-frozen-host-snapshot-and-callback', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tstatus: firstResult.status,\n\t\t\tfromCache: firstResult.status === 'success' ? firstResult.fromCache : null,\n\t\t\tsuccesses,\n\t\t\tsuccessSame,\n\t\t\tfrozen:\n\t\t\t\tObject.isFrozen(state.data.value) &&\n\t\t\t\tObject.isFrozen(state.data.value.list) &&\n\t\t\t\tObject.isFrozen(state.data.value.list[0]) &&\n\t\t\t\tObject.isFrozen(state.data.value.list[0]?.meta),\n\t\t\thostCount: host.list[0]!.meta.count,\n\t\t\tsnapshotCount: Reflect.get(Object(state.data.value.list[0]!.meta), 'count'),\n\t\t\tselectionEvents: [...selectionEvents]\n\t\t});\n\t\tstate.clearSelection();\n\t\tstate.toggleRowSelection(state.data.value.list[0]!);\n\t\tstate.toggleRowSelection({ id: 'outsider' }, true);\n\t\tstate.toggleRowSelection(state.data.value.list[1]!, true);\n\t\tstate.selectPage([state.data.value.list[1]!]);\n\t\tconst selection = state.getSelection();\n\t\trecord('paged-state-selection-typed-keys-toggle-page-filter-and-frozen-snapshot', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tsamePublicSelection: selection === state.selection.value,\n\t\t\tfrozen:\n\t\t\t\tObject.isFrozen(selection) &&\n\t\t\t\tObject.isFrozen(selection.keys) &&\n\t\t\t\tObject.isFrozen(selection.rows),\n\t\t\tselectionEvents: [...selectionEvents]\n\t\t});\n\t\tstate.setCurrentPage(3);\n\t\tconst pageChanged = snapshot(state),\n\t\t\tnext = state.reload();\n\t\tnextGate.release({\n\t\t\tlist: [\n\t\t\t\t{ id: 3, name: 'Third' },\n\t\t\t\t{ id: 4, name: 'Fourth' }\n\t\t\t],\n\t\t\ttotal: 6\n\t\t});\n\t\tawait next;\n\t\tstate.toggleRowSelection(state.data.value.list[0]!, true);\n\t\tstate.selectPage([state.data.value.list[1]!]);\n\t\trecord('paged-state-page-navigation-retains-cross-page-rows-and-selected-keys', {\n\t\t\tbeforeReload: pageChanged,\n\t\t\tafter: snapshot(state),\n\t\t\tparameters: [...parameters],\n\t\t\tpageEvents: [...pageEvents],\n\t\t\tsizeEvents: [...sizeEvents]\n\t\t});\n\t\tconst original = Error('owned paged request failure'),\n\t\t\tfailed = state.reload();\n\t\tfailedGate.reject(original);\n\t\tconst failure = await failed;\n\t\tconst staleSelection = state.getSelection();\n\t\tstate.toggleRowSelection(state.data.value.list[0]!, true);\n\t\tstate.selectPage([]);\n\t\tconst prevented = state.getSelection() === staleSelection;\n\t\tstate.toggleRowSelection(state.data.value.list[1]!, false);\n\t\trecord('paged-state-error-retains-data-and-blocks-stale-selection-additions', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tstatus: failure.status,\n\t\t\toriginalCause: state.error.value?.cause === original,\n\t\t\tnotified: state.error.value?.notified,\n\t\t\tprevented,\n\t\t\tsuccesses,\n\t\t\tlocalErrors,\n\t\t\tnotifications\n\t\t});\n\t\tconst empty = state.reload({ force: true });\n\t\temptyGate.release({ list: [], total: 0 });\n\t\tawait empty;\n\t\tconst beforeClear = state.getSelection();\n\t\tstate.clearSelection();\n\t\tconst clearEvents = selectionEvents.length;\n\t\tstate.clearSelection();\n\t\trecord('paged-state-zero-total-resets-page-success-empty-and-idempotent-clear', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tretainedKeyBeforeClear: beforeClear.keys,\n\t\t\tclearEventsUnchanged: selectionEvents.length === clearEvents,\n\t\t\tsuccesses,\n\t\t\tlocalErrors,\n\t\t\tnotifications,\n\t\t\tpageEvents: [...pageEvents]\n\t\t});\n\t\towner.scope.stop();\n\t\trecord('paged-state-disposal-stops-reload-and-scope-reissue', {\n\t\t\tstatus: (await state.reload()).status,\n\t\t\tcalls\n\t\t});\n\t\tlet liveCalls = 0;\n\t\tconst liveApi = async (params: AsamRecord) => {\n\t\t\t\tliveCalls++;\n\t\t\t\treturn { list: [{ id: params.term, name: 'Live' }], total: 100 };\n\t\t\t},\n\t\t\tliveQuery = ref({ term: 'one' }),\n\t\t\tliveSource = computed<PagedContractInput>(() => ({\n\t\t\t\tapi: liveApi,\n\t\t\t\tquery: liveQuery.value,\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 2,\n\t\t\t\tpageSize: 2\n\t\t\t})),\n\t\t\tlive = attach({ source: liveSource, runtime: createAsamDataRuntime() }).state;\n\t\tawait settle(() => live.hasSucceeded.value);\n\t\tlive.toggleRowSelection(live.data.value.list[0]!, true);\n\t\tconst initialLive = snapshot(live);\n\t\tliveQuery.value.term = 'two';\n\t\tawait settle(() => live.data.value.list[0]?.id === 'two');\n\t\tconst changedLive = snapshot(live);\n\t\tconst beforeEcho = liveCalls;\n\t\trecord('paged-state-immediate-reactive-query-resets-page-and-clears-selection', {\n\t\t\tinitial: initialLive,\n\t\t\tchanged: changedLive,\n\t\t\tcalls: liveCalls,\n\t\t\tnoChangeObservation: liveCalls === beforeEcho\n\t\t});\n\t\tconst obsolete = gate(),\n\t\t\tlatest = gate();\n\t\tlet raceCalls = 0,\n\t\t\traceCallbacks = 0;\n\t\tconst raceQuery = ref({ term: 'old' }),\n\t\t\traceApi = (params: AsamRecord) => {\n\t\t\t\traceCalls++;\n\t\t\t\treturn params.term === 'old' ? obsolete.promise : latest.promise;\n\t\t\t},\n\t\t\trace = attach({\n\t\t\t\tsource: computed<PagedContractInput>(() => ({\n\t\t\t\t\tapi: raceApi,\n\t\t\t\t\tquery: raceQuery.value,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t})),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\traceCallbacks++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tconst oldPending = race.reload();\n\t\traceQuery.value.term = 'new';\n\t\tconst oldCancelled = await oldPending;\n\t\tawait Promise.resolve();\n\t\tconst newPending = race.reload();\n\t\tlatest.release({ list: [{ id: 'new' }], total: 1 });\n\t\tawait newPending;\n\t\tobsolete.release({ list: [{ id: 'old' }], total: 1 });\n\t\tawait settle(() => !race.loading.value);\n\t\trecord('paged-state-query-race-cancels-old-and-ignores-late-result', {\n\t\t\told: oldCancelled.status,\n\t\t\tcalls: raceCalls,\n\t\t\tcallbacks: raceCallbacks,\n\t\t\tsnapshot: snapshot(race)\n\t\t});\n\t\tlet sizeCalls = 0;\n\t\tconst sizeState = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => {\n\t\t\t\t\tsizeCalls++;\n\t\t\t\t\treturn { list: [{ id: 1 }], total: 100 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 3,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\tonPageChange: (page) => pageEvents.push(page),\n\t\t\tonPageSizeChange: (size) => sizeEvents.push(size)\n\t\t}).state;\n\t\tawait sizeState.reload();\n\t\tsizeState.setPageSize(4);\n\t\tconst sizedBefore = snapshot(sizeState);\n\t\tawait sizeState.reload();\n\t\tsizeState.setPageSize(4);\n\t\tsizeState.setCurrentPage(2);\n\t\tconst pagedBefore = snapshot(sizeState);\n\t\tawait sizeState.reload();\n\t\trecord('paged-state-size-reset-and-page-setters-prepare-manual-requests', {\n\t\t\tsizeBefore: sizedBefore,\n\t\t\tpageBefore: pagedBefore,\n\t\t\tfinal: snapshot(sizeState),\n\t\t\tcalls: sizeCalls,\n\t\t\tsizeEvents: [...sizeEvents],\n\t\t\tpageEvents: [...pageEvents]\n\t\t});\n\t\tconst correctionCalls: number[] = [];\n\t\tlet correctionSuccess = 0;\n\t\tconst correction = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async (params) => {\n\t\t\t\t\tcorrectionCalls.push(Number(params.p));\n\t\t\t\t\treturn { list: [], total: 3 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 9,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\tonSuccess: () => {\n\t\t\t\tcorrectionSuccess++;\n\t\t\t}\n\t\t}).state;\n\t\tconst corrected = await correction.reload();\n\t\trecord('paged-state-out-of-range-corrects-once-and-preserves-reload-promise', {\n\t\t\tstatus: corrected.status,\n\t\t\tcalls: correctionCalls,\n\t\t\tsuccesses: correctionSuccess,\n\t\t\tsnapshot: snapshot(correction)\n\t\t});\n\t\tconst repeatedCalls: number[] = [];\n\t\tconst repeated = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async (params) => {\n\t\t\t\t\trepeatedCalls.push(Number(params.p));\n\t\t\t\t\treturn { list: [], total: repeatedCalls.length === 1 ? 3 : 1 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 9,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime()\n\t\t}).state;\n\t\tconst uncorrectable = await repeated.reload();\n\t\trecord('paged-state-repeated-out-of-range-is-response-error-after-one-correction', {\n\t\t\tstatus: uncorrectable.status,\n\t\t\tcalls: repeatedCalls,\n\t\t\tsnapshot: snapshot(repeated)\n\t\t});\n\t\tconst requests: Record<string, unknown>[] = [],\n\t\t\turlRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tpagination: { page: 'p', pageSize: 's' },\n\t\t\t\t\trequest: async (request, context) => {\n\t\t\t\t\t\trequests.push({\n\t\t\t\t\t\t\trequest,\n\t\t\t\t\t\t\tcontext: {\n\t\t\t\t\t\t\t\tscope: context.scope,\n\t\t\t\t\t\t\t\tepoch: context.epoch,\n\t\t\t\t\t\t\t\tsignalAborted: context.signal.aborted\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn { list: [{ id: 1 }], total: 20 };\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\tconst urlDefault = attach({\n\t\t\tsource: {\n\t\t\t\trequest: { url: '/page-default', params: { host: 'base' } },\n\t\t\t\tquery: { term: 'filter' },\n\t\t\t\tcurrentPage: 2,\n\t\t\t\tpageSize: 4,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: urlRuntime\n\t\t}).state;\n\t\tawait urlDefault.reload();\n\t\tconst urlData = attach({\n\t\t\tsource: {\n\t\t\t\trequest: {\n\t\t\t\t\turl: '/page-data',\n\t\t\t\t\tmethod: 'post',\n\t\t\t\t\tdata: { host: 'body' },\n\t\t\t\t\tparams: { untouched: true }\n\t\t\t\t},\n\t\t\t\tquery: { term: 'body-query' },\n\t\t\t\tpageTarget: 'data',\n\t\t\t\tcurrentPage: 3,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: urlRuntime\n\t\t}).state;\n\t\tawait urlData.reload();\n\t\tlet customBuildCalls = 0;\n\t\tconst urlCustom = attach({\n\t\t\tsource: {\n\t\t\t\trequest: { url: '/unused-base' },\n\t\t\t\tquery: { term: 'custom' },\n\t\t\t\tbuildPageRequest: (query, page) => {\n\t\t\t\t\tcustomBuildCalls++;\n\t\t\t\t\treturn {\n\t\t\t\t\t\turl: '/custom-built',\n\t\t\t\t\t\tmethod: 'put',\n\t\t\t\t\t\tdata: { term: query.term, page: page.currentPage, size: page.pageSize }\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t\tcurrentPage: 2,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: urlRuntime\n\t\t}).state;\n\t\tawait urlCustom.reload();\n\t\trecord('paged-state-url-default-target-data-and-custom-builder', {\n\t\t\trequests,\n\t\t\tcustomBuildCalls,\n\t\t\tstates: [snapshot(urlDefault), snapshot(urlData), snapshot(urlCustom)]\n\t\t});\n\t\tlet adapterCalls = 0,\n\t\t\ttransformCalls = 0;\n\t\tconst adaptedRuntime = createAsamDataRuntime({\n\t\t\tprovider: {\n\t\t\t\tadaptPage: () => {\n\t\t\t\t\tadapterCalls++;\n\t\t\t\t\treturn { list: [{ id: 'adapter' }], total: 1 };\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst transformed = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\t\tbuildPageParams: build,\n\t\t\t\ttransform: () => {\n\t\t\t\t\ttransformCalls++;\n\t\t\t\t\treturn { list: [{ id: 'transform' }], total: 1 };\n\t\t\t\t},\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: adaptedRuntime\n\t\t}).state;\n\t\tawait transformed.reload();\n\t\tconst adapted = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\t\tbuildPageParams: build,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: adaptedRuntime\n\t\t}).state;\n\t\tawait adapted.reload();\n\t\trecord('paged-state-transform-precedes-provider-adapter-and-default-response', {\n\t\t\ttransform: snapshot(transformed),\n\t\t\tadapter: snapshot(adapted),\n\t\t\ttransformCalls,\n\t\t\tadapterCalls\n\t\t});\n\t\tlet sharedCalls = 0;\n\t\tconst sharedApi = async () => {\n\t\t\t\tsharedCalls++;\n\t\t\t\treturn { list: [{ id: sharedCalls }], total: 1 };\n\t\t\t},\n\t\t\tsharedInput: PagedContractInput = {\n\t\t\t\tapi: sharedApi,\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\tsharedRuntime = createAsamDataRuntime(),\n\t\t\tsharedA = attach({ source: sharedInput, runtime: sharedRuntime }).state,\n\t\t\tsharedB = attach({ source: sharedInput, runtime: sharedRuntime }).state;\n\t\tawait Promise.all([sharedA.reload(), sharedB.reload()]);\n\t\tconst cached = await sharedA.reload();\n\t\tawait Promise.all([sharedA.reload({ force: true }), sharedB.reload({ force: true })]);\n\t\trecord('paged-state-shared-cache-flight-hit-and-deduplicated-force', {\n\t\t\tcalls: sharedCalls,\n\t\t\tcached: cached.status === 'success' ? cached.fromCache : null,\n\t\t\tsameSnapshot: sharedA.data.value === sharedB.data.value,\n\t\t\ta: snapshot(sharedA),\n\t\t\tb: snapshot(sharedB)\n\t\t});\n\t\tconst cancelGate = gate();\n\t\tlet cancelSuccess = 0;\n\t\tconst cancelOwner = attach({\n\t\t\t\tsource: { api: () => cancelGate.promise, buildPageParams: build, immediate: false },\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tcancelSuccess++;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tcancelJob = cancelOwner.state.reload();\n\t\tcancelOwner.state.cancel();\n\t\tconst cancelled = await cancelJob;\n\t\tcancelGate.release({ list: [{ id: 9 }], total: 1 });\n\t\tawait settle(() => !cancelOwner.state.loading.value);\n\t\trecord('paged-state-explicit-cancel-settles-job-and-keeps-late-success-out', {\n\t\t\tstatus: cancelled.status,\n\t\t\tsuccesses: cancelSuccess,\n\t\t\tsnapshot: snapshot(cancelOwner.state)\n\t\t});\n\t\tconst disposedGate = gate(),\n\t\t\tdisposedOwner = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: () => disposedGate.promise,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}),\n\t\t\tdisposedJob = disposedOwner.state.reload();\n\t\tdisposedOwner.scope.stop();\n\t\tconst disposedResult = await disposedJob;\n\t\tdisposedGate.release({ list: [{ id: 9 }], total: 1 });\n\t\tawait settle(() => !disposedOwner.state.loading.value);\n\t\trecord('paged-state-dispose-held-job-and-block-followup-reload', {\n\t\t\tstatus: disposedResult.status,\n\t\t\treloadAfterDispose: (await disposedOwner.state.reload()).status,\n\t\t\tsnapshot: snapshot(disposedOwner.state)\n\t\t});\n\t\tconst invalidRows: Record<string, unknown>[] = [];\n\t\tfor (const [name, rows] of [\n\t\t\t['missing-id', [{ name: 'Missing' }]],\n\t\t\t['numeric-string-id', [{ id: '1' }, { id: 1 }]],\n\t\t\t['duplicate-id', [{ id: 1 }, { id: 1 }]],\n\t\t\t['infinite-id', [{ id: Infinity }]],\n\t\t\t['boolean-id', [{ id: true }]],\n\t\t\t['inherited-id', [Object.create({ id: 1 })]]\n\t\t] as const) {\n\t\t\tconst checked = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: async () => ({ list: rows, total: rows.length }),\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\t\tconst result = await checked.reload();\n\t\t\tinvalidRows.push({ name, status: result.status, snapshot: snapshot(checked) });\n\t\t}\n\t\trecord('paged-state-own-finite-typed-row-keys-and-duplicate-validation', {\n\t\t\tcases: invalidRows\n\t\t});\n\t\tconst invalidConfig: Record<string, unknown>[] = [];\n\t\tconst baseInput = {\n\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\tbuildPageParams: build,\n\t\t\timmediate: false\n\t\t};\n\t\tfor (const [name, extra] of [\n\t\t\t['no-source', { api: undefined }],\n\t\t\t['both-sources', { request: { url: '/x' } }],\n\t\t\t['legacy-data', { data: [] }],\n\t\t\t['api-no-builder', { buildPageParams: undefined }],\n\t\t\t['api-url-builder', { buildPageRequest: () => ({ url: '/x' }) }],\n\t\t\t['api-page-target', { pageTarget: 'params' }],\n\t\t\t['page-zero', { currentPage: 0 }],\n\t\t\t['size-fraction', { pageSize: 1.5 }],\n\t\t\t['row-key-invalid', { rowKey: 1 }],\n\t\t\t['cache-zero', { cache: { ttlMs: 0 } }],\n\t\t\t['cache-key-nonfunction', { cache: { ttlMs: 1, key: 1 } }],\n\t\t\t['empty-query-key', { queryKey: () => '' }],\n\t\t\t['builder-async', { buildPageParams: async () => ({}) }],\n\t\t\t['unknown-default-key', { defaultSelectedRowKeys: [true] }]\n\t\t] as const) {\n\t\t\tconst invalid = Reflect.apply(attach, undefined, [\n\t\t\t\t{ source: { ...baseInput, ...extra }, runtime: createAsamDataRuntime() }\n\t\t\t]).state;\n\t\t\tinvalidConfig.push({\n\t\t\t\tname,\n\t\t\t\tstatus: (await invalid.reload()).status,\n\t\t\t\tsnapshot: snapshot(invalid)\n\t\t\t});\n\t\t}\n\t\trecord('paged-state-api-config-pagination-builder-cache-query-selection-guards', {\n\t\t\tcases: invalidConfig\n\t\t});\n\t\tconst urlInvalid: Record<string, unknown>[] = [];\n\t\tfor (const [name, input] of [\n\t\t\t['missing-provider', { request: { url: '/x' } }],\n\t\t\t['get-data-target', { request: { url: '/x' }, pageTarget: 'data' }],\n\t\t\t['bad-target', { request: { url: '/x', method: 'post' }, pageTarget: 'body' }],\n\t\t\t['query-collision', { request: { url: '/x', params: { q: 1 } }, query: { q: 2 } }],\n\t\t\t['pagination-collision', { request: { url: '/x', params: { page: 1 } } }],\n\t\t\t['array-query', { request: { url: '/x' }, query: [] }],\n\t\t\t[\n\t\t\t\t'array-target',\n\t\t\t\t{ request: { url: '/x', method: 'post', data: [] }, pageTarget: 'data' }\n\t\t\t],\n\t\t\t['url-api-builder', { request: { url: '/x' }, buildPageParams: build }],\n\t\t\t[\n\t\t\t\t'custom-plus-target',\n\t\t\t\t{\n\t\t\t\t\trequest: { url: '/x' },\n\t\t\t\t\tbuildPageRequest: () => ({ url: '/custom' }),\n\t\t\t\t\tpageTarget: 'params'\n\t\t\t\t}\n\t\t\t],\n\t\t\t[\n\t\t\t\t'custom-async',\n\t\t\t\t{ request: { url: '/x' }, buildPageRequest: async () => ({ url: '/custom' }) }\n\t\t\t],\n\t\t\t[\n\t\t\t\t'custom-invalid-url',\n\t\t\t\t{ request: { url: '/x' }, buildPageRequest: () => ({ url: '' }) }\n\t\t\t]\n\t\t] as const) {\n\t\t\tconst invalid = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: { ...input, immediate: false },\n\t\t\t\t\truntime: createAsamDataRuntime({\n\t\t\t\t\t\tprovider:\n\t\t\t\t\t\t\tname === 'missing-provider'\n\t\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t\t: { request: async () => ({ list: [], total: 0 }) }\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t]).state;\n\t\t\turlInvalid.push({\n\t\t\t\tname,\n\t\t\t\tstatus: (await invalid.reload()).status,\n\t\t\t\tsnapshot: snapshot(invalid)\n\t\t\t});\n\t\t}\n\t\trecord('paged-state-url-provider-target-collision-plain-input-and-custom-builder-guards', {\n\t\t\tcases: urlInvalid\n\t\t});\n\t\tconst stages: Record<string, unknown>[] = [];\n\t\tfor (const [name, api, transform] of [\n\t\t\t[\n\t\t\t\t'transport-throw',\n\t\t\t\t() => {\n\t\t\t\t\tthrow Error('page transport throw');\n\t\t\t\t},\n\t\t\t\tundefined\n\t\t\t],\n\t\t\t['transport-reject', () => Promise.reject(Error('page transport reject')), undefined],\n\t\t\t['transport-not-promise', () => ({ list: [], total: 0 }), undefined],\n\t\t\t['bad-response', async () => ({ data: [] }), undefined],\n\t\t\t[\n\t\t\t\t'transform-throw',\n\t\t\t\tasync () => ({ list: [], total: 0 }),\n\t\t\t\t() => {\n\t\t\t\t\tthrow Error('page transform throw');\n\t\t\t\t}\n\t\t\t],\n\t\t\t[\n\t\t\t\t'transform-async',\n\t\t\t\tasync () => ({ list: [], total: 0 }),\n\t\t\t\tasync () => ({ list: [], total: 0 })\n\t\t\t]\n\t\t] as const) {\n\t\t\tconst checked = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: { api, buildPageParams: build, transform, immediate: false },\n\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t}\n\t\t\t]).state;\n\t\t\tstages.push({\n\t\t\t\tname,\n\t\t\t\tstatus: (await checked.reload()).status,\n\t\t\t\tsnapshot: snapshot(checked)\n\t\t\t});\n\t\t}\n\t\trecord('paged-state-transport-response-transform-error-stages', { cases: stages });\n\n\t\tconst controlledPage = ref(2),\n\t\t\tcontrolledSize = ref(2),\n\t\t\twrapperVersion = ref(0);\n\t\tlet controlledCalls = 0;\n\t\tconst controlledApi = async () => {\n\t\t\tcontrolledCalls++;\n\t\t\treturn { list: [{ id: controlledCalls }], total: 50 };\n\t\t};\n\t\tconst controlled = attach({\n\t\t\tsource: computed<PagedContractInput>(() => {\n\t\t\t\tvoid wrapperVersion.value;\n\t\t\t\treturn {\n\t\t\t\t\tapi: controlledApi,\n\t\t\t\t\tquery: { stable: 'same' },\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: controlledPage.value,\n\t\t\t\t\tpageSize: controlledSize.value\n\t\t\t\t};\n\t\t\t}),\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\tonPageChange: (page) => {\n\t\t\t\tcontrolledPage.value = page;\n\t\t\t},\n\t\t\tonPageSizeChange: (size) => {\n\t\t\t\tcontrolledSize.value = size;\n\t\t\t}\n\t\t}).state;\n\t\tawait settle(() => controlled.hasSucceeded.value);\n\t\tcontrolled.toggleRowSelection(controlled.data.value.list[0]!, true);\n\t\tconst wrapperBefore = snapshot(controlled);\n\t\twrapperVersion.value++;\n\t\tawait Promise.resolve();\n\t\tawait Promise.resolve();\n\t\trecord('paged-state-equivalent-wrapper-keeps-data-selection-and-request', {\n\t\t\tbefore: wrapperBefore,\n\t\t\tafter: snapshot(controlled),\n\t\t\tcalls: controlledCalls\n\t\t});\n\t\tcontrolled.setCurrentPage(3);\n\t\tawait settle(() => controlled.data.value.list[0]?.id === 2);\n\t\tcontrolled.setPageSize(4);\n\t\tawait settle(() => controlled.data.value.list[0]?.id === 3);\n\t\trecord('paged-state-controlled-page-and-size-echo-do-not-duplicate-requests', {\n\t\t\tcalls: controlledCalls,\n\t\t\tpageProp: controlledPage.value,\n\t\t\tsizeProp: controlledSize.value,\n\t\t\tsnapshot: snapshot(controlled)\n\t\t});\n\t\tconst sourceApiA = async () => ({ list: [{ id: 'source-a' }], total: 100 }),\n\t\t\tsourceApiB = async () => ({ list: [{ id: 'source-b' }], total: 100 }),\n\t\t\tchosenApi = ref(sourceApiA),\n\t\t\tsourceSwitch = attach({\n\t\t\t\tsource: computed<PagedContractInput>(() => ({\n\t\t\t\t\tapi: chosenApi.value,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: 4,\n\t\t\t\t\tpageSize: 2\n\t\t\t\t})),\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait settle(() => sourceSwitch.hasSucceeded.value);\n\t\tsourceSwitch.toggleRowSelection(sourceSwitch.data.value.list[0]!, true);\n\t\tchosenApi.value = sourceApiB;\n\t\tawait settle(() => sourceSwitch.data.value.list[0]?.id === 'source-b');\n\t\trecord('paged-state-source-identity-change-resets-page-selection-and-reloads', {\n\t\t\tsnapshot: snapshot(sourceSwitch)\n\t\t});\n\t\tlet manualCalls = 0;\n\t\tconst manualQuery = ref({ term: 'first' }),\n\t\t\tmanualApi = async (params: AsamRecord) => {\n\t\t\t\tmanualCalls++;\n\t\t\t\treturn { list: [{ id: params.term }], total: 100 };\n\t\t\t},\n\t\t\tmanual = attach({\n\t\t\t\tsource: computed<PagedContractInput>(() => ({\n\t\t\t\t\tapi: manualApi,\n\t\t\t\t\tquery: manualQuery.value,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: 3,\n\t\t\t\t\tpageSize: 2,\n\t\t\t\t\timmediate: false\n\t\t\t\t})),\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait manual.reload();\n\t\tmanual.toggleRowSelection(manual.data.value.list[0]!, true);\n\t\tmanualQuery.value.term = 'second';\n\t\tawait Promise.resolve();\n\t\tconst manualPrepared = snapshot(manual),\n\t\t\tmanualBefore = manualCalls;\n\t\tawait manual.reload();\n\t\trecord('paged-state-manual-query-change-prepares-stale-reset-without-transport', {\n\t\t\tprepared: manualPrepared,\n\t\t\tcallsBeforeReload: manualBefore,\n\t\t\tcallsAfterReload: manualCalls,\n\t\t\tfinal: snapshot(manual)\n\t\t});\n\t\tconst epochGate = gate(),\n\t\t\tepochRuntime = createAsamDataRuntime({ scope: 'scope-before' }),\n\t\t\tepochContexts: Record<string, unknown>[] = [];\n\t\tlet epochCalls = 0,\n\t\t\tepochSuccess = 0;\n\t\tconst epochApi = async (_params: AsamRecord, context: AsamRequestContext) => {\n\t\t\t\tepochContexts.push({ scope: context.scope, epoch: context.epoch });\n\t\t\t\tepochCalls++;\n\t\t\t\treturn epochCalls === 2\n\t\t\t\t\t? epochGate.promise\n\t\t\t\t\t: { list: [{ id: epochCalls }], total: 1 };\n\t\t\t},\n\t\t\tepochState = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: epochApi,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: epochRuntime,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tepochSuccess++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tawait epochState.reload();\n\t\tepochState.toggleRowSelection(epochState.data.value.list[0]!, true);\n\t\tconst epochPending = epochState.reload({ force: true });\n\t\tepochRuntime.setScope('scope-after');\n\t\tconst epochCancelled = await epochPending;\n\t\tawait Promise.resolve();\n\t\tconst epochReset = snapshot(epochState);\n\t\tepochGate.release({ list: [{ id: 'obsolete' }], total: 1 });\n\t\tawait new Promise<void>((done) => setTimeout(done, 0));\n\t\tconst epochReload = await epochState.reload();\n\t\trecord('paged-state-scope-epoch-invalidates-held-job-data-selection-and-cache', {\n\t\t\tstatus: epochCancelled.status,\n\t\t\treset: epochReset,\n\t\t\treloadStatus: epochReload.status,\n\t\t\tfromCache: epochReload.status === 'success' ? epochReload.fromCache : null,\n\t\t\tcalls: epochCalls,\n\t\t\tsuccesses: epochSuccess,\n\t\t\tcontexts: epochContexts,\n\t\t\tfinal: snapshot(epochState)\n\t\t});\n\t\tlet isolatedCalls = 0;\n\t\tconst isolatedApi = async () => {\n\t\t\t\tisolatedCalls++;\n\t\t\t\treturn { list: [{ id: isolatedCalls }], total: 1 };\n\t\t\t},\n\t\t\tisolatedRuntime = createAsamDataRuntime(),\n\t\t\tisolatedInput: PagedContractInput = {\n\t\t\t\tapi: isolatedApi,\n\t\t\t\tbuildPageParams: build,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\tisolatedA = attach({ source: isolatedInput, runtime: isolatedRuntime }).state,\n\t\t\tisolatedB = attach({ source: isolatedInput, runtime: isolatedRuntime }).state;\n\t\tawait Promise.all([isolatedA.reload(), isolatedB.reload()]);\n\t\trecord('paged-state-uncached-consumers-have-separate-flights-and-request-keys', {\n\t\t\tcalls: isolatedCalls,\n\t\t\tdistinctKeys: isolatedA.requestKey.value !== isolatedB.requestKey.value,\n\t\t\ta: snapshot(isolatedA),\n\t\t\tb: snapshot(isolatedB)\n\t\t});\n\t\tconst sharedCancelGate = gate();\n\t\tlet sharedCancelCalls = 0;\n\t\tconst sharedCancelInput: PagedContractInput = {\n\t\t\t\tapi: () => {\n\t\t\t\t\tsharedCancelCalls++;\n\t\t\t\t\treturn sharedCancelGate.promise;\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\tsharedCancelRuntime = createAsamDataRuntime(),\n\t\t\tsharedCancelA = attach({\n\t\t\t\tsource: sharedCancelInput,\n\t\t\t\truntime: sharedCancelRuntime\n\t\t\t}).state,\n\t\t\tsharedCancelB = attach({\n\t\t\t\tsource: sharedCancelInput,\n\t\t\t\truntime: sharedCancelRuntime\n\t\t\t}).state;\n\t\tconst ca = sharedCancelA.reload(),\n\t\t\tcb = sharedCancelB.reload();\n\t\tsharedCancelA.cancel();\n\t\tconst cancelledShared = await ca;\n\t\tsharedCancelGate.release({ list: [{ id: 'shared' }], total: 1 });\n\t\tconst cbResult = await cb,\n\t\t\trejoined = await sharedCancelA.reload();\n\t\trecord('paged-state-one-shared-consumer-cancel-preserves-peer-and-rejoins-cache', {\n\t\t\tcancelled: cancelledShared.status,\n\t\t\tpeer: cbResult.status,\n\t\t\trejoined: rejoined.status,\n\t\t\trejoinedFromCache: rejoined.status === 'success' ? rejoined.fromCache : null,\n\t\t\tcalls: sharedCancelCalls,\n\t\t\ta: snapshot(sharedCancelA),\n\t\t\tb: snapshot(sharedCancelB)\n\t\t});\n\t\tlet ttlCalls = 0;\n\t\tconst ttlState = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => {\n\t\t\t\t\tttlCalls++;\n\t\t\t\t\treturn { list: [{ id: ttlCalls }], total: 1 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcache: { ttlMs: 25 },\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime()\n\t\t}).state;\n\t\tawait ttlState.reload();\n\t\tconst ttlHit = await ttlState.reload();\n\t\tawait new Promise<void>((done) => setTimeout(done, 40));\n\t\tconst ttlExpired = await ttlState.reload();\n\t\trecord('paged-state-real-cache-ttl-hit-and-expiry', {\n\t\t\tcalls: ttlCalls,\n\t\t\thit: ttlHit.status === 'success' ? ttlHit.fromCache : null,\n\t\t\texpired: ttlExpired.status === 'success' ? ttlExpired.fromCache : null,\n\t\t\tsnapshot: snapshot(ttlState)\n\t\t});\n\t\tlet dateCalls = 0;\n\t\tconst dateApi = async () => {\n\t\t\t\tdateCalls++;\n\t\t\t\treturn { list: [{ id: 'date' }], total: 1 };\n\t\t\t},\n\t\t\tdateBuilder = () => ({ stamp: new Date('2026-01-01T00:00:00Z') }),\n\t\t\tdateUncached = attach({\n\t\t\t\tsource: { api: dateApi, buildPageParams: dateBuilder, immediate: false },\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state,\n\t\t\tdateCached = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: dateApi,\n\t\t\t\t\tbuildPageParams: dateBuilder,\n\t\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state,\n\t\t\tdateCustom = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: dateApi,\n\t\t\t\t\tbuildPageParams: dateBuilder,\n\t\t\t\t\tcache: { ttlMs: 10000, key: () => 'known-date' },\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait dateUncached.reload();\n\t\tawait dateCached.reload();\n\t\tawait dateCustom.reload();\n\t\trecord('paged-state-nonserializable-params-fallback-cache-error-and-custom-key', {\n\t\t\tcalls: dateCalls,\n\t\t\tuncached: snapshot(dateUncached),\n\t\t\tcached: snapshot(dateCached),\n\t\t\tcustom: snapshot(dateCustom)\n\t\t});\n\t\tconst cacheGuards: Record<string, unknown>[] = [];\n\t\tfor (const [name, key] of [\n\t\t\t['empty', () => ''],\n\t\t\t['number', () => 1],\n\t\t\t['async', async () => 'key'],\n\t\t\t[\n\t\t\t\t'throw',\n\t\t\t\t() => {\n\t\t\t\t\tthrow Error('paged key throw');\n\t\t\t\t}\n\t\t\t]\n\t\t] as const) {\n\t\t\tlet io = 0;\n\t\t\tconst checked = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: {\n\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\tio++;\n\t\t\t\t\t\t\treturn { list: [], total: 0 };\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\t\tcache: { ttlMs: 100, key },\n\t\t\t\t\t\timmediate: false\n\t\t\t\t\t},\n\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t}\n\t\t\t]).state;\n\t\t\tconst result = await checked.reload();\n\t\t\tcacheGuards.push({ name, status: result.status, io, snapshot: snapshot(checked) });\n\t\t}\n\t\trecord('paged-state-custom-cache-key-synchronous-nonempty-string-guards', {\n\t\t\tcases: cacheGuards\n\t\t});\n\t\tconst rowFunction = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => ({ list: [{ key: 'row-function' }], total: 1 }),\n\t\t\t\tbuildPageParams: build,\n\t\t\t\trowKey: (row) => String(row.key),\n\t\t\t\tdefaultSelectedRowKeys: ['row-function'],\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime()\n\t\t}).state;\n\t\tawait rowFunction.reload();\n\t\trecord('paged-state-custom-row-key-function-resolves-default-selection', {\n\t\t\tkeys: rowFunction.selection.value.keys,\n\t\t\trows: rowFunction.selection.value.rows,\n\t\t\tsnapshot: snapshot(rowFunction)\n\t\t});\n\t\tlet getterBad = false,\n\t\t\tgetterCalls = 0;\n\t\tconst getterTick = ref(0),\n\t\t\tgetterApi = async () => {\n\t\t\t\tgetterCalls++;\n\t\t\t\treturn { list: [{ id: 'getter' }], total: 1 };\n\t\t\t},\n\t\t\tgetter = attach({\n\t\t\t\tsource: () => {\n\t\t\t\t\tvoid getterTick.value;\n\t\t\t\t\tif (getterBad) throw Error('paged getter throw');\n\t\t\t\t\treturn { api: getterApi, buildPageParams: build, immediate: false };\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait getter.reload();\n\t\tgetterBad = true;\n\t\tgetterTick.value++;\n\t\tawait Promise.resolve();\n\t\tconst getterFault = snapshot(getter);\n\t\tgetterBad = false;\n\t\tgetterTick.value++;\n\t\tawait Promise.resolve();\n\t\tconst getterRecovery = await getter.reload();\n\t\trecord('paged-state-throwing-source-getter-retains-stale-data-and-recovers', {\n\t\t\tfault: getterFault,\n\t\t\tstatus: getterRecovery.status,\n\t\t\tcalls: getterCalls,\n\t\t\tfinal: snapshot(getter)\n\t\t});\n\t\tlet missingRuntime: Record<string, unknown>;\n\t\ttry {\n\t\t\tuseAsamPagedData({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t}\n\t\t\t});\n\t\t\tmissingRuntime = { threw: false };\n\t\t} catch (cause) {\n\t\t\tmissingRuntime = {\n\t\t\t\tthrew: true,\n\t\t\t\tkind: cause instanceof AsamDataFailure ? cause.kind : null,\n\t\t\t\tmessage: cause instanceof Error ? cause.message : String(cause)\n\t\t\t};\n\t\t}\n\t\trecord('paged-state-missing-runtime-is-config-error', missingRuntime);\n\n\t\tif (typeof document !== 'undefined' && pagedStateInjectionTarget.value) {\n\t\t\tlet injected: AsamPagedState<AsamRecord> | undefined,\n\t\t\t\tinjectedCalls = 0,\n\t\t\t\tmounted = false;\n\t\t\tconst host = document.createElement('div'),\n\t\t\t\tapp = createApp(\n\t\t\t\t\tdefineComponent({\n\t\t\t\t\t\tsetup() {\n\t\t\t\t\t\t\tinjected = useAsamPagedData<\n\t\t\t\t\t\t\t\tAsamRecord,\n\t\t\t\t\t\t\t\tAsamRecord,\n\t\t\t\t\t\t\t\tAsamPage<AsamRecord>\n\t\t\t\t\t\t\t>({\n\t\t\t\t\t\t\t\tsource: {\n\t\t\t\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\t\t\t\tinjectedCalls++;\n\t\t\t\t\t\t\t\t\t\treturn { list: [{ id: 8 }], total: 1 };\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\t\t\t\t\timmediate: false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tconst state = injected;\n\t\t\t\t\t\t\treturn () =>\n\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t'output',\n\t\t\t\t\t\t\t\t\t{ 'data-testid': 'paged-state-injected-output' },\n\t\t\t\t\t\t\t\t\tJSON.stringify(snapshot(state))\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\tpagedStateInjectionTarget.value.append(host);\n\t\t\tprovideAsamData(app, {});\n\t\t\ttry {\n\t\t\t\tapp.mount(host);\n\t\t\t\tmounted = true;\n\t\t\t\tif (!injected) throw Error('Missing injected paged state');\n\t\t\t\tconst noInitialRequest = injectedCalls === 0,\n\t\t\t\t\tbefore = snapshot(injected);\n\t\t\t\tawait injected.reload();\n\t\t\t\tawait nextTick();\n\t\t\t\tconst after = snapshot(injected),\n\t\t\t\t\trendered = host.querySelector('output') !== null,\n\t\t\t\t\trenderedSnapshot = JSON.parse(\n\t\t\t\t\t\thost.querySelector('output')?.textContent ?? '{}'\n\t\t\t\t\t);\n\t\t\t\tapp.unmount();\n\t\t\t\tmounted = false;\n\t\t\t\trecord('paged-state-mounted-app-injection-and-unmount-cleanup', {\n\t\t\t\t\tnoInitialRequest,\n\t\t\t\t\tbefore,\n\t\t\t\t\tafter,\n\t\t\t\t\trendered,\n\t\t\t\t\trenderedSnapshot,\n\t\t\t\t\tcalls: injectedCalls,\n\t\t\t\t\tcancelledReload: (await injected.reload()).status\n\t\t\t\t});\n\t\t\t} finally {\n\t\t\t\tif (mounted) app.unmount();\n\t\t\t\thost.remove();\n\t\t\t}\n\t\t}\n\n\t\tpagedStateContractResult.value = observations;\n\t} catch (cause) {\n\t\tpagedStateContractResult.value = [\n\t\t\t...observations,\n\t\t\t{\n\t\t\t\tphase: 'paged-state-contract-unexpected-failure',\n\t\t\t\tstate: { message: cause instanceof Error ? cause.message : String(cause) }\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tfor (const scope of scopes) scope.stop();\n\t\tpagedStateContractBusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.lifecycle-events {\n\tmax-height: 32rem;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "RowKeyContract.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lifecycle/ts/RowKeyContract.vue",
									"sha256": "c8444e32d0d0399385424a937ef66be5dcdb096487b1c6b892c61cde3b2b5f9e",
									"source": "<template>\n\t<AsamCollapse data-testid=\"row-key-boundary-case\"\n\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t<template #title><span>公开分页行键边界</span></template>\n\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t@click=\"runRowKeyBoundary\"\n\t\t\t\t\t>验证行键边界</AsamButton\n\t\t\t\t>\n\t\t\t\t<pre data-testid=\"row-key-boundary-result\">{{ JSON.stringify(observations) }}</pre>\n\t\t\t</div>\n\t\t</AsamCollapseItem></AsamCollapse\n\t>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, effectScope } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamButton,\n\tcreateAsamDataRuntime,\n\tuseAsamPagedData,\n\tAsamDataFailure\n} from '@asam-ui/ui';\n\nconst busy = ref(false);\nconst observations = ref<Record<string, unknown>[]>([]);\nasync function runRowKeyBoundary() {\n\tbusy.value = true;\n\tobservations.value = [];\n\tconst results: Record<string, unknown>[] = [];\n\ttry {\n\t\tconst cases: { name: string; key: unknown; rows: object[]; valid: boolean }[] = [\n\t\t\t{ name: 'own-empty-string', key: 'id', rows: [{ id: '' }], valid: true },\n\t\t\t{ name: 'own-zero', key: 'id', rows: [{ id: 0 }], valid: true },\n\t\t\t{ name: 'own-negative', key: 'id', rows: [{ id: -1 }], valid: true },\n\t\t\t{ name: 'own-fraction', key: 'id', rows: [{ id: 1.5 }], valid: true },\n\t\t\t{ name: 'sync-string-callback', key: () => 'callback', rows: [{}], valid: true },\n\t\t\t{ name: 'sync-number-callback', key: () => 7, rows: [{}], valid: true },\n\t\t\t{ name: 'own-NaN', key: 'id', rows: [{ id: NaN }], valid: false },\n\t\t\t{ name: 'own-Infinity', key: 'id', rows: [{ id: Infinity }], valid: false },\n\t\t\t{ name: 'own-boolean', key: 'id', rows: [{ id: true }], valid: false },\n\t\t\t{ name: 'own-null', key: 'id', rows: [{ id: null }], valid: false },\n\t\t\t{ name: 'own-object', key: 'id', rows: [{ id: {} }], valid: false },\n\t\t\t{ name: 'missing-own-key', key: 'id', rows: [{}], valid: false },\n\t\t\t{ name: 'inherited-key', key: 'id', rows: [Object.create({ id: 8 })], valid: false },\n\t\t\t{ name: 'duplicate-key', key: 'id', rows: [{ id: 1 }, { id: 1 }], valid: false },\n\t\t\t{ name: 'async-resolved', key: async () => 1, rows: [{}], valid: false },\n\t\t\t{\n\t\t\t\tname: 'async-rejected',\n\t\t\t\tkey: () => Promise.reject(Error('row-key-rejected')),\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'thenable-resolved',\n\t\t\t\tkey: () => ({ then: (done: (value: number) => void) => done(1) }),\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'thenable-rejected',\n\t\t\t\tkey: () => ({\n\t\t\t\t\tthen: (_done: unknown, reject: (cause: Error) => void) =>\n\t\t\t\t\t\treject(Error('row-key-thenable-rejected'))\n\t\t\t\t}),\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'callback-throws',\n\t\t\t\tkey: () => {\n\t\t\t\t\tthrow Error('row-key-thrown');\n\t\t\t\t},\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t}\n\t\t];\n\t\tfor (const item of cases) {\n\t\t\tconst scope = effectScope();\n\t\t\tlet calls = 0;\n\t\t\tconst state = scope.run(() =>\n\t\t\t\tReflect.apply(useAsamPagedData, undefined, [\n\t\t\t\t\t{\n\t\t\t\t\t\tsource: {\n\t\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\t\tcalls++;\n\t\t\t\t\t\t\t\treturn { list: item.rows, total: item.rows.length };\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tbuildPageParams: () => ({}),\n\t\t\t\t\t\t\trowKey: item.key,\n\t\t\t\t\t\t\timmediate: false\n\t\t\t\t\t\t},\n\t\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t\t}\n\t\t\t\t])\n\t\t\t);\n\t\t\ttry {\n\t\t\t\tconst result = await state.reload();\n\t\t\t\tconst row = {\n\t\t\t\t\tphase: item.name,\n\t\t\t\t\tvalid: item.valid,\n\t\t\t\t\tstatus: result.status,\n\t\t\t\t\tcalls,\n\t\t\t\t\terrorKind: state.error.value?.kind ?? null,\n\t\t\t\t\terrorMessage: state.error.value?.message ?? null,\n\t\t\t\t\tdataLength: state.data.value.list.length,\n\t\t\t\t\thasSucceeded: state.hasSucceeded.value,\n\t\t\t\t\tselection: state.getSelection()\n\t\t\t\t};\n\t\t\t\tif (item.valid) {\n\t\t\t\t\tstate.toggleRowSelection(item.rows[0], true);\n\t\t\t\t\trow.selection = state.getSelection();\n\t\t\t\t}\n\t\t\t\tresults.push(row);\n\t\t\t} finally {\n\t\t\t\tscope.stop();\n\t\t\t}\n\t\t}\n\t\tconst scope = effectScope();\n\t\tlet invalid = false;\n\t\tconst state = scope.run(() =>\n\t\t\tReflect.apply(useAsamPagedData, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: {\n\t\t\t\t\t\tapi: async () => ({ list: [{ id: 9 }], total: 1 }),\n\t\t\t\t\t\tbuildPageParams: () => ({}),\n\t\t\t\t\t\trowKey: () =>\n\t\t\t\t\t\t\tinvalid ? Promise.reject(Error('row-key-selection-rejected')) : 9,\n\t\t\t\t\t\timmediate: false\n\t\t\t\t\t},\n\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t}\n\t\t\t])\n\t\t);\n\t\ttry {\n\t\t\tawait state.reload();\n\t\t\tinvalid = true;\n\t\t\tconst errors: { operation: string; kind: string | null; message: string }[] = [];\n\t\t\tfor (const operation of ['toggleRowSelection', 'selectPage']) {\n\t\t\t\ttry {\n\t\t\t\t\tif (operation === 'toggleRowSelection')\n\t\t\t\t\t\tstate.toggleRowSelection({ id: 9 }, true);\n\t\t\t\t\telse state.selectPage([{ id: 9 }]);\n\t\t\t\t} catch (cause) {\n\t\t\t\t\terrors.push({\n\t\t\t\t\t\toperation,\n\t\t\t\t\t\tkind: cause instanceof AsamDataFailure ? cause.kind : null,\n\t\t\t\t\t\tmessage: cause instanceof Error ? cause.message : String(cause)\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst afterInvalid = state.getSelection();\n\t\t\tinvalid = false;\n\t\t\tstate.selectPage([{ id: 9 }]);\n\t\t\tresults.push({\n\t\t\t\tphase: 'selection-synchronous-key-guard-and-recovery',\n\t\t\t\terrors,\n\t\t\t\tafterInvalid,\n\t\t\t\trecovered: state.getSelection()\n\t\t\t});\n\t\t} finally {\n\t\t\tscope.stop();\n\t\t}\n\t\tawait new Promise<void>((done) => setTimeout(done, 20));\n\t\tobservations.value = results;\n\t} catch (cause) {\n\t\tobservations.value = [\n\t\t\t...results,\n\t\t\t{\n\t\t\t\tphase: 'unexpected-failure',\n\t\t\t\tmessage: cause instanceof Error ? cause.message : String(cause)\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								},
								{
									"name": "NativeSlotsContract.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lifecycle/ts/NativeSlotsContract.vue",
									"sha256": "f20f6b06eb3ecf3ca156fd1a2c453d89acfa69d25546fd640399bde7046a118c",
									"source": "<template>\n\t<AsamCollapse v-model=\"activeNames\" data-testid=\"table-native-slots-case\"\n\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t<template #title><span>默认列与 append／empty 插槽</span></template>\n\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t<div class=\"demo-slot-actions\">\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"load('empty')\"\n\t\t\t\t\t\t>加载空页</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"load('row')\"\n\t\t\t\t\t\t>加载成员</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"load('failure')\"\n\t\t\t\t\t\t>使插槽分页失败</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\"\n\t\t\t\t\t\t>完成插槽分页请求</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"customSlots = !customSlots\"\n\t\t\t\t\t\t>切换自定义插槽</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"layout = layout === &#39;fixed&#39; ? &#39;auto&#39; : &#39;fixed&#39;\"\n\t\t\t\t\t>\n\t\t\t\t\t\t切换汇总布局\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t\t<AsamDataTable\n\t\t\t\t\tv-if=\"activeNames.includes('auxiliary-content')\"\n\t\t\t\t\tref=\"table\"\n\t\t\t\t\t:api=\"api\"\n\t\t\t\t\t:query=\"query\"\n\t\t\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t\t\t:immediate=\"false\"\n\t\t\t\t\t:page-size=\"2\"\n\t\t\t\t\tshow-summary\n\t\t\t\t\t:table-layout=\"layout\"\n\t\t\t\t>\n\t\t\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t\t\t<AsamTableColumn prop=\"name\" label=\"插槽成员\">\n\t\t\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t\t\t<span data-testid=\"native-slot-row\">{{ row.name }}</span>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</AsamTableColumn>\n\t\t\t\t\t<template v-if=\"customSlots\" #append>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"native-slot-append\">分页之外的附加说明</p>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template v-if=\"customSlots\" #empty>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"native-slot-empty\">自定义空页说明</p>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamDataTable>\n\t\t\t\t<pre data-testid=\"native-slot-result\">{{ JSON.stringify({ result, calls }) }}</pre>\n\t\t\t</div>\n\t\t</AsamCollapseItem></AsamCollapse\n\t>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamButton,\n\tAsamDataTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport type {\n\tAsamApiRequest,\n\tAsamDataTableExpose,\n\tAsamPage,\n\tAsamPageRequest,\n\tAsamRequestContext\n} from '@asam-ui/ui';\n\ninterface Row {\n\tid: number;\n\tname: string;\n}\ntype Mode = 'empty' | 'row' | 'failure';\nconst table = ref<AsamDataTableExpose<Row>>();\nconst activeNames = ref<string[]>([]);\nconst query = {};\nconst mode = ref<Mode>('empty');\nconst customSlots = ref(true);\nconst layout = ref<'fixed' | 'auto'>('fixed');\nconst calls = ref(0);\nconst result = ref('unloaded');\nlet complete: (() => void) | undefined;\nconst buildPageParams = (_query: object, page: AsamPageRequest) => ({ ...page });\nconst api: AsamApiRequest<AsamPageRequest, AsamPage<Row>> = (\n\t_params: AsamPageRequest,\n\tcontext: AsamRequestContext\n) =>\n\tnew Promise((resolve, reject) => {\n\t\tcalls.value++;\n\t\tconst requested = mode.value;\n\t\tconst clear = () => {\n\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\tcomplete = undefined;\n\t\t};\n\t\tconst abort = () => {\n\t\t\tclear();\n\t\t\treject(new Error('插槽请求已取消'));\n\t\t};\n\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\tcomplete = () => {\n\t\t\tclear();\n\t\t\tif (requested === 'failure') reject(new Error('插槽示例失败'));\n\t\t\telse\n\t\t\t\tresolve({\n\t\t\t\t\tlist: requested === 'empty' ? [] : [{ id: 1, name: '插槽成员 1' }],\n\t\t\t\t\ttotal: requested === 'empty' ? 0 : 1\n\t\t\t\t});\n\t\t};\n\t});\nasync function load(next: Mode) {\n\tmode.value = next;\n\tresult.value = 'pending';\n\tconst outcome = await table.value?.reload({ force: true });\n\tresult.value = outcome?.status ?? 'missing';\n}\nfunction release() {\n\tcomplete?.();\n}\nonBeforeUnmount(() => table.value?.cancel());\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lifecycle/js/Demo.vue",
									"sha256": "94e146f6ef810d9c8656a80e5e933fbf81d628487fd80bc4f0a4801634397cea",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCollapse data-testid=\"paged-state-contract-case\"\n\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t<template #title><span>完整分页状态与生命周期</span></template>\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"pagedStateContractBusy\"\n\t\t\t\t\t\t@click=\"runPagedStateContract\"\n\t\t\t\t\t>\n\t\t\t\t\t\t验证分页状态与生命周期\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<div ref=\"pagedStateInjectionTarget\" />\n\t\t\t\t\t<pre data-testid=\"paged-state-contract-result\">{{\n\t\t\t\t\t\tJSON.stringify(pagedStateContractResult)\n\t\t\t\t\t}}</pre>\n\t\t\t\t</div>\n\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t>\n\n\t\t<AsamCheckboxItem v-model=\"failure\">\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t模拟接口失败\n\t\t</AsamCheckboxItem>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdReload\"\n\t\t\t>开始持有分页请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"releaseHeld\"\n\t\t\t>完成持有分页请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\">取消慢请求</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearSelection()\"\n\t\t\t>清空全部选择</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.sort('id', 'descending')\"\n\t\t\t>按编号倒序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取跨页选择</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleFirst(true)\"\n\t\t\t>选择当前页首行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleFirst(false)\"\n\t\t\t>取消当前页首行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleFirst()\"\n\t\t\t>切换当前页首行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"toggleLast()\"\n\t\t\t>选择当前页末行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.toggleAllSelection()\"\n\t\t\t>切换当前页全选</AsamButton\n\t\t>\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"query\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:row-key=\"rowKey\"\n\t\t\t:page-size=\"2\"\n\t\t\t:page-sizes=\"[2, 4]\"\n\t\t\t:pagination=\"{ layout: 'sizes, prev, pager, next, total' }\"\n\t\t\tselectable\n\t\t\tborder\n\t\t\tstripe\n\t\t\tsize=\"default\"\n\t\t\t@update:current-page=\"recordPage('update:currentPage', $event)\"\n\t\t\t@update:page-size=\"recordPage('update:pageSize', $event)\"\n\t\t\t@page-change=\"recordPage('page-change', $event)\"\n\t\t\t@page-size-change=\"recordPage('page-size-change', $event)\"\n\t\t\t@selection-change=\"recordSelection\"\n\t\t\t@success=\"recordSuccess\"\n\t\t\t@sort-change=\"sortEvents++\"\n\t\t\t@row-click=\"rowEvents.push($event.id)\"\n\t\t\t@error=\"recordError\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"id\" label=\"编号\" sortable />\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"成员\">\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span :data-row-id=\"row.id\">{{ row.name }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<template #toolbar=\"{ loading, stale, selection: snapshot }\">\n\t\t\t\t<p class=\"example-paragraph\"\n\t\t\t\t\tdata-testid=\"table-toolbar\"\n\t\t\t\t\t:data-slot-loading=\"String(loading)\"\n\t\t\t\t\t:data-slot-stale=\"String(stale)\"\n\t\t\t\t\t:data-slot-keys=\"JSON.stringify(snapshot.keys)\"\n\t\t\t\t\t:data-slot-rows=\"JSON.stringify(snapshot.rows)\"\n\t\t\t\t>\n\t\t\t\t\t已选 {{ snapshot.keys.length }}；loading={{ loading }}；stale={{ stale }}\n\t\t\t\t</p>\n\t\t\t</template>\n\t\t\t<template #append><p class=\"example-paragraph\" data-testid=\"table-append\">成员只在本地生成</p></template>\n\t\t\t<template #empty><p class=\"example-paragraph\">当前没有成员</p></template>\n\t\t</AsamDataTable>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"table-selection\">{{ JSON.stringify(selection) }}</pre>\n\t\t<pre data-testid=\"table-observation\">{{ JSON.stringify(observation) }}</pre>\n\t\t<pre class=\"lifecycle-events\" data-testid=\"table-lifecycle-events\">{{\n\t\t\tJSON.stringify(events)\n\t\t}}</pre>\n\t\t<pre data-testid=\"table-events\">{{ JSON.stringify({ sortEvents, rowEvents }) }}</pre>\n\t\t<RowKeyContract />\n\t\t<NativeSlotsContract />\n\t</section>\n</template>\n<script setup>\nimport NativeSlotsContract from './NativeSlotsContract.vue';\nimport RowKeyContract from './RowKeyContract.vue';\ndefineOptions({ name: 'AsamDataTableLifecycleDemo' });\nimport { ref, computed, effectScope, createApp, defineComponent, h, nextTick } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamDataTable,\n\tAsamTableColumn,\n\tcreateAsamDataRuntime,\n\tuseAsamPagedData,\n\tprovideAsamData,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nconst table = ref();\nconst query = { text: '' };\nconst failure = ref(false);\nconst slow = ref(false);\nconst held = ref(false);\nconst pendingReleases = new Set();\nfunction holdReload() {\n\theld.value = true;\n\tvoid reload();\n}\nfunction releaseHeld() {\n\theld.value = false;\n\tfor (const finish of [...pendingReleases]) finish();\n}\nasync function waitHeld(signal) {\n\tsignal.throwIfAborted();\n\tif (!held.value) return;\n\tawait new Promise((done, reject) => {\n\t\tconst finish = () => {\n\t\t\tpendingReleases.delete(finish);\n\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\tdone();\n\t\t};\n\t\tconst abort = () => {\n\t\t\tpendingReleases.delete(finish);\n\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\treject(signal.reason);\n\t\t};\n\t\tpendingReleases.add(finish);\n\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\tif (signal.aborted) abort();\n\t});\n\tsignal.throwIfAborted();\n}\nconst result = ref('');\nconst error = ref('');\nconst events = ref([]);\nfunction recordPage(name, value) {\n\tevents.value.push({ name, payload: value });\n}\nfunction recordSelection(value) {\n\tselection.value = value;\n\tevents.value.push({\n\t\tname: 'selection-change',\n\t\tpayload: { keys: [...value.keys], rows: value.rows.map((row) => ({ ...row })) }\n\t});\n}\nfunction recordSuccess(value) {\n\tpageRows.value = value.list;\n\tsuccesses.value++;\n\tevents.value.push({\n\t\tname: 'success',\n\t\tpayload: { list: value.list.map((row) => ({ ...row })), total: value.total }\n\t});\n}\nfunction recordError(value) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nconst successes = ref(0);\nconst sortEvents = ref(0);\nconst rowEvents = ref([]);\nconst pageRows = ref([]);\nconst selection = ref({ keys: [], rows: [] });\nconst observation = ref({\n\tkeys: [],\n\trows: []\n});\nconst rows = Array.from({ length: 6 }, (_, index) => ({\n\tid: index + 1,\n\tname: '成员 ' + (index + 1)\n}));\nconst rowKey = (row) => row.id;\nconst buildPageParams = (input, page) => ({ ...input, ...page });\nconst api = async (params, context) => {\n\tawait waitHeld(context.signal);\n\tawait new Promise((done) => setTimeout(done, slow.value ? 500 : 100));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示分页接口失败');\n\tconst matched = rows.filter((row) => row.name.includes(params.text));\n\tconst start = (params.currentPage - 1) * params.pageSize;\n\treturn { list: matched.slice(start, start + params.pageSize), total: matched.length };\n};\nconst transform = (page) => page;\nasync function reload() {\n\tconst response = await table.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n\tif (response?.status === 'success') error.value = '';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = table.value?.reload({ force: true });\n\tsetTimeout(() => table.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tconst snapshot = table.value?.getSelection();\n\tobservation.value = { keys: snapshot?.keys ?? [], rows: table.value?.getSelectionRows() ?? [] };\n}\nfunction toggleFirst(selected) {\n\tconst first = pageRows.value[0];\n\tif (first) table.value?.toggleRowSelection(first, selected);\n}\nfunction toggleLast() {\n\tconst last = pageRows.value.at(-1);\n\tif (last) table.value?.toggleRowSelection(last, true);\n}\nconst pagedStateContractResult = ref([]);\nconst pagedStateContractBusy = ref(false);\nconst pagedStateInjectionTarget = ref();\nasync function runPagedStateContract() {\n\tpagedStateContractBusy.value = true;\n\tpagedStateContractResult.value = [];\n\tconst observations = [],\n\t\tscopes = [];\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst attach = (config) => {\n\t\tconst scope = effectScope();\n\t\tscopes.push(scope);\n\t\tconst state = scope.run(() => useAsamPagedData(config));\n\t\tif (!state) throw Error('Missing paged state');\n\t\treturn { state, scope };\n\t};\n\tconst snapshot = (state) => ({\n\t\tids: state.data.value.list.map((row) => row.id),\n\t\ttotal: state.data.value.total,\n\t\tloading: state.loading.value,\n\t\terror: state.error.value?.kind ?? null,\n\t\terrorMessage: state.error.value?.message ?? null,\n\t\tstale: state.stale.value,\n\t\thasSucceeded: state.hasSucceeded.value,\n\t\tempty: state.empty.value,\n\t\tcurrentPage: state.currentPage.value,\n\t\tpageSize: state.pageSize.value,\n\t\tdataKeySet: state.dataKey.value !== null,\n\t\trequestKeySet: state.requestKey.value !== null,\n\t\tkeysMatch: state.dataKey.value !== null && state.dataKey.value === state.requestKey.value,\n\t\tresolved:\n\t\t\tstate.resolvedPage.value === null\n\t\t\t\t? null\n\t\t\t\t: {\n\t\t\t\t\t\tcurrentPage: state.resolvedPage.value.currentPage,\n\t\t\t\t\t\tpageSize: state.resolvedPage.value.pageSize,\n\t\t\t\t\t\tqueryKeyNonempty: state.resolvedPage.value.queryKey.length > 0\n\t\t\t\t\t},\n\t\tselection: {\n\t\t\tkeys: state.selection.value.keys,\n\t\t\tids: state.selection.value.rows.map((row) => row.id)\n\t\t}\n\t});\n\tconst build = (query, page) => ({\n\t\t...query,\n\t\tp: page.currentPage,\n\t\ts: page.pageSize\n\t});\n\tconst gate = () => {\n\t\tlet release = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t},\n\t\t\treject = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t};\n\t\tconst promise = new Promise((done, fail) => {\n\t\t\trelease = done;\n\t\t\treject = fail;\n\t\t});\n\t\treturn { promise, release, reject };\n\t};\n\tconst settle = async (check) => {\n\t\tfor (let i = 0; i < 100 && !check(); i++) await Promise.resolve();\n\t\tif (!check()) throw Error('Paged state did not settle within microtasks');\n\t};\n\ttry {\n\t\tconst firstGate = gate(),\n\t\t\tnextGate = gate(),\n\t\t\tfailedGate = gate(),\n\t\t\temptyGate = gate(),\n\t\t\tjobs = [firstGate, nextGate, failedGate, emptyGate];\n\t\tlet calls = 0,\n\t\t\tsuccesses = 0,\n\t\t\tlocalErrors = 0,\n\t\t\tnotifications = 0,\n\t\t\tsuccessSame = false;\n\t\tconst pageEvents = [],\n\t\t\tsizeEvents = [],\n\t\t\tselectionEvents = [],\n\t\t\tparameters = [],\n\t\t\tcontexts = [];\n\t\tconst runtime = createAsamDataRuntime({\n\t\t\t\tscope: 'paged-contract',\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\tnotifications++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\towner = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: (params, context) => {\n\t\t\t\t\t\tparameters.push(params);\n\t\t\t\t\t\tcontexts.push({\n\t\t\t\t\t\t\tscope: context.scope,\n\t\t\t\t\t\t\tepoch: context.epoch,\n\t\t\t\t\t\t\tsignalAborted: context.signal.aborted\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn jobs[calls++].promise;\n\t\t\t\t\t},\n\t\t\t\t\tquery: { term: 'initial' },\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: 2,\n\t\t\t\t\tpageSize: 2,\n\t\t\t\t\tdefaultSelectedRowKeys: [1, '1', 'future'],\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime,\n\t\t\t\tonSuccess: (data) => {\n\t\t\t\t\tsuccesses++;\n\t\t\t\t\tsuccessSame = data === owner.state.data.value;\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tlocalErrors++;\n\t\t\t\t},\n\t\t\t\tonPageChange: (page) => pageEvents.push(page),\n\t\t\t\tonPageSizeChange: (size) => sizeEvents.push(size),\n\t\t\t\tonSelectionChange: (selection) => selectionEvents.push(selection.keys)\n\t\t\t}),\n\t\t\tstate = owner.state;\n\t\trecord('paged-state-complete-public-members-initial-default-keys-and-pagination', {\n\t\t\tmembers: Object.keys(state),\n\t\t\tsnapshot: snapshot(state),\n\t\t\tcalls,\n\t\t\tselectionEvents: [...selectionEvents]\n\t\t});\n\t\tconst first = state.reload();\n\t\trecord('paged-state-held-api-build-params-and-original-context', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tcalls,\n\t\t\tparameters: [...parameters],\n\t\t\tcontexts: [...contexts]\n\t\t});\n\t\tconst host = {\n\t\t\tlist: [\n\t\t\t\t{ id: 1, name: 'Numeric', meta: { count: 1 } },\n\t\t\t\t{ id: '1', name: 'String', meta: { count: 1 } }\n\t\t\t],\n\t\t\ttotal: 6\n\t\t};\n\t\tfirstGate.release(host);\n\t\tconst firstResult = await first;\n\t\thost.list[0].meta.count = 9;\n\t\trecord('paged-state-success-resolved-page-frozen-host-snapshot-and-callback', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tstatus: firstResult.status,\n\t\t\tfromCache: firstResult.status === 'success' ? firstResult.fromCache : null,\n\t\t\tsuccesses,\n\t\t\tsuccessSame,\n\t\t\tfrozen:\n\t\t\t\tObject.isFrozen(state.data.value) &&\n\t\t\t\tObject.isFrozen(state.data.value.list) &&\n\t\t\t\tObject.isFrozen(state.data.value.list[0]) &&\n\t\t\t\tObject.isFrozen(state.data.value.list[0]?.meta),\n\t\t\thostCount: host.list[0].meta.count,\n\t\t\tsnapshotCount: Reflect.get(Object(state.data.value.list[0].meta), 'count'),\n\t\t\tselectionEvents: [...selectionEvents]\n\t\t});\n\t\tstate.clearSelection();\n\t\tstate.toggleRowSelection(state.data.value.list[0]);\n\t\tstate.toggleRowSelection({ id: 'outsider' }, true);\n\t\tstate.toggleRowSelection(state.data.value.list[1], true);\n\t\tstate.selectPage([state.data.value.list[1]]);\n\t\tconst selection = state.getSelection();\n\t\trecord('paged-state-selection-typed-keys-toggle-page-filter-and-frozen-snapshot', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tsamePublicSelection: selection === state.selection.value,\n\t\t\tfrozen:\n\t\t\t\tObject.isFrozen(selection) &&\n\t\t\t\tObject.isFrozen(selection.keys) &&\n\t\t\t\tObject.isFrozen(selection.rows),\n\t\t\tselectionEvents: [...selectionEvents]\n\t\t});\n\t\tstate.setCurrentPage(3);\n\t\tconst pageChanged = snapshot(state),\n\t\t\tnext = state.reload();\n\t\tnextGate.release({\n\t\t\tlist: [\n\t\t\t\t{ id: 3, name: 'Third' },\n\t\t\t\t{ id: 4, name: 'Fourth' }\n\t\t\t],\n\t\t\ttotal: 6\n\t\t});\n\t\tawait next;\n\t\tstate.toggleRowSelection(state.data.value.list[0], true);\n\t\tstate.selectPage([state.data.value.list[1]]);\n\t\trecord('paged-state-page-navigation-retains-cross-page-rows-and-selected-keys', {\n\t\t\tbeforeReload: pageChanged,\n\t\t\tafter: snapshot(state),\n\t\t\tparameters: [...parameters],\n\t\t\tpageEvents: [...pageEvents],\n\t\t\tsizeEvents: [...sizeEvents]\n\t\t});\n\t\tconst original = Error('owned paged request failure'),\n\t\t\tfailed = state.reload();\n\t\tfailedGate.reject(original);\n\t\tconst failure = await failed;\n\t\tconst staleSelection = state.getSelection();\n\t\tstate.toggleRowSelection(state.data.value.list[0], true);\n\t\tstate.selectPage([]);\n\t\tconst prevented = state.getSelection() === staleSelection;\n\t\tstate.toggleRowSelection(state.data.value.list[1], false);\n\t\trecord('paged-state-error-retains-data-and-blocks-stale-selection-additions', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tstatus: failure.status,\n\t\t\toriginalCause: state.error.value?.cause === original,\n\t\t\tnotified: state.error.value?.notified,\n\t\t\tprevented,\n\t\t\tsuccesses,\n\t\t\tlocalErrors,\n\t\t\tnotifications\n\t\t});\n\t\tconst empty = state.reload({ force: true });\n\t\temptyGate.release({ list: [], total: 0 });\n\t\tawait empty;\n\t\tconst beforeClear = state.getSelection();\n\t\tstate.clearSelection();\n\t\tconst clearEvents = selectionEvents.length;\n\t\tstate.clearSelection();\n\t\trecord('paged-state-zero-total-resets-page-success-empty-and-idempotent-clear', {\n\t\t\tsnapshot: snapshot(state),\n\t\t\tretainedKeyBeforeClear: beforeClear.keys,\n\t\t\tclearEventsUnchanged: selectionEvents.length === clearEvents,\n\t\t\tsuccesses,\n\t\t\tlocalErrors,\n\t\t\tnotifications,\n\t\t\tpageEvents: [...pageEvents]\n\t\t});\n\t\towner.scope.stop();\n\t\trecord('paged-state-disposal-stops-reload-and-scope-reissue', {\n\t\t\tstatus: (await state.reload()).status,\n\t\t\tcalls\n\t\t});\n\t\tlet liveCalls = 0;\n\t\tconst liveApi = async (params) => {\n\t\t\t\tliveCalls++;\n\t\t\t\treturn { list: [{ id: params.term, name: 'Live' }], total: 100 };\n\t\t\t},\n\t\t\tliveQuery = ref({ term: 'one' }),\n\t\t\tliveSource = computed(() => ({\n\t\t\t\tapi: liveApi,\n\t\t\t\tquery: liveQuery.value,\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 2,\n\t\t\t\tpageSize: 2\n\t\t\t})),\n\t\t\tlive = attach({ source: liveSource, runtime: createAsamDataRuntime() }).state;\n\t\tawait settle(() => live.hasSucceeded.value);\n\t\tlive.toggleRowSelection(live.data.value.list[0], true);\n\t\tconst initialLive = snapshot(live);\n\t\tliveQuery.value.term = 'two';\n\t\tawait settle(() => live.data.value.list[0]?.id === 'two');\n\t\tconst changedLive = snapshot(live);\n\t\tconst beforeEcho = liveCalls;\n\t\trecord('paged-state-immediate-reactive-query-resets-page-and-clears-selection', {\n\t\t\tinitial: initialLive,\n\t\t\tchanged: changedLive,\n\t\t\tcalls: liveCalls,\n\t\t\tnoChangeObservation: liveCalls === beforeEcho\n\t\t});\n\t\tconst obsolete = gate(),\n\t\t\tlatest = gate();\n\t\tlet raceCalls = 0,\n\t\t\traceCallbacks = 0;\n\t\tconst raceQuery = ref({ term: 'old' }),\n\t\t\traceApi = (params) => {\n\t\t\t\traceCalls++;\n\t\t\t\treturn params.term === 'old' ? obsolete.promise : latest.promise;\n\t\t\t},\n\t\t\trace = attach({\n\t\t\t\tsource: computed(() => ({\n\t\t\t\t\tapi: raceApi,\n\t\t\t\t\tquery: raceQuery.value,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t})),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\traceCallbacks++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tconst oldPending = race.reload();\n\t\traceQuery.value.term = 'new';\n\t\tconst oldCancelled = await oldPending;\n\t\tawait Promise.resolve();\n\t\tconst newPending = race.reload();\n\t\tlatest.release({ list: [{ id: 'new' }], total: 1 });\n\t\tawait newPending;\n\t\tobsolete.release({ list: [{ id: 'old' }], total: 1 });\n\t\tawait settle(() => !race.loading.value);\n\t\trecord('paged-state-query-race-cancels-old-and-ignores-late-result', {\n\t\t\told: oldCancelled.status,\n\t\t\tcalls: raceCalls,\n\t\t\tcallbacks: raceCallbacks,\n\t\t\tsnapshot: snapshot(race)\n\t\t});\n\t\tlet sizeCalls = 0;\n\t\tconst sizeState = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => {\n\t\t\t\t\tsizeCalls++;\n\t\t\t\t\treturn { list: [{ id: 1 }], total: 100 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 3,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\tonPageChange: (page) => pageEvents.push(page),\n\t\t\tonPageSizeChange: (size) => sizeEvents.push(size)\n\t\t}).state;\n\t\tawait sizeState.reload();\n\t\tsizeState.setPageSize(4);\n\t\tconst sizedBefore = snapshot(sizeState);\n\t\tawait sizeState.reload();\n\t\tsizeState.setPageSize(4);\n\t\tsizeState.setCurrentPage(2);\n\t\tconst pagedBefore = snapshot(sizeState);\n\t\tawait sizeState.reload();\n\t\trecord('paged-state-size-reset-and-page-setters-prepare-manual-requests', {\n\t\t\tsizeBefore: sizedBefore,\n\t\t\tpageBefore: pagedBefore,\n\t\t\tfinal: snapshot(sizeState),\n\t\t\tcalls: sizeCalls,\n\t\t\tsizeEvents: [...sizeEvents],\n\t\t\tpageEvents: [...pageEvents]\n\t\t});\n\t\tconst correctionCalls = [];\n\t\tlet correctionSuccess = 0;\n\t\tconst correction = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async (params) => {\n\t\t\t\t\tcorrectionCalls.push(Number(params.p));\n\t\t\t\t\treturn { list: [], total: 3 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 9,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\tonSuccess: () => {\n\t\t\t\tcorrectionSuccess++;\n\t\t\t}\n\t\t}).state;\n\t\tconst corrected = await correction.reload();\n\t\trecord('paged-state-out-of-range-corrects-once-and-preserves-reload-promise', {\n\t\t\tstatus: corrected.status,\n\t\t\tcalls: correctionCalls,\n\t\t\tsuccesses: correctionSuccess,\n\t\t\tsnapshot: snapshot(correction)\n\t\t});\n\t\tconst repeatedCalls = [];\n\t\tconst repeated = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async (params) => {\n\t\t\t\t\trepeatedCalls.push(Number(params.p));\n\t\t\t\t\treturn { list: [], total: repeatedCalls.length === 1 ? 3 : 1 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcurrentPage: 9,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime()\n\t\t}).state;\n\t\tconst uncorrectable = await repeated.reload();\n\t\trecord('paged-state-repeated-out-of-range-is-response-error-after-one-correction', {\n\t\t\tstatus: uncorrectable.status,\n\t\t\tcalls: repeatedCalls,\n\t\t\tsnapshot: snapshot(repeated)\n\t\t});\n\t\tconst requests = [],\n\t\t\turlRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tpagination: { page: 'p', pageSize: 's' },\n\t\t\t\t\trequest: async (request, context) => {\n\t\t\t\t\t\trequests.push({\n\t\t\t\t\t\t\trequest,\n\t\t\t\t\t\t\tcontext: {\n\t\t\t\t\t\t\t\tscope: context.scope,\n\t\t\t\t\t\t\t\tepoch: context.epoch,\n\t\t\t\t\t\t\t\tsignalAborted: context.signal.aborted\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn { list: [{ id: 1 }], total: 20 };\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\tconst urlDefault = attach({\n\t\t\tsource: {\n\t\t\t\trequest: { url: '/page-default', params: { host: 'base' } },\n\t\t\t\tquery: { term: 'filter' },\n\t\t\t\tcurrentPage: 2,\n\t\t\t\tpageSize: 4,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: urlRuntime\n\t\t}).state;\n\t\tawait urlDefault.reload();\n\t\tconst urlData = attach({\n\t\t\tsource: {\n\t\t\t\trequest: {\n\t\t\t\t\turl: '/page-data',\n\t\t\t\t\tmethod: 'post',\n\t\t\t\t\tdata: { host: 'body' },\n\t\t\t\t\tparams: { untouched: true }\n\t\t\t\t},\n\t\t\t\tquery: { term: 'body-query' },\n\t\t\t\tpageTarget: 'data',\n\t\t\t\tcurrentPage: 3,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: urlRuntime\n\t\t}).state;\n\t\tawait urlData.reload();\n\t\tlet customBuildCalls = 0;\n\t\tconst urlCustom = attach({\n\t\t\tsource: {\n\t\t\t\trequest: { url: '/unused-base' },\n\t\t\t\tquery: { term: 'custom' },\n\t\t\t\tbuildPageRequest: (query, page) => {\n\t\t\t\t\tcustomBuildCalls++;\n\t\t\t\t\treturn {\n\t\t\t\t\t\turl: '/custom-built',\n\t\t\t\t\t\tmethod: 'put',\n\t\t\t\t\t\tdata: { term: query.term, page: page.currentPage, size: page.pageSize }\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t\tcurrentPage: 2,\n\t\t\t\tpageSize: 2,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: urlRuntime\n\t\t}).state;\n\t\tawait urlCustom.reload();\n\t\trecord('paged-state-url-default-target-data-and-custom-builder', {\n\t\t\trequests,\n\t\t\tcustomBuildCalls,\n\t\t\tstates: [snapshot(urlDefault), snapshot(urlData), snapshot(urlCustom)]\n\t\t});\n\t\tlet adapterCalls = 0,\n\t\t\ttransformCalls = 0;\n\t\tconst adaptedRuntime = createAsamDataRuntime({\n\t\t\tprovider: {\n\t\t\t\tadaptPage: () => {\n\t\t\t\t\tadapterCalls++;\n\t\t\t\t\treturn { list: [{ id: 'adapter' }], total: 1 };\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst transformed = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\t\tbuildPageParams: build,\n\t\t\t\ttransform: () => {\n\t\t\t\t\ttransformCalls++;\n\t\t\t\t\treturn { list: [{ id: 'transform' }], total: 1 };\n\t\t\t\t},\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: adaptedRuntime\n\t\t}).state;\n\t\tawait transformed.reload();\n\t\tconst adapted = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\t\tbuildPageParams: build,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: adaptedRuntime\n\t\t}).state;\n\t\tawait adapted.reload();\n\t\trecord('paged-state-transform-precedes-provider-adapter-and-default-response', {\n\t\t\ttransform: snapshot(transformed),\n\t\t\tadapter: snapshot(adapted),\n\t\t\ttransformCalls,\n\t\t\tadapterCalls\n\t\t});\n\t\tlet sharedCalls = 0;\n\t\tconst sharedApi = async () => {\n\t\t\t\tsharedCalls++;\n\t\t\t\treturn { list: [{ id: sharedCalls }], total: 1 };\n\t\t\t},\n\t\t\tsharedInput = {\n\t\t\t\tapi: sharedApi,\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\tsharedRuntime = createAsamDataRuntime(),\n\t\t\tsharedA = attach({ source: sharedInput, runtime: sharedRuntime }).state,\n\t\t\tsharedB = attach({ source: sharedInput, runtime: sharedRuntime }).state;\n\t\tawait Promise.all([sharedA.reload(), sharedB.reload()]);\n\t\tconst cached = await sharedA.reload();\n\t\tawait Promise.all([sharedA.reload({ force: true }), sharedB.reload({ force: true })]);\n\t\trecord('paged-state-shared-cache-flight-hit-and-deduplicated-force', {\n\t\t\tcalls: sharedCalls,\n\t\t\tcached: cached.status === 'success' ? cached.fromCache : null,\n\t\t\tsameSnapshot: sharedA.data.value === sharedB.data.value,\n\t\t\ta: snapshot(sharedA),\n\t\t\tb: snapshot(sharedB)\n\t\t});\n\t\tconst cancelGate = gate();\n\t\tlet cancelSuccess = 0;\n\t\tconst cancelOwner = attach({\n\t\t\t\tsource: { api: () => cancelGate.promise, buildPageParams: build, immediate: false },\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tcancelSuccess++;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tcancelJob = cancelOwner.state.reload();\n\t\tcancelOwner.state.cancel();\n\t\tconst cancelled = await cancelJob;\n\t\tcancelGate.release({ list: [{ id: 9 }], total: 1 });\n\t\tawait settle(() => !cancelOwner.state.loading.value);\n\t\trecord('paged-state-explicit-cancel-settles-job-and-keeps-late-success-out', {\n\t\t\tstatus: cancelled.status,\n\t\t\tsuccesses: cancelSuccess,\n\t\t\tsnapshot: snapshot(cancelOwner.state)\n\t\t});\n\t\tconst disposedGate = gate(),\n\t\t\tdisposedOwner = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: () => disposedGate.promise,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}),\n\t\t\tdisposedJob = disposedOwner.state.reload();\n\t\tdisposedOwner.scope.stop();\n\t\tconst disposedResult = await disposedJob;\n\t\tdisposedGate.release({ list: [{ id: 9 }], total: 1 });\n\t\tawait settle(() => !disposedOwner.state.loading.value);\n\t\trecord('paged-state-dispose-held-job-and-block-followup-reload', {\n\t\t\tstatus: disposedResult.status,\n\t\t\treloadAfterDispose: (await disposedOwner.state.reload()).status,\n\t\t\tsnapshot: snapshot(disposedOwner.state)\n\t\t});\n\t\tconst invalidRows = [];\n\t\tfor (const [name, rows] of [\n\t\t\t['missing-id', [{ name: 'Missing' }]],\n\t\t\t['numeric-string-id', [{ id: '1' }, { id: 1 }]],\n\t\t\t['duplicate-id', [{ id: 1 }, { id: 1 }]],\n\t\t\t['infinite-id', [{ id: Infinity }]],\n\t\t\t['boolean-id', [{ id: true }]],\n\t\t\t['inherited-id', [Object.create({ id: 1 })]]\n\t\t]) {\n\t\t\tconst checked = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: async () => ({ list: rows, total: rows.length }),\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\t\tconst result = await checked.reload();\n\t\t\tinvalidRows.push({ name, status: result.status, snapshot: snapshot(checked) });\n\t\t}\n\t\trecord('paged-state-own-finite-typed-row-keys-and-duplicate-validation', {\n\t\t\tcases: invalidRows\n\t\t});\n\t\tconst invalidConfig = [];\n\t\tconst baseInput = {\n\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\tbuildPageParams: build,\n\t\t\timmediate: false\n\t\t};\n\t\tfor (const [name, extra] of [\n\t\t\t['no-source', { api: undefined }],\n\t\t\t['both-sources', { request: { url: '/x' } }],\n\t\t\t['legacy-data', { data: [] }],\n\t\t\t['api-no-builder', { buildPageParams: undefined }],\n\t\t\t['api-url-builder', { buildPageRequest: () => ({ url: '/x' }) }],\n\t\t\t['api-page-target', { pageTarget: 'params' }],\n\t\t\t['page-zero', { currentPage: 0 }],\n\t\t\t['size-fraction', { pageSize: 1.5 }],\n\t\t\t['row-key-invalid', { rowKey: 1 }],\n\t\t\t['cache-zero', { cache: { ttlMs: 0 } }],\n\t\t\t['cache-key-nonfunction', { cache: { ttlMs: 1, key: 1 } }],\n\t\t\t['empty-query-key', { queryKey: () => '' }],\n\t\t\t['builder-async', { buildPageParams: async () => ({}) }],\n\t\t\t['unknown-default-key', { defaultSelectedRowKeys: [true] }]\n\t\t]) {\n\t\t\tconst invalid = Reflect.apply(attach, undefined, [\n\t\t\t\t{ source: { ...baseInput, ...extra }, runtime: createAsamDataRuntime() }\n\t\t\t]).state;\n\t\t\tinvalidConfig.push({\n\t\t\t\tname,\n\t\t\t\tstatus: (await invalid.reload()).status,\n\t\t\t\tsnapshot: snapshot(invalid)\n\t\t\t});\n\t\t}\n\t\trecord('paged-state-api-config-pagination-builder-cache-query-selection-guards', {\n\t\t\tcases: invalidConfig\n\t\t});\n\t\tconst urlInvalid = [];\n\t\tfor (const [name, input] of [\n\t\t\t['missing-provider', { request: { url: '/x' } }],\n\t\t\t['get-data-target', { request: { url: '/x' }, pageTarget: 'data' }],\n\t\t\t['bad-target', { request: { url: '/x', method: 'post' }, pageTarget: 'body' }],\n\t\t\t['query-collision', { request: { url: '/x', params: { q: 1 } }, query: { q: 2 } }],\n\t\t\t['pagination-collision', { request: { url: '/x', params: { page: 1 } } }],\n\t\t\t['array-query', { request: { url: '/x' }, query: [] }],\n\t\t\t[\n\t\t\t\t'array-target',\n\t\t\t\t{ request: { url: '/x', method: 'post', data: [] }, pageTarget: 'data' }\n\t\t\t],\n\t\t\t['url-api-builder', { request: { url: '/x' }, buildPageParams: build }],\n\t\t\t[\n\t\t\t\t'custom-plus-target',\n\t\t\t\t{\n\t\t\t\t\trequest: { url: '/x' },\n\t\t\t\t\tbuildPageRequest: () => ({ url: '/custom' }),\n\t\t\t\t\tpageTarget: 'params'\n\t\t\t\t}\n\t\t\t],\n\t\t\t[\n\t\t\t\t'custom-async',\n\t\t\t\t{ request: { url: '/x' }, buildPageRequest: async () => ({ url: '/custom' }) }\n\t\t\t],\n\t\t\t[\n\t\t\t\t'custom-invalid-url',\n\t\t\t\t{ request: { url: '/x' }, buildPageRequest: () => ({ url: '' }) }\n\t\t\t]\n\t\t]) {\n\t\t\tconst invalid = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: { ...input, immediate: false },\n\t\t\t\t\truntime: createAsamDataRuntime({\n\t\t\t\t\t\tprovider:\n\t\t\t\t\t\t\tname === 'missing-provider'\n\t\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t\t: { request: async () => ({ list: [], total: 0 }) }\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t]).state;\n\t\t\turlInvalid.push({\n\t\t\t\tname,\n\t\t\t\tstatus: (await invalid.reload()).status,\n\t\t\t\tsnapshot: snapshot(invalid)\n\t\t\t});\n\t\t}\n\t\trecord('paged-state-url-provider-target-collision-plain-input-and-custom-builder-guards', {\n\t\t\tcases: urlInvalid\n\t\t});\n\t\tconst stages = [];\n\t\tfor (const [name, api, transform] of [\n\t\t\t[\n\t\t\t\t'transport-throw',\n\t\t\t\t() => {\n\t\t\t\t\tthrow Error('page transport throw');\n\t\t\t\t},\n\t\t\t\tundefined\n\t\t\t],\n\t\t\t['transport-reject', () => Promise.reject(Error('page transport reject')), undefined],\n\t\t\t['transport-not-promise', () => ({ list: [], total: 0 }), undefined],\n\t\t\t['bad-response', async () => ({ data: [] }), undefined],\n\t\t\t[\n\t\t\t\t'transform-throw',\n\t\t\t\tasync () => ({ list: [], total: 0 }),\n\t\t\t\t() => {\n\t\t\t\t\tthrow Error('page transform throw');\n\t\t\t\t}\n\t\t\t],\n\t\t\t[\n\t\t\t\t'transform-async',\n\t\t\t\tasync () => ({ list: [], total: 0 }),\n\t\t\t\tasync () => ({ list: [], total: 0 })\n\t\t\t]\n\t\t]) {\n\t\t\tconst checked = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: { api, buildPageParams: build, transform, immediate: false },\n\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t}\n\t\t\t]).state;\n\t\t\tstages.push({\n\t\t\t\tname,\n\t\t\t\tstatus: (await checked.reload()).status,\n\t\t\t\tsnapshot: snapshot(checked)\n\t\t\t});\n\t\t}\n\t\trecord('paged-state-transport-response-transform-error-stages', { cases: stages });\n\t\tconst controlledPage = ref(2),\n\t\t\tcontrolledSize = ref(2),\n\t\t\twrapperVersion = ref(0);\n\t\tlet controlledCalls = 0;\n\t\tconst controlledApi = async () => {\n\t\t\tcontrolledCalls++;\n\t\t\treturn { list: [{ id: controlledCalls }], total: 50 };\n\t\t};\n\t\tconst controlled = attach({\n\t\t\tsource: computed(() => {\n\t\t\t\tvoid wrapperVersion.value;\n\t\t\t\treturn {\n\t\t\t\t\tapi: controlledApi,\n\t\t\t\t\tquery: { stable: 'same' },\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: controlledPage.value,\n\t\t\t\t\tpageSize: controlledSize.value\n\t\t\t\t};\n\t\t\t}),\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\tonPageChange: (page) => {\n\t\t\t\tcontrolledPage.value = page;\n\t\t\t},\n\t\t\tonPageSizeChange: (size) => {\n\t\t\t\tcontrolledSize.value = size;\n\t\t\t}\n\t\t}).state;\n\t\tawait settle(() => controlled.hasSucceeded.value);\n\t\tcontrolled.toggleRowSelection(controlled.data.value.list[0], true);\n\t\tconst wrapperBefore = snapshot(controlled);\n\t\twrapperVersion.value++;\n\t\tawait Promise.resolve();\n\t\tawait Promise.resolve();\n\t\trecord('paged-state-equivalent-wrapper-keeps-data-selection-and-request', {\n\t\t\tbefore: wrapperBefore,\n\t\t\tafter: snapshot(controlled),\n\t\t\tcalls: controlledCalls\n\t\t});\n\t\tcontrolled.setCurrentPage(3);\n\t\tawait settle(() => controlled.data.value.list[0]?.id === 2);\n\t\tcontrolled.setPageSize(4);\n\t\tawait settle(() => controlled.data.value.list[0]?.id === 3);\n\t\trecord('paged-state-controlled-page-and-size-echo-do-not-duplicate-requests', {\n\t\t\tcalls: controlledCalls,\n\t\t\tpageProp: controlledPage.value,\n\t\t\tsizeProp: controlledSize.value,\n\t\t\tsnapshot: snapshot(controlled)\n\t\t});\n\t\tconst sourceApiA = async () => ({ list: [{ id: 'source-a' }], total: 100 }),\n\t\t\tsourceApiB = async () => ({ list: [{ id: 'source-b' }], total: 100 }),\n\t\t\tchosenApi = ref(sourceApiA),\n\t\t\tsourceSwitch = attach({\n\t\t\t\tsource: computed(() => ({\n\t\t\t\t\tapi: chosenApi.value,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: 4,\n\t\t\t\t\tpageSize: 2\n\t\t\t\t})),\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait settle(() => sourceSwitch.hasSucceeded.value);\n\t\tsourceSwitch.toggleRowSelection(sourceSwitch.data.value.list[0], true);\n\t\tchosenApi.value = sourceApiB;\n\t\tawait settle(() => sourceSwitch.data.value.list[0]?.id === 'source-b');\n\t\trecord('paged-state-source-identity-change-resets-page-selection-and-reloads', {\n\t\t\tsnapshot: snapshot(sourceSwitch)\n\t\t});\n\t\tlet manualCalls = 0;\n\t\tconst manualQuery = ref({ term: 'first' }),\n\t\t\tmanualApi = async (params) => {\n\t\t\t\tmanualCalls++;\n\t\t\t\treturn { list: [{ id: params.term }], total: 100 };\n\t\t\t},\n\t\t\tmanual = attach({\n\t\t\t\tsource: computed(() => ({\n\t\t\t\t\tapi: manualApi,\n\t\t\t\t\tquery: manualQuery.value,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcurrentPage: 3,\n\t\t\t\t\tpageSize: 2,\n\t\t\t\t\timmediate: false\n\t\t\t\t})),\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait manual.reload();\n\t\tmanual.toggleRowSelection(manual.data.value.list[0], true);\n\t\tmanualQuery.value.term = 'second';\n\t\tawait Promise.resolve();\n\t\tconst manualPrepared = snapshot(manual),\n\t\t\tmanualBefore = manualCalls;\n\t\tawait manual.reload();\n\t\trecord('paged-state-manual-query-change-prepares-stale-reset-without-transport', {\n\t\t\tprepared: manualPrepared,\n\t\t\tcallsBeforeReload: manualBefore,\n\t\t\tcallsAfterReload: manualCalls,\n\t\t\tfinal: snapshot(manual)\n\t\t});\n\t\tconst epochGate = gate(),\n\t\t\tepochRuntime = createAsamDataRuntime({ scope: 'scope-before' }),\n\t\t\tepochContexts = [];\n\t\tlet epochCalls = 0,\n\t\t\tepochSuccess = 0;\n\t\tconst epochApi = async (_params, context) => {\n\t\t\t\tepochContexts.push({ scope: context.scope, epoch: context.epoch });\n\t\t\t\tepochCalls++;\n\t\t\t\treturn epochCalls === 2\n\t\t\t\t\t? epochGate.promise\n\t\t\t\t\t: { list: [{ id: epochCalls }], total: 1 };\n\t\t\t},\n\t\t\tepochState = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: epochApi,\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: epochRuntime,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tepochSuccess++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tawait epochState.reload();\n\t\tepochState.toggleRowSelection(epochState.data.value.list[0], true);\n\t\tconst epochPending = epochState.reload({ force: true });\n\t\tepochRuntime.setScope('scope-after');\n\t\tconst epochCancelled = await epochPending;\n\t\tawait Promise.resolve();\n\t\tconst epochReset = snapshot(epochState);\n\t\tepochGate.release({ list: [{ id: 'obsolete' }], total: 1 });\n\t\tawait new Promise((done) => setTimeout(done, 0));\n\t\tconst epochReload = await epochState.reload();\n\t\trecord('paged-state-scope-epoch-invalidates-held-job-data-selection-and-cache', {\n\t\t\tstatus: epochCancelled.status,\n\t\t\treset: epochReset,\n\t\t\treloadStatus: epochReload.status,\n\t\t\tfromCache: epochReload.status === 'success' ? epochReload.fromCache : null,\n\t\t\tcalls: epochCalls,\n\t\t\tsuccesses: epochSuccess,\n\t\t\tcontexts: epochContexts,\n\t\t\tfinal: snapshot(epochState)\n\t\t});\n\t\tlet isolatedCalls = 0;\n\t\tconst isolatedApi = async () => {\n\t\t\t\tisolatedCalls++;\n\t\t\t\treturn { list: [{ id: isolatedCalls }], total: 1 };\n\t\t\t},\n\t\t\tisolatedRuntime = createAsamDataRuntime(),\n\t\t\tisolatedInput = {\n\t\t\t\tapi: isolatedApi,\n\t\t\t\tbuildPageParams: build,\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\tisolatedA = attach({ source: isolatedInput, runtime: isolatedRuntime }).state,\n\t\t\tisolatedB = attach({ source: isolatedInput, runtime: isolatedRuntime }).state;\n\t\tawait Promise.all([isolatedA.reload(), isolatedB.reload()]);\n\t\trecord('paged-state-uncached-consumers-have-separate-flights-and-request-keys', {\n\t\t\tcalls: isolatedCalls,\n\t\t\tdistinctKeys: isolatedA.requestKey.value !== isolatedB.requestKey.value,\n\t\t\ta: snapshot(isolatedA),\n\t\t\tb: snapshot(isolatedB)\n\t\t});\n\t\tconst sharedCancelGate = gate();\n\t\tlet sharedCancelCalls = 0;\n\t\tconst sharedCancelInput = {\n\t\t\t\tapi: () => {\n\t\t\t\t\tsharedCancelCalls++;\n\t\t\t\t\treturn sharedCancelGate.promise;\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\tsharedCancelRuntime = createAsamDataRuntime(),\n\t\t\tsharedCancelA = attach({\n\t\t\t\tsource: sharedCancelInput,\n\t\t\t\truntime: sharedCancelRuntime\n\t\t\t}).state,\n\t\t\tsharedCancelB = attach({\n\t\t\t\tsource: sharedCancelInput,\n\t\t\t\truntime: sharedCancelRuntime\n\t\t\t}).state;\n\t\tconst ca = sharedCancelA.reload(),\n\t\t\tcb = sharedCancelB.reload();\n\t\tsharedCancelA.cancel();\n\t\tconst cancelledShared = await ca;\n\t\tsharedCancelGate.release({ list: [{ id: 'shared' }], total: 1 });\n\t\tconst cbResult = await cb,\n\t\t\trejoined = await sharedCancelA.reload();\n\t\trecord('paged-state-one-shared-consumer-cancel-preserves-peer-and-rejoins-cache', {\n\t\t\tcancelled: cancelledShared.status,\n\t\t\tpeer: cbResult.status,\n\t\t\trejoined: rejoined.status,\n\t\t\trejoinedFromCache: rejoined.status === 'success' ? rejoined.fromCache : null,\n\t\t\tcalls: sharedCancelCalls,\n\t\t\ta: snapshot(sharedCancelA),\n\t\t\tb: snapshot(sharedCancelB)\n\t\t});\n\t\tlet ttlCalls = 0;\n\t\tconst ttlState = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => {\n\t\t\t\t\tttlCalls++;\n\t\t\t\t\treturn { list: [{ id: ttlCalls }], total: 1 };\n\t\t\t\t},\n\t\t\t\tbuildPageParams: build,\n\t\t\t\tcache: { ttlMs: 25 },\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime()\n\t\t}).state;\n\t\tawait ttlState.reload();\n\t\tconst ttlHit = await ttlState.reload();\n\t\tawait new Promise((done) => setTimeout(done, 40));\n\t\tconst ttlExpired = await ttlState.reload();\n\t\trecord('paged-state-real-cache-ttl-hit-and-expiry', {\n\t\t\tcalls: ttlCalls,\n\t\t\thit: ttlHit.status === 'success' ? ttlHit.fromCache : null,\n\t\t\texpired: ttlExpired.status === 'success' ? ttlExpired.fromCache : null,\n\t\t\tsnapshot: snapshot(ttlState)\n\t\t});\n\t\tlet dateCalls = 0;\n\t\tconst dateApi = async () => {\n\t\t\t\tdateCalls++;\n\t\t\t\treturn { list: [{ id: 'date' }], total: 1 };\n\t\t\t},\n\t\t\tdateBuilder = () => ({ stamp: new Date('2026-01-01T00:00:00Z') }),\n\t\t\tdateUncached = attach({\n\t\t\t\tsource: { api: dateApi, buildPageParams: dateBuilder, immediate: false },\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state,\n\t\t\tdateCached = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: dateApi,\n\t\t\t\t\tbuildPageParams: dateBuilder,\n\t\t\t\t\tcache: { ttlMs: 10000 },\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state,\n\t\t\tdateCustom = attach({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: dateApi,\n\t\t\t\t\tbuildPageParams: dateBuilder,\n\t\t\t\t\tcache: { ttlMs: 10000, key: () => 'known-date' },\n\t\t\t\t\timmediate: false\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait dateUncached.reload();\n\t\tawait dateCached.reload();\n\t\tawait dateCustom.reload();\n\t\trecord('paged-state-nonserializable-params-fallback-cache-error-and-custom-key', {\n\t\t\tcalls: dateCalls,\n\t\t\tuncached: snapshot(dateUncached),\n\t\t\tcached: snapshot(dateCached),\n\t\t\tcustom: snapshot(dateCustom)\n\t\t});\n\t\tconst cacheGuards = [];\n\t\tfor (const [name, key] of [\n\t\t\t['empty', () => ''],\n\t\t\t['number', () => 1],\n\t\t\t['async', async () => 'key'],\n\t\t\t[\n\t\t\t\t'throw',\n\t\t\t\t() => {\n\t\t\t\t\tthrow Error('paged key throw');\n\t\t\t\t}\n\t\t\t]\n\t\t]) {\n\t\t\tlet io = 0;\n\t\t\tconst checked = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: {\n\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\tio++;\n\t\t\t\t\t\t\treturn { list: [], total: 0 };\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\t\tcache: { ttlMs: 100, key },\n\t\t\t\t\t\timmediate: false\n\t\t\t\t\t},\n\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t}\n\t\t\t]).state;\n\t\t\tconst result = await checked.reload();\n\t\t\tcacheGuards.push({ name, status: result.status, io, snapshot: snapshot(checked) });\n\t\t}\n\t\trecord('paged-state-custom-cache-key-synchronous-nonempty-string-guards', {\n\t\t\tcases: cacheGuards\n\t\t});\n\t\tconst rowFunction = attach({\n\t\t\tsource: {\n\t\t\t\tapi: async () => ({ list: [{ key: 'row-function' }], total: 1 }),\n\t\t\t\tbuildPageParams: build,\n\t\t\t\trowKey: (row) => String(row.key),\n\t\t\t\tdefaultSelectedRowKeys: ['row-function'],\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\truntime: createAsamDataRuntime()\n\t\t}).state;\n\t\tawait rowFunction.reload();\n\t\trecord('paged-state-custom-row-key-function-resolves-default-selection', {\n\t\t\tkeys: rowFunction.selection.value.keys,\n\t\t\trows: rowFunction.selection.value.rows,\n\t\t\tsnapshot: snapshot(rowFunction)\n\t\t});\n\t\tlet getterBad = false,\n\t\t\tgetterCalls = 0;\n\t\tconst getterTick = ref(0),\n\t\t\tgetterApi = async () => {\n\t\t\t\tgetterCalls++;\n\t\t\t\treturn { list: [{ id: 'getter' }], total: 1 };\n\t\t\t},\n\t\t\tgetter = attach({\n\t\t\t\tsource: () => {\n\t\t\t\t\tvoid getterTick.value;\n\t\t\t\t\tif (getterBad) throw Error('paged getter throw');\n\t\t\t\t\treturn { api: getterApi, buildPageParams: build, immediate: false };\n\t\t\t\t},\n\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t}).state;\n\t\tawait getter.reload();\n\t\tgetterBad = true;\n\t\tgetterTick.value++;\n\t\tawait Promise.resolve();\n\t\tconst getterFault = snapshot(getter);\n\t\tgetterBad = false;\n\t\tgetterTick.value++;\n\t\tawait Promise.resolve();\n\t\tconst getterRecovery = await getter.reload();\n\t\trecord('paged-state-throwing-source-getter-retains-stale-data-and-recovers', {\n\t\t\tfault: getterFault,\n\t\t\tstatus: getterRecovery.status,\n\t\t\tcalls: getterCalls,\n\t\t\tfinal: snapshot(getter)\n\t\t});\n\t\tlet missingRuntime;\n\t\ttry {\n\t\t\tuseAsamPagedData({\n\t\t\t\tsource: {\n\t\t\t\t\tapi: async () => ({ list: [], total: 0 }),\n\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\timmediate: false\n\t\t\t\t}\n\t\t\t});\n\t\t\tmissingRuntime = { threw: false };\n\t\t} catch (cause) {\n\t\t\tmissingRuntime = {\n\t\t\t\tthrew: true,\n\t\t\t\tkind: cause instanceof AsamDataFailure ? cause.kind : null,\n\t\t\t\tmessage: cause instanceof Error ? cause.message : String(cause)\n\t\t\t};\n\t\t}\n\t\trecord('paged-state-missing-runtime-is-config-error', missingRuntime);\n\t\tif (typeof document !== 'undefined' && pagedStateInjectionTarget.value) {\n\t\t\tlet injected,\n\t\t\t\tinjectedCalls = 0,\n\t\t\t\tmounted = false;\n\t\t\tconst host = document.createElement('div'),\n\t\t\t\tapp = createApp(\n\t\t\t\t\tdefineComponent({\n\t\t\t\t\t\tsetup() {\n\t\t\t\t\t\t\tinjected = useAsamPagedData({\n\t\t\t\t\t\t\t\tsource: {\n\t\t\t\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\t\t\t\tinjectedCalls++;\n\t\t\t\t\t\t\t\t\t\treturn { list: [{ id: 8 }], total: 1 };\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tbuildPageParams: build,\n\t\t\t\t\t\t\t\t\timmediate: false\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tconst state = injected;\n\t\t\t\t\t\t\treturn () =>\n\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t'output',\n\t\t\t\t\t\t\t\t\t{ 'data-testid': 'paged-state-injected-output' },\n\t\t\t\t\t\t\t\t\tJSON.stringify(snapshot(state))\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\tpagedStateInjectionTarget.value.append(host);\n\t\t\tprovideAsamData(app, {});\n\t\t\ttry {\n\t\t\t\tapp.mount(host);\n\t\t\t\tmounted = true;\n\t\t\t\tif (!injected) throw Error('Missing injected paged state');\n\t\t\t\tconst noInitialRequest = injectedCalls === 0,\n\t\t\t\t\tbefore = snapshot(injected);\n\t\t\t\tawait injected.reload();\n\t\t\t\tawait nextTick();\n\t\t\t\tconst after = snapshot(injected),\n\t\t\t\t\trendered = host.querySelector('output') !== null,\n\t\t\t\t\trenderedSnapshot = JSON.parse(\n\t\t\t\t\t\thost.querySelector('output')?.textContent ?? '{}'\n\t\t\t\t\t);\n\t\t\t\tapp.unmount();\n\t\t\t\tmounted = false;\n\t\t\t\trecord('paged-state-mounted-app-injection-and-unmount-cleanup', {\n\t\t\t\t\tnoInitialRequest,\n\t\t\t\t\tbefore,\n\t\t\t\t\tafter,\n\t\t\t\t\trendered,\n\t\t\t\t\trenderedSnapshot,\n\t\t\t\t\tcalls: injectedCalls,\n\t\t\t\t\tcancelledReload: (await injected.reload()).status\n\t\t\t\t});\n\t\t\t} finally {\n\t\t\t\tif (mounted) app.unmount();\n\t\t\t\thost.remove();\n\t\t\t}\n\t\t}\n\t\tpagedStateContractResult.value = observations;\n\t} catch (cause) {\n\t\tpagedStateContractResult.value = [\n\t\t\t...observations,\n\t\t\t{\n\t\t\t\tphase: 'paged-state-contract-unexpected-failure',\n\t\t\t\tstate: { message: cause instanceof Error ? cause.message : String(cause) }\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tfor (const scope of scopes) scope.stop();\n\t\tpagedStateContractBusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.lifecycle-events {\n\tmax-height: 32rem;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "RowKeyContract.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lifecycle/js/RowKeyContract.vue",
									"sha256": "060ea35a36dd1feaf12795cff54ccbc5717051607e52403328256fb8ca34318c",
									"source": "<template>\n\t<AsamCollapse data-testid=\"row-key-boundary-case\"\n\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t<template #title><span>公开分页行键边界</span></template>\n\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t@click=\"runRowKeyBoundary\"\n\t\t\t\t\t>验证行键边界</AsamButton\n\t\t\t\t>\n\t\t\t\t<pre data-testid=\"row-key-boundary-result\">{{ JSON.stringify(observations) }}</pre>\n\t\t\t</div>\n\t\t</AsamCollapseItem></AsamCollapse\n\t>\n</template>\n<script setup>\nimport { ref, effectScope } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamButton,\n\tcreateAsamDataRuntime,\n\tuseAsamPagedData,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nconst busy = ref(false);\nconst observations = ref([]);\nasync function runRowKeyBoundary() {\n\tbusy.value = true;\n\tobservations.value = [];\n\tconst results = [];\n\ttry {\n\t\tconst cases = [\n\t\t\t{ name: 'own-empty-string', key: 'id', rows: [{ id: '' }], valid: true },\n\t\t\t{ name: 'own-zero', key: 'id', rows: [{ id: 0 }], valid: true },\n\t\t\t{ name: 'own-negative', key: 'id', rows: [{ id: -1 }], valid: true },\n\t\t\t{ name: 'own-fraction', key: 'id', rows: [{ id: 1.5 }], valid: true },\n\t\t\t{ name: 'sync-string-callback', key: () => 'callback', rows: [{}], valid: true },\n\t\t\t{ name: 'sync-number-callback', key: () => 7, rows: [{}], valid: true },\n\t\t\t{ name: 'own-NaN', key: 'id', rows: [{ id: NaN }], valid: false },\n\t\t\t{ name: 'own-Infinity', key: 'id', rows: [{ id: Infinity }], valid: false },\n\t\t\t{ name: 'own-boolean', key: 'id', rows: [{ id: true }], valid: false },\n\t\t\t{ name: 'own-null', key: 'id', rows: [{ id: null }], valid: false },\n\t\t\t{ name: 'own-object', key: 'id', rows: [{ id: {} }], valid: false },\n\t\t\t{ name: 'missing-own-key', key: 'id', rows: [{}], valid: false },\n\t\t\t{ name: 'inherited-key', key: 'id', rows: [Object.create({ id: 8 })], valid: false },\n\t\t\t{ name: 'duplicate-key', key: 'id', rows: [{ id: 1 }, { id: 1 }], valid: false },\n\t\t\t{ name: 'async-resolved', key: async () => 1, rows: [{}], valid: false },\n\t\t\t{\n\t\t\t\tname: 'async-rejected',\n\t\t\t\tkey: () => Promise.reject(Error('row-key-rejected')),\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'thenable-resolved',\n\t\t\t\tkey: () => ({ then: (done) => done(1) }),\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'thenable-rejected',\n\t\t\t\tkey: () => ({\n\t\t\t\t\tthen: (_done, reject) => reject(Error('row-key-thenable-rejected'))\n\t\t\t\t}),\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'callback-throws',\n\t\t\t\tkey: () => {\n\t\t\t\t\tthrow Error('row-key-thrown');\n\t\t\t\t},\n\t\t\t\trows: [{}],\n\t\t\t\tvalid: false\n\t\t\t}\n\t\t];\n\t\tfor (const item of cases) {\n\t\t\tconst scope = effectScope();\n\t\t\tlet calls = 0;\n\t\t\tconst state = scope.run(() =>\n\t\t\t\tReflect.apply(useAsamPagedData, undefined, [\n\t\t\t\t\t{\n\t\t\t\t\t\tsource: {\n\t\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\t\tcalls++;\n\t\t\t\t\t\t\t\treturn { list: item.rows, total: item.rows.length };\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tbuildPageParams: () => ({}),\n\t\t\t\t\t\t\trowKey: item.key,\n\t\t\t\t\t\t\timmediate: false\n\t\t\t\t\t\t},\n\t\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t\t}\n\t\t\t\t])\n\t\t\t);\n\t\t\ttry {\n\t\t\t\tconst result = await state.reload();\n\t\t\t\tconst row = {\n\t\t\t\t\tphase: item.name,\n\t\t\t\t\tvalid: item.valid,\n\t\t\t\t\tstatus: result.status,\n\t\t\t\t\tcalls,\n\t\t\t\t\terrorKind: state.error.value?.kind ?? null,\n\t\t\t\t\terrorMessage: state.error.value?.message ?? null,\n\t\t\t\t\tdataLength: state.data.value.list.length,\n\t\t\t\t\thasSucceeded: state.hasSucceeded.value,\n\t\t\t\t\tselection: state.getSelection()\n\t\t\t\t};\n\t\t\t\tif (item.valid) {\n\t\t\t\t\tstate.toggleRowSelection(item.rows[0], true);\n\t\t\t\t\trow.selection = state.getSelection();\n\t\t\t\t}\n\t\t\t\tresults.push(row);\n\t\t\t} finally {\n\t\t\t\tscope.stop();\n\t\t\t}\n\t\t}\n\t\tconst scope = effectScope();\n\t\tlet invalid = false;\n\t\tconst state = scope.run(() =>\n\t\t\tReflect.apply(useAsamPagedData, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: {\n\t\t\t\t\t\tapi: async () => ({ list: [{ id: 9 }], total: 1 }),\n\t\t\t\t\t\tbuildPageParams: () => ({}),\n\t\t\t\t\t\trowKey: () =>\n\t\t\t\t\t\t\tinvalid ? Promise.reject(Error('row-key-selection-rejected')) : 9,\n\t\t\t\t\t\timmediate: false\n\t\t\t\t\t},\n\t\t\t\t\truntime: createAsamDataRuntime()\n\t\t\t\t}\n\t\t\t])\n\t\t);\n\t\ttry {\n\t\t\tawait state.reload();\n\t\t\tinvalid = true;\n\t\t\tconst errors = [];\n\t\t\tfor (const operation of ['toggleRowSelection', 'selectPage']) {\n\t\t\t\ttry {\n\t\t\t\t\tif (operation === 'toggleRowSelection')\n\t\t\t\t\t\tstate.toggleRowSelection({ id: 9 }, true);\n\t\t\t\t\telse state.selectPage([{ id: 9 }]);\n\t\t\t\t} catch (cause) {\n\t\t\t\t\terrors.push({\n\t\t\t\t\t\toperation,\n\t\t\t\t\t\tkind: cause instanceof AsamDataFailure ? cause.kind : null,\n\t\t\t\t\t\tmessage: cause instanceof Error ? cause.message : String(cause)\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst afterInvalid = state.getSelection();\n\t\t\tinvalid = false;\n\t\t\tstate.selectPage([{ id: 9 }]);\n\t\t\tresults.push({\n\t\t\t\tphase: 'selection-synchronous-key-guard-and-recovery',\n\t\t\t\terrors,\n\t\t\t\tafterInvalid,\n\t\t\t\trecovered: state.getSelection()\n\t\t\t});\n\t\t} finally {\n\t\t\tscope.stop();\n\t\t}\n\t\tawait new Promise((done) => setTimeout(done, 20));\n\t\tobservations.value = results;\n\t} catch (cause) {\n\t\tobservations.value = [\n\t\t\t...results,\n\t\t\t{\n\t\t\t\tphase: 'unexpected-failure',\n\t\t\t\tmessage: cause instanceof Error ? cause.message : String(cause)\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								},
								{
									"name": "NativeSlotsContract.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lifecycle/js/NativeSlotsContract.vue",
									"sha256": "8e7a1c1a67a167f97366c0cefd15876b319e9c2e244ed980583dc3b844624d6b",
									"source": "<template>\n\t<AsamCollapse v-model=\"activeNames\" data-testid=\"table-native-slots-case\"\n\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t<template #title><span>默认列与 append／empty 插槽</span></template>\n\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t<div class=\"demo-slot-actions\">\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"load('empty')\"\n\t\t\t\t\t\t>加载空页</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"load('row')\"\n\t\t\t\t\t\t>加载成员</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"load('failure')\"\n\t\t\t\t\t\t>使插槽分页失败</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\"\n\t\t\t\t\t\t>完成插槽分页请求</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"customSlots = !customSlots\"\n\t\t\t\t\t\t>切换自定义插槽</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"layout = layout === &#39;fixed&#39; ? &#39;auto&#39; : &#39;fixed&#39;\"\n\t\t\t\t\t>\n\t\t\t\t\t\t切换汇总布局\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t\t<AsamDataTable\n\t\t\t\t\tv-if=\"activeNames.includes('auxiliary-content')\"\n\t\t\t\t\tref=\"table\"\n\t\t\t\t\t:api=\"api\"\n\t\t\t\t\t:query=\"query\"\n\t\t\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t\t\t:immediate=\"false\"\n\t\t\t\t\t:page-size=\"2\"\n\t\t\t\t\tshow-summary\n\t\t\t\t\t:table-layout=\"layout\"\n\t\t\t\t>\n\t\t\t\t\t<AsamTableColumn prop=\"name\" label=\"插槽成员\">\n\t\t\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t\t\t<span data-testid=\"native-slot-row\">{{ row.name }}</span>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</AsamTableColumn>\n\t\t\t\t\t<template v-if=\"customSlots\" #append>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"native-slot-append\">分页之外的附加说明</p>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template v-if=\"customSlots\" #empty>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"native-slot-empty\">自定义空页说明</p>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamDataTable>\n\t\t\t\t<pre data-testid=\"native-slot-result\">{{ JSON.stringify({ result, calls }) }}</pre>\n\t\t\t</div>\n\t\t</AsamCollapseItem></AsamCollapse\n\t>\n</template>\n\n<script setup>\nimport { onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamButton,\n\tAsamDataTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nconst table = ref();\nconst activeNames = ref([]);\nconst query = {};\nconst mode = ref('empty');\nconst customSlots = ref(true);\nconst layout = ref('fixed');\nconst calls = ref(0);\nconst result = ref('unloaded');\nlet complete;\nconst buildPageParams = (_query, page) => ({ ...page });\nconst api = (_params, context) =>\n\tnew Promise((resolve, reject) => {\n\t\tcalls.value++;\n\t\tconst requested = mode.value;\n\t\tconst clear = () => {\n\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\tcomplete = undefined;\n\t\t};\n\t\tconst abort = () => {\n\t\t\tclear();\n\t\t\treject(new Error('插槽请求已取消'));\n\t\t};\n\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\tcomplete = () => {\n\t\t\tclear();\n\t\t\tif (requested === 'failure') reject(new Error('插槽示例失败'));\n\t\t\telse\n\t\t\t\tresolve({\n\t\t\t\t\tlist: requested === 'empty' ? [] : [{ id: 1, name: '插槽成员 1' }],\n\t\t\t\t\ttotal: requested === 'empty' ? 0 : 1\n\t\t\t\t});\n\t\t};\n\t});\nasync function load(next) {\n\tmode.value = next;\n\tresult.value = 'pending';\n\tconst outcome = await table.value?.reload({ force: true });\n\tresult.value = outcome?.status ?? 'missing';\n}\nfunction release() {\n\tcomplete?.();\n}\nonBeforeUnmount(() => table.value?.cancel());\n</script>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-instance",
					"title": "原生实例与半选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/native-instance/ts/Demo.vue",
									"sha256": "5f750abc97796afef773bd612ae37144db726fbd4e70da0adeb237f1264f09f9",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"loadTree\"\n\t\t\t:query=\"{}\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:page-size=\"10\"\n\t\t\t:page-sizes=\"[10]\"\n\t\t\tdefault-expand-all\n\t\t>\n\t\t\t<AsamTableColumn type=\"selection\" width=\"54\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"树节点\" />\n\t\t</AsamDataTable>\n\t\t<p class=\"example-paragraph\">使用上表原生选择列勾选一个子节点，再读取当前树的半选父节点。</p>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readInstance\"\n\t\t\t>读取表格实例</AsamButton\n\t\t>\n\t\t<pre role=\"status\">{{ observation }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDataTableNativeInstanceDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamDataTableExpose, AsamPage, AsamPageRequest } from '@asam-ui/ui';\n\ninterface Row {\n\tid: number;\n\tname: string;\n\tchildren?: Row[];\n}\n\nconst table = ref<AsamDataTableExpose<Row>>();\nconst observation = ref({ halfSelected: [] as string[], tableId: '', columns: 0, selectedKeys: 0 });\nconst rows: Row[] = [\n\t{\n\t\tid: 1,\n\t\tname: '研发组',\n\t\tchildren: [\n\t\t\t{ id: 11, name: '组件实现' },\n\t\t\t{ id: 12, name: '独立验证' }\n\t\t]\n\t}\n];\nconst buildPageParams = (_query: object, page: AsamPageRequest) => page;\nconst loadTree = async (): Promise<AsamPage<Row>> => ({ list: rows, total: rows.length });\nconst transform = (response: AsamPage<Row>) => response;\n\nfunction readInstance(): void {\n\tif (!table.value) return;\n\tobservation.value = {\n\t\thalfSelected: table.value.getHalfSelectionRows().map((row) => row.name),\n\t\ttableId: table.value.tableId,\n\t\tcolumns: table.value.columns.length,\n\t\tselectedKeys: table.value.getSelection().keys.length\n\t};\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/native-instance/js/Demo.vue",
									"sha256": "0f49a6298a80ca80851c862bfcd30a947dc230bc03f7b6a5b2def9eb7074cfde",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"loadTree\"\n\t\t\t:query=\"{}\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:page-size=\"10\"\n\t\t\t:page-sizes=\"[10]\"\n\t\t\tdefault-expand-all\n\t\t>\n\t\t\t<AsamTableColumn type=\"selection\" width=\"54\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"树节点\" />\n\t\t</AsamDataTable>\n\t\t<p class=\"example-paragraph\">使用上表原生选择列勾选一个子节点，再读取当前树的半选父节点。</p>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readInstance\"\n\t\t\t>读取表格实例</AsamButton\n\t\t>\n\t\t<pre role=\"status\">{{ observation }}</pre>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDataTableNativeInstanceDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nconst table = ref();\nconst observation = ref({ halfSelected: [], tableId: '', columns: 0, selectedKeys: 0 });\nconst rows = [\n\t{\n\t\tid: 1,\n\t\tname: '研发组',\n\t\tchildren: [\n\t\t\t{ id: 11, name: '组件实现' },\n\t\t\t{ id: 12, name: '独立验证' }\n\t\t]\n\t}\n];\nconst buildPageParams = (_query, page) => page;\nconst loadTree = async () => ({ list: rows, total: rows.length });\nconst transform = (response) => response;\nfunction readInstance() {\n\tif (!table.value) return;\n\tobservation.value = {\n\t\thalfSelected: table.value.getHalfSelectionRows().map((row) => row.name),\n\t\ttableId: table.value.tableId,\n\t\tcolumns: table.value.columns.length,\n\t\tselectedKeys: table.value.getSelection().keys.length\n\t};\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-features",
					"title": "展示排序、筛选、展开与汇总",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/native-features/ts/Demo.vue",
									"sha256": "04172ac9f5a5806d2f8d9ecb6801e67ab28b5eec90983d8ba0ac1bb0309a0b6f",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.sort('amount', 'descending')\"\n\t\t\t>金额倒序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.sort('amount', 'ascending')\"\n\t\t\t>金额正序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearSort()\"\n\t\t\t>清除排序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearFilter()\"\n\t\t\t>清除筛选</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearFilter('status')\"\n\t\t\t>清除状态筛选</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearFilter(['status'])\"\n\t\t\t>按键数组清除筛选</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.toggleRowExpansion(loadedRows[0]!, true)\"\n\t\t>\n\t\t\t展开第一行\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.toggleRowExpansion(loadedRows[0]!, false)\"\n\t\t>\n\t\t\t收起第一行\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.setCurrentRow(loadedRows[1]!)\"\n\t\t\t>高亮第二行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.setCurrentRow()\"\n\t\t\t>清除当前行</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.toggleRowExpansion(loadedRows[0]!)\"\n\t\t>\n\t\t\t切换第一行展开\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"currentKey = 1\"\n\t\t\t>按键高亮第一行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"expandedKeys = [1]\"\n\t\t\t>按键展开第一行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"expandedKeys = []\"\n\t\t\t>按键收起全部行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"merged = !merged\"\n\t\t\t>切换状态合并</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"objectSpan = !objectSpan\"\n\t\t\t>切换对象跨度</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"defaultSpan = true\"\n\t\t\t>使用默认跨度</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"defaultSpan = false\"\n\t\t\t>恢复合并跨度</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"constantClass = !constantClass\"\n\t\t\t>切换字符串行样式</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"renderVNode = !renderVNode\"\n\t\t\t>切换 VNode 回调</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showSummary = !showSummary\"\n\t\t\t>切换汇总显示</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = '310px';\n\t\t\t\tmaxHeight = '310px';\n\t\t\t\"\n\t\t>\n\t\t\t使用字符串高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = undefined;\n\t\t\t\tmaxHeight = '150px';\n\t\t\t\"\n\t\t>\n\t\t\t使用字符串最大高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = undefined;\n\t\t\t\tmaxHeight = 150;\n\t\t\t\"\n\t\t>\n\t\t\t使用最大高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = 310;\n\t\t\t\tmaxHeight = 310;\n\t\t\t\"\n\t\t>\n\t\t\t恢复固定高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tlayout = layout === 'fixed' ? 'auto' : 'fixed';\n\t\t\t\tmaxHeight = layout === 'auto' ? undefined : 310;\n\t\t\t\"\n\t\t>\n\t\t\t切换表格布局\n\t\t</AsamButton>\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"{}\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:current-row-key=\"currentKey\"\n\t\t\t:expand-row-keys=\"expandedKeys\"\n\t\t\t:page-size=\"10\"\n\t\t\t:page-sizes=\"[10]\"\n\t\t\t:pagination=\"{ layout: 'total' }\"\n\t\t\t:summary-method=\"summary\"\n\t\t\t:span-method=\"span\"\n\t\t\t:row-class-name=\"constantClass ? 'native-constant-row' : rowClass\"\n\t\t\t:tooltip-formatter=\"tooltip\"\n\t\t\t:height=\"height\"\n\t\t\t:max-height=\"maxHeight\"\n\t\t\t:table-layout=\"layout\"\n\t\t\t:show-summary=\"showSummary\"\n\t\t\tshow-overflow-tooltip\n\t\t\thighlight-current-row\n\t\t\tpreserve-expanded-content\n\t\t\tborder\n\t\t\tstripe\n\t\t\t@sort-change=\"sortEvents++\"\n\t\t\t@success=\"loadedRows = $event.list\"\n\t\t\t@filter-change=\"filters = $event\"\n\t\t\t@expand-change=\"expanded = $event.id\"\n\t\t\t@current-change=\"current = $event?.id ?? null\"\n\t\t>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn type=\"expand\" width=\"48\">\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<p class=\"example-paragraph\" :data-expanded-id=\"row.id\">详情：{{ row.note }}</p>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamTableColumn\n\t\t\t\ttype=\"index\"\n\t\t\t\tlabel=\"序号\"\n\t\t\t\t:index=\"index\"\n\t\t\t\twidth=\"70\"\n\t\t\t\tfixed\n\t\t\t/>\n\t\t\t<AsamTableColumn label=\"成员资料\">\n\t\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t\t<AsamTableColumn prop=\"name\" width=\"140\" fixed>\n\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t<template #header>\n\t\t\t\t\t\t<span data-testid=\"native-custom-header\">成员姓名</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t\t<strong :data-member-id=\"row.id\">{{ row.name }}</strong>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamTableColumn>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamTableColumn\n\t\t\t\t\tprop=\"amount\"\n\t\t\t\t\tlabel=\"金额\"\n\t\t\t\t\tsortable\n\t\t\t\t\twidth=\"120\"\n\t\t\t\t/>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"status\"\n\t\t\t\tlabel=\"状态\"\n\t\t\t\tcolumn-key=\"status\"\n\t\t\t\t:filters=\"statusFilters\"\n\t\t\t\t:filter-method=\"filterStatus\"\n\t\t\t\twidth=\"120\"\n\t\t\t/>\n\t\t\t<AsamTableColumn prop=\"note\" label=\"备注\" width=\"200\" />\n\t\t</AsamDataTable>\n\t\t<pre data-testid=\"native-table-events\">{{\n\t\t\tJSON.stringify({ sortEvents, filters, expanded, current, merged, pageCalls, layout })\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDataTableNativeFeaturesDemo' });\nimport { h, ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamDataTableExpose, AsamPage, AsamPageRequest, AsamTableProps } from '@asam-ui/ui';\n\ninterface Row {\n\tid: number;\n\tname: string;\n\tamount: number;\n\tstatus: string;\n\tnote: string;\n}\nconst rows: Row[] = [\n\t{\n\t\tid: 1,\n\t\tname: '林一',\n\t\tamount: 10,\n\t\tstatus: '准备',\n\t\tnote: '本地演示备注用于显示完整的原生溢出提示内容。'\n\t},\n\t{ id: 2, name: '陈二', amount: 20, status: '准备', note: '第二行备注' },\n\t{ id: 3, name: '许三', amount: 30, status: '进行', note: '第三行备注' }\n];\nconst table = ref<AsamDataTableExpose<Row>>();\nconst loadedRows = ref<readonly Row[]>([]);\nconst currentKey = ref<string | number>();\nconst expandedKeys = ref<(string | number)[]>([]);\nconst sortEvents = ref(0);\nconst pageCalls = ref(0);\nconst filters = ref<Record<string, string[]>>({});\nconst expanded = ref<number | null>(null);\nconst current = ref<number | null>(null);\nconst merged = ref(false);\nconst height = ref<string | number | undefined>(310);\nconst maxHeight = ref<string | number>();\nconst layout = ref<'fixed' | 'auto'>('fixed');\nconst objectSpan = ref(false);\nconst defaultSpan = ref(false);\nconst constantClass = ref(false);\nconst renderVNode = ref(false);\nconst showSummary = ref(true);\nconst statusFilters = [\n\t{ text: '准备', value: '准备' },\n\t{ text: '进行', value: '进行' }\n];\nconst buildPageParams = (_query: object, page: AsamPageRequest) => page;\nconst api = async (): Promise<AsamPage<Row>> => {\n\tpageCalls.value++;\n\treturn { list: rows, total: rows.length };\n};\nconst transform = (page: AsamPage<Row>) => page;\nconst index = (at: number) => at + 101;\nconst filterStatus = (value: string, row: Row) => row.status === value;\nconst summary: NonNullable<AsamTableProps<Row>['summaryMethod']> = ({ columns, data }) =>\n\tcolumns.map((column, at) =>\n\t\tat === 0\n\t\t\t? renderVNode.value\n\t\t\t\t? h('strong', { 'data-testid': 'summary-vnode-label' }, '合计')\n\t\t\t\t: '合计'\n\t\t\t: column.property === 'amount'\n\t\t\t\t? renderVNode.value\n\t\t\t\t\t? h(\n\t\t\t\t\t\t\t'span',\n\t\t\t\t\t\t\t{ 'data-testid': 'summary-vnode-total' },\n\t\t\t\t\t\t\tString(data.reduce((total, row) => total + row.amount, 0))\n\t\t\t\t\t\t)\n\t\t\t\t\t: String(data.reduce((total, row) => total + row.amount, 0))\n\t\t\t\t: ''\n\t);\nconst span: NonNullable<AsamTableProps<Row>['spanMethod']> = ({ row, column }) => {\n\tif (defaultSpan.value) return undefined;\n\tconst rowspan =\n\t\t!merged.value || column.property !== 'status' ? 1 : row.id === 1 ? 2 : row.id === 2 ? 0 : 1;\n\tconst colspan = rowspan === 0 ? 0 : 1;\n\treturn objectSpan.value ? { rowspan, colspan } : [rowspan, colspan];\n};\nconst rowClass: NonNullable<AsamTableProps<Row>['rowClassName']> = ({ row }) =>\n\trow.id === 3 ? 'native-status-row' : '';\nconst tooltip: NonNullable<AsamTableProps<Row>['tooltipFormatter']> = ({ row }) =>\n\trenderVNode.value\n\t\t? h('strong', { 'data-testid': 'tooltip-vnode-content' }, `${row.name}：${row.note}`)\n\t\t: `${row.name}：${row.note}`;\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/native-features/js/Demo.vue",
									"sha256": "9941d7e933b1bf292257e36d68399684126628e105d9191a86527b7a2d1f1a55",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.sort('amount', 'descending')\"\n\t\t\t>金额倒序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.sort('amount', 'ascending')\"\n\t\t\t>金额正序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearSort()\"\n\t\t\t>清除排序</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearFilter()\"\n\t\t\t>清除筛选</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearFilter('status')\"\n\t\t\t>清除状态筛选</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.clearFilter(['status'])\"\n\t\t\t>按键数组清除筛选</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.toggleRowExpansion(loadedRows[0], true)\"\n\t\t>\n\t\t\t展开第一行\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.toggleRowExpansion(loadedRows[0], false)\"\n\t\t>\n\t\t\t收起第一行\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.setCurrentRow(loadedRows[1])\"\n\t\t\t>高亮第二行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"table?.setCurrentRow()\"\n\t\t\t>清除当前行</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"table?.toggleRowExpansion(loadedRows[0])\"\n\t\t>\n\t\t\t切换第一行展开\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"currentKey = 1\"\n\t\t\t>按键高亮第一行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"expandedKeys = [1]\"\n\t\t\t>按键展开第一行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"expandedKeys = []\"\n\t\t\t>按键收起全部行</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"merged = !merged\"\n\t\t\t>切换状态合并</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"objectSpan = !objectSpan\"\n\t\t\t>切换对象跨度</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"defaultSpan = true\"\n\t\t\t>使用默认跨度</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"defaultSpan = false\"\n\t\t\t>恢复合并跨度</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"constantClass = !constantClass\"\n\t\t\t>切换字符串行样式</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"renderVNode = !renderVNode\"\n\t\t\t>切换 VNode 回调</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showSummary = !showSummary\"\n\t\t\t>切换汇总显示</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = '310px';\n\t\t\t\tmaxHeight = '310px';\n\t\t\t\"\n\t\t>\n\t\t\t使用字符串高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = undefined;\n\t\t\t\tmaxHeight = '150px';\n\t\t\t\"\n\t\t>\n\t\t\t使用字符串最大高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = undefined;\n\t\t\t\tmaxHeight = 150;\n\t\t\t\"\n\t\t>\n\t\t\t使用最大高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\theight = 310;\n\t\t\t\tmaxHeight = 310;\n\t\t\t\"\n\t\t>\n\t\t\t恢复固定高度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tlayout = layout === 'fixed' ? 'auto' : 'fixed';\n\t\t\t\tmaxHeight = layout === 'auto' ? undefined : 310;\n\t\t\t\"\n\t\t>\n\t\t\t切换表格布局\n\t\t</AsamButton>\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"{}\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\t:current-row-key=\"currentKey\"\n\t\t\t:expand-row-keys=\"expandedKeys\"\n\t\t\t:page-size=\"10\"\n\t\t\t:page-sizes=\"[10]\"\n\t\t\t:pagination=\"{ layout: 'total' }\"\n\t\t\t:summary-method=\"summary\"\n\t\t\t:span-method=\"span\"\n\t\t\t:row-class-name=\"constantClass ? 'native-constant-row' : rowClass\"\n\t\t\t:tooltip-formatter=\"tooltip\"\n\t\t\t:height=\"height\"\n\t\t\t:max-height=\"maxHeight\"\n\t\t\t:table-layout=\"layout\"\n\t\t\t:show-summary=\"showSummary\"\n\t\t\tshow-overflow-tooltip\n\t\t\thighlight-current-row\n\t\t\tpreserve-expanded-content\n\t\t\tborder\n\t\t\tstripe\n\t\t\t@sort-change=\"sortEvents++\"\n\t\t\t@success=\"loadedRows = $event.list\"\n\t\t\t@filter-change=\"filters = $event\"\n\t\t\t@expand-change=\"expanded = $event.id\"\n\t\t\t@current-change=\"current = $event?.id ?? null\"\n\t\t>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn type=\"expand\" width=\"48\">\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<p class=\"example-paragraph\" :data-expanded-id=\"row.id\">详情：{{ row.note }}</p>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamTableColumn\n\t\t\t\ttype=\"index\"\n\t\t\t\tlabel=\"序号\"\n\t\t\t\t:index=\"index\"\n\t\t\t\twidth=\"70\"\n\t\t\t\tfixed\n\t\t\t/>\n\t\t\t<AsamTableColumn label=\"成员资料\">\n\t\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t\t<AsamTableColumn prop=\"name\" width=\"140\" fixed>\n\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t<template #header>\n\t\t\t\t\t\t<span data-testid=\"native-custom-header\">成员姓名</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t\t<strong :data-member-id=\"row.id\">{{ row.name }}</strong>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamTableColumn>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamTableColumn\n\t\t\t\t\tprop=\"amount\"\n\t\t\t\t\tlabel=\"金额\"\n\t\t\t\t\tsortable\n\t\t\t\t\twidth=\"120\"\n\t\t\t\t/>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"status\"\n\t\t\t\tlabel=\"状态\"\n\t\t\t\tcolumn-key=\"status\"\n\t\t\t\t:filters=\"statusFilters\"\n\t\t\t\t:filter-method=\"filterStatus\"\n\t\t\t\twidth=\"120\"\n\t\t\t/>\n\t\t\t<AsamTableColumn prop=\"note\" label=\"备注\" width=\"200\" />\n\t\t</AsamDataTable>\n\t\t<pre data-testid=\"native-table-events\">{{\n\t\t\tJSON.stringify({ sortEvents, filters, expanded, current, merged, pageCalls, layout })\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDataTableNativeFeaturesDemo' });\nimport { h, ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nconst rows = [\n\t{\n\t\tid: 1,\n\t\tname: '林一',\n\t\tamount: 10,\n\t\tstatus: '准备',\n\t\tnote: '本地演示备注用于显示完整的原生溢出提示内容。'\n\t},\n\t{ id: 2, name: '陈二', amount: 20, status: '准备', note: '第二行备注' },\n\t{ id: 3, name: '许三', amount: 30, status: '进行', note: '第三行备注' }\n];\nconst table = ref();\nconst loadedRows = ref([]);\nconst currentKey = ref();\nconst expandedKeys = ref([]);\nconst sortEvents = ref(0);\nconst pageCalls = ref(0);\nconst filters = ref({});\nconst expanded = ref(null);\nconst current = ref(null);\nconst merged = ref(false);\nconst height = ref(310);\nconst maxHeight = ref();\nconst layout = ref('fixed');\nconst objectSpan = ref(false);\nconst defaultSpan = ref(false);\nconst constantClass = ref(false);\nconst renderVNode = ref(false);\nconst showSummary = ref(true);\nconst statusFilters = [\n\t{ text: '准备', value: '准备' },\n\t{ text: '进行', value: '进行' }\n];\nconst buildPageParams = (_query, page) => page;\nconst api = async () => {\n\tpageCalls.value++;\n\treturn { list: rows, total: rows.length };\n};\nconst transform = (page) => page;\nconst index = (at) => at + 101;\nconst filterStatus = (value, row) => row.status === value;\nconst summary = ({ columns, data }) =>\n\tcolumns.map((column, at) =>\n\t\tat === 0\n\t\t\t? renderVNode.value\n\t\t\t\t? h('strong', { 'data-testid': 'summary-vnode-label' }, '合计')\n\t\t\t\t: '合计'\n\t\t\t: column.property === 'amount'\n\t\t\t\t? renderVNode.value\n\t\t\t\t\t? h(\n\t\t\t\t\t\t\t'span',\n\t\t\t\t\t\t\t{ 'data-testid': 'summary-vnode-total' },\n\t\t\t\t\t\t\tString(data.reduce((total, row) => total + row.amount, 0))\n\t\t\t\t\t\t)\n\t\t\t\t\t: String(data.reduce((total, row) => total + row.amount, 0))\n\t\t\t\t: ''\n\t);\nconst span = ({ row, column }) => {\n\tif (defaultSpan.value) return undefined;\n\tconst rowspan =\n\t\t!merged.value || column.property !== 'status' ? 1 : row.id === 1 ? 2 : row.id === 2 ? 0 : 1;\n\tconst colspan = rowspan === 0 ? 0 : 1;\n\treturn objectSpan.value ? { rowspan, colspan } : [rowspan, colspan];\n};\nconst rowClass = ({ row }) => (row.id === 3 ? 'native-status-row' : '');\nconst tooltip = ({ row }) =>\n\trenderVNode.value\n\t\t? h('strong', { 'data-testid': 'tooltip-vnode-content' }, `${row.name}：${row.note}`)\n\t\t: `${row.name}：${row.note}`;\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "lazy-tree-keys",
					"title": "原生懒加载与数值/字符串行键",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lazy-tree-keys/ts/Demo.vue",
									"sha256": "4307eb82d583c9eb7bc7e46f5328d93490245a5f6531cc56902c45f7f1e403ef",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"currentKey = 1\"\n\t\t\t>高亮数字键</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"currentKey = '1'\"\n\t\t\t>高亮字符串键</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"replace(1)\"\n\t\t\t>替换数字子节点</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"replace('1')\"\n\t\t\t>替换字符串子节点</AsamButton\n\t\t>\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"{}\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\tv-bind=\"currentKey === undefined ? {} : { currentRowKey: currentKey }\"\n\t\t\t:load=\"load\"\n\t\t\t:page-size=\"10\"\n\t\t\t:page-sizes=\"[10]\"\n\t\t\thighlight-current-row\n\t\t\tlazy\n\t\t>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"父子节点\">\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span :data-tree-key=\"`${typeof row.id}:${row.id}`\">{{\n\t\t\t\t\t\trow.name\n\t\t\t\t\t}}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamDataTable>\n\t\t<pre data-testid=\"lazy-key-observation\">{{\n\t\t\tJSON.stringify({ pageCalls, loads, currentKey })\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDataTableLazyTreeKeysDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamDataTableExpose, AsamPage, AsamPageRequest, AsamTableProps } from '@asam-ui/ui';\ninterface Row {\n\tid: string | number;\n\tname: string;\n\thasChildren?: boolean;\n}\nconst table = ref<AsamDataTableExpose<Row>>();\nconst currentKey = ref<string | number>();\nconst pageCalls = ref(0);\nconst loads = ref<(string | number)[]>([]);\nconst api = async (): Promise<AsamPage<Row>> => {\n\tpageCalls.value++;\n\treturn {\n\t\tlist: [\n\t\t\t{ id: 1, name: '数字父节点', hasChildren: true },\n\t\t\t{ id: '1', name: '字符串父节点', hasChildren: true }\n\t\t],\n\t\ttotal: 2\n\t};\n};\nconst buildPageParams = (_query: object, page: AsamPageRequest) => page;\nconst transform = (page: AsamPage<Row>) => page;\nconst load: NonNullable<AsamTableProps<Row>['load']> = (row, _treeNode, resolve) => {\n\tloads.value.push(row.id);\n\tresolve([\n\t\t{\n\t\t\tid: typeof row.id === 'number' ? 11 : '11',\n\t\t\tname: typeof row.id === 'number' ? '数字原子节点' : '字符串原子节点'\n\t\t}\n\t]);\n};\nfunction replace(key: string | number): void {\n\ttable.value?.updateKeyChildren(key, [\n\t\t{\n\t\t\tid: typeof key === 'number' ? 12 : '12',\n\t\t\tname: typeof key === 'number' ? '数字新子节点' : '字符串新子节点'\n\t\t}\n\t]);\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/lazy-tree-keys/js/Demo.vue",
									"sha256": "06e0cb5f0de992ca774c6daed612f6f7d807bfab3a5fb9a22a6a4c0fc841bbda",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"currentKey = 1\"\n\t\t\t>高亮数字键</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"currentKey = '1'\"\n\t\t\t>高亮字符串键</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"replace(1)\"\n\t\t\t>替换数字子节点</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"replace('1')\"\n\t\t\t>替换字符串子节点</AsamButton\n\t\t>\n\t\t<AsamDataTable\n\t\t\tref=\"table\"\n\t\t\t:api=\"api\"\n\t\t\t:query=\"{}\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t\tv-bind=\"currentKey === undefined ? {} : { currentRowKey: currentKey }\"\n\t\t\t:load=\"load\"\n\t\t\t:page-size=\"10\"\n\t\t\t:page-sizes=\"[10]\"\n\t\t\thighlight-current-row\n\t\t\tlazy\n\t\t>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"父子节点\">\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span :data-tree-key=\"`${typeof row.id}:${row.id}`\">{{\n\t\t\t\t\t\trow.name\n\t\t\t\t\t}}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamDataTable>\n\t\t<pre data-testid=\"lazy-key-observation\">{{\n\t\t\tJSON.stringify({ pageCalls, loads, currentKey })\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDataTableLazyTreeKeysDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nconst table = ref();\nconst currentKey = ref();\nconst pageCalls = ref(0);\nconst loads = ref([]);\nconst api = async () => {\n\tpageCalls.value++;\n\treturn {\n\t\tlist: [\n\t\t\t{ id: 1, name: '数字父节点', hasChildren: true },\n\t\t\t{ id: '1', name: '字符串父节点', hasChildren: true }\n\t\t],\n\t\ttotal: 2\n\t};\n};\nconst buildPageParams = (_query, page) => page;\nconst transform = (page) => page;\nconst load = (row, _treeNode, resolve) => {\n\tloads.value.push(row.id);\n\tresolve([\n\t\t{\n\t\t\tid: typeof row.id === 'number' ? 11 : '11',\n\t\t\tname: typeof row.id === 'number' ? '数字原子节点' : '字符串原子节点'\n\t\t}\n\t]);\n};\nfunction replace(key) {\n\ttable.value?.updateKeyChildren(key, [\n\t\t{\n\t\t\tid: typeof key === 'number' ? 12 : '12',\n\t\t\tname: typeof key === 'number' ? '数字新子节点' : '字符串新子节点'\n\t\t}\n\t]);\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/local-error/ts/Demo.vue",
									"sha256": "c71bd74266680fd1393aca44522acba8457ae51316c446f71e38f7b94383a734",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDataTableDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDataTable-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/local-error/ts/Child.vue",
									"sha256": "e5a15e2ddb0900e546537d506f07ef54c64251c05f84c5682b477f555a8f2906",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDataTable\n\t\t\tref=\"control\"\n\t\t\t:immediate=\"false\"\n\t\t\t:api=\"transport.api\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"label\" label=\"状态\" />\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDataTable>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDataTableChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamDataTableExpose, AsamDataTableSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\n\nconst control = ref<AsamDataTableExpose<Item>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst buildPageParams = () => ({});\nconst transform = (rows: readonly Item[]) => ({ list: rows, total: rows.length });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamDataTableSlots<Item>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDataTable/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/local-error/js/Demo.vue",
									"sha256": "be90217434a5b6faedc77d00f99d3404a80ace79d61ed7d77d1b327602fb0b2c",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDataTableDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDataTable-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDataTable/local-error/js/Child.vue",
									"sha256": "b9219d7d4cf9ef6614de2c0dbee8b5c0c3a8e5ad93e00d63eb21765091813cde",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDataTable\n\t\t\tref=\"control\"\n\t\t\t:immediate=\"false\"\n\t\t\t:api=\"transport.api\"\n\t\t\t:build-page-params=\"buildPageParams\"\n\t\t\t:transform=\"transform\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"label\" label=\"状态\" />\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDataTable>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDataTableChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDataTable, AsamTableColumn } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\n\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst buildPageParams = () => ({});\nconst transform = (rows) => ({ list: rows, total: rows.length });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDataTable/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamForm",
			"documentation": "/component-AsamForm.html",
			"demos": [
				{
					"id": "scalar-date-time",
					"title": "表单标量日期、时间与空值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/scalar-date-time/ts/Demo.vue",
									"sha256": "3874c2449aa6f289dab1b191254fef08712d201548ebd98de4a634e9a306252b",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamForm\n\t\tref=\"form\"\n\t\tv-model=\"model\"\n\t\t:schema=\"schema\"\n\t\t@reset=\"resetModel = $event\"\n\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields()\"\n\t\t\t>重置日期字段</AsamButton\n\t\t>\n\t\t<pre data-testid=\"scalar-date-model\">{{ JSON.stringify(model) }}</pre>\n\t\t<pre>{{ JSON.stringify(resetModel) }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamForm, asamFormControls, createAsamSchema } from '@asam-ui/ui';\nimport type { AsamFormExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFormScalarDateTimeDemo' });\ninterface Model {\n\tdate: string | null;\n\ttime: string | null;\n\ttimeSelect: string | null;\n}\nconst model = ref<Model>({ date: '2026-10-08', time: '09:30:00', timeSelect: '09:30' });\nconst resetModel = ref<Model>();\nconst form = ref<AsamFormExpose<Model>>();\nconst builder = createAsamSchema<Model>()(asamFormControls);\nconst schema = [\n\tbuilder.field({\n\t\tfield: 'date',\n\t\tcomponent: 'DatePicker',\n\t\tlabel: '日期',\n\t\tcomponentProps: { clearable: true, placeholder: '表单日期' }\n\t}),\n\tbuilder.field({\n\t\tfield: 'time',\n\t\tcomponent: 'TimePicker',\n\t\tlabel: '时间',\n\t\tcomponentProps: { clearable: true, placeholder: '表单时间' }\n\t}),\n\tbuilder.field({\n\t\tfield: 'timeSelect',\n\t\tcomponent: 'TimeSelect',\n\t\tlabel: '时间选项',\n\t\tcomponentProps: { clearable: true, placeholder: '表单时间选项' }\n\t})\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/scalar-date-time/js/Demo.vue",
									"sha256": "4def12f1b407ef43332a3f4509b776d2e1c3133cb24d3066194fe8a0c28c28cc",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamForm\n\t\tref=\"form\"\n\t\tv-model=\"model\"\n\t\t:schema=\"schema\"\n\t\t@reset=\"resetModel = $event\"\n\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields()\"\n\t\t\t>重置日期字段</AsamButton\n\t\t>\n\t\t<pre data-testid=\"scalar-date-model\">{{ JSON.stringify(model) }}</pre>\n\t\t<pre>{{ JSON.stringify(resetModel) }}</pre>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamForm, asamFormControls, createAsamSchema } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFormScalarDateTimeDemo' });\nconst model = ref({ date: '2026-10-08', time: '09:30:00', timeSelect: '09:30' });\nconst resetModel = ref();\nconst form = ref();\nconst builder = createAsamSchema()(asamFormControls);\nconst schema = [\n\tbuilder.field({\n\t\tfield: 'date',\n\t\tcomponent: 'DatePicker',\n\t\tlabel: '日期',\n\t\tcomponentProps: { clearable: true, placeholder: '表单日期' }\n\t}),\n\tbuilder.field({\n\t\tfield: 'time',\n\t\tcomponent: 'TimePicker',\n\t\tlabel: '时间',\n\t\tcomponentProps: { clearable: true, placeholder: '表单时间' }\n\t}),\n\tbuilder.field({\n\t\tfield: 'timeSelect',\n\t\tcomponent: 'TimeSelect',\n\t\tlabel: '时间选项',\n\t\tcomponentProps: { clearable: true, placeholder: '表单时间选项' }\n\t})\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "类型化 Schema 与插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/basic/ts/Demo.vue",
									"sha256": "c82f7e18ff852d211179cd74b0b2b3e94d45e3bd55ef9e3e9358d6ebd3176755",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamForm v-model=\"model\" :schema=\"schema\" @search=\"submitted = $event\">\n\t\t\t<template #field-keyword=\"{ value, update }\">\n\t\t\t\t<AsamInput\n\t\t\t\t\t:model-value=\"value\"\n\t\t\t\t\tplaceholder=\"输入关键词\"\n\t\t\t\t\t@update:model-value=\"update(String($event))\"\n\t\t\t\t/>\n\t\t\t</template>\n\t\t\t<template #actions=\"{ search, reset }\">\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"search\">查询</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre>{{ model }}</pre>\n\t\t<pre>{{ submitted }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamForm, AsamInput, asamFormControls, createAsamSchema } from '@asam-ui/ui';\ninterface Model {\n\tkeyword: string;\n}\n\nconst model = ref<Model>({ keyword: '' });\nconst submitted = ref<Model>({ keyword: '' });\nconst builder = createAsamSchema<Model>()(asamFormControls);\nconst schema = [\n\tbuilder.field({ field: 'keyword', component: 'Input', label: '关键词', defaultValue: () => '' })\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/basic/js/Demo.vue",
									"sha256": "5036537b94a973cd41c951f37f49db2abfd61544d2b6b9892c07f9126f52243f",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamForm v-model=\"model\" :schema=\"schema\" @search=\"submitted = $event\">\n\t\t\t<template #field-keyword=\"{ value, update }\">\n\t\t\t\t<AsamInput\n\t\t\t\t\t:model-value=\"value\"\n\t\t\t\t\tplaceholder=\"输入关键词\"\n\t\t\t\t\t@update:model-value=\"update(String($event))\"\n\t\t\t\t/>\n\t\t\t</template>\n\t\t\t<template #actions=\"{ search, reset }\">\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"search\">查询</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre>{{ model }}</pre>\n\t\t<pre>{{ submitted }}</pre>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamForm, AsamInput, asamFormControls, createAsamSchema } from '@asam-ui/ui';\n\nconst model = ref({ keyword: '' });\nconst submitted = ref({ keyword: '' });\nconst builder = createAsamSchema()(asamFormControls);\nconst schema = [\n\tbuilder.field({ field: 'keyword', component: 'Input', label: '关键词', defaultValue: () => '' })\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dependencies",
					"title": "依赖来源、隐藏清除与校验重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/dependencies/ts/Demo.vue",
									"sha256": "056546d7c86b39940e1ecba5d5486ba381ee01a20cae5f6ae8c8c6350cc3a5c8",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<fieldset class=\"demo-spacing-1\">\n\t\t\t<legend>字段依赖策略</legend>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"retainDependency\">保留依赖值</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"retainHidden\">保留隐藏值</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"hideNote\">隐藏备注开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disableNote\">禁用备注开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"defaultMemo\">非空默认备注</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"extraRule\">追加长度规则</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanHidden = true\"\n\t\t\t\t>布尔隐藏策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanHidden = false\"\n\t\t\t\t>函数隐藏策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanDisabled = true\"\n\t\t\t\t>布尔禁用策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanDisabled = false\"\n\t\t\t\t>函数禁用策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fixedSourceMode = true\"\n\t\t\t\t>固定成员来源</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fixedSourceMode = false\"\n\t\t\t\t>依赖成员来源</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ region: 'east' })\"\n\t\t\t>\n\t\t\t\t切换东区\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"resetSchemaDefaults\"\n\t\t\t\t>使用schema默认值重置</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ region: '' })\"\n\t\t\t>\n\t\t\t\t清空地区来源\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"requiredMember\">成员必填</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"extraMemberRule\">成员枚举规则</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"hideMember\">隐藏成员开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disableMember\">禁用成员开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"retainMemberHide\">保留隐藏成员</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"defaultMember\">非空默认成员</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberHidden = true\"\n\t\t\t\t>成员布尔隐藏</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberHidden = false\"\n\t\t\t\t>成员函数隐藏</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberDisabled = true\"\n\t\t\t\t>成员布尔禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberDisabled = false\"\n\t\t\t\t>成员函数禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ member: null })\"\n\t\t\t>\n\t\t\t\t清空成员值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ member: 'west-alpha' })\"\n\t\t\t>\n\t\t\t\t设置西区成员值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ region: 'hide-member' })\"\n\t\t\t>\n\t\t\t\t成员隐藏地区\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"alternateMemberPresentation\">成员显示配置</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspectMember\"\n\t\t\t\t>读取成员配置</AsamButton\n\t\t\t>\n\t\t</fieldset>\n\t\t<AsamForm\n\t\t\tref=\"form\"\n\t\t\tv-model=\"model\"\n\t\t\t:schema=\"schema\"\n\t\t\t:inline=\"false\"\n\t\t\tsize=\"default\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t\t@search=\"submitted = $event\"\n\t\t\t@reset=\"resetCount++\"\n\t\t\t@validate=\"validateCount++\"\n\t\t>\n\t\t\t<template #actions=\"{ search, reset }\">\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"search\"\n\t\t\t\t\t>提交模型</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validate\">执行校验</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.clearValidate()\"\n\t\t\t>清除校验</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"form?.setFieldsValue({ region: 'hide' })\"\n\t\t\t>隐藏备注</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"form?.setFieldsValue({ region: 'west' })\"\n\t\t\t>切换西区</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"resetInitial\"\n\t\t\t>设置初始值并重置</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取公开字段</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t校验：{{ validation }}；校验事件：{{ validateCount }}；重置：{{ resetCount }}\n\t\t</p>\n\t\t<pre data-testid=\"form-model\">{{ JSON.stringify(model) }}</pre>\n\t\t<pre data-testid=\"form-submitted\">{{ JSON.stringify(submitted) }}</pre>\n\t\t<pre data-testid=\"form-fields\">{{ JSON.stringify(fields) }}</pre>\n\t\t<pre data-testid=\"form-member-context\">{{ JSON.stringify(memberContext) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormDependenciesDemo' });\nimport { computed, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamForm,\n\tasamFormControls,\n\tcreateAsamSchema,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type { AsamFormExpose, AsamValue, AsamOptionsSource } from '@asam-ui/ui';\ninterface Model {\n\tregion: string;\n\tnote: string;\n\tmember: AsamValue | null;\n}\ninterface Member {\n\tlabel: string;\n\tvalue: string;\n}\nconst model = ref<Model>({ region: 'east', note: '', member: null });\nconst submitted = ref<Model | null>(null);\nconst form = ref<AsamFormExpose<Model>>();\nconst retainDependency = ref(false);\nconst retainHidden = ref(false);\nconst hideNote = ref(false);\nconst disableNote = ref(false);\nconst booleanHidden = ref(false);\nconst booleanDisabled = ref(true);\nconst fixedSourceMode = ref(false);\nconst defaultMemo = ref(false);\nconst extraRule = ref(false);\nconst alternateMemberPresentation = ref(false);\nconst memberContext = ref({\n\tpresent: false,\n\tpropMatches: false,\n\tlistContainsField: false,\n\tcount: 0\n});\nconst requiredMember = ref(false);\nconst extraMemberRule = ref(false);\nconst hideMember = ref(false);\nconst disableMember = ref(false);\nconst retainMemberHide = ref(true);\nconst defaultMember = ref(false);\nconst booleanMemberHidden = ref(false);\nconst booleanMemberDisabled = ref(true);\nconst validation = ref('未执行');\nconst validateCount = ref(0);\nconst resetCount = ref(0);\nconst fields = ref<{ count: number; hasRegion: boolean }>({ count: 0, hasRegion: false });\nconst sources = new Map<string, AsamOptionsSource<string, Member, 'api'>>();\nfunction sourceFor(region: string) {\n\tif (!region) return undefined;\n\treturn ensureSource(region);\n}\nfunction ensureSource(region: string) {\n\tlet source = sources.get(region);\n\tif (!source) {\n\t\tsource = defineAsamOptions<string, Member>().api({\n\t\t\tapi: async (_params: undefined, context) => {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn [{ label: region + ' Alpha', value: region + '-alpha' }];\n\t\t\t},\n\t\t\tparams: undefined,\n\t\t\ttransform: (rows) => rows,\n\t\t\tfieldNames: { label: 'label', value: 'value' }\n\t\t});\n\t\tsources.set(region, source);\n\t}\n\treturn source;\n}\nconst builder = createAsamSchema<Model>()(asamFormControls);\nconst schema = computed(() => {\n\tconst hidden = hideNote.value;\n\tconst disabled = disableNote.value;\n\tconst memo = defaultMemo.value;\n\tconst memberHidden = hideMember.value;\n\tconst memberDisabled = disableMember.value;\n\tconst memberDefault = defaultMember.value;\n\tconst memberLabel = alternateMemberPresentation.value ? '地区成员' : '成员';\n\tconst memberPlaceholder = alternateMemberPresentation.value ? '请选择地区成员' : '选择地区成员';\n\n\treturn [\n\t\tbuilder.field({\n\t\t\tfield: 'region',\n\t\t\tcomponent: 'Input',\n\t\t\tlabel: '地区',\n\t\t\trequired: true,\n\t\t\tdefaultValue: () => 'east'\n\t\t}),\n\t\tbuilder.field({\n\t\t\tfield: 'note',\n\t\t\tcomponent: 'Input',\n\t\t\tlabel: '备注',\n\t\t\trequired: true,\n\t\t\trules: extraRule.value ? [{ min: 2, message: '至少两个字符', trigger: 'blur' }] : [],\n\t\t\tdependsOn: ['region'],\n\t\t\thidden: booleanHidden.value ? hidden : (current) => hidden || current.region === 'hide',\n\t\t\tdisabled: booleanDisabled.value\n\t\t\t\t? disabled\n\t\t\t\t: (current) => disabled && current.region === 'west',\n\t\t\tonHide: retainHidden.value ? 'retain' : 'clear',\n\t\t\tdefaultValue: () => (memo ? '工厂默认备注' : '')\n\t\t}),\n\t\tfixedSourceMode.value\n\t\t\t? builder.field({\n\t\t\t\t\tfield: 'member',\n\t\t\t\t\tcomponent: 'RemoteSelect',\n\t\t\t\t\tlabel: memberLabel,\n\t\t\t\t\trequired: requiredMember.value,\n\t\t\t\t\trules: extraMemberRule.value\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'enum',\n\t\t\t\t\t\t\t\t\tenum: ['east-alpha'],\n\t\t\t\t\t\t\t\t\tmessage: '仅东区成员',\n\t\t\t\t\t\t\t\t\ttrigger: 'change'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: [],\n\t\t\t\t\thidden: booleanMemberHidden.value\n\t\t\t\t\t\t? memberHidden\n\t\t\t\t\t\t: (current) => memberHidden || current.region === 'hide-member',\n\t\t\t\t\tdisabled: booleanMemberDisabled.value\n\t\t\t\t\t\t? memberDisabled\n\t\t\t\t\t\t: (current) => memberDisabled && current.region === 'west',\n\t\t\t\t\tonHide: retainMemberHide.value ? 'retain' : 'clear',\n\t\t\t\t\tdependsOn: ['region'],\n\t\t\t\t\tdataSource: ensureSource('fixed'),\n\t\t\t\t\tonDependencyChange: retainDependency.value ? 'retain' : 'clear',\n\t\t\t\t\tcomponentProps: { teleported: false, placeholder: memberPlaceholder },\n\t\t\t\t\tdefaultValue: () => (memberDefault ? 'east-alpha' : null)\n\t\t\t\t})\n\t\t\t: builder.field({\n\t\t\t\t\tfield: 'member',\n\t\t\t\t\tcomponent: 'RemoteSelect',\n\t\t\t\t\tlabel: memberLabel,\n\t\t\t\t\trequired: requiredMember.value,\n\t\t\t\t\trules: extraMemberRule.value\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'enum',\n\t\t\t\t\t\t\t\t\tenum: ['east-alpha'],\n\t\t\t\t\t\t\t\t\tmessage: '仅东区成员',\n\t\t\t\t\t\t\t\t\ttrigger: 'change'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: [],\n\t\t\t\t\thidden: booleanMemberHidden.value\n\t\t\t\t\t\t? memberHidden\n\t\t\t\t\t\t: (current) => memberHidden || current.region === 'hide-member',\n\t\t\t\t\tdisabled: booleanMemberDisabled.value\n\t\t\t\t\t\t? memberDisabled\n\t\t\t\t\t\t: (current) => memberDisabled && current.region === 'west',\n\t\t\t\t\tonHide: retainMemberHide.value ? 'retain' : 'clear',\n\t\t\t\t\tdependsOn: ['region'],\n\t\t\t\t\tresolveDataSource: (current) => sourceFor(current.region),\n\t\t\t\t\tonDependencyChange: retainDependency.value ? 'retain' : 'clear',\n\t\t\t\t\tcomponentProps: { teleported: false, placeholder: memberPlaceholder },\n\t\t\t\t\tdefaultValue: () => (memberDefault ? 'east-alpha' : null)\n\t\t\t\t})\n\t];\n});\nasync function validate() {\n\ttry {\n\t\tvalidation.value = (await form.value?.validate()) ? '有效' : '无效';\n\t} catch {\n\t\tvalidation.value = '无效';\n\t}\n}\nfunction resetInitial() {\n\tform.value?.setInitialValues({ region: 'west', note: '初始备注', member: null });\n\tform.value?.resetFields();\n}\nfunction resetSchemaDefaults() {\n\tform.value?.setInitialValues({});\n\tform.value?.resetFields();\n}\nfunction inspectMember() {\n\tconst field = form.value?.getField('member');\n\tmemberContext.value = {\n\t\tpresent: !!field,\n\t\tpropMatches: field?.prop === 'member',\n\t\tlistContainsField: !!field && (form.value?.fields ?? []).includes(field),\n\t\tcount: form.value?.fields.length ?? 0\n\t};\n}\nfunction inspect() {\n\tfields.value = {\n\t\tcount: form.value?.fields.length ?? 0,\n\t\thasRegion: !!form.value?.getField('region')\n\t};\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/dependencies/js/Demo.vue",
									"sha256": "0055d9f3bf9c5097e1841421919e7c390fd24b04bddf95bd8d411f41c115aa3a",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<fieldset class=\"demo-spacing-1\">\n\t\t\t<legend>字段依赖策略</legend>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"retainDependency\">保留依赖值</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"retainHidden\">保留隐藏值</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"hideNote\">隐藏备注开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disableNote\">禁用备注开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"defaultMemo\">非空默认备注</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"extraRule\">追加长度规则</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanHidden = true\"\n\t\t\t\t>布尔隐藏策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanHidden = false\"\n\t\t\t\t>函数隐藏策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanDisabled = true\"\n\t\t\t\t>布尔禁用策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanDisabled = false\"\n\t\t\t\t>函数禁用策略</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fixedSourceMode = true\"\n\t\t\t\t>固定成员来源</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fixedSourceMode = false\"\n\t\t\t\t>依赖成员来源</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ region: 'east' })\"\n\t\t\t>\n\t\t\t\t切换东区\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"resetSchemaDefaults\"\n\t\t\t\t>使用schema默认值重置</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ region: '' })\"\n\t\t\t>\n\t\t\t\t清空地区来源\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"requiredMember\">成员必填</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"extraMemberRule\">成员枚举规则</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"hideMember\">隐藏成员开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"disableMember\">禁用成员开关</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"retainMemberHide\">保留隐藏成员</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"defaultMember\">非空默认成员</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberHidden = true\"\n\t\t\t\t>成员布尔隐藏</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberHidden = false\"\n\t\t\t\t>成员函数隐藏</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberDisabled = true\"\n\t\t\t\t>成员布尔禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"booleanMemberDisabled = false\"\n\t\t\t\t>成员函数禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ member: null })\"\n\t\t\t>\n\t\t\t\t清空成员值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ member: 'west-alpha' })\"\n\t\t\t>\n\t\t\t\t设置西区成员值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ region: 'hide-member' })\"\n\t\t\t>\n\t\t\t\t成员隐藏地区\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"alternateMemberPresentation\">成员显示配置</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspectMember\"\n\t\t\t\t>读取成员配置</AsamButton\n\t\t\t>\n\t\t</fieldset>\n\t\t<AsamForm\n\t\t\tref=\"form\"\n\t\t\tv-model=\"model\"\n\t\t\t:schema=\"schema\"\n\t\t\t:inline=\"false\"\n\t\t\tsize=\"default\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t\t@search=\"submitted = $event\"\n\t\t\t@reset=\"resetCount++\"\n\t\t\t@validate=\"validateCount++\"\n\t\t>\n\t\t\t<template #actions=\"{ search, reset }\">\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"search\"\n\t\t\t\t\t>提交模型</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validate\">执行校验</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.clearValidate()\"\n\t\t\t>清除校验</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"form?.setFieldsValue({ region: 'hide' })\"\n\t\t\t>隐藏备注</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"form?.setFieldsValue({ region: 'west' })\"\n\t\t\t>切换西区</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"resetInitial\"\n\t\t\t>设置初始值并重置</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取公开字段</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t校验：{{ validation }}；校验事件：{{ validateCount }}；重置：{{ resetCount }}\n\t\t</p>\n\t\t<pre data-testid=\"form-model\">{{ JSON.stringify(model) }}</pre>\n\t\t<pre data-testid=\"form-submitted\">{{ JSON.stringify(submitted) }}</pre>\n\t\t<pre data-testid=\"form-fields\">{{ JSON.stringify(fields) }}</pre>\n\t\t<pre data-testid=\"form-member-context\">{{ JSON.stringify(memberContext) }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamFormDependenciesDemo' });\nimport { computed, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamForm,\n\tasamFormControls,\n\tcreateAsamSchema,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst model = ref({ region: 'east', note: '', member: null });\nconst submitted = ref(null);\nconst form = ref();\nconst retainDependency = ref(false);\nconst retainHidden = ref(false);\nconst hideNote = ref(false);\nconst disableNote = ref(false);\nconst booleanHidden = ref(false);\nconst booleanDisabled = ref(true);\nconst fixedSourceMode = ref(false);\nconst defaultMemo = ref(false);\nconst extraRule = ref(false);\nconst alternateMemberPresentation = ref(false);\nconst memberContext = ref({\n\tpresent: false,\n\tpropMatches: false,\n\tlistContainsField: false,\n\tcount: 0\n});\nconst requiredMember = ref(false);\nconst extraMemberRule = ref(false);\nconst hideMember = ref(false);\nconst disableMember = ref(false);\nconst retainMemberHide = ref(true);\nconst defaultMember = ref(false);\nconst booleanMemberHidden = ref(false);\nconst booleanMemberDisabled = ref(true);\nconst validation = ref('未执行');\nconst validateCount = ref(0);\nconst resetCount = ref(0);\nconst fields = ref({ count: 0, hasRegion: false });\nconst sources = new Map();\nfunction sourceFor(region) {\n\tif (!region) return undefined;\n\treturn ensureSource(region);\n}\nfunction ensureSource(region) {\n\tlet source = sources.get(region);\n\tif (!source) {\n\t\tsource = defineAsamOptions().api({\n\t\t\tapi: async (_params, context) => {\n\t\t\t\tawait new Promise((done) => setTimeout(done, 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn [{ label: region + ' Alpha', value: region + '-alpha' }];\n\t\t\t},\n\t\t\tparams: undefined,\n\t\t\ttransform: (rows) => rows,\n\t\t\tfieldNames: { label: 'label', value: 'value' }\n\t\t});\n\t\tsources.set(region, source);\n\t}\n\treturn source;\n}\nconst builder = createAsamSchema()(asamFormControls);\nconst schema = computed(() => {\n\tconst hidden = hideNote.value;\n\tconst disabled = disableNote.value;\n\tconst memo = defaultMemo.value;\n\tconst memberHidden = hideMember.value;\n\tconst memberDisabled = disableMember.value;\n\tconst memberDefault = defaultMember.value;\n\tconst memberLabel = alternateMemberPresentation.value ? '地区成员' : '成员';\n\tconst memberPlaceholder = alternateMemberPresentation.value ? '请选择地区成员' : '选择地区成员';\n\n\treturn [\n\t\tbuilder.field({\n\t\t\tfield: 'region',\n\t\t\tcomponent: 'Input',\n\t\t\tlabel: '地区',\n\t\t\trequired: true,\n\t\t\tdefaultValue: () => 'east'\n\t\t}),\n\t\tbuilder.field({\n\t\t\tfield: 'note',\n\t\t\tcomponent: 'Input',\n\t\t\tlabel: '备注',\n\t\t\trequired: true,\n\t\t\trules: extraRule.value ? [{ min: 2, message: '至少两个字符', trigger: 'blur' }] : [],\n\t\t\tdependsOn: ['region'],\n\t\t\thidden: booleanHidden.value ? hidden : (current) => hidden || current.region === 'hide',\n\t\t\tdisabled: booleanDisabled.value\n\t\t\t\t? disabled\n\t\t\t\t: (current) => disabled && current.region === 'west',\n\t\t\tonHide: retainHidden.value ? 'retain' : 'clear',\n\t\t\tdefaultValue: () => (memo ? '工厂默认备注' : '')\n\t\t}),\n\t\tfixedSourceMode.value\n\t\t\t? builder.field({\n\t\t\t\t\tfield: 'member',\n\t\t\t\t\tcomponent: 'RemoteSelect',\n\t\t\t\t\tlabel: memberLabel,\n\t\t\t\t\trequired: requiredMember.value,\n\t\t\t\t\trules: extraMemberRule.value\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'enum',\n\t\t\t\t\t\t\t\t\tenum: ['east-alpha'],\n\t\t\t\t\t\t\t\t\tmessage: '仅东区成员',\n\t\t\t\t\t\t\t\t\ttrigger: 'change'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: [],\n\t\t\t\t\thidden: booleanMemberHidden.value\n\t\t\t\t\t\t? memberHidden\n\t\t\t\t\t\t: (current) => memberHidden || current.region === 'hide-member',\n\t\t\t\t\tdisabled: booleanMemberDisabled.value\n\t\t\t\t\t\t? memberDisabled\n\t\t\t\t\t\t: (current) => memberDisabled && current.region === 'west',\n\t\t\t\t\tonHide: retainMemberHide.value ? 'retain' : 'clear',\n\t\t\t\t\tdependsOn: ['region'],\n\t\t\t\t\tdataSource: ensureSource('fixed'),\n\t\t\t\t\tonDependencyChange: retainDependency.value ? 'retain' : 'clear',\n\t\t\t\t\tcomponentProps: { teleported: false, placeholder: memberPlaceholder },\n\t\t\t\t\tdefaultValue: () => (memberDefault ? 'east-alpha' : null)\n\t\t\t\t})\n\t\t\t: builder.field({\n\t\t\t\t\tfield: 'member',\n\t\t\t\t\tcomponent: 'RemoteSelect',\n\t\t\t\t\tlabel: memberLabel,\n\t\t\t\t\trequired: requiredMember.value,\n\t\t\t\t\trules: extraMemberRule.value\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'enum',\n\t\t\t\t\t\t\t\t\tenum: ['east-alpha'],\n\t\t\t\t\t\t\t\t\tmessage: '仅东区成员',\n\t\t\t\t\t\t\t\t\ttrigger: 'change'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: [],\n\t\t\t\t\thidden: booleanMemberHidden.value\n\t\t\t\t\t\t? memberHidden\n\t\t\t\t\t\t: (current) => memberHidden || current.region === 'hide-member',\n\t\t\t\t\tdisabled: booleanMemberDisabled.value\n\t\t\t\t\t\t? memberDisabled\n\t\t\t\t\t\t: (current) => memberDisabled && current.region === 'west',\n\t\t\t\t\tonHide: retainMemberHide.value ? 'retain' : 'clear',\n\t\t\t\t\tdependsOn: ['region'],\n\t\t\t\t\tresolveDataSource: (current) => sourceFor(current.region),\n\t\t\t\t\tonDependencyChange: retainDependency.value ? 'retain' : 'clear',\n\t\t\t\t\tcomponentProps: { teleported: false, placeholder: memberPlaceholder },\n\t\t\t\t\tdefaultValue: () => (memberDefault ? 'east-alpha' : null)\n\t\t\t\t})\n\t];\n});\nasync function validate() {\n\ttry {\n\t\tvalidation.value = (await form.value?.validate()) ? '有效' : '无效';\n\t} catch {\n\t\tvalidation.value = '无效';\n\t}\n}\nfunction resetInitial() {\n\tform.value?.setInitialValues({ region: 'west', note: '初始备注', member: null });\n\tform.value?.resetFields();\n}\nfunction resetSchemaDefaults() {\n\tform.value?.setInitialValues({});\n\tform.value?.resetFields();\n}\nfunction inspectMember() {\n\tconst field = form.value?.getField('member');\n\tmemberContext.value = {\n\t\tpresent: !!field,\n\t\tpropMatches: field?.prop === 'member',\n\t\tlistContainsField: !!field && (form.value?.fields ?? []).includes(field),\n\t\tcount: form.value?.fields.length ?? 0\n\t};\n}\nfunction inspect() {\n\tfields.value = {\n\t\tcount: form.value?.fields.length ?? 0,\n\t\thasRegion: !!form.value?.getField('region')\n\t};\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "layout-registry",
					"title": "布局、兼容字段与自定义窄枚举",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/layout-registry/ts/Demo.vue",
									"sha256": "c3eb95d88f0fd3c1dbdfa8ec9664515dfa149ea5ea76e13c53bcfe767ab1319b",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'options-state-contract'\">打开完整选项状态示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭完整选项状态示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-1\" v-if=\"nativeComposition === 'options-state-contract'\" data-testid=\"options-state-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"optionsStateContractBusy\" @click=\"runOptionsStateContract\">验证远程字典状态与生命周期</AsamButton>\n\t\t<div ref=\"optionsStateInjectionTarget\" />\n\t\t<pre data-testid=\"options-state-contract-result\">{{ JSON.stringify(optionsStateContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'source-contract'\">打开完整来源工厂示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭完整来源工厂示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-2\" v-if=\"nativeComposition === 'source-contract'\" data-testid=\"source-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"sourceContractBusy\" @click=\"runSourceContract\">验证四类来源与单次解析</AsamButton>\n\t\t<pre data-testid=\"source-contract-result\">{{ JSON.stringify(sourceContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'normalizer-contract'\">打开选项分页规范化示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭选项分页规范化示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-3\" v-if=\"nativeComposition === 'normalizer-contract'\" data-testid=\"normalizer-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"runNormalizerContract\">验证映射树与分页边界</AsamButton>\n\t\t<pre data-testid=\"normalizer-contract-result\">{{ JSON.stringify(normalizerContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'mock-contract'\">打开确定性数据模拟示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭确定性数据模拟示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-4\" v-if=\"nativeComposition === 'mock-contract'\" data-testid=\"mock-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"mockContractRunning\" @click=\"runMockContract\">验证模拟队列与等待门</AsamButton>\n\t\t<pre data-testid=\"mock-contract-result\">{{ JSON.stringify(mockContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'runtime-contract'\">打开数据运行时示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭数据运行时示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-5\" v-if=\"nativeComposition === 'runtime-contract'\" data-testid=\"runtime-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"runRuntimeContract\">验证运行时完整契约</AsamButton>\n\t\t<pre data-testid=\"runtime-contract-result\">{{ JSON.stringify(runtimeContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'control-source-types'\">打开控件来源类型示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭控件来源类型示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-6\" v-if=\"nativeComposition === 'control-source-types'\" data-testid=\"control-source-types-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"registerControlSourceOrders\">验证来源种类元组</AsamButton>\n\t\t<AsamButton type=\"default\"\n\t\t\tv-for=\"kind in controlSourceKeys\"\n\t\t\t:key=\"kind\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"loadControlSource(kind)\"\n\t\t>\n\t\t\t解析控件来源 {{ kind }}\n\t\t</AsamButton>\n\t\t<AsamForm\n\t\t\tref=\"sourceTypeForm\"\n\t\t\tv-model=\"sourceTypeModel\"\n\t\t\t:schema=\"sourceTypeSchema\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateSourceTypeForm\">校验来源模型</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"sourceTypeForm?.resetFields()\">重置来源模型</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre data-testid=\"control-source-types-registration\">{{ JSON.stringify(controlSourceRegistration) }}</pre>\n\t\t<pre data-testid=\"control-source-types-load\">{{ JSON.stringify(controlSourceLoad) }}</pre>\n\t\t<pre data-testid=\"control-source-types-model\">{{ JSON.stringify(sourceTypeModel) }}</pre>\n\t\t<pre data-testid=\"control-source-types-settlement\">{{ JSON.stringify(sourceTypeSettlement) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'reserved-props'\">打开控件属性边界示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭控件属性边界示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-7\" v-if=\"nativeComposition === 'reserved-props'\" data-testid=\"reserved-props-case\">\n\t\t<AsamButton type=\"default\"\n\t\t\tv-for=\"key in reservedPropKeys\"\n\t\t\t:key=\"key\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"attemptReservedProp(key)\"\n\t\t>\n\t\t\t拒绝控件属性 {{ key }}\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restoreReservedProps\">恢复合法控件属性</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"captureReservedState\">读取属性观察</AsamButton>\n\t\t<AsamForm\n\t\t\tref=\"reservedForm\"\n\t\t\tv-model=\"reservedModel\"\n\t\t\t:schema=\"reservedSchema\"\n\t\t\t:registry=\"reservedRegistry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateReservedForm\">校验合法属性</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reservedForm?.resetFields()\">重置合法属性</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre data-testid=\"reserved-props-state\">{{ JSON.stringify(reservedState) }}</pre>\n\t\t<pre data-testid=\"reserved-props-settlement\">{{ JSON.stringify(reservedSettlement) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'schema-union'\">打开 schema 联合分支示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭 schema 联合分支示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-8\" v-if=\"nativeComposition === 'schema-union'\" data-testid=\"schema-union-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionSourceMode='fixed'\">固定来源分支</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionSourceMode='resolver'\">派生来源分支</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionPropsMode='optional'\">可选控件属性</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionPropsMode='required'\">必填控件属性</AsamButton>\n\t\t<AsamForm\n\t\t\tref=\"unionForm\"\n\t\t\tv-model=\"unionModel\"\n\t\t\t:schema=\"unionSchema\"\n\t\t\t:registry=\"protocolRegistry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateUnionField\">校验联合分支</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionForm?.resetFields()\">重置联合分支</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre data-testid=\"schema-union-state\">{{ JSON.stringify({source:unionSourceMode,props:unionPropsMode,model:unionModel,component:unionSchema[0].component,hasComponentProps:Object.hasOwn(unionSchema[0],'componentProps'),hasResolver:typeof unionSchema[0].resolveDataSource==='function'}) }}</pre>\n\t\t<pre data-testid=\"schema-union-settlement\">{{ JSON.stringify(unionSettlement) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'control'\">打开控件注册示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭控件注册示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-9\" v-if=\"nativeComposition === 'control'\" data-testid=\"control-factory-case\">\n\t\t<AsamForm\n\t\t\tref=\"protocolForm\"\n\t\t\tv-model=\"protocolModel\"\n\t\t\t:schema=\"protocolSchema\"\n\t\t\t:registry=\"protocolRegistry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateProtocolControl\">校验注册控件</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"protocolForm?.resetFields()\">重置注册控件</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkProtocolRegistration\">检查注册约束</AsamButton>\n\t\t<pre data-testid=\"control-factory-definition\">{{ JSON.stringify(protocolDefinition) }}</pre>\n\t\t<pre data-testid=\"control-factory-constraints\">{{ JSON.stringify(protocolConstraints) }}</pre>\n\t\t<pre data-testid=\"control-factory-model\">{{ JSON.stringify(protocolModel) }}</pre>\n\t\t<pre data-testid=\"control-factory-settlement\">{{ JSON.stringify(protocolSettlement) }}</pre>\n\t</section>\n\n\t\t<section class=\"demo-layout-10\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'validation'\">打开原生完整规则表单</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭原生完整规则表单</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-11\" v-if=\"nativeComposition === 'validation'\" data-testid=\"native-rule-case\">\n\t\t\t<AsamForm\n\t\t\t\tref=\"nativeRuleForm\"\n\t\t\t\tv-model=\"nativeRuleModel\"\n\t\t\t\t:inline=\"false\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t\t:rules=\"nativeRuleRules\"\n\t\t\t\t:validate-on-rule-change=\"false\"\n\t\t\t\tlabel-width=\"auto\"\n\t\t\t\tstyle=\"max-width: 600px\"\n\t\t\t\t@validate=\"onNativeRuleValidate\"\n\t\t\t>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动名称\"\n\t\t\t\t\tprop=\"name\"\n\t\t\t\t>\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.name\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ name: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动区域\"\n\t\t\t\t\tprop=\"region\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"活动区域\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ region: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动数量\"\n\t\t\t\t\tprop=\"count\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSelectV2\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.count\"\n\t\t\t\t\t\t:options=\"nativeCountOptions\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"活动数量\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ count: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\" required>\n\t\t\t\t\t<div style=\"display: flex; width: 100%; align-items: center; gap: 1rem\">\n\t\t\t\t\t\t<AsamFormItem prop=\"date1\">\n\t\t\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\t\t\t:model-value=\"nativeRuleModel.date1\"\n\t\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\t\taria-label=\"选择日期\"\n\t\t\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ date1: $event })\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t\t<span>-</span>\n\t\t\t\t\t\t<AsamFormItem prop=\"date2\">\n\t\t\t\t\t\t\t<AsamTimePicker\n\t\t\t\t\t\t\t\t:model-value=\"nativeRuleModel.date2\"\n\t\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t\taria-label=\"选择时间\"\n\t\t\t\t\t\t\t\tplaceholder=\"选择时间\"\n\t\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ date2: $event })\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"即时配送\"\n\t\t\t\t\tprop=\"delivery\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSwitch\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.delivery\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ delivery: Boolean($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动地点\"\n\t\t\t\t\tprop=\"location\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSegmented\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.location\"\n\t\t\t\t\t\t:options=\"nativeLocations\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ location: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动类型\"\n\t\t\t\t\tprop=\"type\"\n\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxGroup\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.type\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ type: $event.map(String) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\t\tv-for=\"kind in nativeActivityTypes\"\n\t\t\t\t\t\t\t:key=\"kind\"\n\t\t\t\t\t\t\t:value=\"kind\"\n\t\t\t\t\t\t\tname=\"type\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ kind }}\n\t\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t\t</AsamCheckboxGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"资源\"\n\t\t\t\t\tprop=\"resource\"\n\t\t\t\t>\n\t\t\t\t\t<AsamRadioGroup\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.resource\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ resource: String($event) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamRadioItem value=\"Sponsorship\">赞助</AsamRadioItem><AsamRadioItem value=\"Venue\">场地</AsamRadioItem>\n\t\t\t\t\t</AsamRadioGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动表单\"\n\t\t\t\t\tprop=\"desc\"\n\t\t\t\t>\n\t\t\t\t\t<AsamTextarea\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.desc\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ desc: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<div class=\"demo-slot-layout\">\n<div class=\"demo-slot-actions\">\n<AsamButton type=\"default\" @click=\"validateNativeRule(true)\">创建</AsamButton><AsamButton type=\"default\" @click=\"nativeRuleForm?.resetFields()\">\n\t\t\t\t\t\t重置\n\t\t\t\t\t</AsamButton>\n</div>\n</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeRule(false)\">原生规则无回调校验</AsamButton><AsamButton type=\"default\" native-type=\"button\" @click=\"readNativeRuleFields\">读取完整规则字段</AsamButton>\n\t\t\t<pre data-testid=\"native-rule-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel: nativeRuleModel,\n\t\t\t\t\tdate: nativeDateFacts(nativeRuleModel.date1),\n\t\t\t\t\ttime: nativeDateFacts(nativeRuleModel.date2),\n\t\t\t\t\toptionCount: nativeCountOptions.length,\n\t\t\t\t\tevents: nativeRuleEvents,\n\t\t\t\t\tsubmissions: nativeRuleSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"native-rule-settlement\">{{\n\t\t\t\tJSON.stringify(nativeRuleSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"native-rule-callback\">{{ JSON.stringify(nativeRuleCallback) }}</pre>\n\t\t\t<pre data-testid=\"native-rule-fields\">{{ JSON.stringify(nativeRuleFields) }}</pre>\n\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'size'\"\n\t\t\t\t>打开原生尺寸组合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\"\n\t\t\t\t>关闭原生尺寸组合</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-12\" v-if=\"nativeComposition === 'size'\" data-testid=\"native-size-case\">\n\t\t\t<AsamRadioGroup\n\t\t\t\t:model-value=\"nativeSize\"\n\t\t\t\taria-label=\"尺寸控制\"\n\t\t\t\t@update:model-value=\"updateNativeSize\"\n\t\t\t>\n\t\t\t\t<AsamRadioButton v-for=\"density in nativeSizes\" :key=\"density\" :value=\"density\">\n\t\t\t\t\t{{\n\t\t\t\t\t\tdensity\n\t\t\t\t\t}}\n\t\t\t\t</AsamRadioButton>\n\t\t\t</AsamRadioGroup>\n\t\t\t<AsamRadioGroup\n\t\t\t\t:model-value=\"nativeSizePosition\"\n\t\t\t\taria-label=\"位置控制\"\n\t\t\t\t@update:model-value=\"updateNativeSizePosition\"\n\t\t\t>\n\t\t\t\t<AsamRadioButton value=\"left\">左侧</AsamRadioButton><AsamRadioButton value=\"right\">右侧</AsamRadioButton><AsamRadioButton value=\"top\">顶部</AsamRadioButton>\n\t\t\t</AsamRadioGroup>\n\t\t\t<AsamForm\n\t\t\t\tv-model=\"sizeActivity\"\n\t\t\t\t:inline=\"false\"\n\t\t\t\t:label-position=\"nativeSizePosition\"\n\t\t\t\t:size=\"nativeSize\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t\tlabel-width=\"auto\"\n\t\t\t\tstyle=\"max-width: 600px\"\n\t\t\t>\n\t\t\t\t<AsamFormItem label=\"活动名称\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"sizeActivity.name\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ name: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动区域\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"sizeActivity.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"请选择区域\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ region: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\">\n\t\t\t\t\t<div style=\"display: flex; width: 100%; align-items: center; gap: 1rem\">\n\t\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"sizeActivity.date1\"\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ date1: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>-</span><AsamTimePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"sizeActivity.date2\"\n\t\t\t\t\t\t\tplaceholder=\"选择时间\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ date2: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动类型\">\n\t\t\t\t\t<AsamCheckboxGroup\n\t\t\t\t\t\t:model-value=\"sizeActivity.type\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ type: $event.map(String) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamCheckboxButton\n\t\t\t\t\t\t\tv-for=\"kind in nativeSizeTypes\"\n\t\t\t\t\t\t\t:key=\"kind\"\n\t\t\t\t\t\t\t:value=\"kind\"\n\t\t\t\t\t\t\tname=\"type\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ kind }}\n\t\t\t\t\t\t</AsamCheckboxButton>\n\t\t\t\t\t</AsamCheckboxGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"资源\">\n\t\t\t\t\t<AsamRadioGroup\n\t\t\t\t\t\t:model-value=\"sizeActivity.resource\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ resource: String($event) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamRadioItem border value=\"Sponsor\">赞助者</AsamRadioItem><AsamRadioItem border value=\"Venue\">场地</AsamRadioItem>\n\t\t\t\t\t</AsamRadioGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<div class=\"demo-slot-layout\">\n<div class=\"demo-slot-actions\">\n<AsamButton type=\"default\" @click=\"submitSizeActivity\">创建</AsamButton><AsamButton type=\"default\">取消</AsamButton>\n</div>\n</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<pre data-testid=\"native-size-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tsize: nativeSize,\n\t\t\t\t\tposition: nativeSizePosition,\n\t\t\t\t\tmodel: sizeActivity,\n\t\t\t\t\tdate: nativeDateFacts(sizeActivity.date1),\n\t\t\t\t\ttime: nativeDateFacts(sizeActivity.date2),\n\t\t\t\t\tsubmissions: sizeSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'basic'\"\n\t\t\t\t>打开原生基础表单组合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'inline'\"\n\t\t\t\t>打开原生行内表单组合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\"\n\t\t\t\t>关闭原生基础行内组合</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-13\" v-if=\"nativeComposition === 'basic'\" data-testid=\"native-basic-case\">\n\t\t\t<AsamForm\n\t\t\t\tv-model=\"basicActivity\"\n\t\t\t\t:inline=\"false\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t\tlabel-width=\"auto\"\n\t\t\t\tstyle=\"max-width: 600px\"\n\t\t\t>\n\t\t\t\t<AsamFormItem label=\"活动名称\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"basicActivity.name\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ name: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动区域\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"basicActivity.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"请选择区域\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ region: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\">\n\t\t\t\t\t<div style=\"display: flex; width: 100%; align-items: center; gap: 1rem\">\n\t\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"basicActivity.date1\"\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ date1: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>-</span><AsamTimePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"basicActivity.date2\"\n\t\t\t\t\t\t\tplaceholder=\"选择时间\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ date2: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"即时配送\">\n\t\t\t\t\t<AsamSwitch\n\t\t\t\t\t\t:model-value=\"basicActivity.delivery\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ delivery: Boolean($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动类型\">\n\t\t\t\t\t<AsamCheckboxGroup\n\t\t\t\t\t\t:model-value=\"basicActivity.type\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ type: $event.map(String) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\t\tv-for=\"kind in nativeActivityTypes\"\n\t\t\t\t\t\t\t:key=\"kind\"\n\t\t\t\t\t\t\t:value=\"kind\"\n\t\t\t\t\t\t\tname=\"type\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ kind }}\n\t\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t\t</AsamCheckboxGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"资源\">\n\t\t\t\t\t<AsamRadioGroup\n\t\t\t\t\t\t:model-value=\"basicActivity.resource\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ resource: String($event) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamRadioItem value=\"Sponsor\">赞助者</AsamRadioItem><AsamRadioItem value=\"Venue\">场地</AsamRadioItem>\n\t\t\t\t\t</AsamRadioGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动表单\">\n\t\t\t\t\t<AsamTextarea\n\t\t\t\t\t\t:model-value=\"basicActivity.desc\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ desc: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<div class=\"demo-slot-layout\">\n<div class=\"demo-slot-actions\">\n<AsamButton type=\"default\" @click=\"submitBasicActivity\">创建</AsamButton><AsamButton type=\"default\">取消</AsamButton>\n</div>\n</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<pre data-testid=\"native-basic-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel: basicActivity,\n\t\t\t\t\tdate: nativeDateFacts(basicActivity.date1),\n\t\t\t\t\ttime: nativeDateFacts(basicActivity.date2),\n\t\t\t\t\tsubmissions: basicSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-14\" v-if=\"nativeComposition === 'inline'\" data-testid=\"native-inline-case\">\n\t\t\t<AsamForm\n\t\t\t\tv-model=\"inlineActivity\"\n\t\t\t\t:inline=\"true\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t>\n\t\t\t\t<AsamFormItem label=\"审核人\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"inlineActivity.user\"\n\t\t\t\t\t\tplaceholder=\"审核人\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tstyle=\"width: 220px\"\n\t\t\t\t\t\t@update:model-value=\"updateInlineActivity({ user: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动区域\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"inlineActivity.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"活动区域\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tstyle=\"width: 220px\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\tupdateInlineActivity({ region: String($event ?? '') })\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\">\n\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t:model-value=\"inlineActivity.date\"\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tstyle=\"width: 220px\"\n\t\t\t\t\t\t@update:model-value=\"updateInlineActivity({ date: $event })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t@click=\"submitInlineActivity\"\n\t\t\t\t\t>\n\t\t\t\t\t\t查询\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<pre data-testid=\"native-inline-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel: inlineActivity,\n\t\t\t\t\tdate: nativeDateFacts(inlineActivity.date),\n\t\t\t\t\tsubmissions: inlineSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dynamicCase = true\"\n\t\t\t\t>打开动态字段组合示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dynamicCase = false\"\n\t\t\t\t>关闭动态字段组合示例</AsamButton\n\t\t\t>\n\t\t\t<section class=\"demo-layout-15\" v-if=\"dynamicCase\" data-testid=\"dynamic-case\">\n\t\t\t\t<AsamForm\n\t\t\t\t\tref=\"dynamicForm\"\n\t\t\t\t\tv-model=\"dynamicModel\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\t:inline=\"false\"\n\t\t\t\t\tlabel-width=\"auto\"\n\t\t\t\t\t:rules=\"dynamicRules\"\n\t\t\t\t\t:validate-on-rule-change=\"false\"\n\t\t\t\t\t@validate=\"onDynamicValidate\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem label=\"电子邮箱\" prop=\"email\">\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"dynamicModel.email\"\n\t\t\t\t\t\t\t@update:model-value=\"updateDynamicEmail\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-for=\"(domain, index) in dynamicModel.domains\"\n\t\t\t\t\t\t:key=\"domain.key\"\n\t\t\t\t\t\t:label=\"'Domain' + index\"\n\t\t\t\t\t\t:prop=\"'domains.' + index + '.value'\"\n\t\t\t\t\t\t:rules=\"{\n\t\t\t\t\t\t\trequired: true,\n\t\t\t\t\t\t\tmessage: 'domain can not be null',\n\t\t\t\t\t\t\ttrigger: 'blur'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:data-domain-key=\"domain.key\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\t:model-value=\"domain.value\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateDynamicDomain(domain.key, $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t:aria-label=\"'Delete Domain' + index\"\n\t\t\t\t\t\t\t\t@click=\"removeDynamicDomain(domain.key)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t删除\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateDynamic(false)\"\n\t\t\t\t\t>动态无回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateDynamic(true)\"\n\t\t\t\t\t>动态回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"addDynamicDomain\"\n\t\t\t\t\t>新增域名</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dynamicForm?.resetFields()\"\n\t\t\t\t\t>动态重置</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readDynamicFields\"\n\t\t\t\t\t>读取动态字段状态</AsamButton\n\t\t\t\t>\n\t\t\t\t<pre data-testid=\"dynamic-state\">{{\n\t\t\t\t\tJSON.stringify({ model: dynamicModel, events: dynamicEvents })\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"dynamic-settlement\">{{ JSON.stringify(dynamicSettlement) }}</pre>\n\t\t\t\t<pre data-testid=\"dynamic-callback\">{{ JSON.stringify(dynamicCallback) }}</pre>\n\t\t\t\t<pre data-testid=\"dynamic-fields\">{{ JSON.stringify(dynamicFields) }}</pre>\n\t\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"compositionCase = 'alignment'\"\n\t\t\t\t>打开标签对齐组合示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"compositionCase = 'accessibility'\"\n\t\t\t>\n\t\t\t\t打开可访问性组合示例\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"compositionCase = undefined\"\n\t\t\t\t>关闭对齐可访问性示例</AsamButton\n\t\t\t>\n\t\t\t<section\n\t\t\t\tclass=\"demo-layout-16\"\n\t\t\t\tv-if=\"compositionCase === 'alignment'\"\n\t\t\t\tdata-testid=\"alignment-case\"\n\t\t\t>\n\t\t\t\t<AsamForm\n\t\t\t\t\tv-model=\"alignmentModel\"\n\t\t\t\t\t:inline=\"false\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\tlabel-width=\"auto\"\n\t\t\t\t\t:label-position=\"alignmentFormPosition\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"表单对齐\"\n\t\t\t\t\t\tlabel-position=\"right\"\n\t\t\t\t\t\tdata-testid=\"alignment-form-control\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div role=\"radiogroup\" aria-label=\"标签位置\">\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"position in alignmentFormPositions\"\n\t\t\t\t\t\t\t:key=\"position\"\n\t\t\t\t\t\t><AsamRadioItem\n\t\t\t\t\t\t\tv-model=\"alignmentFormPosition\"\n\t\t\t\t\t\t\t:value=\"position\"\n\t\t\t\t\t\t />{{ position }}</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"表单项对齐\"\n\t\t\t\t\t\tlabel-position=\"right\"\n\t\t\t\t\t\tdata-testid=\"alignment-item-control\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div role=\"radiogroup\" aria-label=\"项目标签位置\">\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"position in alignmentItemPositions\"\n\t\t\t\t\t\t\t:key=\"position\"\n\t\t\t\t\t\t><AsamRadioItem\n\t\t\t\t\t\t\tv-model=\"alignmentItemPosition\"\n\t\t\t\t\t\t\t:value=\"position\"\n\t\t\t\t\t\t />{{ position || 'Empty' }}</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-for=\"field in alignmentFields\"\n\t\t\t\t\t\t:key=\"field.key\"\n\t\t\t\t\t\t:label=\"field.label\"\n\t\t\t\t\t\t:label-position=\"alignmentItemPosition\"\n\t\t\t\t\t\t:data-testid=\"'alignment-' + field.key\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"alignmentModel[field.key]\"\n\t\t\t\t\t\t\t@update:model-value=\"updateAlignment(field.key, $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<pre data-testid=\"alignment-state\">{{\n\t\t\t\t\tJSON.stringify({\n\t\t\t\t\t\tmodel: alignmentModel,\n\t\t\t\t\t\tformPosition: alignmentFormPosition,\n\t\t\t\t\t\titemPosition: alignmentItemPosition\n\t\t\t\t\t})\n\t\t\t\t}}</pre>\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tclass=\"demo-layout-17\"\n\t\t\t\tv-if=\"compositionCase === 'accessibility'\"\n\t\t\t\tdata-testid=\"accessibility-case\"\n\t\t\t>\n\t\t\t\t<p class=\"example-paragraph\">\n\t\t\t\t\tFull Name 标签自动关联单个输入；Your Information\n\t\t\t\t\t标识多输入组，每个输入仍有独立的 aria-label。placeholder 不替代可访问名称。\n\t\t\t\t</p>\n\t\t\t\t<AsamForm\n\t\t\t\t\tv-model=\"accessibilityModel\"\n\t\t\t\t\t:inline=\"false\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\tlabel-position=\"left\"\n\t\t\t\t\tlabel-width=\"auto\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem label=\"完整姓名\" data-testid=\"accessibility-single\">\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"accessibilityModel.fullName\"\n\t\t\t\t\t\t\t@update:model-value=\"updateAccessibility('fullName', $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem label=\"你的信息\" data-testid=\"accessibility-group\">\n\t\t\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\t:model-value=\"accessibilityModel.firstName\"\n\t\t\t\t\t\t\t\taria-label=\"名\"\n\t\t\t\t\t\t\t\tplaceholder=\"名\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateAccessibility('firstName', $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\t:model-value=\"accessibilityModel.lastName\"\n\t\t\t\t\t\t\t\taria-label=\"姓\"\n\t\t\t\t\t\t\t\tplaceholder=\"姓\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateAccessibility('lastName', $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<pre data-testid=\"accessibility-state\">{{\n\t\t\t\t\tJSON.stringify(accessibilityModel)\n\t\t\t\t}}</pre>\n\t\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"openValidationCase('custom')\"\n\t\t\t\t>打开自定义校验示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"openValidationCase('number')\"\n\t\t\t\t>打开数字校验示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validationCase = undefined\"\n\t\t\t\t>关闭校验示例</AsamButton\n\t\t\t>\n\t\t\t<section class=\"demo-layout-18\" v-if=\"validationCase\" data-testid=\"validation-case\">\n\t\t\t\t<AsamForm\n\t\t\t\t\t:key=\"validationCase\"\n\t\t\t\t\tref=\"validationForm\"\n\t\t\t\t\tv-model=\"validationModel\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\t:rules=\"validationRules\"\n\t\t\t\t\t:validate-on-rule-change=\"false\"\n\t\t\t\t\tstatus-icon\n\t\t\t\t\t@validate=\"onValidationCaseEvent\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem v-if=\"validationCase === 'custom'\" label=\"密码\" prop=\"password\">\n\t\t\t\t\t\t<AsamPassword\n\t\t\t\t\t\t\t:model-value=\"validationModel.password\"\n\t\t\t\t\t\t\t@update:model-value=\"updateValidationText('password', $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-if=\"validationCase === 'custom'\"\n\t\t\t\t\t\tlabel=\"确认密码\"\n\t\t\t\t\t\tprop=\"confirm\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamPassword\n\t\t\t\t\t\t\t:model-value=\"validationModel.confirm\"\n\t\t\t\t\t\t\t@update:model-value=\"updateValidationText('confirm', $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem label=\"年龄\" prop=\"age\">\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"validationModel.age\"\n\t\t\t\t\t\t\t@update:model-value=\"updateValidationAge\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateCase(false)\"\n\t\t\t\t\t>示例无回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateCase(true)\"\n\t\t\t\t\t>示例回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"validationForm?.resetFields()\"\n\t\t\t\t\t>示例重置</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readValidationCase\"\n\t\t\t\t\t>读取示例字段状态</AsamButton\n\t\t\t\t>\n\t\t\t\t<pre data-testid=\"validation-case-state\">{{\n\t\t\t\t\tJSON.stringify({\n\t\t\t\t\t\tkind: validationCase,\n\t\t\t\t\t\tmodel: validationModel,\n\t\t\t\t\t\tpending: ageValidationPending,\n\t\t\t\t\t\tevents: validationEvents,\n\t\t\t\t\t\tcrossValidation: confirmRevalidation\n\t\t\t\t\t})\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"validation-case-settlement\">{{\n\t\t\t\t\tJSON.stringify(validationCaseSettlement)\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"validation-case-callback\">{{\n\t\t\t\t\tJSON.stringify(validationCaseCallback)\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"validation-case-fields\">{{\n\t\t\t\t\tJSON.stringify(validationCaseFields)\n\t\t\t\t}}</pre>\n\t\t\t</section>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"validateNativeSubset('profile.nickname')\"\n\t\t\t>\n\t\t\t\t原生校验嵌套字符串字段\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"validateNativeSubset([['profile', 'nickname']])\"\n\t\t\t>\n\t\t\t\t原生校验嵌套分段数组字段\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeNestedCallback\"\n\t\t\t\t>原生嵌套回调校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setFieldsValue({\n\t\t\t\t\t\tname: 'Mixed live',\n\t\t\t\t\t\tstatus: 'yes',\n\t\t\t\t\t\tprofile: { nickname: 'Nested live' }\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t准备混合当前模型\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setInitialValues({\n\t\t\t\t\t\tname: 'Mixed initial',\n\t\t\t\t\t\tprofile: { nickname: 'Mixed nested A' }\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t混合姓名嵌套基线\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setInitialValues({\n\t\t\t\t\t\tstatus: 'yes',\n\t\t\t\t\t\tprofile: { nickname: 'Mixed nested B' }\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t混合状态嵌套基线\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setInitialValues({ name: 'Omitted nested' })\"\n\t\t\t>\n\t\t\t\t省略嵌套初始值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setInitialValues({ name: '', status: 'no', profile: { nickname: '' } })\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t恢复完整嵌套基线\n\t\t\t</AsamButton>\n\t\t\t<fieldset class=\"demo-spacing-1\">\n\t\t\t\t<legend>原生嵌套 FormItem</legend>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"enableNativeItem\"\n\t\t\t\t\t>启用嵌套字段</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disableNativeItem\"\n\t\t\t\t\t>关闭嵌套字段</AsamButton\n\t\t\t\t>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemArrayPath\">使用分段字段路径</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemLabelSlot\">使用字段标签插槽</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemErrorSlot\">使用字段错误插槽</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemRulesEnabled\">使用字段规则</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemRequired\">字段显式必填</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemArrayRules\">使用数组和多触发器规则</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemHideMessage\">隐藏字段校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemInlineMessage\">字段行内校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemExternalError\">字段外部错误</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemForcedSuccess\">字段强制成功状态</AsamCheckboxItem>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelPosition = 'left'\"\n\t\t\t\t\t>字段左侧标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelPosition = 'right'\"\n\t\t\t\t\t>字段右侧标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelPosition = 'top'\"\n\t\t\t\t\t>字段顶部标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = 'auto'\"\n\t\t\t\t\t>字段自动标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = 120\"\n\t\t\t\t\t>字段恢复标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelText = '昵称'\"\n\t\t\t\t\t>字段短标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemLabelText = '这是较长的嵌套昵称标签'\"\n\t\t\t\t>\n\t\t\t\t\t字段长标签\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelText = '嵌套昵称'\"\n\t\t\t\t\t>字段恢复标签文本</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemRequiredMode = 'explicit'\"\n\t\t\t\t\t>字段显式必填属性</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemRequiredMode = 'undefined'\"\n\t\t\t\t>\n\t\t\t\t\t字段未定义必填属性\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemRequiredMode = 'omitted'\"\n\t\t\t\t\t>字段省略必填属性</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = 168\"\n\t\t\t\t\t>字段数字标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = '200px'\"\n\t\t\t\t\t>字段文本标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'large'\"\n\t\t\t\t\t>字段 large 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'big'\"\n\t\t\t\t\t>字段 big 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'default'\"\n\t\t\t\t\t>字段 default 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'small'\"\n\t\t\t\t\t>字段 small 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeItem('blur')\"\n\t\t\t\t\t>字段 blur 校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"validateNativeItem('change')\"\n\t\t\t\t\t>字段 change 校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"validateNativeItem('blur', true)\"\n\t\t\t\t\t>字段回调校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeItem?.clearValidate()\"\n\t\t\t\t\t>字段清除校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"nativeItem?.setInitialValue('Item initial')\"\n\t\t\t\t>\n\t\t\t\t\t字段设置初始值\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeItem?.resetField()\"\n\t\t\t\t\t>字段恢复初始值</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"\n\t\t\t\t\t\tform?.setInitialValues({ profile: { nickname: 'Form nested initial' } })\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t表单设置嵌套初始值\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"form?.resetFields(['profile.nickname'])\"\n\t\t\t\t>\n\t\t\t\t\t表单重置嵌套字段\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readNativeItem\"\n\t\t\t\t\t>读取字段公开状态</AsamButton\n\t\t\t\t>\n\t\t\t</fieldset>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readNativeFields\"\n\t\t\t\t>读取原生表单字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeSubset('name')\"\n\t\t\t\t>原生校验字符串字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"validateNativeSubset(['name', 'status'])\"\n\t\t\t>\n\t\t\t\t原生校验数组字段\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeSubset()\"\n\t\t\t\t>原生校验全部字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeSubsetCallback\"\n\t\t\t\t>原生字段回调校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setInitialValues({ name: 'Native initial', status: 'yes' })\"\n\t\t\t>\n\t\t\t\t设置原生初始值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setInitialValues({ name: '', status: 'no' })\"\n\t\t\t>\n\t\t\t\t恢复原生初始值\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"singleNativeRule\">使用单条原生规则</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"validateOnRuleChange\">自动校验规则变更</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelPosition = 'left'\"\n\t\t\t\t>原生左侧标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelPosition = 'right'\"\n\t\t\t\t>原生右侧标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelPosition = 'top'\"\n\t\t\t\t>原生顶部标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.clearValidate(['name', 'status'])\"\n\t\t\t>\n\t\t\t\t数组清除字段校验\n\t\t\t</AsamButton>\n\t\t\t<fieldset class=\"demo-spacing-2\">\n\t\t\t\t<legend>原生表单显示配置</legend>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"labelSuffixEnabled\">显示标签后缀</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"hideRequiredAsterisk\">隐藏必填星号</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"asteriskRight\">星号放在右侧</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"hideMessages\">隐藏校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"inlineMessage\">行内校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"statusIcon\">显示校验状态图标</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"disabled\">禁用原生表单控件</AsamCheckboxItem>\n\t\t\t</fieldset>\n\t\t\t<fieldset class=\"demo-spacing-3\">\n\t\t\t\t<legend>表单顶层配置</legend>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"builtinActions\">使用内置操作</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"showSearch\">显示查询按钮</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"showReset\">显示重置按钮</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"customActionText\">自定义操作文案</AsamCheckboxItem>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = 'auto'\"\n\t\t\t\t\t>表单自动标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = 168\"\n\t\t\t\t\t>数字标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = '200px'\"\n\t\t\t\t\t>文本标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = 120\"\n\t\t\t\t\t>恢复标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'large'\"\n\t\t\t\t\t>表单 large 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'big'\"\n\t\t\t\t\t>表单 big 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'default'\"\n\t\t\t\t\t>表单 default 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'small'\"\n\t\t\t\t\t>表单 small 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t</fieldset>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"legacy = !legacy\"\n\t\t\t\t>切换兼容字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inline = !inline\"\n\t\t\t\t>切换行内布局</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"labelPosition = labelPosition === 'top' ? 'right' : 'top'\"\n\t\t\t>\n\t\t\t\t切换标签位置\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"labelMode = labelMode === 'visible' ? 'sr-only' : 'visible'\"\n\t\t\t>\n\t\t\t\t切换可访问标签\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"size = size === 'default' ? 'big' : 'default'\"\n\t\t\t>\n\t\t\t\t切换表单尺寸\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validate\"\n\t\t\t\t>校验全部字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateWithCallback\"\n\t\t\t\t>用回调校验全部字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.clearValidate('name')\"\n\t\t\t\t>清除姓名校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.clearValidate()\"\n\t\t\t\t>清除全部校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ name: 'Patched' })\"\n\t\t\t>\n\t\t\t\t只更新姓名模型\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields()\"\n\t\t\t\t>重置字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields(['name'])\"\n\t\t\t\t>只重置姓名字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields('name')\"\n\t\t\t\t>用字符串重置姓名字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tomitScrollError = false;\n\t\t\t\t\tscrollToError = !scrollToError;\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换校验自动滚动\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"omitScrollError = true\"\n\t\t\t\t>省略校验自动滚动</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'true'\"\n\t\t\t\t>使用 true 滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'false'\"\n\t\t\t\t>使用 false 滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'object'\"\n\t\t\t\t>使用对象滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'omitted'\"\n\t\t\t\t>省略滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'undefined'\"\n\t\t\t\t>传入 undefined 滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.scrollToField('name')\"\n\t\t\t\t>滚动到姓名字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.scrollToField('missing')\"\n\t\t\t\t>滚动到不存在字段</AsamButton\n\t\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"demo-layout-19\"\n\t\t\t\tdata-testid=\"layout-scroll-host\"\n\t\t\t\tstyle=\"max-height: 280px; overflow-y: auto\"\n\t\t\t>\n\t\t\t\t<p class=\"example-paragraph\" style=\"min-height: 320px\">滚动区域从这里开始，表单字段位于下方。</p>\n\t\t\t\t<AsamForm\n\t\t\t\t\t:key=\"legacy ? 'legacy' : 'schema'\"\n\t\t\t\t\tref=\"form\"\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\t:inline=\"inline\"\n\t\t\t\t\t:label-position=\"labelPosition\"\n\t\t\t\t\t:label-mode=\"labelMode\"\n\t\t\t\t\t:label-width=\"labelWidth\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t\t:rules=\"nativeRules\"\n\t\t\t\t\t:validate-on-rule-change=\"validateOnRuleChange\"\n\t\t\t\t\t:label-suffix=\"labelSuffixEnabled ? '：' : ''\"\n\t\t\t\t\t:hide-required-asterisk=\"hideRequiredAsterisk\"\n\t\t\t\t\t:require-asterisk-position=\"asteriskRight ? 'right' : 'left'\"\n\t\t\t\t\t:show-message=\"!hideMessages\"\n\t\t\t\t\t:inline-message=\"inlineMessage\"\n\t\t\t\t\t:status-icon=\"statusIcon\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:show-search=\"showSearch\"\n\t\t\t\t\t:show-reset=\"showReset\"\n\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t...(legacy ? { fields } : { schema, registry }),\n\t\t\t\t\t\t...(customActionText\n\t\t\t\t\t\t\t? { searchText: '筛选成员', resetText: '恢复成员' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t...nativeScrollBinding\n\t\t\t\t\t}\"\n\t\t\t\t\t@validate=\"onValidate\"\n\t\t\t\t\t@update:model-value=\"recordModel('update:modelValue', $event)\"\n\t\t\t\t\t@search=\"recordModel('search', $event)\"\n\t\t\t\t\t@reset=\"recordModel('reset', $event)\"\n\t\t\t\t>\n\t\t\t\t\t<template #default>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"layout-form-default\">\n\t\t\t\t\t\t\t默认内容位于字段之前，不替代生成字段。\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\t\tv-if=\"nativeItemEnabled\"\n\t\t\t\t\t\t\tref=\"nativeItem\"\n\t\t\t\t\t\t\tdata-testid=\"layout-native-item\"\n\t\t\t\t\t\t\t:prop=\"itemArrayPath ? ['profile', 'nickname'] : 'profile.nickname'\"\n\t\t\t\t\t\t\t:label=\"itemLabelText\"\n\t\t\t\t\t\t\t:label-position=\"itemLabelPosition\"\n\t\t\t\t\t\t\t:label-width=\"itemLabelWidth\"\n\t\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\t\t...itemRequiredBinding,\n\t\t\t\t\t\t\t\t...(itemRules === undefined ? {} : { rules: itemRules })\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t:error=\"itemExternalError ? '外部昵称错误' : ''\"\n\t\t\t\t\t\t\t:show-message=\"!itemHideMessage\"\n\t\t\t\t\t\t\t:inline-message=\"itemInlineMessage\"\n\t\t\t\t\t\t\t:size=\"itemSize\"\n\t\t\t\t\t\t\tfor=\"layout-native-item-input\"\n\t\t\t\t\t\t\t:validate-status=\"itemForcedSuccess ? 'success' : ''\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<template\n\t\t\t\t\t\t\tv-if=\"itemLabelSlot\"\n\t\t\t\t\t\t\t#label=\"{ label }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span data-testid=\"layout-native-item-label\">{{ label }}插槽</span>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\tid=\"layout-native-item-input\"\n\t\t\t\t\t\t\t\t:model-value=\"model.profile?.nickname ?? ''\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateNickname\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<template\n\t\t\t\t\t\t\tv-if=\"itemErrorSlot\"\n\t\t\t\t\t\t\t#error=\"{ error }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span data-testid=\"layout-native-item-error\">{{\n\t\t\t\t\t\t\t\terror\n\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t<template #help>嵌套字段帮助</template>\n\t\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template v-if=\"!builtinActions\" #actions=\"{ search, reset }\">\n\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"search()\"\n\t\t\t\t\t\t\t>插槽查询</AsamButton\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset()\"\n\t\t\t\t\t\t\t>插槽重置</AsamButton\n\t\t\t\t\t\t>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"layout-form-append\">追加内容与字段使用同一表单实例。</p>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamForm>\n\t\t\t</div>\n\t\t\t<pre data-testid=\"layout-form-native-fields\">{{\n\t\t\t\tJSON.stringify(nativeFieldsSnapshot)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-native-subset\">{{\n\t\t\t\tJSON.stringify(nativeSubsetSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-native-subset-callback\">{{\n\t\t\t\tJSON.stringify(nativeSubsetCallback)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-native-item-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\t...nativeItemSnapshot,\n\t\t\t\t\trequiredMode: itemRequiredMode,\n\t\t\t\t\trequiredOwnKey: Object.hasOwn(itemRequiredBinding, 'required'),\n\t\t\t\t\trequiredValueKind: typeof itemRequiredBinding.required,\n\t\t\t\t\trequiredValue: itemRequiredBinding.required\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-native-item-settlement\">{{\n\t\t\t\tJSON.stringify(nativeItemSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-native-item-callback\">{{\n\t\t\t\tJSON.stringify(nativeItemCallback)\n\t\t\t}}</pre>\n\t\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"layout-form-status\">{{ result }}</p>\n\t\t\t<pre class=\"form-events\" data-testid=\"layout-form-events\">{{\n\t\t\t\tJSON.stringify(events)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-validation-settlement\">{{\n\t\t\t\tJSON.stringify(validationSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-callback\">{{ JSON.stringify(callback) }}</pre>\n\t\t\t<pre data-testid=\"layout-form-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel,\n\t\t\t\t\tlegacy,\n\t\t\t\t\tsingleNativeRule,\n\t\t\t\t\tvalidateOnRuleChange,\n\t\t\t\t\tlabelSuffixEnabled,\n\t\t\t\t\thideRequiredAsterisk,\n\t\t\t\t\tasteriskRight,\n\t\t\t\t\thideMessages,\n\t\t\t\t\tinlineMessage,\n\t\t\t\t\tstatusIcon,\n\t\t\t\t\tdisabled,\n\t\t\t\t\tbuiltinActions,\n\t\t\t\t\tshowSearch,\n\t\t\t\t\tshowReset,\n\t\t\t\t\tcustomActionText,\n\t\t\t\t\tlabelWidth,\n\t\t\t\t\tinline,\n\t\t\t\t\tlabelPosition,\n\t\t\t\t\tlabelMode,\n\t\t\t\t\tsize,\n\t\t\t\t\tvalidated,\n\t\t\t\t\tscrollToError,\n\t\t\t\t\tomitScrollError,\n\t\t\t\t\tscrollMode,\n\t\t\t\t\tscrollIntoViewOptions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamRadioItem,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tuseAsamRemoteOptions,\n\tuseAsamDictOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport { effectScope, shallowRef, createApp, defineComponent, h, nextTick } from 'vue';\nimport type { EffectScope } from 'vue';\nimport type {\n\tAsamOptionsState,\n\tAsamOptionsStateConfig,\n\tAsamRecord,\n\tAsamValuePolicy\n} from '@asam-ui/ui';\n\nimport type {\n\tAsamRequestContext,\n\tAsamRequestConfig,\n\tAsamSourceKind,\n\tAsamDefaultOptionsFactory,\n\tAsamOptionsFactory,\n\tAsamOptionsCache\n} from '@asam-ui/ui';\n\nimport { normalizeAsamOptions, normalizeAsamPage, resolveAsamPage } from '@asam-ui/ui';\nimport type { AsamMapping, AsamOptionRules } from '@asam-ui/ui';\n\nimport { createAsamMockProvider } from '@asam-ui/ui';\nimport type {\n\tAsamMockStep,\n\tAsamMockProviderOptions,\n\tAsamMockProvider,\n\tAsamDictEntry\n} from '@asam-ui/ui';\n\nimport type { AsamDataRuntime, AsamDataProvider, AsamDataError } from '@asam-ui/ui';\nimport {\n\tcreateAsamDataRuntime,\n\tdefineAsamOptions,\n\tdefineAsamDictSource,\n\tresolveAsamOptions,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport type {\n\tAsamControlSource,\n\tAsamSourceKindTuple,\n\tAsamOptionsSource,\n\tAsamOption,\n\tAsamValue\n} from '@asam-ui/ui';\n\nimport type { AsamReservedControlProp, AsamComponentProps, AsamFormSchemaEntry } from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nimport {\n\tAsamCheckboxButton,\n\tAsamRadioButton,\n\tAsamSelectV2,\n\tAsamSegmented,\n\tAsamSelect,\n\tAsamDatePicker,\n\tAsamTimePicker,\n\tAsamSwitch,\n\tAsamCheckboxGroup,\n\tAsamRadioGroup,\n\tAsamTextarea\n} from '@asam-ui/ui';\nimport type { AsamDateValue, AsamTimeValue } from '@asam-ui/ui';\nimport {\n\tAsamForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tasamFormControls,\n\tcreateAsamSchema,\n\tdefineAsamControl\n} from '@asam-ui/ui';\nimport type { AsamFormExpose, AsamFormField, AsamFormEmits, AsamControlSize } from '@asam-ui/ui';\nimport type { AsamFormItemProps, AsamFormItemExpose, AsamFormProps } from '@asam-ui/ui';\nimport NarrowChoice from './NarrowChoice.vue';\ndefineOptions({ name: 'AsamFormLayoutRegistryDemo' });\ninterface Model {\n\tname: string;\n\tstatus: 'yes' | 'no';\n\tprofile?: { nickname?: string };\n}\nconst model = ref<Model>({ name: '', status: 'no' });\nconst form = ref<AsamFormExpose<Model>>();\nconst builtinActions = ref(false);\nconst showSearch = ref(false);\nconst showReset = ref(false);\nconst customActionText = ref(false);\nconst labelWidth = ref<string | number>(120);\nconst labelSuffixEnabled = ref(false);\nconst hideRequiredAsterisk = ref(false);\nconst asteriskRight = ref(false);\nconst hideMessages = ref(false);\nconst inlineMessage = ref(false);\nconst statusIcon = ref(false);\nconst disabled = ref(false);\nconst singleNativeRule = ref(false);\nconst validateOnRuleChange = ref(true);\nconst legacy = ref(false);\nconst inline = ref(false);\nconst labelPosition = ref<'top' | 'right' | 'left'>('right');\nconst labelMode = ref<'visible' | 'sr-only'>('visible');\nconst size = ref<AsamControlSize>('default');\nconst scrollToError = ref(true);\nconst omitScrollError = ref(false);\nconst scrollMode = ref<'true' | 'false' | 'object' | 'omitted' | 'undefined'>('object');\nconst scrollIntoViewOptions = computed<boolean | ScrollIntoViewOptions | undefined>(() => {\n\tif (scrollMode.value === 'true') return true;\n\tif (scrollMode.value === 'false') return false;\n\tif (scrollMode.value === 'object') return { behavior: 'auto', block: 'center' };\n\treturn undefined;\n});\nconst scrollOptionsBinding = computed(() =>\n\tscrollMode.value === 'omitted' ? {} : { scrollIntoViewOptions: scrollIntoViewOptions.value }\n);\n// Runtime-only native omission/undefined probe; normal typed usage omits an absent value.\nconst nativeScrollBinding = computed<Record<string, unknown>>(() => ({\n\t...scrollOptionsBinding.value,\n\t...(omitScrollError.value ? {} : { scrollToError: scrollToError.value })\n}));\ntype NativeValidationSettlement =\n\t| { settledKind: 'fulfilled'; fulfilledValue: boolean | undefined }\n\t| { settledKind: 'rejected'; rejectionFields: string[]; rejectionType: string };\nconst validationSettlement = ref<NativeValidationSettlement>();\nconst result = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nfunction recordModel(name: 'update:modelValue' | 'search' | 'reset', value: Model) {\n\tevents.value.push({ name, payload: { ...value } });\n}\nconst callback = ref<{ valid: boolean; fields: string[] }>();\nconst validated = ref<{ field: string; valid: boolean }[]>([]);\nconst narrow = defineAsamControl<'yes' | 'no', { caption: string }>({\n\tcomponent: NarrowChoice,\n\temptyValue: () => 'no',\n\tsourceKinds: []\n});\nconst registry = { 'custom:status': narrow };\nconst builder = createAsamSchema<Model>()({ ...asamFormControls, ...registry });\nconst schema = [\n\tbuilder.field({ field: 'name', component: 'Input', label: '姓名', defaultValue: () => '' }),\n\tbuilder.field({\n\t\tfield: 'status',\n\t\tcomponent: 'custom:status',\n\t\tlabel: '状态',\n\t\tcomponentProps: { caption: '窄枚举状态' }\n\t})\n];\nconst fields: readonly AsamFormField[] = [\n\t{ key: 'name', label: '姓名', type: 'input', defaultValue: '' },\n\t{\n\t\tkey: 'status',\n\t\tlabel: '状态',\n\t\ttype: 'select',\n\t\tdefaultValue: 'no',\n\t\toptions: [\n\t\t\t{ label: '是', value: 'yes' },\n\t\t\t{ label: '否', value: 'no' }\n\t\t]\n\t}\n];\nconst rules = {\n\tname: [\n\t\t{ required: true, message: '请输入姓名', trigger: 'change' },\n\t\t{ min: 2, message: '姓名至少两个字符', trigger: 'change' }\n\t]\n};\nconst nativeRules = computed<NonNullable<AsamFormProps<Model>['rules']>>(() =>\n\tsingleNativeRule.value\n\t\t? { name: { min: 5, message: '姓名至少五个字符', trigger: 'change' } }\n\t\t: rules\n);\nconst onValidate = (...args: AsamFormEmits<Model>['validate']) => {\n\tvalidated.value.push({ field: String(args[0]), valid: args[1] });\n\tevents.value.push({\n\t\tname: 'validate',\n\t\tpayload: { field: args[0], valid: args[1], message: args[2] }\n\t});\n};\ntype NativeFieldSelector = Parameters<AsamFormExpose<Model>['validateField']>[0];\ntype NativeSubsetSettlement = NativeValidationSettlement & { id: number; selector: string };\nconst nativeSubsetSettlement = ref<NativeSubsetSettlement>();\nconst nativeSubsetCallback = ref<{ valid: boolean; fields: string[] }>();\nconst nativeFieldsSnapshot = ref<{\n\tcount: number;\n\tkeys: (string | undefined)[];\n\tsameArrayAndStringLookup: boolean;\n\tnameInFields: boolean;\n\tstatusInFields: boolean;\n\tmissingIsUndefined: boolean;\n\tnameValue: unknown;\n\tstatusValue: unknown;\n}>();\nlet nativeSubsetSequence = 0;\nfunction readNativeFields() {\n\tconst fields = form.value?.fields ?? [];\n\tconst name = form.value?.getField('name');\n\tconst status = form.value?.getField('status');\n\tnativeFieldsSnapshot.value = {\n\t\tcount: fields.length,\n\t\tkeys: fields.map((field) =>\n\t\t\tArray.isArray(field.prop) ? field.prop.join('.') : field.prop\n\t\t),\n\t\tsameArrayAndStringLookup: name !== undefined && name === form.value?.getField(['name']),\n\t\tnameInFields: name !== undefined && fields.includes(name),\n\t\tstatusInFields: status !== undefined && fields.includes(status),\n\t\tmissingIsUndefined: form.value?.getField('missing') === undefined,\n\t\tnameValue: name?.fieldValue,\n\t\tstatusValue: status?.fieldValue\n\t};\n}\nasync function validateNativeSubset(selector: NativeFieldSelector = undefined) {\n\tconst id = ++nativeSubsetSequence;\n\tconst selectorLabel =\n\t\tselector === undefined\n\t\t\t? 'all'\n\t\t\t: typeof selector === 'string'\n\t\t\t\t? selector\n\t\t\t\t: JSON.stringify(selector);\n\ttry {\n\t\tconst fulfilledValue = await form.value?.validateField(selector);\n\t\tnativeSubsetSettlement.value = {\n\t\t\tid,\n\t\t\tselector: selectorLabel,\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tnativeSubsetSettlement.value = {\n\t\t\tid,\n\t\t\tselector: selectorLabel,\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t}\n}\nasync function validateNativeSubsetCallback() {\n\tconst id = ++nativeSubsetSequence;\n\tconst fulfilledValue = await form.value?.validateField(['name'], (valid, fields) => {\n\t\tnativeSubsetCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t});\n\tnativeSubsetSettlement.value = {\n\t\tid,\n\t\tselector: 'callback-name',\n\t\tsettledKind: 'fulfilled',\n\t\tfulfilledValue\n\t};\n}\n\nconst nativeItemEnabled = ref(false);\nconst nativeItem = ref<AsamFormItemExpose>();\nconst itemArrayPath = ref(false);\nconst itemLabelSlot = ref(false);\nconst itemErrorSlot = ref(false);\nconst itemRulesEnabled = ref(true);\nconst itemRequired = ref(true);\nconst itemLabelText = ref('嵌套昵称');\nconst itemRequiredMode = ref<'explicit' | 'undefined' | 'omitted'>('explicit');\n// Runtime-only native omission/undefined probe, outside the typed component-props contract.\nconst itemRequiredBinding = computed<Record<string, unknown>>(() =>\n\titemRequiredMode.value === 'omitted'\n\t\t? {}\n\t\t: { required: itemRequiredMode.value === 'undefined' ? undefined : itemRequired.value }\n);\nconst itemArrayRules = ref(false);\nconst itemHideMessage = ref(false);\nconst itemInlineMessage = ref(false);\nconst itemExternalError = ref(false);\nconst itemForcedSuccess = ref(false);\nconst itemLabelPosition = ref<'left' | 'right' | 'top'>('right');\nconst itemLabelWidth = ref<string | number>(120);\nconst itemSize = ref<AsamControlSize>('default');\nconst itemRules = computed<AsamFormItemProps['rules']>(() =>\n\t!itemRulesEnabled.value\n\t\t? undefined\n\t\t: itemArrayRules.value\n\t\t\t? [\n\t\t\t\t\t{ required: true, message: '昵称必填', trigger: ['blur', 'change'] },\n\t\t\t\t\t{ min: 3, message: '昵称至少三个字符', trigger: 'change' }\n\t\t\t\t]\n\t\t\t: { required: true, message: '昵称必填', trigger: 'blur' }\n);\nconst nativeItemSnapshot = ref<{\n\tsize: AsamFormItemExpose['size'];\n\tmessage: string;\n\tstate: AsamFormItemExpose['validateState'];\n\tcount: number;\n\tsameNestedLookup: boolean;\n\tnestedInFields: boolean;\n\tnestedMissingIsUndefined: boolean;\n\tnativeContextState: string;\n\tnativeContextMessage: string;\n\tnameState: string;\n\tnameMessage: string;\n\tnameInitialKind: string;\n\tstatusInitialKind: string;\n\tnestedInitialKind: string;\n\tvalue: unknown;\n\tmodel: Model;\n}>();\nconst nativeItemSettlement = ref<NativeSubsetSettlement>();\nconst nativeItemCallback = ref<{ valid: boolean; fields: string[] }>();\nlet nativeItemSequence = 0;\nfunction enableNativeItem() {\n\tmodel.value = { ...model.value, profile: { nickname: '' } };\n\tnativeItemEnabled.value = true;\n}\nfunction disableNativeItem() {\n\tnativeItemEnabled.value = false;\n\tmodel.value = { name: model.value.name, status: model.value.status };\n}\nfunction updateNickname(value: string | number) {\n\tmodel.value = { ...model.value, profile: { nickname: String(value) } };\n}\nfunction readNativeItem() {\n\tconst field = form.value?.getField('profile.nickname');\n\tnativeItemSnapshot.value = {\n\t\tsize: nativeItem.value?.size ?? '',\n\t\tmessage: nativeItem.value?.validateMessage ?? '',\n\t\tstate: nativeItem.value?.validateState ?? '',\n\t\tcount: form.value?.fields.length ?? 0,\n\t\tsameNestedLookup:\n\t\t\tfield !== undefined && field === form.value?.getField(['profile', 'nickname']),\n\t\tnestedInFields: field !== undefined && (form.value?.fields.includes(field) ?? false),\n\t\tnestedMissingIsUndefined:\n\t\t\tform.value?.getField('profile.missing') === undefined &&\n\t\t\tform.value?.getField(['profile', 'missing']) === undefined,\n\t\tnativeContextState: field?.validateState ?? '',\n\t\tnativeContextMessage: field?.validateMessage ?? '',\n\t\tnameState: form.value?.getField('name')?.validateState ?? '',\n\t\tnameMessage: form.value?.getField('name')?.validateMessage ?? '',\n\t\tnameInitialKind: typeof form.value?.getField('name')?.getInitialValue(),\n\t\tstatusInitialKind: typeof form.value?.getField('status')?.getInitialValue(),\n\t\tnestedInitialKind: typeof field?.getInitialValue(),\n\t\tvalue: field?.fieldValue,\n\t\tmodel: {\n\t\t\t...model.value,\n\t\t\t...(model.value.profile ? { profile: { ...model.value.profile } } : {})\n\t\t}\n\t};\n}\nasync function validateNativeNestedCallback() {\n\tconst id = ++nativeSubsetSequence;\n\tconst fulfilledValue = await form.value?.validateField(\n\t\t[['profile', 'nickname']],\n\t\t(valid, fields) => {\n\t\t\tnativeSubsetCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t}\n\t);\n\tnativeSubsetSettlement.value = {\n\t\tid,\n\t\tselector: 'callback-nested',\n\t\tsettledKind: 'fulfilled',\n\t\tfulfilledValue\n\t};\n}\nasync function validateNativeItem(trigger: string, withCallback = false) {\n\tconst id = ++nativeItemSequence;\n\ttry {\n\t\tconst fulfilledValue = await nativeItem.value?.validate(\n\t\t\ttrigger,\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tnativeItemCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tnativeItemSettlement.value = {\n\t\t\tid,\n\t\t\tselector: trigger,\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tnativeItemSettlement.value = {\n\t\t\tid,\n\t\t\tselector: trigger,\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t}\n}\n\ninterface ValidationModel {\n\tpassword: string;\n\tconfirm: string;\n\tage: string | number;\n}\ntype NativeItemRule = Exclude<AsamFormItemProps['rules'], readonly unknown[] | undefined>;\ntype NativeValidator = NonNullable<NativeItemRule['validator']>;\ntype CaseKind = 'custom' | 'number';\nconst validationCase = ref<CaseKind>();\nconst validationModel = ref<ValidationModel>({ password: '', confirm: '', age: '' });\nconst validationForm = ref<AsamFormExpose<ValidationModel>>();\nconst validationCaseSettlement = ref<NativeSubsetSettlement>();\nconst validationCaseCallback = ref<{ valid: boolean; fields: string[] }>();\nconst validationCaseFields = ref<{ field: string; state: string; message: string }[]>([]);\nconst validationEvents = ref<{ field: string; valid: boolean; message: string }[]>([]);\nconst ageValidationPending = ref(false);\nconst confirmRevalidation = ref<NativeValidationSettlement>();\nlet validationCaseSequence = 0;\nfunction openValidationCase(kind: CaseKind) {\n\tvalidationModel.value = { password: '', confirm: '', age: '' };\n\tvalidationCase.value = kind;\n}\nconst onValidationCaseEvent = (...args: AsamFormEmits<ValidationModel>['validate']) => {\n\tvalidationEvents.value.push({ field: String(args[0]), valid: args[1], message: args[2] });\n};\nfunction updateValidationText(field: 'password' | 'confirm', value: string | number) {\n\tvalidationModel.value = { ...validationModel.value, [field]: String(value) };\n}\nfunction updateValidationAge(value: string | number) {\n\tconst parsed = Number.parseFloat(String(value));\n\tvalidationModel.value = {\n\t\t...validationModel.value,\n\t\tage: Number.isNaN(parsed) ? String(value) : parsed\n\t};\n}\nasync function revalidateConfirmation() {\n\ttry {\n\t\tconst fulfilledValue = await validationForm.value?.validateField('confirm');\n\t\tconfirmRevalidation.value = { settledKind: 'fulfilled', fulfilledValue };\n\t} catch (error) {\n\t\tconfirmRevalidation.value = {\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: typeof error\n\t\t};\n\t}\n}\nconst validatePassword: NativeValidator = (_rule, value, callback) => {\n\tif (typeof value !== 'string' || value.length < 6)\n\t\treturn callback(new Error('密码至少六个字符'));\n\tcallback();\n\tif (validationModel.value.confirm !== '') void revalidateConfirmation();\n};\nconst validateConfirmation: NativeValidator = (_rule, value, callback) => {\n\tif (value === '') callback(new Error('请输入确认密码'));\n\telse if (value !== validationModel.value.password) callback(new Error('两次密码不一致'));\n\telse callback();\n};\nconst validateAge: NativeValidator = (_rule, value, callback) => {\n\tif (value === '') return callback(new Error('请输入年龄'));\n\tageValidationPending.value = true;\n\tsetTimeout(() => {\n\t\tageValidationPending.value = false;\n\t\tif (!Number.isInteger(value)) callback(new Error('年龄必须为整数'));\n\t\telse if (Number(value) < 18) callback(new Error('年龄必须至少十八岁'));\n\t\telse callback();\n\t}, 500);\n};\nconst validationRules = computed<NonNullable<AsamFormProps<ValidationModel>['rules']>>(() =>\n\tvalidationCase.value === 'number'\n\t\t? {\n\t\t\t\tage: [\n\t\t\t\t\t{ required: true, message: '年龄必填', trigger: 'blur' },\n\t\t\t\t\t{ type: 'number', message: '年龄必须是数字', trigger: 'blur' }\n\t\t\t\t]\n\t\t\t}\n\t\t: {\n\t\t\t\tpassword: [{ validator: validatePassword, trigger: 'blur' }],\n\t\t\t\tconfirm: [{ validator: validateConfirmation, trigger: 'blur' }],\n\t\t\t\tage: [{ validator: validateAge, trigger: 'blur' }]\n\t\t\t}\n);\nfunction readValidationCase() {\n\tvalidationCaseFields.value = (validationForm.value?.fields ?? []).map((field) => ({\n\t\tfield: field.propString,\n\t\tstate: field.validateState,\n\t\tmessage: field.validateMessage\n\t}));\n}\nasync function validateCase(withCallback: boolean) {\n\tconst id = ++validationCaseSequence;\n\ttry {\n\t\tconst fulfilledValue = await validationForm.value?.validate(\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tvalidationCaseCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tvalidationCaseSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'all',\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tvalidationCaseSettlement.value = {\n\t\t\tid,\n\t\t\tselector: 'all',\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t}\n}\n\ninterface AlignmentModel {\n\tname: string;\n\tregion: string;\n\ttype: string;\n}\ninterface AccessibilityModel {\n\tfullName: string;\n\tfirstName: string;\n\tlastName: string;\n}\nconst compositionCase = ref<'alignment' | 'accessibility'>();\nconst alignmentModel = ref<AlignmentModel>({ name: '', region: '', type: '' });\nconst alignmentFormPositions: NonNullable<AsamFormProps['labelPosition']>[] = [\n\t'left',\n\t'right',\n\t'top'\n];\nconst alignmentItemPositions: NonNullable<AsamFormItemProps['labelPosition']>[] = [\n\t'',\n\t'left',\n\t'right',\n\t'top'\n];\nconst alignmentFormPosition = ref<NonNullable<AsamFormProps['labelPosition']>>('right');\nconst alignmentItemPosition = ref<NonNullable<AsamFormItemProps['labelPosition']>>('');\nconst alignmentFields: { key: keyof AlignmentModel; label: string }[] = [\n\t{ key: 'name', label: '姓名' },\n\t{ key: 'region', label: '活动区域' },\n\t{ key: 'type', label: '活动表单' }\n];\nfunction updateAlignment(field: keyof AlignmentModel, value: string | number) {\n\talignmentModel.value = { ...alignmentModel.value, [field]: String(value) };\n}\nconst accessibilityModel = ref<AccessibilityModel>({ fullName: '', firstName: '', lastName: '' });\nfunction updateAccessibility(field: keyof AccessibilityModel, value: string | number) {\n\taccessibilityModel.value = { ...accessibilityModel.value, [field]: String(value) };\n}\n\ninterface DynamicModel {\n\temail: string;\n\tdomains: { key: number; value: string }[];\n}\nconst dynamicCase = ref(false);\nconst dynamicModel = ref<DynamicModel>({ email: '', domains: [{ key: 1, value: '' }] });\nconst dynamicForm = ref<AsamFormExpose<DynamicModel>>();\nconst dynamicSettlement = ref<NativeSubsetSettlement>();\nconst dynamicCallback = ref<{ valid: boolean; fields: string[] }>();\nconst dynamicEvents = ref<{ field: unknown; valid: boolean; message: string }[]>([]);\nconst dynamicFields = ref<{\n\tfields: { prop: string; state: string; message: string; value: unknown }[];\n\tsameSegmentedLookup: boolean;\n\tremovedIndexMissing: boolean;\n}>();\nlet dynamicKey = 1;\nlet dynamicSequence = 0;\nconst dynamicRules = computed<NonNullable<AsamFormProps<DynamicModel>['rules']>>(() => ({\n\temail: [\n\t\t{ required: true, message: '请输入邮箱地址', trigger: 'blur' },\n\t\t{\n\t\t\ttype: 'email',\n\t\t\tmessage: '请输入正确的邮箱地址',\n\t\t\ttrigger: ['blur', 'change']\n\t\t}\n\t]\n}));\nfunction updateDynamicEmail(value: string | number) {\n\tdynamicModel.value = { ...dynamicModel.value, email: String(value) };\n}\nfunction updateDynamicDomain(key: number, value: string | number) {\n\tdynamicModel.value = {\n\t\t...dynamicModel.value,\n\t\tdomains: dynamicModel.value.domains.map((domain) =>\n\t\t\tdomain.key === key ? { ...domain, value: String(value) } : domain\n\t\t)\n\t};\n}\nfunction addDynamicDomain() {\n\tdynamicModel.value = {\n\t\t...dynamicModel.value,\n\t\tdomains: [...dynamicModel.value.domains, { key: ++dynamicKey, value: '' }]\n\t};\n}\nfunction removeDynamicDomain(key: number) {\n\tdynamicModel.value = {\n\t\t...dynamicModel.value,\n\t\tdomains: dynamicModel.value.domains.filter((domain) => domain.key !== key)\n\t};\n}\nconst onDynamicValidate = (...args: AsamFormEmits<DynamicModel>['validate']) => {\n\tdynamicEvents.value.push({ field: args[0], valid: args[1], message: args[2] });\n};\nfunction readDynamicFields() {\n\tconst field = dynamicForm.value?.getField('domains.0.value');\n\tdynamicFields.value = {\n\t\tfields: (dynamicForm.value?.fields ?? []).map((field) => ({\n\t\t\tprop: field.propString,\n\t\t\tstate: field.validateState,\n\t\t\tmessage: field.validateMessage,\n\t\t\tvalue: field.fieldValue\n\t\t})),\n\t\tsameSegmentedLookup:\n\t\t\tfield !== undefined && field === dynamicForm.value?.getField(['domains', '0', 'value']),\n\t\tremovedIndexMissing:\n\t\t\tdynamicForm.value?.getField(\n\t\t\t\t'domains.' + dynamicModel.value.domains.length + '.value'\n\t\t\t) === undefined\n\t};\n}\nasync function validateDynamic(withCallback: boolean) {\n\tconst id = ++dynamicSequence;\n\ttry {\n\t\tconst fulfilledValue = await dynamicForm.value?.validate(\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tdynamicCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tdynamicSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tdynamicSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: typeof error\n\t\t};\n\t}\n}\nasync function validate() {\n\ttry {\n\t\tconst fulfilledValue = await form.value?.validate();\n\t\tvalidationSettlement.value = { settledKind: 'fulfilled', fulfilledValue };\n\t\tresult.value = fulfilledValue ? 'valid' : 'invalid';\n\t} catch (error) {\n\t\tvalidationSettlement.value = {\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t\tresult.value = 'invalid';\n\t}\n}\nasync function validateWithCallback() {\n\tresult.value = (await form.value?.validate((valid, fields) => {\n\t\tcallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t}))\n\t\t? 'valid'\n\t\t: 'invalid';\n}\n\ninterface BasicActivity {\n\tname: string;\n\tregion: string;\n\tdate1: AsamDateValue;\n\tdate2: AsamTimeValue;\n\tdelivery: boolean;\n\ttype: string[];\n\tresource: string;\n\tdesc: string;\n}\ninterface InlineActivity {\n\tuser: string;\n\tregion: string;\n\tdate: AsamDateValue;\n}\nconst nativeComposition = ref<\n\t| 'basic'\n\t| 'inline'\n\t| 'size'\n\t| 'validation'\n\t| 'control'\n\t| 'schema-union'\n\t| 'reserved-props'\n\t| 'control-source-types'\n\t| 'runtime-contract'\n\t| 'mock-contract'\n\t| 'normalizer-contract'\n\t| 'source-contract'\n\t| 'options-state-contract'\n>();\nconst nativeZones = [\n\t{ value: 'shanghai', label: '区域一', raw: { city: 'shanghai' } },\n\t{ value: 'beijing', label: '区域二', raw: { city: 'beijing' } }\n];\nconst nativeActivityTypes = [\n\t'Online activities',\n\t'Promotion activities',\n\t'Offline activities',\n\t'Simple brand exposure'\n];\nconst basicActivity = ref<BasicActivity>({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst inlineActivity = ref<InlineActivity>({ user: '', region: '', date: '' });\nconst basicSubmissions = ref<BasicActivity[]>([]),\n\tinlineSubmissions = ref<InlineActivity[]>([]);\nfunction updateBasicActivity(patch: Partial<BasicActivity>) {\n\tbasicActivity.value = { ...basicActivity.value, ...patch };\n}\nfunction updateInlineActivity(patch: Partial<InlineActivity>) {\n\tinlineActivity.value = { ...inlineActivity.value, ...patch };\n}\nfunction submitBasicActivity() {\n\tbasicSubmissions.value.push({ ...basicActivity.value, type: [...basicActivity.value.type] });\n}\nfunction submitInlineActivity() {\n\tinlineSubmissions.value.push({ ...inlineActivity.value });\n}\nfunction nativeDateFacts(value: unknown) {\n\treturn value instanceof Date\n\t\t? {\n\t\t\t\tkind: 'Date',\n\t\t\t\tyear: value.getFullYear(),\n\t\t\t\tmonth: value.getMonth() + 1,\n\t\t\t\tday: value.getDate(),\n\t\t\t\thours: value.getHours(),\n\t\t\t\tminutes: value.getMinutes(),\n\t\t\t\tseconds: value.getSeconds()\n\t\t\t}\n\t\t: { kind: value === null ? 'null' : typeof value, value };\n}\n\nconst nativeSizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst nativeSizeTypes = ['Online activities', 'Promotion activities'];\nconst nativeSize = ref<AsamControlSize>('default');\nconst nativeSizePosition = ref<'left' | 'right' | 'top'>('right');\nconst sizeActivity = ref<BasicActivity>({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst sizeSubmissions = ref<BasicActivity[]>([]);\nfunction updateNativeSize(value: string | number | boolean | undefined) {\n\tif (value === 'large' || value === 'big' || value === 'default' || value === 'small')\n\t\tnativeSize.value = value;\n}\nfunction updateNativeSizePosition(value: string | number | boolean | undefined) {\n\tif (value === 'left' || value === 'right' || value === 'top') nativeSizePosition.value = value;\n}\nfunction updateSizeActivity(patch: Partial<BasicActivity>) {\n\tsizeActivity.value = { ...sizeActivity.value, ...patch };\n}\nfunction submitSizeActivity() {\n\tsizeSubmissions.value.push({ ...sizeActivity.value, type: [...sizeActivity.value.type] });\n}\n\ninterface NativeRuleModel extends BasicActivity {\n\tcount: string;\n\tlocation: string;\n}\nconst nativeRuleModel = ref<NativeRuleModel>({\n\tname: 'Hello',\n\tregion: '',\n\tcount: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\tlocation: '',\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst nativeRuleForm = ref<AsamFormExpose<NativeRuleModel>>();\nconst nativeCountOptions = Array.from({ length: 10000 }, (_, index) => ({\n\tvalue: String(index + 1),\n\tlabel: String(index + 1),\n\traw: { count: index + 1 }\n}));\nconst nativeLocations = ['Home', 'Company', 'School'];\nconst nativeRuleRules: AsamFormProps<NativeRuleModel>['rules'] = {\n\tname: [\n\t\t{ required: true, message: '请输入活动名称', trigger: 'blur' },\n\t\t{ min: 3, max: 5, message: '长度应为 3 到 5 个字符', trigger: 'blur' }\n\t],\n\tregion: [{ required: true, message: '请选择活动区域', trigger: 'change' }],\n\tcount: [{ required: true, message: '请选择活动人数', trigger: 'change' }],\n\tdate1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],\n\tdate2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],\n\tlocation: [{ required: true, message: '请选择地点', trigger: 'change' }],\n\ttype: [\n\t\t{\n\t\t\ttype: 'array',\n\t\t\trequired: true,\n\t\t\tmessage: '请至少选择一种活动类型',\n\t\t\ttrigger: 'change'\n\t\t}\n\t],\n\tresource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],\n\tdesc: [{ required: true, message: '请输入活动说明', trigger: 'blur' }]\n};\nconst nativeRuleSettlement = ref<NativeSubsetSettlement>(),\n\tnativeRuleCallback = ref<{ valid: boolean; fields: string[] }>();\nconst nativeRuleFields = ref<{ prop: string; state: string; message: string; value: unknown }[]>(\n\t\t[]\n\t),\n\tnativeRuleEvents = ref<{ field: unknown; valid: boolean; message: string }[]>([]),\n\tnativeRuleSubmissions = ref<NativeRuleModel[]>([]);\nlet nativeRuleSequence = 0;\nfunction updateNativeRule(patch: Partial<NativeRuleModel>) {\n\tnativeRuleModel.value = { ...nativeRuleModel.value, ...patch };\n}\nconst onNativeRuleValidate = (...args: AsamFormEmits<NativeRuleModel>['validate']) => {\n\tnativeRuleEvents.value.push({ field: args[0], valid: args[1], message: args[2] });\n};\nfunction readNativeRuleFields() {\n\tnativeRuleFields.value = (nativeRuleForm.value?.fields ?? []).map((field) => ({\n\t\tprop: field.propString,\n\t\tstate: field.validateState,\n\t\tmessage: field.validateMessage,\n\t\tvalue: field.fieldValue\n\t}));\n}\nasync function validateNativeRule(withCallback: boolean) {\n\tconst id = ++nativeRuleSequence;\n\ttry {\n\t\tconst fulfilledValue = await nativeRuleForm.value?.validate(\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tnativeRuleCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t\tif (valid)\n\t\t\t\t\t\t\tnativeRuleSubmissions.value.push({\n\t\t\t\t\t\t\t\t...nativeRuleModel.value,\n\t\t\t\t\t\t\t\ttype: [...nativeRuleModel.value.type]\n\t\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tnativeRuleSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tnativeRuleSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: typeof error\n\t\t};\n\t}\n}\n\nimport type { AsamControl, AsamSchemaField } from '@asam-ui/ui';\ninterface ProtocolModel {\n\tcode: string;\n}\nconst protocolSourceKinds: [] = [],\n\tprotocolRequiredProps: 'placeholder'[] = ['placeholder'];\nconst protocolControl: AsamControl<string, { placeholder: string }> = defineAsamControl<\n\tstring,\n\t{ placeholder: string }\n>({\n\tcomponent: AsamInput,\n\temptyValue: () => '',\n\tsourceKinds: protocolSourceKinds,\n\trequiredProps: protocolRequiredProps,\n\tsuspendable: false\n});\nconst protocolRegistry = Object.freeze({ 'custom:code': protocolControl });\nconst protocolBuilder = createAsamSchema<ProtocolModel>()(protocolRegistry);\nconst protocolFieldConfig: AsamSchemaField<\n\tProtocolModel,\n\ttypeof protocolRegistry,\n\t'code',\n\t'custom:code'\n> = {\n\tfield: 'code',\n\tcomponent: 'custom:code',\n\tlabel: '注册编码',\n\tcomponentProps: { placeholder: '输入注册编码' },\n\tdefaultValue: () => 'Default',\n\trules: [\n\t\t{ required: true, message: '请输入注册编码', trigger: 'blur' },\n\t\t{ min: 3, message: '编码至少三位', trigger: 'blur' }\n\t]\n};\nconst protocolField = protocolBuilder.field(protocolFieldConfig);\nconst protocolSchema = [protocolField],\n\tprotocolModel = ref<ProtocolModel>({ code: 'Seed' }),\n\tprotocolForm = ref<AsamFormExpose<ProtocolModel>>();\nconst protocolEmptyArrays = defineAsamControl<string[], object>({\n\tcomponent: AsamInput,\n\temptyValue: () => [],\n\tsourceKinds: [],\n\tsuspendable: true\n});\nconst firstProtocolEmpty = protocolEmptyArrays.emptyValue(),\n\tsecondProtocolEmpty = protocolEmptyArrays.emptyValue();\nfirstProtocolEmpty.push('changed');\nprotocolRequiredProps.push('placeholder');\nconst protocolDefinition = {\n\tcontrolFrozen: Object.isFrozen(protocolControl),\n\tkindsFrozen: Object.isFrozen(protocolControl.sourceKinds),\n\trequiredFrozen: Object.isFrozen(protocolControl.requiredProps),\n\trequiredProps: [...(protocolControl.requiredProps ?? [])],\n\tkinds: [...protocolControl.sourceKinds],\n\tinputComponentIdentity: protocolControl.component === AsamInput,\n\tsuspendable: protocolControl.suspendable,\n\temptyValue: protocolControl.emptyValue(),\n\tschemaIdentity: protocolField === protocolFieldConfig,\n\tschemaComponentPropsIdentity:\n\t\tprotocolField.componentProps === protocolFieldConfig.componentProps,\n\toriginalModel: { code: 'Seed' },\n\tfirstEmpty: firstProtocolEmpty,\n\tsecondEmpty: secondProtocolEmpty,\n\temptyArraysIndependent: firstProtocolEmpty !== secondProtocolEmpty\n};\nconst protocolConstraints = ref<\n\t{ name: string; rejected: boolean; kind: unknown; message: string }[]\n>([]);\nfunction checkProtocolRegistration() {\n\tconst valid = { component: AsamInput, emptyValue: () => '', sourceKinds: [] };\n\tconst invalid: [string, unknown][] = [\n\t\t['null', null],\n\t\t['component-missing', { ...valid, component: undefined }],\n\t\t['component-string', { ...valid, component: 'input' }],\n\t\t['component-number', { ...valid, component: 1 }],\n\t\t['emptyValue-missing', { ...valid, emptyValue: undefined }],\n\t\t['emptyValue-value', { ...valid, emptyValue: '' }],\n\t\t['suspendable-string', { ...valid, suspendable: 'true' }],\n\t\t['sourceKinds-missing', { ...valid, sourceKinds: undefined }],\n\t\t['sourceKinds-unknown', { ...valid, sourceKinds: ['other'] }],\n\t\t['sourceKinds-duplicate', { ...valid, sourceKinds: ['static', 'static'] }],\n\t\t['requiredProps-string', { ...valid, requiredProps: 'placeholder' }],\n\t\t['requiredProps-duplicate', { ...valid, requiredProps: ['placeholder', 'placeholder'] }],\n\t\t['requiredProps-empty-key', { ...valid, requiredProps: [''] }],\n\t\t['requiredProps-number', { ...valid, requiredProps: [1] }]\n\t];\n\tprotocolConstraints.value = invalid.map(([name, config]) => {\n\t\ttry {\n\t\t\tReflect.apply(defineAsamControl, undefined, [config]);\n\t\t\treturn { name, rejected: false, kind: undefined, message: '' };\n\t\t} catch (error) {\n\t\t\treturn {\n\t\t\t\tname,\n\t\t\t\trejected: true,\n\t\t\t\tkind:\n\t\t\t\t\terror !== null && typeof error === 'object'\n\t\t\t\t\t\t? Reflect.get(error, 'kind')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tmessage: error instanceof Error ? error.message : String(error)\n\t\t\t};\n\t\t}\n\t});\n}\nconst protocolSettlement = ref<{\n\t\tid: number;\n\t\tvalid: boolean;\n\t\tfields: string[];\n\t\tmodel: ProtocolModel;\n\t}>(),\n\tprotocolValidateId = ref(0);\nasync function validateProtocolControl() {\n\tconst id = ++protocolValidateId.value;\n\tawait protocolForm.value?.validate((valid, fields) => {\n\t\tprotocolSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...protocolModel.value }\n\t\t};\n\t});\n}\n\ninterface UnionModel {\n\tcode: string;\n}\ntype UnionRegistry = typeof asamFormControls & typeof protocolRegistry;\ntype OptionalUnion = AsamSchemaField<UnionModel, UnionRegistry, 'code', 'Input'>;\ntype RequiredUnion = AsamSchemaField<UnionModel, UnionRegistry, 'code', 'custom:code'>;\ntype FixedOptionalUnion = Exclude<OptionalUnion, { readonly resolveDataSource: unknown }>;\ntype DerivedOptionalUnion = Extract<OptionalUnion, { readonly resolveDataSource: unknown }>;\ntype FixedRequiredUnion = Exclude<RequiredUnion, { readonly resolveDataSource: unknown }>;\ntype DerivedRequiredUnion = Extract<RequiredUnion, { readonly resolveDataSource: unknown }>;\nconst unionCommon = {\n\tfield: 'code',\n\tlabel: '协议编码',\n\tdefaultValue: () => 'UnionDefault',\n\trequired: true,\n\trules: [{ min: 3, message: '协议编码至少三位', trigger: 'blur' }]\n} satisfies Omit<OptionalUnion, 'component' | 'resolveDataSource'>;\nconst fixedOptionalUnion: FixedOptionalUnion = {\n\t...unionCommon,\n\tcomponent: 'Input'\n};\nconst derivedOptionalUnion: DerivedOptionalUnion = {\n\t...unionCommon,\n\tcomponent: 'Input',\n\tresolveDataSource: () => undefined\n};\nconst fixedRequiredUnion: FixedRequiredUnion = {\n\t...unionCommon,\n\tcomponent: 'custom:code',\n\tcomponentProps: { placeholder: '协议必填占位' }\n};\nconst derivedRequiredUnion: DerivedRequiredUnion = {\n\t...unionCommon,\n\tcomponent: 'custom:code',\n\tcomponentProps: { placeholder: '协议必填占位' },\n\tresolveDataSource: () => undefined\n};\nconst unionSourceMode = ref<'fixed' | 'resolver'>('fixed'),\n\tunionPropsMode = ref<'optional' | 'required'>('optional');\nconst unionSchema = computed(() => [\n\tunionPropsMode.value === 'optional'\n\t\t? unionSourceMode.value === 'fixed'\n\t\t\t? fixedOptionalUnion\n\t\t\t: derivedOptionalUnion\n\t\t: unionSourceMode.value === 'fixed'\n\t\t\t? fixedRequiredUnion\n\t\t\t: derivedRequiredUnion\n]);\nconst unionModel = ref<UnionModel>({ code: 'Seed' }),\n\tunionForm = ref<AsamFormExpose<UnionModel>>(),\n\tunionId = ref(0),\n\tunionSettlement = ref<{ id: number; valid: boolean; fields: string[]; model: UnionModel }>();\nasync function validateUnionField() {\n\tconst id = ++unionId.value;\n\tawait unionForm.value?.validate((valid, fields) => {\n\t\tunionSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...unionModel.value }\n\t\t};\n\t});\n}\n\ninterface ReservedModel {\n\tcode: string;\n}\ninterface ReservedControlProps {\n\treadonly placeholder: string;\n\treadonly maxlength?: number;\n\treadonly clearable?: boolean;\n}\nconst reservedPropKeys = [\n\t'modelValue',\n\t'update:modelValue',\n\t'onUpdate:modelValue',\n\t'options',\n\t'api',\n\t'request',\n\t'dictType',\n\t'dataSource',\n\t'transform',\n\t'multiple',\n\t'valueMode',\n\t'multipleValueMode',\n\t'separator'\n] as const satisfies readonly AsamReservedControlProp[];\nconst safeReservedProps: AsamComponentProps<ReservedControlProps> = {\n\tplaceholder: '合法控件属性',\n\tmaxlength: 40,\n\tclearable: true\n};\nconst reservedControl = defineAsamControl<string, ReservedControlProps>({\n\tcomponent: AsamInput,\n\temptyValue: () => '',\n\tsourceKinds: [],\n\trequiredProps: ['placeholder']\n});\nconst reservedRegistry = Object.freeze({ 'custom:reservedCode': reservedControl });\n// Raw schema input demonstrates runtime rejection of externally supplied componentProps.\nconst reservedProps = ref<Readonly<Record<string, unknown>>>(safeReservedProps),\n\treservedAttempt = ref<AsamReservedControlProp>();\nconst reservedModel = ref<ReservedModel>({ code: 'ReservedSeed' }),\n\treservedForm = ref<AsamFormExpose<ReservedModel>>();\nlet reservedResolverCalls = 0,\n\treservedStateId = 0,\n\treservedValidationId = 0;\nconst reservedSchema = computed<readonly AsamFormSchemaEntry<ReservedModel>[]>(() => [\n\t{\n\t\tfield: 'code',\n\t\tcomponent: 'custom:reservedCode',\n\t\tlabel: '属性编码',\n\t\trequired: true,\n\t\tdefaultValue: () => 'ReservedDefault',\n\t\tcomponentProps: reservedProps.value,\n\t\tresolveDataSource: () => {\n\t\t\treservedResolverCalls++;\n\t\t\treturn undefined;\n\t\t}\n\t}\n]);\nconst reservedState = ref<{\n\tid: number;\n\tmodel: ReservedModel;\n\tkeys: string[];\n\tattempt?: AsamReservedControlProp;\n\tresolverCalls: number;\n}>();\nconst reservedSettlement = ref<{\n\tid: number;\n\tvalid: boolean;\n\tfields: string[];\n\tmodel: ReservedModel;\n}>();\nfunction attemptReservedProp(key: AsamReservedControlProp) {\n\treservedAttempt.value = key;\n\treservedProps.value = { ...safeReservedProps, [key]: 'Forbidden' };\n}\nfunction restoreReservedProps() {\n\treservedAttempt.value = undefined;\n\treservedProps.value = safeReservedProps;\n}\nfunction captureReservedState() {\n\treservedState.value = {\n\t\tid: ++reservedStateId,\n\t\tmodel: { ...reservedModel.value },\n\t\tkeys: Object.keys(reservedProps.value),\n\t\t...(reservedAttempt.value === undefined ? {} : { attempt: reservedAttempt.value }),\n\t\tresolverCalls: reservedResolverCalls\n\t};\n}\nasync function validateReservedForm() {\n\tconst id = ++reservedValidationId;\n\tawait reservedForm.value?.validate((valid, fields) => {\n\t\treservedSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...reservedModel.value }\n\t\t};\n\t});\n}\n\ntype ControlSourceKey = AsamControlSource['kind'];\ninterface SourceTypeModel {\n\tchoice: AsamValue | null;\n}\nconst controlSourceKeys = ['static', 'api', 'request', 'dict'] as const;\nconst controlSourceCalls = { api: 0, request: 0, dict: 0 };\nconst sourceTypeRuntime = createAsamDataRuntime({\n\tscope: 'complete-control-source-types',\n\tprovider: {\n\t\trequest: async (_config, context) => {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tcontrolSourceCalls.request++;\n\t\t\treturn [{ label: 'Request option', value: 'request-value' }];\n\t\t},\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tcontrolSourceCalls.dict++;\n\t\t\t\treturn [{ label: 'Dict option', value: 'dict-value' }];\n\t\t\t}\n\t\t}\n\t}\n});\nonBeforeUnmount(() => sourceTypeRuntime.invalidate());\nconst controlSources: Readonly<Record<ControlSourceKey, AsamControlSource>> = {\n\tstatic: defineAsamOptions().static({\n\t\toptions: [{ label: 'Static option', value: 'static-value' }]\n\t}),\n\tapi: defineAsamOptions().api({\n\t\tapi: async (_params: undefined, context) => {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tcontrolSourceCalls.api++;\n\t\t\treturn [{ label: 'Api option', value: 'api-value' }];\n\t\t},\n\t\tparams: undefined\n\t}),\n\trequest: defineAsamOptions().request({\n\t\trequest: { method: 'get', url: '/local-control-types' }\n\t}),\n\tdict: defineAsamDictSource({ dictType: 'local-control-types' })\n};\nconst sourceTypeOptions = ref<readonly AsamOption<AsamValue, object>[]>([]),\n\tsourceTypeModel = ref<SourceTypeModel>({ choice: null }),\n\tsourceTypeForm = ref<AsamFormExpose<SourceTypeModel>>();\nconst sourceTypeBuilder = createAsamSchema<SourceTypeModel>()(asamFormControls);\nconst sourceTypeSchema = computed(() => [\n\tsourceTypeBuilder.field({\n\t\tfield: 'choice',\n\t\tcomponent: 'Select',\n\t\tlabel: '来源选项',\n\t\trequired: true,\n\t\tdefaultValue: () => null,\n\t\tdataSource: defineAsamOptions<AsamValue, AsamOption<AsamValue, object>>().static({\n\t\t\toptions: sourceTypeOptions.value,\n\t\t\tfieldNames: { label: 'label', value: 'value' }\n\t\t}),\n\t\tcomponentProps: { teleported: false, placeholder: '选择解析结果' }\n\t})\n]);\nlet sourceTypeLoadId = 0,\n\tsourceTypeValidationId = 0;\nconst controlSourceLoad = ref<{\n\tid: number;\n\tkind: ControlSourceKey;\n\tscope: string;\n\tsourceFrozen: boolean;\n\toptionsFrozen: boolean;\n\toptions: { label: string; value: AsamValue }[];\n\tcalls: typeof controlSourceCalls;\n}>();\nconst sourceTypeSettlement = ref<{\n\tid: number;\n\tvalid: boolean;\n\tfields: string[];\n\tmodel: SourceTypeModel;\n}>();\nasync function loadControlSource(kind: ControlSourceKey) {\n\tconst context = sourceTypeRuntime.createContext();\n\ttry {\n\t\tconst source = controlSources[kind],\n\t\t\toptions = await resolveAsamOptions(source, {\n\t\t\t\t...(sourceTypeRuntime.provider ? { provider: sourceTypeRuntime.provider } : {}),\n\t\t\t\tcontext\n\t\t\t});\n\t\tsourceTypeOptions.value = options;\n\t\tcontrolSourceLoad.value = {\n\t\t\tid: ++sourceTypeLoadId,\n\t\t\tkind,\n\t\t\tscope: context.scope,\n\t\t\tsourceFrozen: Object.isFrozen(source),\n\t\t\toptionsFrozen:\n\t\t\t\tObject.isFrozen(options) && options.every((item) => Object.isFrozen(item)),\n\t\t\toptions: options.map(({ label, value }) => ({ label, value })),\n\t\t\tcalls: { ...controlSourceCalls }\n\t\t};\n\t} finally {\n\t\tsourceTypeRuntime.release(context);\n\t}\n}\nasync function validateSourceTypeForm() {\n\tconst id = ++sourceTypeValidationId;\n\tawait sourceTypeForm.value?.validate((valid, fields) => {\n\t\tsourceTypeSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...sourceTypeModel.value }\n\t\t};\n\t});\n}\nfunction makeControlSourceOrders(): readonly AsamSourceKindTuple<AsamControlSource['kind']>[] {\n\treturn [\n\t\t['static', 'api', 'request', 'dict'],\n\t\t['static', 'api', 'dict', 'request'],\n\t\t['static', 'request', 'api', 'dict'],\n\t\t['static', 'request', 'dict', 'api'],\n\t\t['static', 'dict', 'api', 'request'],\n\t\t['static', 'dict', 'request', 'api'],\n\t\t['api', 'static', 'request', 'dict'],\n\t\t['api', 'static', 'dict', 'request'],\n\t\t['api', 'request', 'static', 'dict'],\n\t\t['api', 'request', 'dict', 'static'],\n\t\t['api', 'dict', 'static', 'request'],\n\t\t['api', 'dict', 'request', 'static'],\n\t\t['request', 'static', 'api', 'dict'],\n\t\t['request', 'static', 'dict', 'api'],\n\t\t['request', 'api', 'static', 'dict'],\n\t\t['request', 'api', 'dict', 'static'],\n\t\t['request', 'dict', 'static', 'api'],\n\t\t['request', 'dict', 'api', 'static'],\n\t\t['dict', 'static', 'api', 'request'],\n\t\t['dict', 'static', 'request', 'api'],\n\t\t['dict', 'api', 'static', 'request'],\n\t\t['dict', 'api', 'request', 'static'],\n\t\t['dict', 'request', 'static', 'api'],\n\t\t['dict', 'request', 'api', 'static']\n\t];\n}\nconst controlSourceRegistration = ref<{\n\torders: {\n\t\texpected: string[];\n\t\tactual: readonly ControlSourceKey[];\n\t\tfrozen: boolean;\n\t\texternalAfter: string[];\n\t}[];\n\trejected: { kind: string; message: string }[];\n\tempty: readonly [];\n\tsingleton: readonly ['api'];\n\tpairs: readonly (readonly ControlSourceKey[])[];\n}>();\nfunction registerControlSourceOrders() {\n\tconst registered = makeControlSourceOrders().map((order) => {\n\t\tconst expected = [...order],\n\t\t\tcontrol = defineAsamControl<AsamValue | null, object, AsamControlSource>({\n\t\t\t\tcomponent: asamFormControls.Select.component,\n\t\t\t\temptyValue: () => null,\n\t\t\t\tsourceKinds: order\n\t\t\t});\n\t\tReflect.apply(Array.prototype.pop, order, []);\n\t\treturn {\n\t\t\texpected,\n\t\t\tactual: control.sourceKinds,\n\t\t\tfrozen: Object.isFrozen(control.sourceKinds),\n\t\t\texternalAfter: [...order]\n\t\t};\n\t});\n\tconst rejected = [];\n\tfor (const sourceKinds of [['api', 'api'], ['unknown'], { api: true }]) {\n\t\ttry {\n\t\t\tReflect.apply(defineAsamControl, undefined, [\n\t\t\t\t{ component: AsamInput, emptyValue: () => null, sourceKinds }\n\t\t\t]);\n\t\t} catch (cause) {\n\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\trejected.push({ kind: cause.kind, message: cause.message });\n\t\t}\n\t}\n\tconst empty = defineAsamControl<string, object>({\n\t\tcomponent: AsamInput,\n\t\temptyValue: () => '',\n\t\tsourceKinds: []\n\t});\n\tconst singleton = defineAsamControl<\n\t\tAsamValue | null,\n\t\tobject,\n\t\tAsamOptionsSource<AsamValue, object, 'api'>\n\t>({\n\t\tcomponent: asamFormControls.RemoteSelect.component,\n\t\temptyValue: () => null,\n\t\tsourceKinds: ['api']\n\t});\n\tconst pairs = [['api', 'request'] as const, ['request', 'api'] as const].map(\n\t\t(sourceKinds) =>\n\t\t\tdefineAsamControl<\n\t\t\t\tAsamValue | null,\n\t\t\t\tobject,\n\t\t\t\tAsamOptionsSource<AsamValue, object, 'api' | 'request'>\n\t\t\t>({\n\t\t\t\tcomponent: asamFormControls.RemoteSelect.component,\n\t\t\t\temptyValue: () => null,\n\t\t\t\tsourceKinds\n\t\t\t}).sourceKinds\n\t);\n\tcontrolSourceRegistration.value = {\n\t\torders: registered,\n\t\trejected,\n\t\tempty: empty.sourceKinds,\n\t\tsingleton: singleton.sourceKinds,\n\t\tpairs\n\t};\n}\n\nconst runtimeContractResult = ref<{ phase: string; state: Record<string, unknown> }[]>([]);\nfunction runRuntimeContract() {\n\tconst observations: { phase: string; state: Record<string, unknown> }[] = [];\n\tconst record = (phase: string, state: Record<string, unknown>) =>\n\t\tobservations.push({ phase, state });\n\tconst configFailure = (action: () => unknown) => {\n\t\ttry {\n\t\t\taction();\n\t\t\tthrow Error('Expected configuration rejection');\n\t\t} catch (cause) {\n\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\treturn { kind: cause.kind, message: cause.message };\n\t\t}\n\t};\n\tconst emptyRuntime: AsamDataRuntime = createAsamDataRuntime();\n\trecord('runtime-default-construction', {\n\t\tscope: emptyRuntime.scope,\n\t\tepoch: emptyRuntime.epoch,\n\t\tproviderAbsent: emptyRuntime.provider === undefined,\n\t\tfrozen: Object.isFrozen(emptyRuntime)\n\t});\n\tconst hostCause = {},\n\t\tfailureCause = {},\n\t\tcalls = { request: 0, hook: 0, notify: 0 };\n\tlet recursive = false;\n\tconst provider: AsamDataProvider = {\n\t\trequest: async () => {\n\t\t\tcalls.request++;\n\t\t\treturn [];\n\t\t},\n\t\tisErrorNotified: (cause) => {\n\t\t\tcalls.hook++;\n\t\t\treturn cause === hostCause;\n\t\t},\n\t\tonError: (error) => {\n\t\t\tcalls.notify++;\n\t\t\trecursive = runtime.reportError(error, errorContext) === error;\n\t\t}\n\t};\n\tconst runtime: AsamDataRuntime = createAsamDataRuntime({ scope: 'runtime-a' });\n\truntime.install(provider);\n\truntime.install(provider);\n\tconst replacement = configFailure(() => runtime.install({}));\n\trecord('runtime-late-install-same-identity-and-replacement-guard', {\n\t\tproviderIdentity: runtime.provider === provider,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\trequestCalls: calls.request,\n\t\treplacement\n\t});\n\tconst a = runtime.createContext(),\n\t\tb = runtime.createContext(),\n\t\tforeign = { ...a };\n\truntime.release(foreign);\n\trecord('runtime-context-identity-readonly-and-foreign-release', {\n\t\tids: [a.requestId, b.requestId],\n\t\tscopes: [a.scope, b.scope],\n\t\tepochs: [a.epoch, b.epoch],\n\t\tfrozen: [Object.isFrozen(a), Object.isFrozen(b)],\n\t\tcurrent: [runtime.isCurrent(a), runtime.isCurrent(b), runtime.isCurrent(foreign)],\n\t\taborted: [a.signal.aborted, b.signal.aborted],\n\t\truntimeFrozen: Object.isFrozen(runtime)\n\t});\n\truntime.release(a);\n\truntime.release(a);\n\trecord('runtime-idempotent-release', {\n\t\tcurrent: [runtime.isCurrent(a), runtime.isCurrent(b)],\n\t\taborted: [a.signal.aborted, b.signal.aborted],\n\t\tepoch: runtime.epoch\n\t});\n\tconst events: string[] = [],\n\t\tunsubscribeA = runtime.onInvalidate(() => events.push('A')),\n\t\tunsubscribeB = runtime.onInvalidate(() => events.push('B'));\n\truntime.setScope('runtime-a');\n\trecord('runtime-same-scope-no-invalidation', {\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(b),\n\t\tevents: [...events]\n\t});\n\truntime.setScope('runtime-b');\n\trecord('runtime-scope-change-synchronous-abort-and-all-listeners', {\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(b),\n\t\taborted: b.signal.aborted,\n\t\tevents: [...events]\n\t});\n\tconst c = runtime.createContext();\n\truntime.invalidate();\n\trecord('runtime-explicit-invalidation', {\n\t\tcontext: { id: c.requestId, scope: c.scope, epoch: c.epoch },\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(c),\n\t\taborted: c.signal.aborted,\n\t\tevents: [...events]\n\t});\n\tunsubscribeB();\n\tunsubscribeB();\n\tconst d = runtime.createContext();\n\truntime.invalidate();\n\trecord('runtime-unsubscribe-one-idempotently', {\n\t\tid: d.requestId,\n\t\tcontextEpoch: d.epoch,\n\t\tepoch: runtime.epoch,\n\t\taborted: d.signal.aborted,\n\t\tcurrent: runtime.isCurrent(d),\n\t\tevents: [...events]\n\t});\n\tunsubscribeA();\n\truntime.invalidate();\n\trecord('runtime-unsubscribe-all', { epoch: runtime.epoch, events: [...events] });\n\tconst errorContext = runtime.createContext(),\n\t\toriginal = new AsamDataFailure('request', 'owned runtime request failure', failureCause),\n\t\treported = runtime.reportError(original, errorContext);\n\trecord('runtime-normal-error-notification-recursion-and-dedup', {\n\t\tid: errorContext.requestId,\n\t\tscope: errorContext.scope,\n\t\tepoch: errorContext.epoch,\n\t\tkind: reported.kind,\n\t\tmessage: reported.message,\n\t\tcausePreserved: reported.cause === failureCause,\n\t\trequestId: reported.requestId,\n\t\tnotified: reported.notified,\n\t\tfrozen: Object.isFrozen(reported),\n\t\tsameInput: runtime.reportError(original, errorContext) === reported,\n\t\tsameOutput: runtime.reportError(reported, errorContext) === reported,\n\t\trecursive,\n\t\tcalls: { ...calls }\n\t});\n\tconst owned = runtime.reportError(\n\t\tnew AsamDataFailure('response', 'host handled', hostCause),\n\t\terrorContext\n\t);\n\trecord('runtime-host-owned-error-skips-on-error', {\n\t\tnotified: owned.notified,\n\t\tkind: owned.kind,\n\t\tcausePreserved: owned.cause === hostCause,\n\t\tcalls: { ...calls }\n\t});\n\tconst marked: AsamDataError = {\n\t\t\tkind: 'transform',\n\t\t\tmessage: 'already notified',\n\t\t\tcause: failureCause,\n\t\t\tnotified: true,\n\t\t\trequestId: 999\n\t\t},\n\t\tpreNotified = runtime.reportError(marked, errorContext);\n\trecord('runtime-pre-notified-error-skips-both-hooks', {\n\t\tnotified: preNotified.notified,\n\t\tkind: preNotified.kind,\n\t\tmessage: preNotified.message,\n\t\trequestId: preNotified.requestId,\n\t\tcausePreserved: preNotified.cause === failureCause,\n\t\tcalls: { ...calls }\n\t});\n\tconst sameEpoch = runtime.createContext();\n\trecord('runtime-epoch-wide-error-cache', {\n\t\tcontextId: sameEpoch.requestId,\n\t\tsameResult: runtime.reportError(original, sameEpoch) === reported,\n\t\trequestId: reported.requestId,\n\t\tcalls: { ...calls }\n\t});\n\truntime.release(sameEpoch);\n\truntime.release(errorContext);\n\tconst stale = new AsamDataFailure('request', 'stale', failureCause);\n\trecord('runtime-stale-and-foreign-error-return-original', {\n\t\taborted: errorContext.signal.aborted,\n\t\tcurrent: runtime.isCurrent(errorContext),\n\t\tstaleIdentity: runtime.reportError(stale, errorContext) === stale,\n\t\tforeignIdentity: runtime.reportError(stale, foreign) === stale,\n\t\tcalls: { ...calls }\n\t});\n\truntime.invalidate();\n\tconst nextContext = runtime.createContext(),\n\t\tfresh = runtime.reportError(original, nextContext);\n\trecord('runtime-invalidation-clears-notification-cache', {\n\t\tepoch: runtime.epoch,\n\t\tid: nextContext.requestId,\n\t\tnewResult: fresh !== reported,\n\t\trequestId: fresh.requestId,\n\t\tnotified: fresh.notified,\n\t\tcausePreserved: fresh.cause === failureCause,\n\t\tcalls: { ...calls }\n\t});\n\truntime.release(nextContext);\n\tconst noHookContext = emptyRuntime.createContext(),\n\t\tunhandled = emptyRuntime.reportError(original, noHookContext);\n\trecord('runtime-provider-absent-error-normalization', {\n\t\tkind: unhandled.kind,\n\t\tcausePreserved: unhandled.cause === failureCause,\n\t\tnotified: unhandled.notified,\n\t\trequestId: unhandled.requestId,\n\t\tfrozen: Object.isFrozen(unhandled),\n\t\tdeduplicated: emptyRuntime.reportError(original, noHookContext) === unhandled\n\t});\n\temptyRuntime.release(noHookContext);\n\tconst invalidScopes = ['', ' ', 0, null].map((scope) => ({\n\t\tinput: scope,\n\t\tconstructor: configFailure(() =>\n\t\t\tReflect.apply(createAsamDataRuntime, undefined, [{ scope }])\n\t\t),\n\t\tsetter: configFailure(() => Reflect.apply(runtime.setScope, undefined, [scope]))\n\t}));\n\trecord('runtime-invalid-scope-constructor-and-setter', {\n\t\tinvalidScopes,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcalls: { ...calls }\n\t});\n\tconst invalidProviders: [string, unknown][] = [\n\t\t['null', null],\n\t\t['scalar', 'bad'],\n\t\t...['request', 'upload', 'adaptOptions', 'adaptPage', 'onError', 'isErrorNotified'].map(\n\t\t\t(name) => [name, { [name]: true }] as [string, unknown]\n\t\t),\n\t\t['dict-null', { dict: null }],\n\t\t['dict-get', { dict: { get: true } }],\n\t\t['dict-refresh', { dict: { get: async () => [], refresh: true } }],\n\t\t['pagination-null', { pagination: null }],\n\t\t['pagination-empty-page', { pagination: { page: ' ', pageSize: 'size' } }],\n\t\t['pagination-empty-size', { pagination: { page: 'page', pageSize: '' } }],\n\t\t['pagination-scalar', { pagination: { page: 1, pageSize: 'size' } }],\n\t\t['pagination-duplicate', { pagination: { page: 'same', pageSize: 'same' } }]\n\t];\n\tconst rejectedProviders = invalidProviders.map(([name, value]) => ({\n\t\tname,\n\t\tconstructor: configFailure(() =>\n\t\t\tReflect.apply(createAsamDataRuntime, undefined, [{ provider: value }])\n\t\t),\n\t\tinstaller: configFailure(() => Reflect.apply(runtime.install, undefined, [value]))\n\t}));\n\trecord('runtime-invalid-providers-preserve-installed-provider', {\n\t\trejectedProviders,\n\t\tproviderIdentity: runtime.provider === provider,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcalls: { ...calls }\n\t});\n\truntime.invalidate();\n\temptyRuntime.invalidate();\n\trecord('runtime-final-cleanup-and-zero-transport', {\n\t\tepoch: runtime.epoch,\n\t\temptyEpoch: emptyRuntime.epoch,\n\t\tcurrent: runtime.isCurrent(nextContext),\n\t\taborted: nextContext.signal.aborted,\n\t\tevents: [...events],\n\t\tcalls: { ...calls }\n\t});\n\truntimeContractResult.value = observations;\n}\n\nconst mockContractResult = ref<{ phase: string; state: Record<string, unknown> }[]>([]),\n\tmockContractRunning = ref(false);\nasync function runMockContract() {\n\tmockContractRunning.value = true;\n\tconst observations: { phase: string; state: Record<string, unknown> }[] = [];\n\tconst record = (phase: string, state: Record<string, unknown>) =>\n\t\tobservations.push({ phase, state });\n\tconst rejected = async (action: () => Promise<unknown>) => {\n\t\ttry {\n\t\t\tawait action();\n\t\t\tthrow Error('Expected mock rejection');\n\t\t} catch (cause) {\n\t\t\treturn cause;\n\t\t}\n\t};\n\tconst typedFailure = (cause: unknown) => {\n\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\treturn {\n\t\t\tkind: cause.kind,\n\t\t\tmessage: cause.message,\n\t\t\tcauseAbsent: cause.cause === undefined,\n\t\t\tnotified: cause.notified,\n\t\t\tname: cause.name,\n\t\t\terrorInstance: cause instanceof Error\n\t\t};\n\t};\n\tconst deeplyFrozen = (value: unknown): boolean =>\n\t\tvalue === null ||\n\t\ttypeof value !== 'object' ||\n\t\t(Object.isFrozen(value) &&\n\t\t\tReflect.ownKeys(value).every((key) => deeplyFrozen(Reflect.get(value, key))));\n\tconst gate = () => {\n\t\tlet release = () => {},\n\t\t\treject = (_cause: unknown) => {\n\t\t\t\tvoid _cause;\n\t\t\t};\n\t\tconst wait = new Promise<void>((resolve, fail) => {\n\t\t\trelease = resolve;\n\t\t\treject = fail;\n\t\t});\n\t\treturn { wait, release, reject };\n\t};\n\tconst runtime = createAsamDataRuntime({ scope: 'mock-contract' }),\n\t\tcontext = runtime.createContext(),\n\t\tdefaultProvider = createAsamMockProvider();\n\tif (!defaultProvider.request || !defaultProvider.dict)\n\t\tthrow Error('Public mock methods missing');\n\trecord('mock-default-absent-refresh-and-zero-calls', {\n\t\tfrozen: Object.isFrozen(defaultProvider),\n\t\tdictFrozen: Object.isFrozen(defaultProvider.dict),\n\t\tcalls: defaultProvider.calls.length,\n\t\trefreshAbsent: defaultProvider.dict.refresh === undefined,\n\t\tuploadAbsent: defaultProvider.upload === undefined\n\t});\n\tconst requestCause = { code: 'request-owned' },\n\t\tdictCause = { code: 'dict-owned' },\n\t\trefreshCause = { code: 'refresh-owned' },\n\t\thostData = { value: 1, nested: { ids: [1] } },\n\t\trequestSteps: AsamMockStep<unknown>[] = [{ data: hostData }, { error: requestCause }],\n\t\tdictSteps: AsamMockStep<readonly AsamDictEntry[]>[] = [\n\t\t\t{ data: [{ label: 'One', value: 1, children: [{ label: 'Leaf', value: 2 }] }] },\n\t\t\t{ error: dictCause }\n\t\t],\n\t\trefreshSteps: AsamMockStep<void>[] = [{ data: undefined }, { error: refreshCause }];\n\tconst options: AsamMockProviderOptions = {\n\t\t\trequests: { 'get /items': requestSteps, 'post /items': [{ data: 'posted' }] },\n\t\t\tdictionaries: { items: dictSteps },\n\t\t\trefresh: refreshSteps\n\t\t},\n\t\tprovider: AsamMockProvider = createAsamMockProvider(options);\n\tif (!provider.request || !provider.dict?.refresh)\n\t\tthrow Error('Configured mock methods missing');\n\tconst request = provider.request,\n\t\tdict = provider.dict,\n\t\trefresh = provider.dict.refresh;\n\trequestSteps.push({ data: 'external-step' });\n\tdictSteps.push({ data: [] });\n\trefreshSteps.push({ data: undefined });\n\trecord('mock-option-queues-copied-at-construction', {\n\t\tfrozen: Object.isFrozen(provider),\n\t\tdictFrozen: Object.isFrozen(dict),\n\t\tcalls: provider.calls.length,\n\t\toriginalLengths: [requestSteps.length, dictSteps.length, refreshSteps.length]\n\t});\n\tconst hostConfig = { url: '/items', params: { limit: 1, nested: { ids: [1] } } },\n\t\tresponse = await request(hostConfig, context),\n\t\tfirstCalls = provider.calls,\n\t\tfirstCall = firstCalls[0];\n\tif (!firstCall) throw Error('Mock call missing');\n\thostConfig.params.limit = 2;\n\thostConfig.params.nested.ids.push(2);\n\thostData.value = 2;\n\thostData.nested.ids.push(2);\n\trecord('mock-default-get-request-and-deep-snapshots', {\n\t\tresponse,\n\t\trequest: firstCall.request,\n\t\tkey: firstCall.key,\n\t\tkind: firstCall.kind,\n\t\tcontextIdentity: firstCall.context === context,\n\t\tcallsFrozen: Object.isFrozen(firstCalls),\n\t\tcallFrozen: Object.isFrozen(firstCall),\n\t\trequestFrozen: Object.isFrozen(firstCall.request),\n\t\tresponseFrozen: Object.isFrozen(response),\n\t\trequestDeepFrozen: deeplyFrozen(firstCall.request),\n\t\tresponseDeepFrozen: deeplyFrozen(response),\n\t\thostConfig,\n\t\thostData\n\t});\n\trecord('mock-error-step-preserves-original-cause', {\n\t\tidentity: (await rejected(() => request({ url: '/items' }, context))) === requestCause\n\t});\n\trecord('mock-request-exhaustion-without-implicit-repeat', {\n\t\tfailure: typedFailure(await rejected(() => request({ url: '/items' }, context)))\n\t});\n\trecord('mock-explicit-method-route', {\n\t\tresult: await request({ url: '/items', method: 'post' }, context),\n\t\tkey: provider.calls.at(-1)?.key\n\t});\n\trecord('mock-unconfigured-method-and-route', {\n\t\tmethod: typedFailure(\n\t\t\tawait rejected(() => request({ url: '/items', method: 'put' }, context))\n\t\t),\n\t\troute: typedFailure(await rejected(() => request({ url: '/missing' }, context)))\n\t});\n\tconst dictionary = await dict.get('items', context);\n\trecord('mock-dictionary-success-and-frozen-children', {\n\t\tdictionary,\n\t\tfrozen:\n\t\t\tObject.isFrozen(dictionary) &&\n\t\t\tdictionary.every((item) => Object.isFrozen(item) && Object.isFrozen(item.children)),\n\t\tdeepFrozen: deeplyFrozen(dictionary),\n\t\tcall: provider.calls.at(-1)?.kind,\n\t\tkey: provider.calls.at(-1)?.key\n\t});\n\trecord('mock-dictionary-error-step-preserves-original-cause', {\n\t\tidentity: (await rejected(() => dict.get('items', context))) === dictCause\n\t});\n\trecord('mock-dictionary-exhaustion', {\n\t\tfailure: typedFailure(await rejected(() => dict.get('items', context)))\n\t});\n\trecord('mock-refresh-success-undefined', {\n\t\tundefinedResult: (await refresh(context)) === undefined,\n\t\tkind: provider.calls.at(-1)?.kind,\n\t\tkey: provider.calls.at(-1)?.key\n\t});\n\trecord('mock-refresh-error-step-preserves-original-cause', {\n\t\tidentity: (await rejected(() => refresh(context))) === refreshCause\n\t});\n\trecord('mock-refresh-exhaustion', {\n\t\tfailure: typedFailure(await rejected(() => refresh(context)))\n\t});\n\tconst emptyRefresh = createAsamMockProvider({ refresh: [] });\n\tif (!emptyRefresh.dict?.refresh) throw Error('Empty configured refresh must exist');\n\trecord('mock-empty-refresh-is-configured-but-exhausted', {\n\t\texists: true,\n\t\tfailure: typedFailure(await rejected(() => emptyRefresh.dict!.refresh!(context)))\n\t});\n\tconst combinedCause = { code: 'mixed-owned' },\n\t\tprecedence = createAsamMockProvider({\n\t\t\trequests: {\n\t\t\t\t'get /mixed': [{ data: 'discarded', error: combinedCause }, { error: undefined }]\n\t\t\t}\n\t\t});\n\tif (!precedence.request) throw Error('Mixed request missing');\n\tconst mixedRequest = precedence.request;\n\trecord('mock-data-and-error-step-priority-and-undefined-cause', {\n\t\terrorWins:\n\t\t\t(await rejected(() => mixedRequest({ url: '/mixed' }, context))) === combinedCause,\n\t\tundefinedCausePreserved:\n\t\t\t(await rejected(() => mixedRequest({ url: '/mixed' }, context))) === undefined,\n\t\tcalls: precedence.calls.length\n\t});\n\tconst delays = gate(),\n\t\trejection = gate(),\n\t\tabort = gate(),\n\t\twaitCause = { code: 'wait-owned' },\n\t\tgated = createAsamMockProvider({\n\t\t\trequests: {\n\t\t\t\t'get /gate': [{ data: 'released', wait: delays.wait }, { data: 'next' }],\n\t\t\t\t'get /reject': [{ data: 'unused', wait: rejection.wait }],\n\t\t\t\t'get /abort': [\n\t\t\t\t\t{ data: 'cancelled-data', wait: abort.wait },\n\t\t\t\t\t{ data: 'after-abort' }\n\t\t\t\t],\n\t\t\t\t'get /pre': [{ data: 'not-consumed' }]\n\t\t\t}\n\t\t});\n\tif (!gated.request) throw Error('Gated request missing');\n\tconst gatedRequest = gated.request;\n\tlet settled = false;\n\tconst pending = gatedRequest({ url: '/gate' }, context).then((value) => {\n\t\tsettled = true;\n\t\treturn value;\n\t});\n\tawait Promise.resolve();\n\trecord('mock-wait-gate-pending-with-recorded-call', {\n\t\tsettled,\n\t\tcalls: gated.calls.length,\n\t\tkey: gated.calls[0]?.key\n\t});\n\tdelays.release();\n\trecord('mock-wait-gate-release-and-next-step', {\n\t\tresult: await pending,\n\t\tnext: await gatedRequest({ url: '/gate' }, context),\n\t\tsettled\n\t});\n\tconst rejectedWait = rejected(() => gatedRequest({ url: '/reject' }, context));\n\trejection.reject(waitCause);\n\trecord('mock-wait-gate-rejection-preserves-original', {\n\t\tidentity: (await rejectedWait) === waitCause\n\t});\n\tconst abortContext = runtime.createContext(),\n\t\tabortedWait = rejected(() => gatedRequest({ url: '/abort' }, abortContext));\n\truntime.release(abortContext);\n\trecord('mock-wait-gate-aborts-before-release', {\n\t\tidentity: (await abortedWait) === abortContext.signal.reason,\n\t\taborted: abortContext.signal.aborted,\n\t\tcurrent: runtime.isCurrent(abortContext)\n\t});\n\tabort.release();\n\tawait Promise.resolve();\n\trecord('mock-aborted-wait-consumes-exactly-one-step', {\n\t\tresult: await gatedRequest({ url: '/abort' }, context)\n\t});\n\tconst preContext = runtime.createContext();\n\truntime.release(preContext);\n\tconst preAborted = await rejected(() => gatedRequest({ url: '/pre' }, preContext));\n\trecord('mock-pre-aborted-context-does-not-consume-step', {\n\t\tidentity: preAborted === preContext.signal.reason,\n\t\tresult: await gatedRequest({ url: '/pre' }, context)\n\t});\n\tconst failureKinds: AsamDataError['kind'][] = [\n\t\t'config',\n\t\t'request',\n\t\t'response',\n\t\t'transform',\n\t\t'upload'\n\t];\n\trecord('mock-public-data-failure-full-kind-contract', {\n\t\tfailures: failureKinds.map((kind) => {\n\t\t\tconst failure = new AsamDataFailure(kind, 'public ' + kind, requestCause);\n\t\t\treturn {\n\t\t\t\tkind: failure.kind,\n\t\t\t\tmessage: failure.message,\n\t\t\t\tname: failure.name,\n\t\t\t\tcausePreserved: failure.cause === requestCause,\n\t\t\t\tnotified: failure.notified,\n\t\t\t\terrorInstance: failure instanceof Error,\n\t\t\t\tstackString: typeof failure.stack === 'string',\n\t\t\t\tfrozen: Object.isFrozen(failure)\n\t\t\t};\n\t\t}),\n\t\toptionalCauseAbsent: new AsamDataFailure('request', 'without cause').cause === undefined\n\t});\n\trecord('mock-call-snapshots-fresh-frozen-and-context-linked', {\n\t\tcalls: provider.calls.map((call) => ({\n\t\t\tkind: call.kind,\n\t\t\tkey: call.key,\n\t\t\tcontextId: call.context.requestId,\n\t\t\tcontextScope: call.context.scope,\n\t\t\trequestPresent: call.request !== undefined,\n\t\t\tfrozen: Object.isFrozen(call)\n\t\t})),\n\t\tfirstSnapshotLength: firstCalls.length,\n\t\tcurrentLength: provider.calls.length,\n\t\tfreshArray: provider.calls !== provider.calls,\n\t\tgatedKeys: gated.calls.map((call) => call.key),\n\t\toriginalQueueLengths: [requestSteps.length, dictSteps.length, refreshSteps.length]\n\t});\n\truntime.invalidate();\n\trecord('mock-final-cleanup-historical-context-observes-abort', {\n\t\tcontextAborted: provider.calls.every((call) => call.context.signal.aborted),\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(context),\n\t\tproviderCalls: provider.calls.length,\n\t\tgatedCalls: gated.calls.length\n\t});\n\tmockContractResult.value = observations;\n\tmockContractRunning.value = false;\n}\n\nconst normalizerContractResult = ref<{ phase: string; state: Record<string, unknown> }[]>([]);\nfunction runNormalizerContract() {\n\tconst observations: { phase: string; state: Record<string, unknown> }[] = [];\n\tconst record = (phase: string, state: Record<string, unknown>) =>\n\t\tobservations.push({ phase, state });\n\tconst frozen = (value: unknown): boolean =>\n\t\tvalue === null ||\n\t\ttypeof value !== 'object' ||\n\t\t(Object.isFrozen(value) &&\n\t\t\tReflect.ownKeys(value).every((key) => frozen(Reflect.get(value, key))));\n\tconst failure = (action: () => unknown) => {\n\t\ttry {\n\t\t\taction();\n\t\t\tthrow Error('Expected normalization rejection');\n\t\t} catch (cause) {\n\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\treturn {\n\t\t\t\tkind: cause.kind,\n\t\t\t\tmessage: cause.message,\n\t\t\t\tcauseKind: cause.cause instanceof AsamDataFailure ? cause.cause.kind : null,\n\t\t\t\tcauseName: cause.cause instanceof Error ? cause.cause.name : null\n\t\t\t};\n\t\t}\n\t};\n\tconst values: AsamValue[] = [1, '1', true, false, 0, '', -2.5],\n\t\tinput = values.map((value, i) => ({ label: 'Value-' + i, value })),\n\t\toptions = normalizeAsamOptions(input);\n\trecord('normalizer-default-seven-typed-identities', {\n\t\tvalues: options.map((o) => o.value),\n\t\ttypes: options.map((o) => typeof o.value),\n\t\tfrozen: frozen(options),\n\t\trawIndependent: options.every((o, i) => o.raw !== input[i]),\n\t\tempty: normalizeAsamOptions([])\n\t});\n\tconst host = [\n\t\t\t{ label: '', value: '', disabled: undefined, children: undefined },\n\t\t\t{ label: 'Host', value: 2, meta: { count: 1 } }\n\t\t],\n\t\tsnapshot = normalizeAsamOptions(host);\n\thost[1]!.meta!.count = 2;\n\trecord('normalizer-empty-label-undefined-optionals-and-host-snapshot', {\n\t\toptions: snapshot,\n\t\thostCount: host[1]!.meta!.count,\n\t\tfrozen: frozen(snapshot)\n\t});\n\tconst fields: AsamMapping = {\n\t\t\tlabel: 'name.label',\n\t\t\tvalue: 'id',\n\t\t\tdisabled: 'locked',\n\t\t\tchildren: 'nodes'\n\t\t},\n\t\ttreeRules: AsamOptionRules = { tree: true },\n\t\ttree = normalizeAsamOptions(\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\t'name.label': 'Parent',\n\t\t\t\t\tid: 0,\n\t\t\t\t\tlocked: false,\n\t\t\t\t\tnodes: [{ 'name.label': 'Leaf', id: false }]\n\t\t\t\t}\n\t\t\t],\n\t\t\tfields,\n\t\t\ttreeRules\n\t\t);\n\trecord('normalizer-own-dotted-field-mapping-and-tree', {\n\t\ttree,\n\t\tfrozen: frozen(tree),\n\t\tflatEmptyChildren: normalizeAsamOptions([{ label: 'Leaf', value: 'leaf', children: [] }]),\n\t\tsameKeyMapping: normalizeAsamOptions([{ same: 'same' }], { label: 'same', value: 'same' })\n\t});\n\tconst policies: AsamOptionRules[] = [\n\t\t{ valuePolicy: { multiple: false, valueMode: 'value' } },\n\t\t{ valuePolicy: { multiple: false, valueMode: 'object' } },\n\t\t{ valuePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'array' } },\n\t\t{ valuePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'string' } },\n\t\t{ valuePolicy: { multiple: true, valueMode: 'object', multipleValueMode: 'array' } }\n\t];\n\trecord('normalizer-five-legal-selection-policies', {\n\t\tvalues: policies.map(\n\t\t\t(rule) => normalizeAsamOptions([{ label: 'One', value: 1 }], undefined, rule)[0]?.value\n\t\t),\n\t\tseparatorWhole: normalizeAsamOptions([{ label: 'Colon', value: 'a:b' }], undefined, {\n\t\t\tvaluePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'string' },\n\t\t\tseparator: '::'\n\t\t})[0]?.value\n\t});\n\tconst dictCases: [string, AsamValue[], 'string' | 'number' | 'boolean'][] = [\n\t\t['string', [1, false, 'x'], 'string'],\n\t\t['number', ['+1.5e2', '-.5', '2.', '1E-2'], 'number'],\n\t\t['boolean', [true, 1, 'true', '1', false, 0, 'false', '0'], 'boolean']\n\t];\n\trecord('normalizer-dictionary-value-conversion-and-original-raw', {\n\t\tcases: dictCases.map(([kind, values, type]) => {\n\t\t\tconst result = values.flatMap((value, i) =>\n\t\t\t\tnormalizeAsamOptions([{ label: 'Dict-' + i, value }], undefined, {}, type)\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tkind,\n\t\t\t\tvalues: result.map((o) => o.value),\n\t\t\t\traw: result.map((o) => o.raw.value),\n\t\t\t\tfrozen: result.every((o) => frozen(o))\n\t\t\t};\n\t\t})\n\t});\n\tconst row = (value: unknown) => ({ label: 'Option', value }),\n\t\tcycle: { label: string; value: number; children?: unknown[] } = {\n\t\t\tlabel: 'Cycle',\n\t\t\tvalue: 1\n\t\t};\n\tcycle.children = [cycle];\n\tconst responseCases: [string, unknown, unknown?, unknown?, unknown?][] = [\n\t\t['null', null],\n\t\t['undefined', undefined],\n\t\t['object', {}],\n\t\t['wrapper', { data: [] }],\n\t\t['null-item', [null]],\n\t\t['scalar-item', [1]],\n\t\t['sparse', new Array(2)],\n\t\t['inherited', [Object.create({ label: 'Inherited', value: 1 })]],\n\t\t['numeric-label', [{ label: 1, value: 1 }]],\n\t\t['missing-value', [{ label: 'Missing' }]],\n\t\t['nan', [row(NaN)]],\n\t\t['infinity', [row(Infinity)]],\n\t\t['null-value', [row(null)]],\n\t\t['object-value', [row({})]],\n\t\t['disabled-string', [{ ...row(1), disabled: 'false' }]],\n\t\t['children-object', [{ ...row(1), children: {} }]],\n\t\t['flat-tree', [{ ...row(1), children: [row(2)] }]],\n\t\t['zero-collision', [row(0), row(-0)]],\n\t\t['boolean-duplicate', [row(false), row(false)]],\n\t\t['cycle', [cycle], undefined, { tree: true }],\n\t\t[\n\t\t\t'tree-global-duplicate',\n\t\t\t[{ ...row(1), children: [row(2)] }, row(2)],\n\t\t\tundefined,\n\t\t\t{ tree: true }\n\t\t],\n\t\t['dict-number-boolean', [row(true)], undefined, {}, 'number'],\n\t\t['dict-number-text', [row('bad')], undefined, {}, 'number'],\n\t\t['dict-boolean-case', [row('True')], undefined, {}, 'boolean'],\n\t\t['dict-invalid-input', [row(Infinity)], undefined, {}, 'string'],\n\t\t['dict-number-alias-collision', [row(1), row('1')], undefined, {}, 'number'],\n\t\t['dict-boolean-alias-collision', [row(true), row(1)], undefined, {}, 'boolean']\n\t];\n\trecord('normalizer-twenty-seven-response-rejections', {\n\t\tcases: responseCases.map(([name, ...args]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() => Reflect.apply(normalizeAsamOptions, undefined, args))\n\t\t}))\n\t});\n\tconst stringRules = {\n\t\t\tvaluePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'string' },\n\t\t\tseparator: '::'\n\t\t},\n\t\tstringCases: [string, AsamValue[]][] = [\n\t\t\t['identity-collision', [1, '1']],\n\t\t\t['empty-token', ['']],\n\t\t\t['whole-separator', ['a::b']]\n\t\t];\n\trecord('normalizer-string-token-ambiguity', {\n\t\tcases: stringCases.map(([name, values]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() =>\n\t\t\t\tReflect.apply(normalizeAsamOptions, undefined, [\n\t\t\t\t\tvalues.map(row),\n\t\t\t\t\tundefined,\n\t\t\t\t\tstringRules\n\t\t\t\t])\n\t\t\t)\n\t\t}))\n\t});\n\tconst configCases: [string, unknown, unknown][] = [\n\t\t['fields-null', null, {}],\n\t\t['fields-array', [], {}],\n\t\t['label-missing', { value: 'value' }, {}],\n\t\t['value-missing', { label: 'label' }, {}],\n\t\t['label-number', { label: 1, value: 'value' }, {}],\n\t\t['value-null', { label: 'label', value: null }, {}],\n\t\t['disabled-empty', { label: 'label', value: 'value', disabled: '' }, {}],\n\t\t['children-empty', { label: 'label', value: 'value', children: '' }, {}],\n\t\t['tree-string', undefined, { tree: 'true' }],\n\t\t['policy-scalar', undefined, { valuePolicy: 'bad' }],\n\t\t['multiple-missing', undefined, { valuePolicy: { valueMode: 'value' } }],\n\t\t['multiple-number', undefined, { valuePolicy: { multiple: 1, valueMode: 'value' } }],\n\t\t['mode-invalid', undefined, { valuePolicy: { multiple: false, valueMode: 'wrong' } }],\n\t\t['multi-mode-missing', undefined, { valuePolicy: { multiple: true, valueMode: 'value' } }],\n\t\t[\n\t\t\t'single-extra-mode',\n\t\t\tundefined,\n\t\t\t{ valuePolicy: { multiple: false, valueMode: 'value', multipleValueMode: 'array' } }\n\t\t],\n\t\t[\n\t\t\t'object-string',\n\t\t\tundefined,\n\t\t\t{ valuePolicy: { multiple: true, valueMode: 'object', multipleValueMode: 'string' } }\n\t\t],\n\t\t['separator-empty', undefined, { separator: '' }],\n\t\t['separator-number', undefined, { separator: 1 }]\n\t];\n\trecord('normalizer-eighteen-configuration-rejections', {\n\t\tcases: configCases.map(([name, fields, rules]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() =>\n\t\t\t\tReflect.apply(normalizeAsamOptions, undefined, [[], fields, rules])\n\t\t\t)\n\t\t}))\n\t});\n\tconst hostPage = { list: [{ id: 1, meta: { count: 1 } }], total: 4 },\n\t\tpage = normalizeAsamPage(hostPage);\n\thostPage.list[0]!.meta.count = 2;\n\thostPage.total = 5;\n\trecord('normalizer-page-shape-copy-freeze-and-empty-pages', {\n\t\tpage,\n\t\thost: hostPage,\n\t\tfrozen: frozen(page),\n\t\tzero: normalizeAsamPage({ list: [], total: 0 }),\n\t\tlaterEmpty: normalizeAsamPage({ list: [], total: 4 }),\n\t\tmaxSafe: normalizeAsamPage({ list: [], total: Number.MAX_SAFE_INTEGER }).total\n\t});\n\tconst pageCases: [string, unknown][] = [\n\t\t['null', null],\n\t\t['array', []],\n\t\t['wrapper', { data: { list: [], total: 0 } }],\n\t\t['inherited-list', Object.create({ list: [], total: 0 })],\n\t\t['list-null', { list: null, total: 0 }],\n\t\t['list-scalar', { list: ['row'], total: 1 }],\n\t\t['list-array-row', { list: [[]], total: 1 }],\n\t\t['list-hole', { list: new Array(2), total: 2 }],\n\t\t['total-missing', { list: [] }],\n\t\t['total-inherited', Object.assign(Object.create({ total: 0 }), { list: [] })],\n\t\t['total-string', { list: [], total: '0' }],\n\t\t['total-negative', { list: [], total: -1 }],\n\t\t['total-fraction', { list: [], total: 1.5 }],\n\t\t['total-nan', { list: [], total: NaN }],\n\t\t['total-infinite', { list: [], total: Infinity }],\n\t\t['total-unsafe', { list: [], total: Number.MAX_SAFE_INTEGER + 1 }],\n\t\t['zero-with-rows', { list: [{ id: 1 }], total: 0 }]\n\t];\n\trecord('normalizer-seventeen-page-rejections', {\n\t\tcases: pageCases.map(([name, value]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() => normalizeAsamPage(value))\n\t\t}))\n\t});\n\tconst calls = { transform: 0, adapter: 0 },\n\t\tenvelope = { rows: [{ id: 1 }], count: 2 },\n\t\ttransformed = resolveAsamPage(envelope, (value) => {\n\t\t\tcalls.transform++;\n\t\t\treturn { list: value.rows, total: value.count };\n\t\t}),\n\t\tadapted = resolveAsamPage(envelope, undefined, {\n\t\t\tadaptPage: () => {\n\t\t\t\tcalls.adapter++;\n\t\t\t\treturn { list: envelope.rows, total: envelope.count };\n\t\t\t}\n\t\t}),\n\t\tdirect = resolveAsamPage({ list: [{ id: 3 }], total: 1 });\n\tenvelope.rows[0]!.id = 2;\n\trecord('normalizer-page-two-public-overloads-and-default', {\n\t\ttransformed,\n\t\tadapted,\n\t\tdirect,\n\t\tcalls: { ...calls },\n\t\thost: envelope,\n\t\tfrozen: frozen(transformed) && frozen(adapted) && frozen(direct)\n\t});\n\tconst explicit = Reflect.apply(resolveAsamPage, undefined, [\n\t\t{ rows: [{ id: 4 }], count: 1 },\n\t\t(value: { rows: { id: number }[]; count: number }) => {\n\t\t\tcalls.transform++;\n\t\t\treturn { list: value.rows, total: value.count };\n\t\t},\n\t\t{\n\t\t\tadaptPage: () => {\n\t\t\t\tcalls.adapter++;\n\t\t\t\tthrow Error('Unexpected adapter');\n\t\t\t}\n\t\t}\n\t]);\n\trecord('normalizer-dynamic-transform-precedence-over-adapter', {\n\t\tpage: explicit,\n\t\tcalls: { ...calls },\n\t\tfrozen: frozen(explicit)\n\t});\n\tconst transformCause = Error('owned page transform'),\n\t\tadapterCause = Error('owned page adapter');\n\tconst transformFailure = failure(() =>\n\t\t\tresolveAsamPage(envelope, () => {\n\t\t\t\tthrow transformCause;\n\t\t\t})\n\t\t),\n\t\tadapterFailure = failure(() =>\n\t\t\tresolveAsamPage(envelope, undefined, {\n\t\t\t\tadaptPage: () => {\n\t\t\t\t\tthrow adapterCause;\n\t\t\t\t}\n\t\t\t})\n\t\t);\n\trecord('normalizer-page-error-stage-and-original-cause', {\n\t\ttransform: transformFailure,\n\t\tadapter: adapterFailure,\n\t\ttransformCausePreserved: (() => {\n\t\t\ttry {\n\t\t\t\tresolveAsamPage(envelope, () => {\n\t\t\t\t\tthrow transformCause;\n\t\t\t\t});\n\t\t\t\treturn false;\n\t\t\t} catch (cause) {\n\t\t\t\treturn cause instanceof AsamDataFailure && cause.cause === transformCause;\n\t\t\t}\n\t\t})(),\n\t\tadapterCausePreserved: (() => {\n\t\t\ttry {\n\t\t\t\tresolveAsamPage(envelope, undefined, {\n\t\t\t\t\tadaptPage: () => {\n\t\t\t\t\t\tthrow adapterCause;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\treturn false;\n\t\t\t} catch (cause) {\n\t\t\t\treturn cause instanceof AsamDataFailure && cause.cause === adapterCause;\n\t\t\t}\n\t\t})(),\n\t\tmalformedDefault: failure(() => resolveAsamPage({ data: [] })),\n\t\tmalformedTransform: failure(() =>\n\t\t\tReflect.apply(resolveAsamPage, undefined, [envelope, () => ({ list: null, total: 0 })])\n\t\t)\n\t});\n\tnormalizerContractResult.value = observations;\n}\nconst sourceContractResult = ref<{ phase: string; state: Record<string, unknown> }[]>([]);\nconst sourceContractBusy = ref(false);\nasync function runSourceContract() {\n\tsourceContractBusy.value = true;\n\tsourceContractResult.value = [];\n\tconst observations: { phase: string; state: Record<string, unknown> }[] = [];\n\tconst record = (phase: string, state: Record<string, unknown>) =>\n\t\tobservations.push({ phase, state });\n\tconst context = (signal = new AbortController().signal): AsamRequestContext => ({\n\t\tsignal,\n\t\trequestId: 7,\n\t\tscope: 'source-example',\n\t\tepoch: 2\n\t});\n\tconst frozen = (value: unknown): boolean =>\n\t\tvalue === null ||\n\t\ttypeof value !== 'object' ||\n\t\t(Object.isFrozen(value) &&\n\t\t\tReflect.ownKeys(value).every((key) => frozen(Reflect.get(value, key))));\n\tconst failure = (cause: unknown, original?: unknown) => {\n\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\treturn {\n\t\t\tkind: cause.kind,\n\t\t\tmessage: cause.message,\n\t\t\tcauseKind: cause.cause instanceof AsamDataFailure ? cause.cause.kind : null,\n\t\t\toriginalCause: original === undefined ? null : cause.cause === original,\n\t\t\tnotified: cause.notified\n\t\t};\n\t};\n\tconst rejectSync = (action: () => unknown) => {\n\t\ttry {\n\t\t\taction();\n\t\t} catch (cause) {\n\t\t\treturn failure(cause);\n\t\t}\n\t\tthrow Error('Expected source construction rejection');\n\t};\n\tconst rejectAsync = async (action: () => Promise<unknown>, original?: unknown) => {\n\t\ttry {\n\t\t\tawait action();\n\t\t} catch (cause) {\n\t\t\treturn failure(cause, original);\n\t\t}\n\t\tthrow Error('Expected source resolution rejection');\n\t};\n\ttry {\n\t\tconst factory: AsamDefaultOptionsFactory = defineAsamOptions();\n\t\tconst typed: AsamOptionsFactory<\n\t\t\tnumber,\n\t\t\t{ title: string; id: number; meta: { count: number } }\n\t\t> = defineAsamOptions<number, { title: string; id: number; meta: { count: number } }>();\n\t\tconst host = [{ title: 'Initial', id: 1, meta: { count: 1 } }],\n\t\t\tfields = { label: 'title', value: 'id' },\n\t\t\tsource = factory.static({ options: host, fieldNames: fields });\n\t\tconst cache: AsamOptionsCache = { ttlMs: 1000, key: () => 'owned-key' };\n\t\tconst apiSource = factory.api({ api: async () => [], params: undefined, cache });\n\t\tconst requestSource = factory.request({ request: { url: '/source-example' } }),\n\t\t\tdictSource = defineAsamDictSource({ dictType: 'source-example' });\n\t\tconst kinds: AsamSourceKind[] = [\n\t\t\tsource.kind,\n\t\t\tapiSource.kind,\n\t\t\trequestSource.kind,\n\t\t\tdictSource.kind\n\t\t];\n\t\trecord('source-factory-four-kinds-and-opaque-frozen-identity', {\n\t\t\tkinds,\n\t\t\tsourcesFrozen: [source, apiSource, requestSource, dictSource].every(Object.isFrozen),\n\t\t\tkeys: [source, apiSource, requestSource, dictSource].map(Object.keys),\n\t\t\tsymbols: Object.getOwnPropertySymbols(source).length,\n\t\t\tfactoryKeys: Object.keys(factory),\n\t\t\tdistinct:\n\t\t\t\tsource !==\n\t\t\t\ttyped.static({ options: host, fieldNames: { label: 'title', value: 'id' } }),\n\t\t\tcacheHostFrozen: Object.isFrozen(cache)\n\t\t});\n\t\tfields.label = 'wrong';\n\t\tconst first = await resolveAsamOptions(source, { context: context() });\n\t\thost[0]!.title = 'Changed';\n\t\thost[0]!.meta.count = 2;\n\t\tconst second = await resolveAsamOptions(source, { context: context() });\n\t\trecord('source-static-fields-copy-host-live-read-and-frozen-result', {\n\t\t\tfirst,\n\t\t\tsecond,\n\t\t\tfirstFrozen: frozen(first),\n\t\t\tsecondFrozen: frozen(second),\n\t\t\thostFrozen: Object.isFrozen(host) || Object.isFrozen(host[0]),\n\t\t\trawIndependent: first[0]!.raw !== host[0],\n\t\t\tchangedFieldIgnored: fields.label\n\t\t});\n\t\tconst params = { query: 'before' },\n\t\t\tapiContext = context(),\n\t\t\tcall = { sameParams: false, sameContext: false, transform: 0, adapter: 0 };\n\t\tconst typedApi = defineAsamOptions<number, { title: string; id: number }>().api({\n\t\t\tapi: async (input: { query: string }, current) => {\n\t\t\t\tcall.sameParams = input === params;\n\t\t\t\tcall.sameContext = current === apiContext;\n\t\t\t\treturn { rows: [{ title: input.query, id: 2 }] };\n\t\t\t},\n\t\t\tparams,\n\t\t\ttransform: (response) => {\n\t\t\t\tcall.transform++;\n\t\t\t\treturn response.rows;\n\t\t\t},\n\t\t\tfieldNames: { label: 'title', value: 'id' }\n\t\t});\n\t\tparams.query = 'after';\n\t\tconst apiResult = await resolveAsamOptions(typedApi, {\n\t\t\tcontext: apiContext,\n\t\t\tprovider: {\n\t\t\t\tadaptOptions: () => {\n\t\t\t\t\tcall.adapter++;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\trecord('source-typed-api-param-context-and-transform-precedence', {\n\t\t\toptions: apiResult,\n\t\t\tcalls: call,\n\t\t\tfrozen: frozen(apiResult),\n\t\t\tparamsFrozen: Object.isFrozen(params)\n\t\t});\n\t\tlet apiCalls = 0,\n\t\t\tadapterCalls = 0,\n\t\t\tcacheKeyCalls = 0;\n\t\tconst defaultApi = factory.api({\n\t\t\tapi: async () => {\n\t\t\t\tapiCalls++;\n\t\t\t\treturn { rows: [{ label: 'Adapted', value: true }] };\n\t\t\t},\n\t\t\tparams: undefined,\n\t\t\tcache: {\n\t\t\t\tttlMs: 1000,\n\t\t\t\tkey: () => {\n\t\t\t\t\tcacheKeyCalls++;\n\t\t\t\t\treturn 'same';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst beforeCalls = apiCalls;\n\t\tconst adapted1 = await resolveAsamOptions(defaultApi, {\n\t\t\tcontext: context(),\n\t\t\tprovider: {\n\t\t\t\tadaptOptions: () => {\n\t\t\t\t\tadapterCalls++;\n\t\t\t\t\treturn [{ label: 'Adapted', value: true }];\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst adapted2 = await resolveAsamOptions(defaultApi, {\n\t\t\tcontext: context(),\n\t\t\tprovider: {\n\t\t\t\tadaptOptions: () => {\n\t\t\t\t\tadapterCalls++;\n\t\t\t\t\treturn [{ label: 'Adapted', value: true }];\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst direct = await resolveAsamOptions(\n\t\t\tfactory.api({\n\t\t\t\tapi: async () => [{ label: 'Direct', value: false }],\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\t{ context: context() }\n\t\t);\n\t\trecord('source-default-api-adapter-raw-and-no-one-shot-cache', {\n\t\t\tbeforeCalls,\n\t\t\tapiCalls,\n\t\t\tadapterCalls,\n\t\t\tcacheKeyCalls,\n\t\t\tadapted1,\n\t\t\tadapted2,\n\t\t\tdirect,\n\t\t\tdistinctSnapshots: adapted1 !== adapted2\n\t\t});\n\t\tconst requests: Record<string, unknown>[] = [],\n\t\t\trequestParams = { q: 1 },\n\t\t\trequestData = { body: 2 };\n\t\tfor (const method of [undefined, 'get', 'post', 'put', 'delete'] as const) {\n\t\t\tconst request: AsamRequestConfig = {\n\t\t\t\turl: '/source-method',\n\t\t\t\t...(method === undefined ? {} : { method }),\n\t\t\t\tparams: requestParams,\n\t\t\t\t...(method === undefined || method === 'get' ? {} : { data: requestData })\n\t\t\t};\n\t\t\tconst current = context(),\n\t\t\t\tresult = await resolveAsamOptions(factory.request({ request }), {\n\t\t\t\t\tcontext: current,\n\t\t\t\t\tprovider: {\n\t\t\t\t\t\trequest: async (input, received) => {\n\t\t\t\t\t\t\trequests.push({\n\t\t\t\t\t\t\t\tmethod: input.method,\n\t\t\t\t\t\t\t\turl: input.url,\n\t\t\t\t\t\t\t\tcopiedConfig: input !== request,\n\t\t\t\t\t\t\t\tsameParams: input.params === requestParams,\n\t\t\t\t\t\t\t\tsameData: input.data === request.data,\n\t\t\t\t\t\t\t\tsameContext: received === current\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\treturn [{ label: 'URL', value: 'url' }];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tif (!frozen(result)) throw Error('Request result must be frozen');\n\t\t}\n\t\trecord('source-url-default-get-and-four-method-context-identity', {\n\t\t\trequests,\n\t\t\tparamsFrozen: Object.isFrozen(requestParams),\n\t\t\tdataFrozen: Object.isFrozen(requestData)\n\t\t});\n\t\trecord('source-provider-requirements-before-transport', {\n\t\t\trequest: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(requestSource, { context: context() })\n\t\t\t),\n\t\t\tdict: await rejectAsync(() => resolveAsamOptions(dictSource, { context: context() }))\n\t\t});\n\t\tlet mutableCalls = 0;\n\t\tconst mutableRequest = { url: '/valid' },\n\t\t\tmutableSource = factory.request({ request: mutableRequest });\n\t\tmutableRequest.url = ' ';\n\t\trecord('source-url-revalidation-guards-mutated-host-before-transport', {\n\t\t\tfailure: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(mutableSource, {\n\t\t\t\t\tcontext: context(),\n\t\t\t\t\tprovider: {\n\t\t\t\t\t\trequest: async () => {\n\t\t\t\t\t\t\tmutableCalls++;\n\t\t\t\t\t\t\treturn [];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t),\n\t\t\tcalls: mutableCalls\n\t\t});\n\t\tconst dictionaries: Record<string, unknown>[] = [];\n\t\tfor (const kind of [undefined, 'string', 'number', 'boolean'] as const) {\n\t\t\tconst current = context(),\n\t\t\t\tvalue = kind === 'boolean' ? '1' : 3,\n\t\t\t\tdict = defineAsamDictSource({\n\t\t\t\t\tdictType: ' spaced ',\n\t\t\t\t\t...(kind === undefined ? {} : { dictValueType: kind })\n\t\t\t\t});\n\t\t\tlet sameContext = false,\n\t\t\t\treceivedType = '';\n\t\t\tconst options = await resolveAsamOptions(dict, {\n\t\t\t\tcontext: current,\n\t\t\t\tprovider: {\n\t\t\t\t\tdict: {\n\t\t\t\t\t\tget: async (type, received) => {\n\t\t\t\t\t\t\tsameContext = current === received;\n\t\t\t\t\t\t\treceivedType = type;\n\t\t\t\t\t\t\treturn [{ label: 'Dict', value }];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tdictionaries.push({\n\t\t\t\tkind: kind ?? 'default',\n\t\t\t\tvalue: options[0]?.value,\n\t\t\t\traw: options[0]?.raw.value,\n\t\t\t\tsameContext,\n\t\t\t\treceivedType,\n\t\t\t\tfrozen: frozen(options)\n\t\t\t});\n\t\t}\n\t\trecord('source-dictionary-default-and-three-conversions', { dictionaries });\n\t\tconst forged = [{ kind: 'static' }, { ...source }, new Proxy(source, {})];\n\t\trecord('source-opaque-forged-copy-proxy-rejections', {\n\t\t\tfailures: await Promise.all(\n\t\t\t\tforged.map((value) =>\n\t\t\t\t\trejectAsync(() =>\n\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t{ context: context() }\n\t\t\t\t\t\t])\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t});\n\t\tconst constructors: [string, () => unknown][] = [];\n\t\tfor (const [name, method, valid] of [\n\t\t\t['static', factory.static, { options: [] }],\n\t\t\t['api', factory.api, { api: async () => [], params: undefined }],\n\t\t\t['request', factory.request, { request: { url: '/valid' } }],\n\t\t\t['dict', defineAsamDictSource, { dictType: 'valid' }]\n\t\t] as const) {\n\t\t\tfor (const [suffix, input] of [\n\t\t\t\t['null', null],\n\t\t\t\t['array', []],\n\t\t\t\t['missing', {}],\n\t\t\t\t['wrong', { data: [] }],\n\t\t\t\t['multiple', { ...valid, data: [] }],\n\t\t\t\t[\n\t\t\t\t\t'null-source',\n\t\t\t\t\t{\n\t\t\t\t\t\t...valid,\n\t\t\t\t\t\t[name === 'static' ? 'options' : name === 'dict' ? 'dictType' : name]: null\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\t['extra', { ...valid, foreign: 1 }]\n\t\t\t] as const)\n\t\t\t\tconstructors.push([\n\t\t\t\t\tname + '-' + suffix,\n\t\t\t\t\t() => Reflect.apply(method, undefined, [input])\n\t\t\t\t]);\n\t\t}\n\t\tfor (const kind of ['api', 'request'] as const) {\n\t\t\tconst method = factory[kind],\n\t\t\t\tvalid =\n\t\t\t\t\tkind === 'api'\n\t\t\t\t\t\t? { api: async () => [], params: undefined }\n\t\t\t\t\t\t: { request: { url: '/valid' } };\n\t\t\tfor (const [suffix, extra] of [\n\t\t\t\t['cache-null', { cache: null }],\n\t\t\t\t['cache-zero', { cache: { ttlMs: 0 } }],\n\t\t\t\t['cache-negative', { cache: { ttlMs: -1 } }],\n\t\t\t\t['cache-fraction', { cache: { ttlMs: 1.5 } }],\n\t\t\t\t['cache-infinite', { cache: { ttlMs: Infinity } }],\n\t\t\t\t['cache-unsafe', { cache: { ttlMs: Number.MAX_SAFE_INTEGER + 1 } }],\n\t\t\t\t['cache-key', { cache: { ttlMs: 1, key: 1 } }],\n\t\t\t\t['transform', { transform: 1 }],\n\t\t\t\t['fields-without-transform', { fieldNames: { label: 'label', value: 'value' } }],\n\t\t\t\t['fields-null', { fieldNames: null }]\n\t\t\t] as const)\n\t\t\t\tconstructors.push([\n\t\t\t\t\tkind + '-' + suffix,\n\t\t\t\t\t() => Reflect.apply(method, undefined, [{ ...valid, ...extra }])\n\t\t\t\t]);\n\t\t}\n\t\tfor (const [suffix, input] of [\n\t\t\t['api-nonfunction', { api: 1 }],\n\t\t\t['static-bad-fields', { options: [], fieldNames: { label: '', value: 'value' } }]\n\t\t] as const)\n\t\t\tconstructors.push([\n\t\t\t\tsuffix,\n\t\t\t\t() =>\n\t\t\t\t\tReflect.apply(\n\t\t\t\t\t\tsuffix.startsWith('api') ? factory.api : factory.static,\n\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t[input]\n\t\t\t\t\t)\n\t\t\t]);\n\t\tfor (const [suffix, request] of [\n\t\t\t['url-empty', { url: '' }],\n\t\t\t['url-numeric', { url: 1 }],\n\t\t\t['method-upper', { url: '/x', method: 'GET' }],\n\t\t\t['get-data', { url: '/x', data: {} }],\n\t\t\t['params-array', { url: '/x', params: [] }]\n\t\t] as const)\n\t\t\tconstructors.push([\n\t\t\t\t'request-' + suffix,\n\t\t\t\t() => Reflect.apply(factory.request, undefined, [{ request }])\n\t\t\t]);\n\t\tfor (const [suffix, input] of [\n\t\t\t['empty', { dictType: '' }],\n\t\t\t['whitespace', { dictType: ' ' }],\n\t\t\t['numeric', { dictType: 1 }],\n\t\t\t['null-value-type', { dictType: 'x', dictValueType: null }],\n\t\t\t['unknown-value-type', { dictType: 'x', dictValueType: 'other' }],\n\t\t\t['cache', { dictType: 'x', cache: { ttlMs: 1 } }]\n\t\t] as const)\n\t\t\tconstructors.push([\n\t\t\t\t'dict-' + suffix,\n\t\t\t\t() => Reflect.apply(defineAsamDictSource, undefined, [input])\n\t\t\t]);\n\t\trecord('source-complete-constructor-config-rejections', {\n\t\t\tcases: constructors.map(([name, action]) => ({ name, failure: rejectSync(action) })),\n\t\t\tallowedUndefinedExtra: factory.static({ options: [], ...{ foreign: undefined } }).kind,\n\t\t\tallowedInheritedSource: Reflect.apply(factory.static, undefined, [\n\t\t\t\tObject.create({ options: [] })\n\t\t\t]).kind\n\t\t});\n\t\tlet guardedCalls = 0;\n\t\tconst guardedProvider: AsamDataProvider = {\n\t\t\trequest: async () => {\n\t\t\t\tguardedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tdict: {\n\t\t\t\tget: async () => {\n\t\t\t\t\tguardedCalls++;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tconst guardedApi = factory.api({\n\t\t\tapi: async () => {\n\t\t\t\tguardedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tparams: undefined\n\t\t});\n\t\trecord('source-rules-validation-before-all-remote-io', {\n\t\t\tfailures: await Promise.all(\n\t\t\t\t[guardedApi, requestSource, dictSource].map((current) =>\n\t\t\t\t\trejectAsync(() =>\n\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\tcurrent,\n\t\t\t\t\t\t\t{ context: context(), provider: guardedProvider, separator: '' }\n\t\t\t\t\t\t])\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\tcalls: guardedCalls\n\t\t});\n\t\tconst transportCases: Record<string, unknown>[] = [];\n\t\tfor (const kind of ['api', 'request', 'dict'] as const)\n\t\t\tfor (const mode of ['throw', 'reject', 'non-promise'] as const) {\n\t\t\t\tconst original = Error(kind + '-' + mode),\n\t\t\t\t\trun = () => {\n\t\t\t\t\t\tif (mode === 'throw') throw original;\n\t\t\t\t\t\treturn mode === 'reject' ? Promise.reject(original) : [];\n\t\t\t\t\t};\n\t\t\t\tconst selected =\n\t\t\t\t\tkind === 'api'\n\t\t\t\t\t\t? Reflect.apply(factory.api, undefined, [{ api: run, params: undefined }])\n\t\t\t\t\t\t: kind === 'request'\n\t\t\t\t\t\t\t? requestSource\n\t\t\t\t\t\t\t: dictSource;\n\t\t\t\ttransportCases.push({\n\t\t\t\t\tkind,\n\t\t\t\t\tmode,\n\t\t\t\t\tfailure: await rejectAsync(\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\t\tselected,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcontext: context(),\n\t\t\t\t\t\t\t\t\tprovider: { request: run, dict: { get: run } }\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]),\n\t\t\t\t\t\tmode === 'non-promise' ? undefined : original\n\t\t\t\t\t)\n\t\t\t\t});\n\t\t\t}\n\t\trecord('source-nine-transport-failures-and-original-causes', { cases: transportCases });\n\t\tconst stages: Record<string, unknown>[] = [];\n\t\tfor (const stage of ['transform', 'adapter'] as const)\n\t\t\tfor (const mode of ['throw', 'async-resolve', 'async-reject', 'malformed'] as const) {\n\t\t\t\tconst original = Error(stage + '-' + mode),\n\t\t\t\t\tparse = () => {\n\t\t\t\t\t\tif (mode === 'throw') throw original;\n\t\t\t\t\t\tif (mode === 'async-reject') return Promise.reject(original);\n\t\t\t\t\t\tif (mode === 'async-resolve') return Promise.resolve([]);\n\t\t\t\t\t\treturn {};\n\t\t\t\t\t};\n\t\t\t\tconst selected = Reflect.apply(factory.api, undefined, [\n\t\t\t\t\t{\n\t\t\t\t\t\tapi: async () => [],\n\t\t\t\t\t\tparams: undefined,\n\t\t\t\t\t\t...(stage === 'transform' ? { transform: parse } : {})\n\t\t\t\t\t}\n\t\t\t\t]);\n\t\t\t\tstages.push({\n\t\t\t\t\tstage,\n\t\t\t\t\tmode,\n\t\t\t\t\tfailure: await rejectAsync(\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\t\tselected,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcontext: context(),\n\t\t\t\t\t\t\t\t\tprovider:\n\t\t\t\t\t\t\t\t\t\tstage === 'adapter' ? { adaptOptions: parse } : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]),\n\t\t\t\t\t\tmode === 'throw' ? original : undefined\n\t\t\t\t\t)\n\t\t\t\t});\n\t\t\t}\n\t\trecord('source-eight-transform-adapter-sync-guards-and-error-stages', { cases: stages });\n\t\trecord('source-static-config-versus-remote-response-failures', {\n\t\t\tstatic: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(factory.static({ options: [{ label: 'Bad', value: {} }] }), {\n\t\t\t\t\tcontext: context()\n\t\t\t\t})\n\t\t\t),\n\t\t\tapi: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(factory.api({ api: async () => ({}), params: undefined }), {\n\t\t\t\t\tcontext: context()\n\t\t\t\t})\n\t\t\t),\n\t\t\tdictionary: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(\n\t\t\t\t\tdefineAsamDictSource({ dictType: 'invalid', dictValueType: 'number' }),\n\t\t\t\t\t{\n\t\t\t\t\t\tcontext: context(),\n\t\t\t\t\t\tprovider: {\n\t\t\t\t\t\t\tdict: { get: async () => [{ label: 'Bad', value: 'not-number' }] }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t),\n\t\t\tstaticConstructionRemainsLazy: factory.static({\n\t\t\t\toptions: [{ label: 'Bad', value: {} }]\n\t\t\t}).kind\n\t\t});\n\t\tconst aborted = new AbortController(),\n\t\t\treason = { owned: 'pre-abort' };\n\t\taborted.abort(reason);\n\t\tlet abortedCalls = 0;\n\t\tconst abortApi = factory.api({\n\t\t\tapi: async () => {\n\t\t\t\tabortedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tparams: undefined\n\t\t});\n\t\tconst preAborts: boolean[] = [];\n\t\tfor (const current of [source, abortApi, requestSource, dictSource]) {\n\t\t\ttry {\n\t\t\t\tawait resolveAsamOptions(current, {\n\t\t\t\t\tcontext: context(aborted.signal),\n\t\t\t\t\tprovider: {\n\t\t\t\t\t\trequest: async () => {\n\t\t\t\t\t\t\tabortedCalls++;\n\t\t\t\t\t\t\treturn [];\n\t\t\t\t\t\t},\n\t\t\t\t\t\tdict: {\n\t\t\t\t\t\t\tget: async () => {\n\t\t\t\t\t\t\t\tabortedCalls++;\n\t\t\t\t\t\t\t\treturn [];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch (cause) {\n\t\t\t\tpreAborts.push(cause === reason);\n\t\t\t}\n\t\t}\n\t\trecord('source-pre-abort-exact-reason-four-kinds-zero-io', {\n\t\t\tpreAborts,\n\t\t\tcalls: abortedCalls\n\t\t});\n\t\tconst lateResults: Record<string, unknown>[] = [];\n\t\tfor (const mode of ['resolve', 'reject'] as const) {\n\t\t\tconst controller = new AbortController(),\n\t\t\t\tabortReason = { mode },\n\t\t\t\tlateCause = Error('late-' + mode);\n\t\t\tlet release: (value: unknown) => void = () => {\n\t\t\t\t\tthrow Error('Missing release');\n\t\t\t\t},\n\t\t\t\treject: (cause: unknown) => void = () => {\n\t\t\t\t\tthrow Error('Missing rejection');\n\t\t\t\t},\n\t\t\t\ttransforms = 0,\n\t\t\t\tcalls = 0;\n\t\t\tconst gated = factory.api({\n\t\t\t\tapi: () => {\n\t\t\t\t\tcalls++;\n\t\t\t\t\treturn new Promise<unknown>((done, fail) => {\n\t\t\t\t\t\trelease = done;\n\t\t\t\t\t\treject = fail;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tparams: undefined,\n\t\t\t\ttransform: () => {\n\t\t\t\t\ttransforms++;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst pending = resolveAsamOptions(gated, { context: context(controller.signal) }).then(\n\t\t\t\t() => false,\n\t\t\t\t(cause) => cause === abortReason\n\t\t\t);\n\t\t\tcontroller.abort(abortReason);\n\t\t\tconst promptExactReason = await pending;\n\t\t\tif (mode === 'resolve') release([]);\n\t\t\telse reject(lateCause);\n\t\t\tawait Promise.resolve();\n\t\t\tawait Promise.resolve();\n\t\t\tawait Promise.resolve();\n\t\t\tlateResults.push({ mode, promptExactReason, calls, transforms });\n\t\t}\n\t\trecord('source-prompt-abort-ignored-transport-and-late-settlement', { cases: lateResults });\n\t\tsourceContractResult.value = observations;\n\t} catch (cause) {\n\t\tsourceContractResult.value = [\n\t\t\t...observations,\n\t\t\t{\n\t\t\t\tphase: 'source-contract-unexpected-failure',\n\t\t\t\tstate: { message: cause instanceof Error ? cause.message : String(cause) }\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tsourceContractBusy.value = false;\n\t}\n}\n\nconst optionsStateInjectionTarget = ref<HTMLElement>();\nconst optionsStateContractResult = ref<{ phase: string; state: Record<string, unknown> }[]>([]);\nconst optionsStateContractBusy = ref(false);\nasync function runOptionsStateContract() {\n\toptionsStateContractBusy.value = true;\n\toptionsStateContractResult.value = [];\n\tconst observations: { phase: string; state: Record<string, unknown> }[] = [],\n\t\tscopes: EffectScope[] = [];\n\tconst record = (phase: string, state: Record<string, unknown>) =>\n\t\tobservations.push({ phase, state });\n\tconst attach = (\n\t\tconfig: AsamOptionsStateConfig<AsamValue, AsamRecord>,\n\t\tkind: 'remote' | 'dict' = 'remote'\n\t) => {\n\t\tconst scope = effectScope();\n\t\tscopes.push(scope);\n\t\tconst state = scope.run(() =>\n\t\t\tkind === 'remote' ? useAsamRemoteOptions(config) : useAsamDictOptions(config)\n\t\t);\n\t\tif (!state) throw Error('Missing scoped options state');\n\t\treturn { state, scope };\n\t};\n\tconst snapshot = (state: AsamOptionsState<AsamValue, AsamRecord>) => ({\n\t\tvalues: state.data.value.map((o) => o.value),\n\t\tloading: state.loading.value,\n\t\terror: state.error.value?.kind ?? null,\n\t\terrorMessage: state.error.value?.message ?? null,\n\t\tstale: state.stale.value,\n\t\thasSucceeded: state.hasSucceeded.value,\n\t\tempty: state.empty.value,\n\t\tdataKeySet: state.dataKey.value !== null,\n\t\trequestKeySet: state.requestKey.value !== null,\n\t\tkeysMatch: state.dataKey.value !== null && state.dataKey.value === state.requestKey.value\n\t});\n\tconst settle = async (check: () => boolean) => {\n\t\tfor (let i = 0; i < 100 && !check(); i++) await Promise.resolve();\n\t\tif (!check()) throw Error('Options state did not settle within microtasks');\n\t};\n\tconst gate = () => {\n\t\tlet release: (value: readonly AsamRecord[]) => void = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t},\n\t\t\treject: (cause: unknown) => void = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t};\n\t\tconst promise = new Promise<readonly AsamRecord[]>((done, fail) => {\n\t\t\trelease = done;\n\t\t\treject = fail;\n\t\t});\n\t\treturn { promise, release, reject };\n\t};\n\ttry {\n\t\tconst factory = defineAsamOptions(),\n\t\t\tfirstGate = gate(),\n\t\t\tfailedGate = gate(),\n\t\t\temptyGate = gate(),\n\t\t\tjobs = [firstGate, failedGate, emptyGate];\n\t\tlet calls = 0,\n\t\t\tsuccess = 0,\n\t\t\tlocalErrors = 0,\n\t\t\tnotifications = 0,\n\t\t\tsuccessSame = false,\n\t\t\terrorSame = false;\n\t\tconst runtime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\tnotifications++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\tsource = factory.api({ api: () => jobs[calls++]!.promise, params: undefined });\n\n\t\tconst attached = attach({\n\t\t\tsource,\n\t\t\truntime,\n\t\t\timmediate: false,\n\t\t\tonSuccess: (data) => {\n\t\t\t\tsuccess++;\n\t\t\t\tsuccessSame = data === current?.data.value;\n\t\t\t},\n\t\t\tonError: (error) => {\n\t\t\t\tlocalErrors++;\n\t\t\t\terrorSame = error === current?.error.value;\n\t\t\t}\n\t\t});\n\t\tconst current: AsamOptionsState<AsamValue, AsamRecord> = attached.state;\n\t\trecord('options-state-all-public-members-and-manual-initial-state', {\n\t\t\tmembers: Object.keys(current),\n\t\t\tsnapshot: snapshot(current),\n\t\t\tcalls\n\t\t});\n\t\tconst first = current.reload();\n\t\trecord('options-state-held-loading-before-first-success', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tcalls\n\t\t});\n\t\tfirstGate.release([{ label: 'One', value: 1 }]);\n\t\tconst firstResult = await first;\n\t\trecord('options-state-success-frozen-data-keys-and-callbacks', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tstatus: firstResult.status,\n\t\t\tfromCache: firstResult.status === 'success' ? firstResult.fromCache : null,\n\t\t\tsuccess,\n\t\t\tlocalErrors,\n\t\t\tnotifications,\n\t\t\tsuccessSame,\n\t\t\tfrozen:\n\t\t\t\tObject.isFrozen(current.data.value) &&\n\t\t\t\tObject.isFrozen(current.data.value[0]) &&\n\t\t\t\tObject.isFrozen(current.data.value[0]?.raw)\n\t\t});\n\t\tconst original = Error('owned hook request failure'),\n\t\t\tfailed = current.reload();\n\t\tfailedGate.reject(original);\n\t\tconst failedResult = await failed;\n\t\trecord('options-state-request-failure-retains-stale-success-and-error-hooks', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tstatus: failedResult.status,\n\t\t\toriginalCause: current.error.value?.cause === original,\n\t\t\tnotified: current.error.value?.notified,\n\t\t\tsuccess,\n\t\t\tlocalErrors,\n\t\t\tnotifications,\n\t\t\terrorSame\n\t\t});\n\t\tconst empty = current.reload();\n\t\temptyGate.release([]);\n\t\tconst emptyResult = await empty;\n\t\trecord('options-state-empty-success-clears-error-stale-and-restores-callback', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tstatus: emptyResult.status,\n\t\t\tsuccess,\n\t\t\tlocalErrors,\n\t\t\tnotifications\n\t\t});\n\t\tattached.scope.stop();\n\t\trecord('options-state-disposal-removes-consumer-and-cancels-reload', {\n\t\t\tstatus: (await current.reload()).status,\n\t\t\tcalls,\n\t\t\tsnapshot: snapshot(current)\n\t\t});\n\t\tconst active = ref(false);\n\t\tlet activeCalls = 0;\n\t\tconst activeSource = factory.api({\n\t\t\t\tapi: async () => {\n\t\t\t\t\tactiveCalls++;\n\t\t\t\t\treturn [{ label: 'Active', value: 2 }];\n\t\t\t\t},\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\tactiveState = attach({\n\t\t\t\tsource: activeSource,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tactive,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tconst inactiveInitial = snapshot(activeState),\n\t\t\tinactiveReload = (await activeState.reload()).status;\n\t\tactive.value = true;\n\t\tconst enabledBeforeReload = snapshot(activeState);\n\t\tawait activeState.reload();\n\t\tactive.value = false;\n\t\tconst disabledAfterSuccess = snapshot(activeState),\n\t\t\tinactiveAfterSuccess = (await activeState.reload()).status;\n\t\tactive.value = true;\n\t\tconst restored = snapshot(activeState);\n\t\trecord('options-state-reactive-active-retention-and-immediate-false', {\n\t\t\tinactiveInitial,\n\t\t\tinactiveReload,\n\t\t\tenabledBeforeReload,\n\t\t\tdisabledAfterSuccess,\n\t\t\tinactiveAfterSuccess,\n\t\t\trestored,\n\t\t\tcalls: activeCalls\n\t\t});\n\t\tconst obsolete = gate(),\n\t\t\tlatest = gate();\n\t\tlet raceCalls = 0,\n\t\t\tlateCallbacks = 0;\n\t\tconst raceRuntime = createAsamDataRuntime(),\n\t\t\tquery = ref('old'),\n\t\t\traceApi = (input: { query: string }) => {\n\t\t\t\traceCalls++;\n\t\t\t\treturn input.query === 'old' ? obsolete.promise : latest.promise;\n\t\t\t},\n\t\t\traceSource = computed(() =>\n\t\t\t\tfactory.api({ api: raceApi, params: { query: query.value } })\n\t\t\t),\n\t\t\traceState = attach({\n\t\t\t\tsource: raceSource,\n\t\t\t\truntime: raceRuntime,\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tlateCallbacks++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tconst oldJob = raceState.reload(),\n\t\t\toldKey = raceState.requestKey.value;\n\t\tquery.value = 'new';\n\t\tconst cancelledOld = await oldJob,\n\t\t\tnewJob = raceState.reload(),\n\t\t\tchangedKey = raceState.requestKey.value !== oldKey;\n\t\tlatest.release([{ label: 'New', value: 'new' }]);\n\t\tawait newJob;\n\t\tobsolete.release([{ label: 'Obsolete', value: 'old' }]);\n\t\tawait settle(() => !raceState.loading.value);\n\t\trecord('options-state-source-replacement-cancels-old-and-blocks-late-write', {\n\t\t\tcancelledOld: cancelledOld.status,\n\t\t\tchangedKey,\n\t\t\tsnapshot: snapshot(raceState),\n\t\t\tcalls: raceCalls,\n\t\t\tsuccessCallbacks: lateCallbacks\n\t\t});\n\t\tconst cancelGate = gate();\n\t\tlet cancelCalls = 0,\n\t\t\tcancelCallbacks = 0;\n\t\tconst cancelOwner = attach({\n\t\t\t\tsource: factory.api({\n\t\t\t\t\tapi: () => {\n\t\t\t\t\t\tcancelCalls++;\n\t\t\t\t\t\treturn cancelGate.promise;\n\t\t\t\t\t},\n\t\t\t\t\tparams: undefined\n\t\t\t\t}),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tcancelCallbacks++;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tcancelState = cancelOwner.state,\n\t\t\tcancelJob = cancelState.reload();\n\t\tcancelState.cancel();\n\t\tconst cancelled = await cancelJob;\n\t\tcancelGate.release([{ label: 'Late', value: 9 }]);\n\t\tawait settle(() => !cancelState.loading.value);\n\t\trecord('options-state-explicit-cancel-settles-pending-without-success', {\n\t\t\tstatus: cancelled.status,\n\t\t\tsnapshot: snapshot(cancelState),\n\t\t\tcalls: cancelCalls,\n\t\t\tsuccessCallbacks: cancelCallbacks\n\t\t});\n\t\tconst sharedGate = gate();\n\t\tlet sharedCalls = 0;\n\t\tconst sharedApi = () => {\n\t\t\t\tsharedCalls++;\n\t\t\t\treturn sharedGate.promise;\n\t\t\t},\n\t\t\tsharedSource = factory.api({\n\t\t\t\tapi: sharedApi,\n\t\t\t\tparams: { q: 1 },\n\t\t\t\tcache: { ttlMs: 10000 }\n\t\t\t}),\n\t\t\tsharedRuntime = createAsamDataRuntime(),\n\t\t\tsharedA = attach({\n\t\t\t\tsource: sharedSource,\n\t\t\t\truntime: sharedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state,\n\t\t\tsharedB = attach({\n\t\t\t\tsource: sharedSource,\n\t\t\t\truntime: sharedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tconst sharedJobA = sharedA.reload(),\n\t\t\tsharedJobB = sharedB.reload();\n\t\tconst joined = {\n\t\t\tcalls: sharedCalls,\n\t\t\tsameRequestKey: sharedA.requestKey.value === sharedB.requestKey.value,\n\t\t\tbothLoading: sharedA.loading.value && sharedB.loading.value\n\t\t};\n\t\tsharedA.cancel();\n\t\tconst detached = await sharedJobA;\n\t\tsharedGate.release([{ label: 'Shared', value: 3 }]);\n\t\tawait sharedJobB;\n\t\tconst cached = await sharedA.reload();\n\t\trecord('options-state-cache-shared-flight-independent-cancel-and-rejoin', {\n\t\t\tjoined,\n\t\t\tdetached: detached.status,\n\t\t\tfromCache: cached.status === 'success' ? cached.fromCache : null,\n\t\t\tcalls: sharedCalls,\n\t\t\tsameSnapshot: sharedA.data.value === sharedB.data.value,\n\t\t\ta: snapshot(sharedA),\n\t\t\tb: snapshot(sharedB)\n\t\t});\n\t\tlet isolatedCalls = 0;\n\t\tconst isolatedApi = async () => {\n\t\t\t\tisolatedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tisolatedSource = factory.api({ api: isolatedApi, params: { q: 1 } }),\n\t\t\tisolatedRuntime = createAsamDataRuntime(),\n\t\t\tisolatedA = attach({\n\t\t\t\tsource: isolatedSource,\n\t\t\t\truntime: isolatedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state,\n\t\t\tisolatedB = attach({\n\t\t\t\tsource: isolatedSource,\n\t\t\t\truntime: isolatedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait Promise.all([isolatedA.reload(), isolatedB.reload()]);\n\t\trecord('options-state-uncached-remote-consumers-have-isolated-jobs', {\n\t\t\tcalls: isolatedCalls,\n\t\t\tdifferentRequestKey: isolatedA.requestKey.value !== isolatedB.requestKey.value,\n\t\t\ta: snapshot(isolatedA),\n\t\t\tb: snapshot(isolatedB)\n\t\t});\n\t\tconst ordinaryGate = gate(),\n\t\t\tforceGate = gate();\n\t\tlet forceCalls = 0;\n\t\tconst forceSource = factory.api({\n\t\t\t\tapi: () => [ordinaryGate, forceGate][forceCalls++]!.promise,\n\t\t\t\tparams: undefined,\n\t\t\t\tcache: { ttlMs: 10000 }\n\t\t\t}),\n\t\t\tforceRuntime = createAsamDataRuntime(),\n\t\t\tforceA = attach({ source: forceSource, runtime: forceRuntime, immediate: false }).state,\n\t\t\tforceB = attach({ source: forceSource, runtime: forceRuntime, immediate: false }).state;\n\t\tconst ordinary = forceA.reload(),\n\t\t\tforcedA = forceA.reload({ force: true }),\n\t\t\tforcedB = forceB.reload({ force: true }),\n\t\t\tordinaryCancelled = await ordinary;\n\t\tforceGate.release([{ label: 'Forced', value: 4 }]);\n\t\tconst forceResults = await Promise.all([forcedA, forcedB]);\n\t\tordinaryGate.release([{ label: 'Obsolete', value: 0 }]);\n\t\tawait settle(() => !forceA.loading.value);\n\t\trecord('options-state-force-replaces-normal-flight-and-shares-forced-generation', {\n\t\t\tordinary: ordinaryCancelled.status,\n\t\t\tforced: forceResults.map((r) => r.status),\n\t\t\tfromCache: forceResults.map((r) => (r.status === 'success' ? r.fromCache : null)),\n\t\t\tcalls: forceCalls,\n\t\t\tsameSnapshot: forceA.data.value === forceB.data.value,\n\t\t\ta: snapshot(forceA),\n\t\t\tb: snapshot(forceB)\n\t\t});\n\t\tlet scopedCalls = 0;\n\t\tconst scopedRuntime = createAsamDataRuntime({ scope: 'first' }),\n\t\t\tscopedApi = async () => {\n\t\t\t\tscopedCalls++;\n\t\t\t\treturn [{ label: 'Scope', value: scopedCalls }];\n\t\t\t},\n\t\t\tscopedState = attach({\n\t\t\t\tsource: factory.api({ api: scopedApi, params: undefined, cache: { ttlMs: 10000 } }),\n\t\t\t\truntime: scopedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait scopedState.reload();\n\t\tconst scopeKey = scopedState.requestKey.value;\n\t\tscopedRuntime.setScope('second');\n\t\tconst clearedOnScope = snapshot(scopedState),\n\t\t\tscopeKeyChanged = scopedState.requestKey.value !== scopeKey;\n\t\tawait scopedState.reload();\n\t\tscopedRuntime.invalidate();\n\t\tconst clearedOnInvalidate = snapshot(scopedState);\n\t\tawait scopedState.reload();\n\t\trecord('options-state-scope-epoch-invalidation-clears-data-and-cache', {\n\t\t\tclearedOnScope,\n\t\t\tclearedOnInvalidate,\n\t\t\tscopeKeyChanged,\n\t\t\tcalls: scopedCalls,\n\t\t\tsnapshot: snapshot(scopedState),\n\t\t\tscope: scopedRuntime.scope,\n\t\t\tepoch: scopedRuntime.epoch\n\t\t});\n\t\tconst badSource = shallowRef<AsamOptionsSource<AsamValue, AsamRecord> | undefined>(\n\t\t\tundefined\n\t\t);\n\t\tlet configErrors = 0,\n\t\t\tconfigNotifications = 0;\n\t\tconst badRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\tconfigNotifications++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\tbadState = attach({\n\t\t\t\tsource: badSource,\n\t\t\t\truntime: badRuntime,\n\t\t\t\timmediate: false,\n\t\t\t\tonError: () => {\n\t\t\t\t\tconfigErrors++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tReflect.set(badSource, 'value', Object.freeze({ kind: 'api' }));\n\t\tconst dedup = {\n\t\t\terrors: configErrors,\n\t\t\tnotifications: configNotifications,\n\t\t\tsnapshot: snapshot(badState)\n\t\t};\n\t\tbadSource.value = factory.api({ api: async () => [], params: undefined });\n\t\tawait badState.reload();\n\t\trecord('options-state-config-error-dedup-and-valid-source-recovery', {\n\t\t\tdedup,\n\t\t\trecovered: snapshot(badState),\n\t\t\terrors: configErrors,\n\t\t\tnotifications: configNotifications\n\t\t});\n\t\tconst wrongKinds: Record<string, unknown>[] = [];\n\t\tfor (const [name, kind, input] of [\n\t\t\t['remote-static', 'remote', factory.static({ options: [] })],\n\t\t\t['remote-dict', 'remote', defineAsamDictSource({ dictType: 'x' })],\n\t\t\t['dict-api', 'dict', factory.api({ api: async () => [], params: undefined })],\n\t\t\t['dict-url', 'dict', factory.request({ request: { url: '/x' } })]\n\t\t] as const) {\n\t\t\tconst state = attach(\n\t\t\t\t{ source: input, runtime: createAsamDataRuntime(), immediate: false },\n\t\t\t\tkind\n\t\t\t).state;\n\t\t\twrongKinds.push({\n\t\t\t\tname,\n\t\t\t\tsnapshot: snapshot(state),\n\t\t\t\treload: (await state.reload()).status\n\t\t\t});\n\t\t}\n\t\trecord('options-state-remote-dict-source-kind-restrictions', { cases: wrongKinds });\n\t\tconst invalidConfig: Record<string, unknown>[] = [];\n\t\tfor (const [name, extra] of [\n\t\t\t['negative-debounce', { debounceMs: -1 }],\n\t\t\t['fraction-debounce', { debounceMs: 0.5 }],\n\t\t\t['unsafe-debounce', { debounceMs: Number.MAX_SAFE_INTEGER + 1 }],\n\t\t\t[\n\t\t\t\t'bad-cache-key',\n\t\t\t\t{\n\t\t\t\t\tsource: factory.api({\n\t\t\t\t\t\tapi: async () => [],\n\t\t\t\t\t\tparams: undefined,\n\t\t\t\t\t\tcache: { ttlMs: 1, key: () => '' }\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t],\n\t\t\t[\n\t\t\t\t'throw-cache-key',\n\t\t\t\t{\n\t\t\t\t\tsource: factory.api({\n\t\t\t\t\t\tapi: async () => [],\n\t\t\t\t\t\tparams: undefined,\n\t\t\t\t\t\tcache: {\n\t\t\t\t\t\t\tttlMs: 1,\n\t\t\t\t\t\t\tkey: () => {\n\t\t\t\t\t\t\t\tthrow Error('owned cache key');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t]\n\t\t] as const) {\n\t\t\tconst owner = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: factory.api({ api: async () => [], params: undefined }),\n\t\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\t\timmediate: false,\n\t\t\t\t\t...extra\n\t\t\t\t}\n\t\t\t]);\n\t\t\tinvalidConfig.push({\n\t\t\t\tname,\n\t\t\t\tsnapshot: snapshot(owner.state),\n\t\t\t\treload: (await owner.state.reload()).status\n\t\t\t});\n\t\t}\n\t\trecord('options-state-debounce-and-cache-key-config-guards', { cases: invalidConfig });\n\t\tconst treeSource = factory.api({\n\t\t\t\tapi: async () => [\n\t\t\t\t\t{ label: 'Parent', value: 1, children: [{ label: 'Leaf', value: 2 }] }\n\t\t\t\t],\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\ttreeState = attach({\n\t\t\t\tsource: treeSource,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\ttree: true,\n\t\t\t\timmediate: false,\n\t\t\t\tvaluePolicy: { multiple: true, valueMode: 'object', multipleValueMode: 'array' },\n\t\t\t\tseparator: '::'\n\t\t\t}).state;\n\t\tawait treeState.reload();\n\t\tconst flatState = attach({\n\t\t\tsource: treeSource,\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\timmediate: false\n\t\t}).state;\n\t\tawait flatState.reload();\n\t\trecord('options-state-tree-policy-separator-normalization-versus-flat-error', {\n\t\t\ttree: snapshot(treeState),\n\t\t\tchildren: treeState.data.value[0]?.children?.map((o) => o.value),\n\t\t\tflat: snapshot(flatState)\n\t\t});\n\t\tlet dictCalls = 0,\n\t\t\trefreshCalls = 0;\n\t\tconst dictRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tdict: {\n\t\t\t\t\t\tget: async () => {\n\t\t\t\t\t\t\tdictCalls++;\n\t\t\t\t\t\t\treturn [{ label: 'Dict', value: dictCalls }];\n\t\t\t\t\t\t},\n\t\t\t\t\t\trefresh: async () => {\n\t\t\t\t\t\t\trefreshCalls++;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\tdictInput = defineAsamDictSource({ dictType: 'hook-dict', dictValueType: 'number' }),\n\t\t\tdictA = attach(\n\t\t\t\t{ source: dictInput, runtime: dictRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state,\n\t\t\tdictB = attach(\n\t\t\t\t{ source: dictInput, runtime: dictRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state;\n\t\tawait Promise.all([dictA.reload(), dictB.reload()]);\n\t\tconst beforeForce = {\n\t\t\tcalls: dictCalls,\n\t\t\trefreshCalls,\n\t\t\tsameSnapshot: dictA.data.value === dictB.data.value\n\t\t};\n\t\tconst dictForced = await Promise.all([\n\t\t\tdictA.reload({ force: true }),\n\t\t\tdictB.reload({ force: true })\n\t\t]);\n\t\trecord('options-state-dictionary-sharing-and-deduplicated-force-refresh', {\n\t\t\tbeforeForce,\n\t\t\tcalls: dictCalls,\n\t\t\trefreshCalls,\n\t\t\tstatuses: dictForced.map((r) => r.status),\n\t\t\ta: snapshot(dictA),\n\t\t\tb: snapshot(dictB),\n\t\t\tsameSnapshot: dictA.data.value === dictB.data.value\n\t\t});\n\t\tconst unavailable = attach(\n\t\t\t{\n\t\t\t\tsource: dictInput,\n\t\t\t\truntime: createAsamDataRuntime({ provider: { dict: { get: async () => [] } } }),\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\t'dict'\n\t\t).state;\n\t\tconst noRefresh = await unavailable.reload({ force: true });\n\t\trecord('options-state-dictionary-force-without-refresh-config-error', {\n\t\t\tstatus: noRefresh.status,\n\t\t\tsnapshot: snapshot(unavailable)\n\t\t});\n\t\tconst disposedGate = gate();\n\t\tlet disposedCallbacks = 0;\n\t\tconst disposedOwner = attach({\n\t\t\t\tsource: factory.api({ api: () => disposedGate.promise, params: undefined }),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tdisposedCallbacks++;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tdisposedJob = disposedOwner.state.reload();\n\t\tdisposedOwner.scope.stop();\n\t\tconst disposedResult = await disposedJob;\n\t\tdisposedGate.release([{ label: 'Disposed', value: 9 }]);\n\t\tawait settle(() => !disposedOwner.state.loading.value);\n\t\trecord('options-state-disposal-cancels-held-job-and-blocks-late-callback', {\n\t\t\tstatus: disposedResult.status,\n\t\t\tcallbacks: disposedCallbacks,\n\t\t\treloadAfterDispose: (await disposedOwner.state.reload()).status,\n\t\t\tsnapshot: snapshot(disposedOwner.state)\n\t\t});\n\n\t\tconst searchText = ref('first'),\n\t\t\tdebounceMs = ref(25),\n\t\t\tsearchCalls: string[] = [];\n\t\tlet searchDone: () => void = () => {};\n\t\tconst searchApi = async (params: { q: string }) => {\n\t\t\t\tsearchCalls.push(params.q);\n\t\t\t\treturn [{ label: params.q, value: params.q }];\n\t\t\t},\n\t\t\tsearchInput = computed(() =>\n\t\t\t\tfactory.api({ api: searchApi, params: { q: searchText.value } })\n\t\t\t),\n\t\t\tsearchOwner = attach({\n\t\t\t\tsource: searchInput,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tsearchText,\n\t\t\t\tdebounceMs,\n\t\t\t\tonSuccess: () => searchDone()\n\t\t\t}),\n\t\t\tsearchState = searchOwner.state;\n\t\tawait settle(() => searchState.hasSucceeded.value);\n\t\tconst firstSearch = snapshot(searchState),\n\t\t\tsearchReady = new Promise<void>((done) => {\n\t\t\t\tsearchDone = done;\n\t\t\t});\n\t\tsearchText.value = 'second';\n\t\tsearchText.value = 'third';\n\t\tconst debouncing = snapshot(searchState),\n\t\t\tcallsBeforeDebounce = [...searchCalls];\n\t\tawait searchReady;\n\t\tconst debounced = snapshot(searchState);\n\t\tdebounceMs.value = 0;\n\t\tsearchText.value = 'fourth';\n\t\tawait settle(() => searchState.data.value[0]?.value === 'fourth');\n\t\trecord('options-state-immediate-search-reactivity-default-debounce-and-zero', {\n\t\t\tfirstSearch,\n\t\t\tdebouncing,\n\t\t\tcallsBeforeDebounce,\n\t\t\tdebounced,\n\t\t\tfinal: snapshot(searchState),\n\t\t\tcalls: searchCalls\n\t\t});\n\t\tlet deadlineCalls = 0;\n\t\tconst deadlineSource = factory.api({\n\t\t\t\tapi: async () => {\n\t\t\t\t\tdeadlineCalls++;\n\t\t\t\t\treturn [{ label: 'TTL', value: deadlineCalls }];\n\t\t\t\t},\n\t\t\t\tparams: undefined,\n\t\t\t\tcache: { ttlMs: 200 }\n\t\t\t}),\n\t\t\tdeadlineState = attach({\n\t\t\t\tsource: deadlineSource,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait deadlineState.reload();\n\t\tconst withinDeadline = await deadlineState.reload();\n\t\tawait new Promise<void>((done) => setTimeout(done, 250));\n\t\tconst afterDeadline = await deadlineState.reload();\n\t\trecord('options-state-real-cache-ttl-hit-and-expiry', {\n\t\t\tcalls: deadlineCalls,\n\t\t\twithinDeadline: withinDeadline.status === 'success' ? withinDeadline.fromCache : null,\n\t\t\tafterDeadline: afterDeadline.status === 'success' ? afterDeadline.fromCache : null,\n\t\t\tsnapshot: snapshot(deadlineState),\n\t\t\texpiryObservation: 'real timer after documented 200ms TTL; no clock replacement'\n\t\t});\n\t\tlet serialCalls = 0;\n\t\tconst serialApi = async (_params: Date) => {\n\t\t\t\tvoid _params;\n\t\t\t\tserialCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tserialInput = new Date('2030-01-01T00:00:00Z'),\n\t\t\tfallbackState = attach({\n\t\t\t\tsource: factory.api({ api: serialApi, params: serialInput }),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait fallbackState.reload();\n\t\tconst strictState = attach({\n\t\t\t\tsource: factory.api({\n\t\t\t\t\tapi: serialApi,\n\t\t\t\t\tparams: serialInput,\n\t\t\t\t\tcache: { ttlMs: 1000 }\n\t\t\t\t}),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state,\n\t\t\tcustomKeyState = attach({\n\t\t\t\tsource: factory.api({\n\t\t\t\t\tapi: serialApi,\n\t\t\t\t\tparams: serialInput,\n\t\t\t\t\tcache: { ttlMs: 1000, key: (input) => String(input) }\n\t\t\t\t}),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait customKeyState.reload();\n\t\trecord('options-state-uncached-identity-fallback-versus-cache-key-serialization', {\n\t\t\tcalls: serialCalls,\n\t\t\tfallback: snapshot(fallbackState),\n\t\t\tstrict: snapshot(strictState),\n\t\t\tcustom: snapshot(customKeyState)\n\t\t});\n\t\tconst policy = ref<AsamValuePolicy>({ multiple: false, valueMode: 'value' }),\n\t\t\tseparator = ref('::');\n\t\tlet policyCalls = 0;\n\t\tconst policyState = attach({\n\t\t\tsource: factory.api({\n\t\t\t\tapi: async () => {\n\t\t\t\t\tpolicyCalls++;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{ label: 'Numeric', value: 1 },\n\t\t\t\t\t\t{ label: 'String', value: '1' }\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\timmediate: false,\n\t\t\tvaluePolicy: policy,\n\t\t\tseparator\n\t\t}).state;\n\t\tawait policyState.reload();\n\t\tconst policyBefore = snapshot(policyState);\n\t\tpolicy.value = { multiple: true, valueMode: 'value', multipleValueMode: 'string' };\n\t\tawait policyState.reload();\n\t\tconst policyRejected = snapshot(policyState);\n\t\tpolicy.value = { multiple: true, valueMode: 'object', multipleValueMode: 'array' };\n\t\tseparator.value = '|';\n\t\tawait policyState.reload();\n\t\trecord('options-state-reactive-policy-separator-and-token-error-recovery', {\n\t\t\tbefore: policyBefore,\n\t\t\trejected: policyRejected,\n\t\t\trecovered: snapshot(policyState),\n\t\t\tcalls: policyCalls\n\t\t});\n\n\t\tconst defaultSearch = ref('initial'),\n\t\t\tdefaultCalls: string[] = [];\n\t\tlet defaultDone: () => void = () => {};\n\t\tconst defaultApi = async (input: { q: string }) => {\n\t\t\t\tdefaultCalls.push(input.q);\n\t\t\t\treturn [{ label: input.q, value: input.q }];\n\t\t\t},\n\t\t\tdefaultState = attach({\n\t\t\t\tsource: computed(() =>\n\t\t\t\t\tfactory.api({ api: defaultApi, params: { q: defaultSearch.value } })\n\t\t\t\t),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tsearchText: defaultSearch,\n\t\t\t\tonSuccess: () => defaultDone()\n\t\t\t}).state;\n\t\tawait settle(() => defaultState.hasSucceeded.value);\n\t\tconst defaultReady = new Promise<void>((done) => {\n\t\t\tdefaultDone = done;\n\t\t});\n\t\tdefaultSearch.value = 'discard';\n\t\tdefaultSearch.value = 'default-latest';\n\t\tconst defaultBefore = [...defaultCalls];\n\t\tawait defaultReady;\n\t\trecord('options-state-default-search-debounce-retains-only-latest-input', {\n\t\t\tbefore: defaultBefore,\n\t\t\tcalls: defaultCalls,\n\t\t\tsnapshot: snapshot(defaultState)\n\t\t});\n\t\tconst suspendedActive = ref(true),\n\t\t\tsuspendedGate = gate();\n\t\tlet suspendedCallbacks = 0;\n\t\tconst suspendedState = attach({\n\t\t\t\tsource: factory.api({ api: () => suspendedGate.promise, params: undefined }),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tactive: () => suspendedActive.value,\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tsuspendedCallbacks++;\n\t\t\t\t}\n\t\t\t}).state,\n\t\t\tsuspendedJob = suspendedState.reload();\n\t\tsuspendedActive.value = false;\n\t\tconst suspendedResult = await suspendedJob;\n\t\tsuspendedGate.release([{ label: 'Suspended', value: 9 }]);\n\t\tawait settle(() => !suspendedState.loading.value);\n\t\trecord('options-state-active-getter-suspends-held-request-without-late-success', {\n\t\t\tstatus: suspendedResult.status,\n\t\t\tsnapshot: snapshot(suspendedState),\n\t\t\tcallbacks: suspendedCallbacks\n\t\t});\n\t\tlet refreshFailureCalls = 0,\n\t\t\trefreshAttempts = 0,\n\t\t\trefreshNotifications = 0;\n\t\tconst refreshOriginal = Error('owned dict refresh failure'),\n\t\t\trefreshRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\trefreshNotifications++;\n\t\t\t\t\t},\n\t\t\t\t\tdict: {\n\t\t\t\t\t\tget: async () => {\n\t\t\t\t\t\t\trefreshFailureCalls++;\n\t\t\t\t\t\t\treturn [{ label: 'Refresh', value: refreshFailureCalls }];\n\t\t\t\t\t\t},\n\t\t\t\t\t\trefresh: async () => {\n\t\t\t\t\t\t\trefreshAttempts++;\n\t\t\t\t\t\t\tif (refreshAttempts === 1) throw refreshOriginal;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\trefreshSource = defineAsamDictSource({\n\t\t\t\tdictType: 'refresh-failure',\n\t\t\t\tdictValueType: 'number'\n\t\t\t}),\n\t\t\trefreshA = attach(\n\t\t\t\t{ source: refreshSource, runtime: refreshRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state,\n\t\t\trefreshB = attach(\n\t\t\t\t{ source: refreshSource, runtime: refreshRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state;\n\t\tawait Promise.all([refreshA.reload(), refreshB.reload()]);\n\t\tconst refreshRejected = await Promise.all([\n\t\t\t\trefreshA.reload({ force: true }),\n\t\t\t\trefreshB.reload({ force: true })\n\t\t\t]),\n\t\t\trejectedA = snapshot(refreshA),\n\t\t\trejectedB = snapshot(refreshB),\n\t\t\tsameError = refreshA.error.value === refreshB.error.value,\n\t\t\toriginalRefreshCause = refreshA.error.value?.cause === refreshOriginal;\n\t\tawait Promise.all([refreshA.reload({ force: true }), refreshB.reload({ force: true })]);\n\t\trecord('options-state-dictionary-refresh-failure-shares-notification-and-recovers', {\n\t\t\trejected: refreshRejected.map((r) => r.status),\n\t\t\trejectedA,\n\t\t\trejectedB,\n\t\t\tsameError,\n\t\t\toriginalRefreshCause,\n\t\t\trefreshNotifications,\n\t\t\tcalls: refreshFailureCalls,\n\t\t\trefreshAttempts,\n\t\t\trecoveredA: snapshot(refreshA),\n\t\t\trecoveredB: snapshot(refreshB)\n\t\t});\n\t\tconst missingRuntime: Record<string, unknown>[] = [];\n\t\tfor (const kind of ['remote', 'dict'] as const) {\n\t\t\ttry {\n\t\t\t\tattach(\n\t\t\t\t\t{\n\t\t\t\t\t\tsource: factory.api({ api: async () => [], params: undefined }),\n\t\t\t\t\t\timmediate: false\n\t\t\t\t\t},\n\t\t\t\t\tkind\n\t\t\t\t);\n\t\t\t\tthrow Error('Expected missing runtime');\n\t\t\t} catch (cause) {\n\t\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\t\tmissingRuntime.push({ kind, errorKind: cause.kind, message: cause.message });\n\t\t\t}\n\t\t}\n\t\trecord('options-state-both-hooks-require-runtime-outside-a-component', {\n\t\t\tcases: missingRuntime\n\t\t});\n\t\tif (typeof document !== 'undefined' && optionsStateInjectionTarget.value) {\n\t\t\tlet injected: AsamOptionsState<AsamValue, AsamRecord> | undefined,\n\t\t\t\tinjectedCalls = 0;\n\t\t\tlet mounted = false;\n\t\t\tconst host = document.createElement('div'),\n\t\t\t\tapp = createApp(\n\t\t\t\t\tdefineComponent({\n\t\t\t\t\t\tsetup() {\n\t\t\t\t\t\t\tinjected = useAsamRemoteOptions({\n\t\t\t\t\t\t\t\tsource: factory.api({\n\t\t\t\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\t\t\t\tinjectedCalls++;\n\t\t\t\t\t\t\t\t\t\treturn [{ label: 'Injected', value: 8 }];\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tparams: undefined\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\timmediate: false\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tconst state = injected;\n\t\t\t\t\t\t\treturn () =>\n\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t'output',\n\t\t\t\t\t\t\t\t\t{ 'data-testid': 'options-state-injected-output' },\n\t\t\t\t\t\t\t\t\tJSON.stringify(snapshot(state))\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\toptionsStateInjectionTarget.value.append(host);\n\t\t\tprovideAsamData(app, {});\n\t\t\ttry {\n\t\t\t\tapp.mount(host);\n\t\t\t\tmounted = true;\n\t\t\t\tif (!injected) throw Error('Missing injected state');\n\t\t\t\tconst noInitialRequest = injectedCalls === 0,\n\t\t\t\t\tbefore = snapshot(injected);\n\t\t\t\tawait injected.reload();\n\t\t\t\tawait nextTick();\n\t\t\t\tconst after = snapshot(injected),\n\t\t\t\t\trendered = host.querySelector('output') !== null,\n\t\t\t\t\trenderedSnapshot = JSON.parse(\n\t\t\t\t\t\thost.querySelector('output')?.textContent ?? '{}'\n\t\t\t\t\t);\n\t\t\t\tapp.unmount();\n\t\t\t\tmounted = false;\n\t\t\t\tconst cancelledReload = (await injected.reload()).status;\n\t\t\t\trecord('options-state-mounted-app-injection-and-unmount-cleanup', {\n\t\t\t\t\tnoInitialRequest,\n\t\t\t\t\tbefore,\n\t\t\t\t\tafter,\n\t\t\t\t\trendered,\n\t\t\t\t\trenderedSnapshot,\n\t\t\t\t\tcalls: injectedCalls,\n\t\t\t\t\tcancelledReload\n\t\t\t\t});\n\t\t\t} finally {\n\t\t\t\tif (mounted) app.unmount();\n\t\t\t\thost.remove();\n\t\t\t}\n\t\t}\n\t\toptionsStateContractResult.value = observations;\n\t} catch (cause) {\n\t\toptionsStateContractResult.value = [\n\t\t\t...observations,\n\t\t\t{\n\t\t\t\tphase: 'options-state-contract-unexpected-failure',\n\t\t\t\tstate: { message: cause instanceof Error ? cause.message : String(cause) }\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tfor (const scope of scopes) scope.stop();\n\t\toptionsStateContractBusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.form-events {\n\tmax-height: 32rem;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-7 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-8 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-9 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-10 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-11 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-12 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-13 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-14 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-15 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-16 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-17 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-18 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-19 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "NarrowChoice.vue",
									"sourcePath": "apps/website/examples/AsamForm/layout-registry/ts/NarrowChoice.vue",
									"sha256": "d95b3143a1559f420b8cfcf0ea6b8520959bf1980d8c4ace73c6289e303d5123",
									"source": "<template>\n\t<fieldset class=\"demo-spacing-1\">\n\t\t<legend>{{ caption }}</legend>\n\t\t<AsamRadioItem\n\t\t\tname=\"narrow-status\"\n\t\t\t:model-value=\"modelValue\"\n\t\t\tvalue=\"yes\"\n\t\t\t@change=\"emit('update:modelValue', 'yes')\"\n\t\t>\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t是\n\t\t</AsamRadioItem>\n\t\t<AsamRadioItem\n\t\t\tname=\"narrow-status\"\n\t\t\t:model-value=\"modelValue\"\n\t\t\tvalue=\"no\"\n\t\t\t@change=\"emit('update:modelValue', 'no')\"\n\t\t>\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t否\n\t\t</AsamRadioItem>\n\t</fieldset>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamRadioItem } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamFormNarrowChoiceDemo' });\ndefineProps<{ readonly modelValue: 'yes' | 'no'; readonly caption: string }>();\nconst emit = defineEmits<{ 'update:modelValue': [value: 'yes' | 'no'] }>();\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/layout-registry/js/Demo.vue",
									"sha256": "279fdb29e7ab0d40e19a5dc743c7b76ebd651fe270ca87ba1eea4e303f4c9ee5",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'options-state-contract'\">打开完整选项状态示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭完整选项状态示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-1\" v-if=\"nativeComposition === 'options-state-contract'\" data-testid=\"options-state-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"optionsStateContractBusy\" @click=\"runOptionsStateContract\">验证远程字典状态与生命周期</AsamButton>\n\t\t<div ref=\"optionsStateInjectionTarget\" />\n\t\t<pre data-testid=\"options-state-contract-result\">{{ JSON.stringify(optionsStateContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'source-contract'\">打开完整来源工厂示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭完整来源工厂示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-2\" v-if=\"nativeComposition === 'source-contract'\" data-testid=\"source-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"sourceContractBusy\" @click=\"runSourceContract\">验证四类来源与单次解析</AsamButton>\n\t\t<pre data-testid=\"source-contract-result\">{{ JSON.stringify(sourceContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'normalizer-contract'\">打开选项分页规范化示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭选项分页规范化示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-3\" v-if=\"nativeComposition === 'normalizer-contract'\" data-testid=\"normalizer-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"runNormalizerContract\">验证映射树与分页边界</AsamButton>\n\t\t<pre data-testid=\"normalizer-contract-result\">{{ JSON.stringify(normalizerContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'mock-contract'\">打开确定性数据模拟示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭确定性数据模拟示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-4\" v-if=\"nativeComposition === 'mock-contract'\" data-testid=\"mock-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"mockContractRunning\" @click=\"runMockContract\">验证模拟队列与等待门</AsamButton>\n\t\t<pre data-testid=\"mock-contract-result\">{{ JSON.stringify(mockContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'runtime-contract'\">打开数据运行时示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭数据运行时示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-5\" v-if=\"nativeComposition === 'runtime-contract'\" data-testid=\"runtime-contract-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"runRuntimeContract\">验证运行时完整契约</AsamButton>\n\t\t<pre data-testid=\"runtime-contract-result\">{{ JSON.stringify(runtimeContractResult) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'control-source-types'\">打开控件来源类型示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭控件来源类型示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-6\" v-if=\"nativeComposition === 'control-source-types'\" data-testid=\"control-source-types-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"registerControlSourceOrders\">验证来源种类元组</AsamButton>\n\t\t<AsamButton type=\"default\"\n\t\t\tv-for=\"kind in controlSourceKeys\"\n\t\t\t:key=\"kind\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"loadControlSource(kind)\"\n\t\t>\n\t\t\t解析控件来源 {{ kind }}\n\t\t</AsamButton>\n\t\t<AsamForm\n\t\t\tref=\"sourceTypeForm\"\n\t\t\tv-model=\"sourceTypeModel\"\n\t\t\t:schema=\"sourceTypeSchema\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateSourceTypeForm\">校验来源模型</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"sourceTypeForm?.resetFields()\">重置来源模型</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre data-testid=\"control-source-types-registration\">{{ JSON.stringify(controlSourceRegistration) }}</pre>\n\t\t<pre data-testid=\"control-source-types-load\">{{ JSON.stringify(controlSourceLoad) }}</pre>\n\t\t<pre data-testid=\"control-source-types-model\">{{ JSON.stringify(sourceTypeModel) }}</pre>\n\t\t<pre data-testid=\"control-source-types-settlement\">{{ JSON.stringify(sourceTypeSettlement) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'reserved-props'\">打开控件属性边界示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭控件属性边界示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-7\" v-if=\"nativeComposition === 'reserved-props'\" data-testid=\"reserved-props-case\">\n\t\t<AsamButton type=\"default\"\n\t\t\tv-for=\"key in reservedPropKeys\"\n\t\t\t:key=\"key\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"attemptReservedProp(key)\"\n\t\t>\n\t\t\t拒绝控件属性 {{ key }}\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restoreReservedProps\">恢复合法控件属性</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"captureReservedState\">读取属性观察</AsamButton>\n\t\t<AsamForm\n\t\t\tref=\"reservedForm\"\n\t\t\tv-model=\"reservedModel\"\n\t\t\t:schema=\"reservedSchema\"\n\t\t\t:registry=\"reservedRegistry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateReservedForm\">校验合法属性</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reservedForm?.resetFields()\">重置合法属性</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre data-testid=\"reserved-props-state\">{{ JSON.stringify(reservedState) }}</pre>\n\t\t<pre data-testid=\"reserved-props-settlement\">{{ JSON.stringify(reservedSettlement) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'schema-union'\">打开 schema 联合分支示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭 schema 联合分支示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-8\" v-if=\"nativeComposition === 'schema-union'\" data-testid=\"schema-union-case\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionSourceMode='fixed'\">固定来源分支</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionSourceMode='resolver'\">派生来源分支</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionPropsMode='optional'\">可选控件属性</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionPropsMode='required'\">必填控件属性</AsamButton>\n\t\t<AsamForm\n\t\t\tref=\"unionForm\"\n\t\t\tv-model=\"unionModel\"\n\t\t\t:schema=\"unionSchema\"\n\t\t\t:registry=\"protocolRegistry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateUnionField\">校验联合分支</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"unionForm?.resetFields()\">重置联合分支</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<pre data-testid=\"schema-union-state\">{{ JSON.stringify({source:unionSourceMode,props:unionPropsMode,model:unionModel,component:unionSchema[0].component,hasComponentProps:Object.hasOwn(unionSchema[0],'componentProps'),hasResolver:typeof unionSchema[0].resolveDataSource==='function'}) }}</pre>\n\t\t<pre data-testid=\"schema-union-settlement\">{{ JSON.stringify(unionSettlement) }}</pre>\n\t</section>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'control'\">打开控件注册示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭控件注册示例</AsamButton>\n\t\t<!-- prettier-ignore -->\n\t\t<section class=\"demo-layout-9\" v-if=\"nativeComposition === 'control'\" data-testid=\"control-factory-case\">\n\t\t<AsamForm\n\t\t\tref=\"protocolForm\"\n\t\t\tv-model=\"protocolModel\"\n\t\t\t:schema=\"protocolSchema\"\n\t\t\t:registry=\"protocolRegistry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t>\n\t\t\t<template #actions>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateProtocolControl\">校验注册控件</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"protocolForm?.resetFields()\">重置注册控件</AsamButton>\n\t\t\t</template>\n\t\t</AsamForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkProtocolRegistration\">检查注册约束</AsamButton>\n\t\t<pre data-testid=\"control-factory-definition\">{{ JSON.stringify(protocolDefinition) }}</pre>\n\t\t<pre data-testid=\"control-factory-constraints\">{{ JSON.stringify(protocolConstraints) }}</pre>\n\t\t<pre data-testid=\"control-factory-model\">{{ JSON.stringify(protocolModel) }}</pre>\n\t\t<pre data-testid=\"control-factory-settlement\">{{ JSON.stringify(protocolSettlement) }}</pre>\n\t</section>\n\n\t\t<section class=\"demo-layout-10\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'validation'\">打开原生完整规则表单</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\">关闭原生完整规则表单</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-11\" v-if=\"nativeComposition === 'validation'\" data-testid=\"native-rule-case\">\n\t\t\t<AsamForm\n\t\t\t\tref=\"nativeRuleForm\"\n\t\t\t\tv-model=\"nativeRuleModel\"\n\t\t\t\t:inline=\"false\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t\t:rules=\"nativeRuleRules\"\n\t\t\t\t:validate-on-rule-change=\"false\"\n\t\t\t\tlabel-width=\"auto\"\n\t\t\t\tstyle=\"max-width: 600px\"\n\t\t\t\t@validate=\"onNativeRuleValidate\"\n\t\t\t>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动名称\"\n\t\t\t\t\tprop=\"name\"\n\t\t\t\t>\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.name\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ name: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动区域\"\n\t\t\t\t\tprop=\"region\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"活动区域\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ region: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动数量\"\n\t\t\t\t\tprop=\"count\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSelectV2\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.count\"\n\t\t\t\t\t\t:options=\"nativeCountOptions\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"活动数量\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ count: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\" required>\n\t\t\t\t\t<div style=\"display: flex; width: 100%; align-items: center; gap: 1rem\">\n\t\t\t\t\t\t<AsamFormItem prop=\"date1\">\n\t\t\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\t\t\t:model-value=\"nativeRuleModel.date1\"\n\t\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\t\taria-label=\"选择日期\"\n\t\t\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ date1: $event })\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t\t<span>-</span>\n\t\t\t\t\t\t<AsamFormItem prop=\"date2\">\n\t\t\t\t\t\t\t<AsamTimePicker\n\t\t\t\t\t\t\t\t:model-value=\"nativeRuleModel.date2\"\n\t\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t\taria-label=\"选择时间\"\n\t\t\t\t\t\t\t\tplaceholder=\"选择时间\"\n\t\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ date2: $event })\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"即时配送\"\n\t\t\t\t\tprop=\"delivery\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSwitch\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.delivery\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ delivery: Boolean($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动地点\"\n\t\t\t\t\tprop=\"location\"\n\t\t\t\t>\n\t\t\t\t\t<AsamSegmented\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.location\"\n\t\t\t\t\t\t:options=\"nativeLocations\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ location: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动类型\"\n\t\t\t\t\tprop=\"type\"\n\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxGroup\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.type\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ type: $event.map(String) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\t\tv-for=\"kind in nativeActivityTypes\"\n\t\t\t\t\t\t\t:key=\"kind\"\n\t\t\t\t\t\t\t:value=\"kind\"\n\t\t\t\t\t\t\tname=\"type\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ kind }}\n\t\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t\t</AsamCheckboxGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"资源\"\n\t\t\t\t\tprop=\"resource\"\n\t\t\t\t>\n\t\t\t\t\t<AsamRadioGroup\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.resource\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ resource: String($event) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamRadioItem value=\"Sponsorship\">赞助</AsamRadioItem><AsamRadioItem value=\"Venue\">场地</AsamRadioItem>\n\t\t\t\t\t</AsamRadioGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem\n\t\t\t\t\tlabel=\"活动表单\"\n\t\t\t\t\tprop=\"desc\"\n\t\t\t\t>\n\t\t\t\t\t<AsamTextarea\n\t\t\t\t\t\t:model-value=\"nativeRuleModel.desc\"\n\t\t\t\t\t\t@update:model-value=\"updateNativeRule({ desc: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<div class=\"demo-slot-layout\">\n<div class=\"demo-slot-actions\">\n<AsamButton type=\"default\" @click=\"validateNativeRule(true)\">创建</AsamButton><AsamButton type=\"default\" @click=\"nativeRuleForm?.resetFields()\">\n\t\t\t\t\t\t重置\n\t\t\t\t\t</AsamButton>\n</div>\n</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeRule(false)\">原生规则无回调校验</AsamButton><AsamButton type=\"default\" native-type=\"button\" @click=\"readNativeRuleFields\">读取完整规则字段</AsamButton>\n\t\t\t<pre data-testid=\"native-rule-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel: nativeRuleModel,\n\t\t\t\t\tdate: nativeDateFacts(nativeRuleModel.date1),\n\t\t\t\t\ttime: nativeDateFacts(nativeRuleModel.date2),\n\t\t\t\t\toptionCount: nativeCountOptions.length,\n\t\t\t\t\tevents: nativeRuleEvents,\n\t\t\t\t\tsubmissions: nativeRuleSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"native-rule-settlement\">{{\n\t\t\t\tJSON.stringify(nativeRuleSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"native-rule-callback\">{{ JSON.stringify(nativeRuleCallback) }}</pre>\n\t\t\t<pre data-testid=\"native-rule-fields\">{{ JSON.stringify(nativeRuleFields) }}</pre>\n\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'size'\"\n\t\t\t\t>打开原生尺寸组合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\"\n\t\t\t\t>关闭原生尺寸组合</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-12\" v-if=\"nativeComposition === 'size'\" data-testid=\"native-size-case\">\n\t\t\t<AsamRadioGroup\n\t\t\t\t:model-value=\"nativeSize\"\n\t\t\t\taria-label=\"尺寸控制\"\n\t\t\t\t@update:model-value=\"updateNativeSize\"\n\t\t\t>\n\t\t\t\t<AsamRadioButton v-for=\"density in nativeSizes\" :key=\"density\" :value=\"density\">\n\t\t\t\t\t{{\n\t\t\t\t\t\tdensity\n\t\t\t\t\t}}\n\t\t\t\t</AsamRadioButton>\n\t\t\t</AsamRadioGroup>\n\t\t\t<AsamRadioGroup\n\t\t\t\t:model-value=\"nativeSizePosition\"\n\t\t\t\taria-label=\"位置控制\"\n\t\t\t\t@update:model-value=\"updateNativeSizePosition\"\n\t\t\t>\n\t\t\t\t<AsamRadioButton value=\"left\">左侧</AsamRadioButton><AsamRadioButton value=\"right\">右侧</AsamRadioButton><AsamRadioButton value=\"top\">顶部</AsamRadioButton>\n\t\t\t</AsamRadioGroup>\n\t\t\t<AsamForm\n\t\t\t\tv-model=\"sizeActivity\"\n\t\t\t\t:inline=\"false\"\n\t\t\t\t:label-position=\"nativeSizePosition\"\n\t\t\t\t:size=\"nativeSize\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t\tlabel-width=\"auto\"\n\t\t\t\tstyle=\"max-width: 600px\"\n\t\t\t>\n\t\t\t\t<AsamFormItem label=\"活动名称\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"sizeActivity.name\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ name: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动区域\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"sizeActivity.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"请选择区域\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ region: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\">\n\t\t\t\t\t<div style=\"display: flex; width: 100%; align-items: center; gap: 1rem\">\n\t\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"sizeActivity.date1\"\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ date1: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>-</span><AsamTimePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"sizeActivity.date2\"\n\t\t\t\t\t\t\tplaceholder=\"选择时间\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ date2: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动类型\">\n\t\t\t\t\t<AsamCheckboxGroup\n\t\t\t\t\t\t:model-value=\"sizeActivity.type\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ type: $event.map(String) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamCheckboxButton\n\t\t\t\t\t\t\tv-for=\"kind in nativeSizeTypes\"\n\t\t\t\t\t\t\t:key=\"kind\"\n\t\t\t\t\t\t\t:value=\"kind\"\n\t\t\t\t\t\t\tname=\"type\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ kind }}\n\t\t\t\t\t\t</AsamCheckboxButton>\n\t\t\t\t\t</AsamCheckboxGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"资源\">\n\t\t\t\t\t<AsamRadioGroup\n\t\t\t\t\t\t:model-value=\"sizeActivity.resource\"\n\t\t\t\t\t\t@update:model-value=\"updateSizeActivity({ resource: String($event) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamRadioItem border value=\"Sponsor\">赞助者</AsamRadioItem><AsamRadioItem border value=\"Venue\">场地</AsamRadioItem>\n\t\t\t\t\t</AsamRadioGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<div class=\"demo-slot-layout\">\n<div class=\"demo-slot-actions\">\n<AsamButton type=\"default\" @click=\"submitSizeActivity\">创建</AsamButton><AsamButton type=\"default\">取消</AsamButton>\n</div>\n</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<pre data-testid=\"native-size-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tsize: nativeSize,\n\t\t\t\t\tposition: nativeSizePosition,\n\t\t\t\t\tmodel: sizeActivity,\n\t\t\t\t\tdate: nativeDateFacts(sizeActivity.date1),\n\t\t\t\t\ttime: nativeDateFacts(sizeActivity.date2),\n\t\t\t\t\tsubmissions: sizeSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'basic'\"\n\t\t\t\t>打开原生基础表单组合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = 'inline'\"\n\t\t\t\t>打开原生行内表单组合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeComposition = undefined\"\n\t\t\t\t>关闭原生基础行内组合</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-13\" v-if=\"nativeComposition === 'basic'\" data-testid=\"native-basic-case\">\n\t\t\t<AsamForm\n\t\t\t\tv-model=\"basicActivity\"\n\t\t\t\t:inline=\"false\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t\tlabel-width=\"auto\"\n\t\t\t\tstyle=\"max-width: 600px\"\n\t\t\t>\n\t\t\t\t<AsamFormItem label=\"活动名称\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"basicActivity.name\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ name: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动区域\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"basicActivity.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"请选择区域\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ region: String($event ?? '') })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\">\n\t\t\t\t\t<div style=\"display: flex; width: 100%; align-items: center; gap: 1rem\">\n\t\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"basicActivity.date1\"\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ date1: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span>-</span><AsamTimePicker\n\t\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t\t:model-value=\"basicActivity.date2\"\n\t\t\t\t\t\t\tplaceholder=\"选择时间\"\n\t\t\t\t\t\t\tstyle=\"width: 100%\"\n\t\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ date2: $event })\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"即时配送\">\n\t\t\t\t\t<AsamSwitch\n\t\t\t\t\t\t:model-value=\"basicActivity.delivery\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ delivery: Boolean($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动类型\">\n\t\t\t\t\t<AsamCheckboxGroup\n\t\t\t\t\t\t:model-value=\"basicActivity.type\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ type: $event.map(String) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\t\tv-for=\"kind in nativeActivityTypes\"\n\t\t\t\t\t\t\t:key=\"kind\"\n\t\t\t\t\t\t\t:value=\"kind\"\n\t\t\t\t\t\t\tname=\"type\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ kind }}\n\t\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t\t</AsamCheckboxGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"资源\">\n\t\t\t\t\t<AsamRadioGroup\n\t\t\t\t\t\t:model-value=\"basicActivity.resource\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ resource: String($event) })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamRadioItem value=\"Sponsor\">赞助者</AsamRadioItem><AsamRadioItem value=\"Venue\">场地</AsamRadioItem>\n\t\t\t\t\t</AsamRadioGroup>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动表单\">\n\t\t\t\t\t<AsamTextarea\n\t\t\t\t\t\t:model-value=\"basicActivity.desc\"\n\t\t\t\t\t\t@update:model-value=\"updateBasicActivity({ desc: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<div class=\"demo-slot-layout\">\n<div class=\"demo-slot-actions\">\n<AsamButton type=\"default\" @click=\"submitBasicActivity\">创建</AsamButton><AsamButton type=\"default\">取消</AsamButton>\n</div>\n</div>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<pre data-testid=\"native-basic-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel: basicActivity,\n\t\t\t\t\tdate: nativeDateFacts(basicActivity.date1),\n\t\t\t\t\ttime: nativeDateFacts(basicActivity.date2),\n\t\t\t\t\tsubmissions: basicSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<section class=\"demo-layout-14\" v-if=\"nativeComposition === 'inline'\" data-testid=\"native-inline-case\">\n\t\t\t<AsamForm\n\t\t\t\tv-model=\"inlineActivity\"\n\t\t\t\t:inline=\"true\"\n\t\t\t\t:show-search=\"false\"\n\t\t\t\t:show-reset=\"false\"\n\t\t\t>\n\t\t\t\t<AsamFormItem label=\"审核人\">\n\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t:model-value=\"inlineActivity.user\"\n\t\t\t\t\t\tplaceholder=\"审核人\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tstyle=\"width: 220px\"\n\t\t\t\t\t\t@update:model-value=\"updateInlineActivity({ user: String($event) })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动区域\">\n\t\t\t\t\t<AsamSelect\n\t\t\t\t\t\t:model-value=\"inlineActivity.region\"\n\t\t\t\t\t\t:options=\"nativeZones\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\t:multiple=\"false\"\n\t\t\t\t\t\t:teleported=\"false\"\n\t\t\t\t\t\tplaceholder=\"活动区域\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tstyle=\"width: 220px\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\tupdateInlineActivity({ region: String($event ?? '') })\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem label=\"活动时间\">\n\t\t\t\t\t<AsamDatePicker\n\t\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\t\t:model-value=\"inlineActivity.date\"\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t\tclearable\n\t\t\t\t\t\tstyle=\"width: 220px\"\n\t\t\t\t\t\t@update:model-value=\"updateInlineActivity({ date: $event })\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamFormItem>\n\t\t\t\t<AsamFormItem>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t@click=\"submitInlineActivity\"\n\t\t\t\t\t>\n\t\t\t\t\t\t查询\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</AsamFormItem>\n\t\t\t</AsamForm>\n\t\t\t<pre data-testid=\"native-inline-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel: inlineActivity,\n\t\t\t\t\tdate: nativeDateFacts(inlineActivity.date),\n\t\t\t\t\tsubmissions: inlineSubmissions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dynamicCase = true\"\n\t\t\t\t>打开动态字段组合示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dynamicCase = false\"\n\t\t\t\t>关闭动态字段组合示例</AsamButton\n\t\t\t>\n\t\t\t<section class=\"demo-layout-15\" v-if=\"dynamicCase\" data-testid=\"dynamic-case\">\n\t\t\t\t<AsamForm\n\t\t\t\t\tref=\"dynamicForm\"\n\t\t\t\t\tv-model=\"dynamicModel\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\t:inline=\"false\"\n\t\t\t\t\tlabel-width=\"auto\"\n\t\t\t\t\t:rules=\"dynamicRules\"\n\t\t\t\t\t:validate-on-rule-change=\"false\"\n\t\t\t\t\t@validate=\"onDynamicValidate\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem label=\"电子邮箱\" prop=\"email\">\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"dynamicModel.email\"\n\t\t\t\t\t\t\t@update:model-value=\"updateDynamicEmail\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-for=\"(domain, index) in dynamicModel.domains\"\n\t\t\t\t\t\t:key=\"domain.key\"\n\t\t\t\t\t\t:label=\"'Domain' + index\"\n\t\t\t\t\t\t:prop=\"'domains.' + index + '.value'\"\n\t\t\t\t\t\t:rules=\"{\n\t\t\t\t\t\t\trequired: true,\n\t\t\t\t\t\t\tmessage: 'domain can not be null',\n\t\t\t\t\t\t\ttrigger: 'blur'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:data-domain-key=\"domain.key\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\t:model-value=\"domain.value\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateDynamicDomain(domain.key, $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t\t\t:aria-label=\"'Delete Domain' + index\"\n\t\t\t\t\t\t\t\t@click=\"removeDynamicDomain(domain.key)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t删除\n\t\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateDynamic(false)\"\n\t\t\t\t\t>动态无回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateDynamic(true)\"\n\t\t\t\t\t>动态回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"addDynamicDomain\"\n\t\t\t\t\t>新增域名</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dynamicForm?.resetFields()\"\n\t\t\t\t\t>动态重置</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readDynamicFields\"\n\t\t\t\t\t>读取动态字段状态</AsamButton\n\t\t\t\t>\n\t\t\t\t<pre data-testid=\"dynamic-state\">{{\n\t\t\t\t\tJSON.stringify({ model: dynamicModel, events: dynamicEvents })\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"dynamic-settlement\">{{ JSON.stringify(dynamicSettlement) }}</pre>\n\t\t\t\t<pre data-testid=\"dynamic-callback\">{{ JSON.stringify(dynamicCallback) }}</pre>\n\t\t\t\t<pre data-testid=\"dynamic-fields\">{{ JSON.stringify(dynamicFields) }}</pre>\n\t\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"compositionCase = 'alignment'\"\n\t\t\t\t>打开标签对齐组合示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"compositionCase = 'accessibility'\"\n\t\t\t>\n\t\t\t\t打开可访问性组合示例\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"compositionCase = undefined\"\n\t\t\t\t>关闭对齐可访问性示例</AsamButton\n\t\t\t>\n\t\t\t<section\n\t\t\t\tclass=\"demo-layout-16\"\n\t\t\t\tv-if=\"compositionCase === 'alignment'\"\n\t\t\t\tdata-testid=\"alignment-case\"\n\t\t\t>\n\t\t\t\t<AsamForm\n\t\t\t\t\tv-model=\"alignmentModel\"\n\t\t\t\t\t:inline=\"false\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\tlabel-width=\"auto\"\n\t\t\t\t\t:label-position=\"alignmentFormPosition\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"表单对齐\"\n\t\t\t\t\t\tlabel-position=\"right\"\n\t\t\t\t\t\tdata-testid=\"alignment-form-control\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div role=\"radiogroup\" aria-label=\"标签位置\">\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"position in alignmentFormPositions\"\n\t\t\t\t\t\t\t:key=\"position\"\n\t\t\t\t\t\t><AsamRadioItem\n\t\t\t\t\t\t\tv-model=\"alignmentFormPosition\"\n\t\t\t\t\t\t\t:value=\"position\"\n\t\t\t\t\t\t />{{ position }}</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"表单项对齐\"\n\t\t\t\t\t\tlabel-position=\"right\"\n\t\t\t\t\t\tdata-testid=\"alignment-item-control\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div role=\"radiogroup\" aria-label=\"项目标签位置\">\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"position in alignmentItemPositions\"\n\t\t\t\t\t\t\t:key=\"position\"\n\t\t\t\t\t\t><AsamRadioItem\n\t\t\t\t\t\t\tv-model=\"alignmentItemPosition\"\n\t\t\t\t\t\t\t:value=\"position\"\n\t\t\t\t\t\t />{{ position || 'Empty' }}</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-for=\"field in alignmentFields\"\n\t\t\t\t\t\t:key=\"field.key\"\n\t\t\t\t\t\t:label=\"field.label\"\n\t\t\t\t\t\t:label-position=\"alignmentItemPosition\"\n\t\t\t\t\t\t:data-testid=\"'alignment-' + field.key\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"alignmentModel[field.key]\"\n\t\t\t\t\t\t\t@update:model-value=\"updateAlignment(field.key, $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<pre data-testid=\"alignment-state\">{{\n\t\t\t\t\tJSON.stringify({\n\t\t\t\t\t\tmodel: alignmentModel,\n\t\t\t\t\t\tformPosition: alignmentFormPosition,\n\t\t\t\t\t\titemPosition: alignmentItemPosition\n\t\t\t\t\t})\n\t\t\t\t}}</pre>\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tclass=\"demo-layout-17\"\n\t\t\t\tv-if=\"compositionCase === 'accessibility'\"\n\t\t\t\tdata-testid=\"accessibility-case\"\n\t\t\t>\n\t\t\t\t<p class=\"example-paragraph\">\n\t\t\t\t\tFull Name 标签自动关联单个输入；Your Information\n\t\t\t\t\t标识多输入组，每个输入仍有独立的 aria-label。placeholder 不替代可访问名称。\n\t\t\t\t</p>\n\t\t\t\t<AsamForm\n\t\t\t\t\tv-model=\"accessibilityModel\"\n\t\t\t\t\t:inline=\"false\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\tlabel-position=\"left\"\n\t\t\t\t\tlabel-width=\"auto\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem label=\"完整姓名\" data-testid=\"accessibility-single\">\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"accessibilityModel.fullName\"\n\t\t\t\t\t\t\t@update:model-value=\"updateAccessibility('fullName', $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem label=\"你的信息\" data-testid=\"accessibility-group\">\n\t\t\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\t:model-value=\"accessibilityModel.firstName\"\n\t\t\t\t\t\t\t\taria-label=\"名\"\n\t\t\t\t\t\t\t\tplaceholder=\"名\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateAccessibility('firstName', $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\t:model-value=\"accessibilityModel.lastName\"\n\t\t\t\t\t\t\t\taria-label=\"姓\"\n\t\t\t\t\t\t\t\tplaceholder=\"姓\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateAccessibility('lastName', $event)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<pre data-testid=\"accessibility-state\">{{\n\t\t\t\t\tJSON.stringify(accessibilityModel)\n\t\t\t\t}}</pre>\n\t\t\t</section>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"openValidationCase('custom')\"\n\t\t\t\t>打开自定义校验示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"openValidationCase('number')\"\n\t\t\t\t>打开数字校验示例</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validationCase = undefined\"\n\t\t\t\t>关闭校验示例</AsamButton\n\t\t\t>\n\t\t\t<section class=\"demo-layout-18\" v-if=\"validationCase\" data-testid=\"validation-case\">\n\t\t\t\t<AsamForm\n\t\t\t\t\t:key=\"validationCase\"\n\t\t\t\t\tref=\"validationForm\"\n\t\t\t\t\tv-model=\"validationModel\"\n\t\t\t\t\t:show-search=\"false\"\n\t\t\t\t\t:show-reset=\"false\"\n\t\t\t\t\t:rules=\"validationRules\"\n\t\t\t\t\t:validate-on-rule-change=\"false\"\n\t\t\t\t\tstatus-icon\n\t\t\t\t\t@validate=\"onValidationCaseEvent\"\n\t\t\t\t>\n\t\t\t\t\t<AsamFormItem v-if=\"validationCase === 'custom'\" label=\"密码\" prop=\"password\">\n\t\t\t\t\t\t<AsamPassword\n\t\t\t\t\t\t\t:model-value=\"validationModel.password\"\n\t\t\t\t\t\t\t@update:model-value=\"updateValidationText('password', $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-if=\"validationCase === 'custom'\"\n\t\t\t\t\t\tlabel=\"确认密码\"\n\t\t\t\t\t\tprop=\"confirm\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamPassword\n\t\t\t\t\t\t\t:model-value=\"validationModel.confirm\"\n\t\t\t\t\t\t\t@update:model-value=\"updateValidationText('confirm', $event)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem label=\"年龄\" prop=\"age\">\n\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t:model-value=\"validationModel.age\"\n\t\t\t\t\t\t\t@update:model-value=\"updateValidationAge\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamForm>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateCase(false)\"\n\t\t\t\t\t>示例无回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateCase(true)\"\n\t\t\t\t\t>示例回调提交</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"validationForm?.resetFields()\"\n\t\t\t\t\t>示例重置</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readValidationCase\"\n\t\t\t\t\t>读取示例字段状态</AsamButton\n\t\t\t\t>\n\t\t\t\t<pre data-testid=\"validation-case-state\">{{\n\t\t\t\t\tJSON.stringify({\n\t\t\t\t\t\tkind: validationCase,\n\t\t\t\t\t\tmodel: validationModel,\n\t\t\t\t\t\tpending: ageValidationPending,\n\t\t\t\t\t\tevents: validationEvents,\n\t\t\t\t\t\tcrossValidation: confirmRevalidation\n\t\t\t\t\t})\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"validation-case-settlement\">{{\n\t\t\t\t\tJSON.stringify(validationCaseSettlement)\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"validation-case-callback\">{{\n\t\t\t\t\tJSON.stringify(validationCaseCallback)\n\t\t\t\t}}</pre>\n\t\t\t\t<pre data-testid=\"validation-case-fields\">{{\n\t\t\t\t\tJSON.stringify(validationCaseFields)\n\t\t\t\t}}</pre>\n\t\t\t</section>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"validateNativeSubset('profile.nickname')\"\n\t\t\t>\n\t\t\t\t原生校验嵌套字符串字段\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"validateNativeSubset([['profile', 'nickname']])\"\n\t\t\t>\n\t\t\t\t原生校验嵌套分段数组字段\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeNestedCallback\"\n\t\t\t\t>原生嵌套回调校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setFieldsValue({\n\t\t\t\t\t\tname: 'Mixed live',\n\t\t\t\t\t\tstatus: 'yes',\n\t\t\t\t\t\tprofile: { nickname: 'Nested live' }\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t准备混合当前模型\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setInitialValues({\n\t\t\t\t\t\tname: 'Mixed initial',\n\t\t\t\t\t\tprofile: { nickname: 'Mixed nested A' }\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t混合姓名嵌套基线\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setInitialValues({\n\t\t\t\t\t\tstatus: 'yes',\n\t\t\t\t\t\tprofile: { nickname: 'Mixed nested B' }\n\t\t\t\t\t})\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t混合状态嵌套基线\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setInitialValues({ name: 'Omitted nested' })\"\n\t\t\t>\n\t\t\t\t省略嵌套初始值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tform?.setInitialValues({ name: '', status: 'no', profile: { nickname: '' } })\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t恢复完整嵌套基线\n\t\t\t</AsamButton>\n\t\t\t<fieldset class=\"demo-spacing-1\">\n\t\t\t\t<legend>原生嵌套 FormItem</legend>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"enableNativeItem\"\n\t\t\t\t\t>启用嵌套字段</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disableNativeItem\"\n\t\t\t\t\t>关闭嵌套字段</AsamButton\n\t\t\t\t>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemArrayPath\">使用分段字段路径</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemLabelSlot\">使用字段标签插槽</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemErrorSlot\">使用字段错误插槽</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemRulesEnabled\">使用字段规则</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemRequired\">字段显式必填</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemArrayRules\">使用数组和多触发器规则</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemHideMessage\">隐藏字段校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemInlineMessage\">字段行内校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemExternalError\">字段外部错误</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"itemForcedSuccess\">字段强制成功状态</AsamCheckboxItem>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelPosition = 'left'\"\n\t\t\t\t\t>字段左侧标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelPosition = 'right'\"\n\t\t\t\t\t>字段右侧标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelPosition = 'top'\"\n\t\t\t\t\t>字段顶部标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = 'auto'\"\n\t\t\t\t\t>字段自动标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = 120\"\n\t\t\t\t\t>字段恢复标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelText = '昵称'\"\n\t\t\t\t\t>字段短标签</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemLabelText = '这是较长的嵌套昵称标签'\"\n\t\t\t\t>\n\t\t\t\t\t字段长标签\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelText = '嵌套昵称'\"\n\t\t\t\t\t>字段恢复标签文本</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemRequiredMode = 'explicit'\"\n\t\t\t\t\t>字段显式必填属性</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemRequiredMode = 'undefined'\"\n\t\t\t\t>\n\t\t\t\t\t字段未定义必填属性\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"itemRequiredMode = 'omitted'\"\n\t\t\t\t\t>字段省略必填属性</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = 168\"\n\t\t\t\t\t>字段数字标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemLabelWidth = '200px'\"\n\t\t\t\t\t>字段文本标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'large'\"\n\t\t\t\t\t>字段 large 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'big'\"\n\t\t\t\t\t>字段 big 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'default'\"\n\t\t\t\t\t>字段 default 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"itemSize = 'small'\"\n\t\t\t\t\t>字段 small 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeItem('blur')\"\n\t\t\t\t\t>字段 blur 校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"validateNativeItem('change')\"\n\t\t\t\t\t>字段 change 校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"validateNativeItem('blur', true)\"\n\t\t\t\t\t>字段回调校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeItem?.clearValidate()\"\n\t\t\t\t\t>字段清除校验</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"nativeItem?.setInitialValue('Item initial')\"\n\t\t\t\t>\n\t\t\t\t\t字段设置初始值\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"nativeItem?.resetField()\"\n\t\t\t\t\t>字段恢复初始值</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"\n\t\t\t\t\t\tform?.setInitialValues({ profile: { nickname: 'Form nested initial' } })\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t表单设置嵌套初始值\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click=\"form?.resetFields(['profile.nickname'])\"\n\t\t\t\t>\n\t\t\t\t\t表单重置嵌套字段\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readNativeItem\"\n\t\t\t\t\t>读取字段公开状态</AsamButton\n\t\t\t\t>\n\t\t\t</fieldset>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readNativeFields\"\n\t\t\t\t>读取原生表单字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeSubset('name')\"\n\t\t\t\t>原生校验字符串字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"validateNativeSubset(['name', 'status'])\"\n\t\t\t>\n\t\t\t\t原生校验数组字段\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeSubset()\"\n\t\t\t\t>原生校验全部字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateNativeSubsetCallback\"\n\t\t\t\t>原生字段回调校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setInitialValues({ name: 'Native initial', status: 'yes' })\"\n\t\t\t>\n\t\t\t\t设置原生初始值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setInitialValues({ name: '', status: 'no' })\"\n\t\t\t>\n\t\t\t\t恢复原生初始值\n\t\t\t</AsamButton>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"singleNativeRule\">使用单条原生规则</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"validateOnRuleChange\">自动校验规则变更</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelPosition = 'left'\"\n\t\t\t\t>原生左侧标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelPosition = 'right'\"\n\t\t\t\t>原生右侧标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelPosition = 'top'\"\n\t\t\t\t>原生顶部标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.clearValidate(['name', 'status'])\"\n\t\t\t>\n\t\t\t\t数组清除字段校验\n\t\t\t</AsamButton>\n\t\t\t<fieldset class=\"demo-spacing-2\">\n\t\t\t\t<legend>原生表单显示配置</legend>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"labelSuffixEnabled\">显示标签后缀</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"hideRequiredAsterisk\">隐藏必填星号</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"asteriskRight\">星号放在右侧</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"hideMessages\">隐藏校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"inlineMessage\">行内校验消息</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"statusIcon\">显示校验状态图标</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"disabled\">禁用原生表单控件</AsamCheckboxItem>\n\t\t\t</fieldset>\n\t\t\t<fieldset class=\"demo-spacing-3\">\n\t\t\t\t<legend>表单顶层配置</legend>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"builtinActions\">使用内置操作</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"showSearch\">显示查询按钮</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"showReset\">显示重置按钮</AsamCheckboxItem>\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamCheckboxItem v-model=\"customActionText\">自定义操作文案</AsamCheckboxItem>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = 'auto'\"\n\t\t\t\t\t>表单自动标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = 168\"\n\t\t\t\t\t>数字标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = '200px'\"\n\t\t\t\t\t>文本标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"labelWidth = 120\"\n\t\t\t\t\t>恢复标签宽度</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'large'\"\n\t\t\t\t\t>表单 large 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'big'\"\n\t\t\t\t\t>表单 big 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'default'\"\n\t\t\t\t\t>表单 default 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"size = 'small'\"\n\t\t\t\t\t>表单 small 尺寸</AsamButton\n\t\t\t\t>\n\t\t\t</fieldset>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"legacy = !legacy\"\n\t\t\t\t>切换兼容字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inline = !inline\"\n\t\t\t\t>切换行内布局</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"labelPosition = labelPosition === 'top' ? 'right' : 'top'\"\n\t\t\t>\n\t\t\t\t切换标签位置\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"labelMode = labelMode === 'visible' ? 'sr-only' : 'visible'\"\n\t\t\t>\n\t\t\t\t切换可访问标签\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"size = size === 'default' ? 'big' : 'default'\"\n\t\t\t>\n\t\t\t\t切换表单尺寸\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validate\"\n\t\t\t\t>校验全部字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"validateWithCallback\"\n\t\t\t\t>用回调校验全部字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.clearValidate('name')\"\n\t\t\t\t>清除姓名校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.clearValidate()\"\n\t\t\t\t>清除全部校验</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"form?.setFieldsValue({ name: 'Patched' })\"\n\t\t\t>\n\t\t\t\t只更新姓名模型\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields()\"\n\t\t\t\t>重置字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields(['name'])\"\n\t\t\t\t>只重置姓名字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.resetFields('name')\"\n\t\t\t\t>用字符串重置姓名字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tomitScrollError = false;\n\t\t\t\t\tscrollToError = !scrollToError;\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换校验自动滚动\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"omitScrollError = true\"\n\t\t\t\t>省略校验自动滚动</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'true'\"\n\t\t\t\t>使用 true 滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'false'\"\n\t\t\t\t>使用 false 滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'object'\"\n\t\t\t\t>使用对象滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'omitted'\"\n\t\t\t\t>省略滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"scrollMode = 'undefined'\"\n\t\t\t\t>传入 undefined 滚动参数</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.scrollToField('name')\"\n\t\t\t\t>滚动到姓名字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"form?.scrollToField('missing')\"\n\t\t\t\t>滚动到不存在字段</AsamButton\n\t\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"demo-layout-19\"\n\t\t\t\tdata-testid=\"layout-scroll-host\"\n\t\t\t\tstyle=\"max-height: 280px; overflow-y: auto\"\n\t\t\t>\n\t\t\t\t<p class=\"example-paragraph\" style=\"min-height: 320px\">滚动区域从这里开始，表单字段位于下方。</p>\n\t\t\t\t<AsamForm\n\t\t\t\t\t:key=\"legacy ? 'legacy' : 'schema'\"\n\t\t\t\t\tref=\"form\"\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\t:inline=\"inline\"\n\t\t\t\t\t:label-position=\"labelPosition\"\n\t\t\t\t\t:label-mode=\"labelMode\"\n\t\t\t\t\t:label-width=\"labelWidth\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t\t:rules=\"nativeRules\"\n\t\t\t\t\t:validate-on-rule-change=\"validateOnRuleChange\"\n\t\t\t\t\t:label-suffix=\"labelSuffixEnabled ? '：' : ''\"\n\t\t\t\t\t:hide-required-asterisk=\"hideRequiredAsterisk\"\n\t\t\t\t\t:require-asterisk-position=\"asteriskRight ? 'right' : 'left'\"\n\t\t\t\t\t:show-message=\"!hideMessages\"\n\t\t\t\t\t:inline-message=\"inlineMessage\"\n\t\t\t\t\t:status-icon=\"statusIcon\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:show-search=\"showSearch\"\n\t\t\t\t\t:show-reset=\"showReset\"\n\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t...(legacy ? { fields } : { schema, registry }),\n\t\t\t\t\t\t...(customActionText\n\t\t\t\t\t\t\t? { searchText: '筛选成员', resetText: '恢复成员' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t...nativeScrollBinding\n\t\t\t\t\t}\"\n\t\t\t\t\t@validate=\"onValidate\"\n\t\t\t\t\t@update:model-value=\"recordModel('update:modelValue', $event)\"\n\t\t\t\t\t@search=\"recordModel('search', $event)\"\n\t\t\t\t\t@reset=\"recordModel('reset', $event)\"\n\t\t\t\t>\n\t\t\t\t\t<template #default>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"layout-form-default\">\n\t\t\t\t\t\t\t默认内容位于字段之前，不替代生成字段。\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\t\tv-if=\"nativeItemEnabled\"\n\t\t\t\t\t\t\tref=\"nativeItem\"\n\t\t\t\t\t\t\tdata-testid=\"layout-native-item\"\n\t\t\t\t\t\t\t:prop=\"itemArrayPath ? ['profile', 'nickname'] : 'profile.nickname'\"\n\t\t\t\t\t\t\t:label=\"itemLabelText\"\n\t\t\t\t\t\t\t:label-position=\"itemLabelPosition\"\n\t\t\t\t\t\t\t:label-width=\"itemLabelWidth\"\n\t\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\t\t...itemRequiredBinding,\n\t\t\t\t\t\t\t\t...(itemRules === undefined ? {} : { rules: itemRules })\n\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t:error=\"itemExternalError ? '外部昵称错误' : ''\"\n\t\t\t\t\t\t\t:show-message=\"!itemHideMessage\"\n\t\t\t\t\t\t\t:inline-message=\"itemInlineMessage\"\n\t\t\t\t\t\t\t:size=\"itemSize\"\n\t\t\t\t\t\t\tfor=\"layout-native-item-input\"\n\t\t\t\t\t\t\t:validate-status=\"itemForcedSuccess ? 'success' : ''\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<template\n\t\t\t\t\t\t\tv-if=\"itemLabelSlot\"\n\t\t\t\t\t\t\t#label=\"{ label }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span data-testid=\"layout-native-item-label\">{{ label }}插槽</span>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t<AsamInput\n\t\t\t\t\t\t\t\tid=\"layout-native-item-input\"\n\t\t\t\t\t\t\t\t:model-value=\"model.profile?.nickname ?? ''\"\n\t\t\t\t\t\t\t\t@update:model-value=\"updateNickname\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t\t\t<template\n\t\t\t\t\t\t\tv-if=\"itemErrorSlot\"\n\t\t\t\t\t\t\t#error=\"{ error }\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span data-testid=\"layout-native-item-error\">{{\n\t\t\t\t\t\t\t\terror\n\t\t\t\t\t\t\t}}</span>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t<template #help>嵌套字段帮助</template>\n\t\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template v-if=\"!builtinActions\" #actions=\"{ search, reset }\">\n\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"search()\"\n\t\t\t\t\t\t\t>插槽查询</AsamButton\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset()\"\n\t\t\t\t\t\t\t>插槽重置</AsamButton\n\t\t\t\t\t\t>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<p class=\"example-paragraph\" data-testid=\"layout-form-append\">追加内容与字段使用同一表单实例。</p>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamForm>\n\t\t\t</div>\n\t\t\t<pre data-testid=\"layout-form-native-fields\">{{\n\t\t\t\tJSON.stringify(nativeFieldsSnapshot)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-native-subset\">{{\n\t\t\t\tJSON.stringify(nativeSubsetSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-native-subset-callback\">{{\n\t\t\t\tJSON.stringify(nativeSubsetCallback)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-native-item-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\t...nativeItemSnapshot,\n\t\t\t\t\trequiredMode: itemRequiredMode,\n\t\t\t\t\trequiredOwnKey: Object.hasOwn(itemRequiredBinding, 'required'),\n\t\t\t\t\trequiredValueKind: typeof itemRequiredBinding.required,\n\t\t\t\t\trequiredValue: itemRequiredBinding.required\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-native-item-settlement\">{{\n\t\t\t\tJSON.stringify(nativeItemSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-native-item-callback\">{{\n\t\t\t\tJSON.stringify(nativeItemCallback)\n\t\t\t}}</pre>\n\t\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"layout-form-status\">{{ result }}</p>\n\t\t\t<pre class=\"form-events\" data-testid=\"layout-form-events\">{{\n\t\t\t\tJSON.stringify(events)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-validation-settlement\">{{\n\t\t\t\tJSON.stringify(validationSettlement)\n\t\t\t}}</pre>\n\t\t\t<pre data-testid=\"layout-form-callback\">{{ JSON.stringify(callback) }}</pre>\n\t\t\t<pre data-testid=\"layout-form-state\">{{\n\t\t\t\tJSON.stringify({\n\t\t\t\t\tmodel,\n\t\t\t\t\tlegacy,\n\t\t\t\t\tsingleNativeRule,\n\t\t\t\t\tvalidateOnRuleChange,\n\t\t\t\t\tlabelSuffixEnabled,\n\t\t\t\t\thideRequiredAsterisk,\n\t\t\t\t\tasteriskRight,\n\t\t\t\t\thideMessages,\n\t\t\t\t\tinlineMessage,\n\t\t\t\t\tstatusIcon,\n\t\t\t\t\tdisabled,\n\t\t\t\t\tbuiltinActions,\n\t\t\t\t\tshowSearch,\n\t\t\t\t\tshowReset,\n\t\t\t\t\tcustomActionText,\n\t\t\t\t\tlabelWidth,\n\t\t\t\t\tinline,\n\t\t\t\t\tlabelPosition,\n\t\t\t\t\tlabelMode,\n\t\t\t\t\tsize,\n\t\t\t\t\tvalidated,\n\t\t\t\t\tscrollToError,\n\t\t\t\t\tomitScrollError,\n\t\t\t\t\tscrollMode,\n\t\t\t\t\tscrollIntoViewOptions\n\t\t\t\t})\n\t\t\t}}</pre>\n\t\t</section>\n\t</div>\n</template>\n\n<script setup>\nimport {\n\tAsamRadioItem,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tuseAsamRemoteOptions,\n\tuseAsamDictOptions,\n\tprovideAsamData\n} from '@asam-ui/ui';\nimport { effectScope, shallowRef, createApp, defineComponent, h, nextTick } from 'vue';\n\nimport { normalizeAsamOptions, normalizeAsamPage, resolveAsamPage } from '@asam-ui/ui';\n\nimport { createAsamMockProvider } from '@asam-ui/ui';\n\nimport {\n\tcreateAsamDataRuntime,\n\tdefineAsamOptions,\n\tdefineAsamDictSource,\n\tresolveAsamOptions,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\n\nimport { computed, ref } from 'vue';\nimport {\n\tAsamCheckboxButton,\n\tAsamRadioButton,\n\tAsamSelectV2,\n\tAsamSegmented,\n\tAsamSelect,\n\tAsamDatePicker,\n\tAsamTimePicker,\n\tAsamSwitch,\n\tAsamCheckboxGroup,\n\tAsamRadioGroup,\n\tAsamTextarea\n} from '@asam-ui/ui';\nimport {\n\tAsamForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tasamFormControls,\n\tcreateAsamSchema,\n\tdefineAsamControl\n} from '@asam-ui/ui';\nimport NarrowChoice from './NarrowChoice.vue';\ndefineOptions({ name: 'AsamFormLayoutRegistryDemo' });\nconst model = ref({ name: '', status: 'no' });\nconst form = ref();\nconst builtinActions = ref(false);\nconst showSearch = ref(false);\nconst showReset = ref(false);\nconst customActionText = ref(false);\nconst labelWidth = ref(120);\nconst labelSuffixEnabled = ref(false);\nconst hideRequiredAsterisk = ref(false);\nconst asteriskRight = ref(false);\nconst hideMessages = ref(false);\nconst inlineMessage = ref(false);\nconst statusIcon = ref(false);\nconst disabled = ref(false);\nconst singleNativeRule = ref(false);\nconst validateOnRuleChange = ref(true);\nconst legacy = ref(false);\nconst inline = ref(false);\nconst labelPosition = ref('right');\nconst labelMode = ref('visible');\nconst size = ref('default');\nconst scrollToError = ref(true);\nconst omitScrollError = ref(false);\nconst scrollMode = ref('object');\nconst scrollIntoViewOptions = computed(() => {\n\tif (scrollMode.value === 'true') return true;\n\tif (scrollMode.value === 'false') return false;\n\tif (scrollMode.value === 'object') return { behavior: 'auto', block: 'center' };\n\treturn undefined;\n});\nconst scrollOptionsBinding = computed(() =>\n\tscrollMode.value === 'omitted' ? {} : { scrollIntoViewOptions: scrollIntoViewOptions.value }\n);\nconst nativeScrollBinding = computed(() => ({\n\t...scrollOptionsBinding.value,\n\t...(omitScrollError.value ? {} : { scrollToError: scrollToError.value })\n}));\nconst validationSettlement = ref();\nconst result = ref('');\nconst events = ref([]);\nfunction recordModel(name, value) {\n\tevents.value.push({ name, payload: { ...value } });\n}\nconst callback = ref();\nconst validated = ref([]);\nconst narrow = defineAsamControl({\n\tcomponent: NarrowChoice,\n\temptyValue: () => 'no',\n\tsourceKinds: []\n});\nconst registry = { 'custom:status': narrow };\nconst builder = createAsamSchema()({ ...asamFormControls, ...registry });\nconst schema = [\n\tbuilder.field({ field: 'name', component: 'Input', label: '姓名', defaultValue: () => '' }),\n\tbuilder.field({\n\t\tfield: 'status',\n\t\tcomponent: 'custom:status',\n\t\tlabel: '状态',\n\t\tcomponentProps: { caption: '窄枚举状态' }\n\t})\n];\nconst fields = [\n\t{ key: 'name', label: '姓名', type: 'input', defaultValue: '' },\n\t{\n\t\tkey: 'status',\n\t\tlabel: '状态',\n\t\ttype: 'select',\n\t\tdefaultValue: 'no',\n\t\toptions: [\n\t\t\t{ label: '是', value: 'yes' },\n\t\t\t{ label: '否', value: 'no' }\n\t\t]\n\t}\n];\nconst rules = {\n\tname: [\n\t\t{ required: true, message: '请输入姓名', trigger: 'change' },\n\t\t{ min: 2, message: '姓名至少两个字符', trigger: 'change' }\n\t]\n};\nconst nativeRules = computed(() =>\n\tsingleNativeRule.value\n\t\t? { name: { min: 5, message: '姓名至少五个字符', trigger: 'change' } }\n\t\t: rules\n);\nconst onValidate = (...args) => {\n\tvalidated.value.push({ field: String(args[0]), valid: args[1] });\n\tevents.value.push({\n\t\tname: 'validate',\n\t\tpayload: { field: args[0], valid: args[1], message: args[2] }\n\t});\n};\nconst nativeSubsetSettlement = ref();\nconst nativeSubsetCallback = ref();\nconst nativeFieldsSnapshot = ref();\nlet nativeSubsetSequence = 0;\nfunction readNativeFields() {\n\tconst fields = form.value?.fields ?? [];\n\tconst name = form.value?.getField('name');\n\tconst status = form.value?.getField('status');\n\tnativeFieldsSnapshot.value = {\n\t\tcount: fields.length,\n\t\tkeys: fields.map((field) =>\n\t\t\tArray.isArray(field.prop) ? field.prop.join('.') : field.prop\n\t\t),\n\t\tsameArrayAndStringLookup: name !== undefined && name === form.value?.getField(['name']),\n\t\tnameInFields: name !== undefined && fields.includes(name),\n\t\tstatusInFields: status !== undefined && fields.includes(status),\n\t\tmissingIsUndefined: form.value?.getField('missing') === undefined,\n\t\tnameValue: name?.fieldValue,\n\t\tstatusValue: status?.fieldValue\n\t};\n}\nasync function validateNativeSubset(selector = undefined) {\n\tconst id = ++nativeSubsetSequence;\n\tconst selectorLabel =\n\t\tselector === undefined\n\t\t\t? 'all'\n\t\t\t: typeof selector === 'string'\n\t\t\t\t? selector\n\t\t\t\t: JSON.stringify(selector);\n\ttry {\n\t\tconst fulfilledValue = await form.value?.validateField(selector);\n\t\tnativeSubsetSettlement.value = {\n\t\t\tid,\n\t\t\tselector: selectorLabel,\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tnativeSubsetSettlement.value = {\n\t\t\tid,\n\t\t\tselector: selectorLabel,\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t}\n}\nasync function validateNativeSubsetCallback() {\n\tconst id = ++nativeSubsetSequence;\n\tconst fulfilledValue = await form.value?.validateField(['name'], (valid, fields) => {\n\t\tnativeSubsetCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t});\n\tnativeSubsetSettlement.value = {\n\t\tid,\n\t\tselector: 'callback-name',\n\t\tsettledKind: 'fulfilled',\n\t\tfulfilledValue\n\t};\n}\n\nconst nativeItemEnabled = ref(false);\nconst nativeItem = ref();\nconst itemArrayPath = ref(false);\nconst itemLabelSlot = ref(false);\nconst itemErrorSlot = ref(false);\nconst itemRulesEnabled = ref(true);\nconst itemRequired = ref(true);\nconst itemLabelText = ref('嵌套昵称');\nconst itemRequiredMode = ref('explicit');\nconst itemRequiredBinding = computed(() =>\n\titemRequiredMode.value === 'omitted'\n\t\t? {}\n\t\t: { required: itemRequiredMode.value === 'undefined' ? undefined : itemRequired.value }\n);\nconst itemArrayRules = ref(false);\nconst itemHideMessage = ref(false);\nconst itemInlineMessage = ref(false);\nconst itemExternalError = ref(false);\nconst itemForcedSuccess = ref(false);\nconst itemLabelPosition = ref('right');\nconst itemLabelWidth = ref(120);\nconst itemSize = ref('default');\nconst itemRules = computed(() =>\n\t!itemRulesEnabled.value\n\t\t? undefined\n\t\t: itemArrayRules.value\n\t\t\t? [\n\t\t\t\t\t{ required: true, message: '昵称必填', trigger: ['blur', 'change'] },\n\t\t\t\t\t{ min: 3, message: '昵称至少三个字符', trigger: 'change' }\n\t\t\t\t]\n\t\t\t: { required: true, message: '昵称必填', trigger: 'blur' }\n);\nconst nativeItemSnapshot = ref();\nconst nativeItemSettlement = ref();\nconst nativeItemCallback = ref();\nlet nativeItemSequence = 0;\nfunction enableNativeItem() {\n\tmodel.value = { ...model.value, profile: { nickname: '' } };\n\tnativeItemEnabled.value = true;\n}\nfunction disableNativeItem() {\n\tnativeItemEnabled.value = false;\n\tmodel.value = { name: model.value.name, status: model.value.status };\n}\nfunction updateNickname(value) {\n\tmodel.value = { ...model.value, profile: { nickname: String(value) } };\n}\nfunction readNativeItem() {\n\tconst field = form.value?.getField('profile.nickname');\n\tnativeItemSnapshot.value = {\n\t\tsize: nativeItem.value?.size ?? '',\n\t\tmessage: nativeItem.value?.validateMessage ?? '',\n\t\tstate: nativeItem.value?.validateState ?? '',\n\t\tcount: form.value?.fields.length ?? 0,\n\t\tsameNestedLookup:\n\t\t\tfield !== undefined && field === form.value?.getField(['profile', 'nickname']),\n\t\tnestedInFields: field !== undefined && (form.value?.fields.includes(field) ?? false),\n\t\tnestedMissingIsUndefined:\n\t\t\tform.value?.getField('profile.missing') === undefined &&\n\t\t\tform.value?.getField(['profile', 'missing']) === undefined,\n\t\tnativeContextState: field?.validateState ?? '',\n\t\tnativeContextMessage: field?.validateMessage ?? '',\n\t\tnameState: form.value?.getField('name')?.validateState ?? '',\n\t\tnameMessage: form.value?.getField('name')?.validateMessage ?? '',\n\t\tnameInitialKind: typeof form.value?.getField('name')?.getInitialValue(),\n\t\tstatusInitialKind: typeof form.value?.getField('status')?.getInitialValue(),\n\t\tnestedInitialKind: typeof field?.getInitialValue(),\n\t\tvalue: field?.fieldValue,\n\t\tmodel: {\n\t\t\t...model.value,\n\t\t\t...(model.value.profile ? { profile: { ...model.value.profile } } : {})\n\t\t}\n\t};\n}\nasync function validateNativeNestedCallback() {\n\tconst id = ++nativeSubsetSequence;\n\tconst fulfilledValue = await form.value?.validateField(\n\t\t[['profile', 'nickname']],\n\t\t(valid, fields) => {\n\t\t\tnativeSubsetCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t}\n\t);\n\tnativeSubsetSettlement.value = {\n\t\tid,\n\t\tselector: 'callback-nested',\n\t\tsettledKind: 'fulfilled',\n\t\tfulfilledValue\n\t};\n}\nasync function validateNativeItem(trigger, withCallback = false) {\n\tconst id = ++nativeItemSequence;\n\ttry {\n\t\tconst fulfilledValue = await nativeItem.value?.validate(\n\t\t\ttrigger,\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tnativeItemCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tnativeItemSettlement.value = {\n\t\t\tid,\n\t\t\tselector: trigger,\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tnativeItemSettlement.value = {\n\t\t\tid,\n\t\t\tselector: trigger,\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t}\n}\n\nconst validationCase = ref();\nconst validationModel = ref({ password: '', confirm: '', age: '' });\nconst validationForm = ref();\nconst validationCaseSettlement = ref();\nconst validationCaseCallback = ref();\nconst validationCaseFields = ref([]);\nconst validationEvents = ref([]);\nconst ageValidationPending = ref(false);\nconst confirmRevalidation = ref();\nlet validationCaseSequence = 0;\nfunction openValidationCase(kind) {\n\tvalidationModel.value = { password: '', confirm: '', age: '' };\n\tvalidationCase.value = kind;\n}\nconst onValidationCaseEvent = (...args) => {\n\tvalidationEvents.value.push({ field: String(args[0]), valid: args[1], message: args[2] });\n};\nfunction updateValidationText(field, value) {\n\tvalidationModel.value = { ...validationModel.value, [field]: String(value) };\n}\nfunction updateValidationAge(value) {\n\tconst parsed = Number.parseFloat(String(value));\n\tvalidationModel.value = {\n\t\t...validationModel.value,\n\t\tage: Number.isNaN(parsed) ? String(value) : parsed\n\t};\n}\nasync function revalidateConfirmation() {\n\ttry {\n\t\tconst fulfilledValue = await validationForm.value?.validateField('confirm');\n\t\tconfirmRevalidation.value = { settledKind: 'fulfilled', fulfilledValue };\n\t} catch (error) {\n\t\tconfirmRevalidation.value = {\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: typeof error\n\t\t};\n\t}\n}\nconst validatePassword = (_rule, value, callback) => {\n\tif (typeof value !== 'string' || value.length < 6)\n\t\treturn callback(new Error('密码至少六个字符'));\n\tcallback();\n\tif (validationModel.value.confirm !== '') void revalidateConfirmation();\n};\nconst validateConfirmation = (_rule, value, callback) => {\n\tif (value === '') callback(new Error('请输入确认密码'));\n\telse if (value !== validationModel.value.password) callback(new Error('两次密码不一致'));\n\telse callback();\n};\nconst validateAge = (_rule, value, callback) => {\n\tif (value === '') return callback(new Error('请输入年龄'));\n\tageValidationPending.value = true;\n\tsetTimeout(() => {\n\t\tageValidationPending.value = false;\n\t\tif (!Number.isInteger(value)) callback(new Error('年龄必须为整数'));\n\t\telse if (Number(value) < 18) callback(new Error('年龄必须至少十八岁'));\n\t\telse callback();\n\t}, 500);\n};\nconst validationRules = computed(() =>\n\tvalidationCase.value === 'number'\n\t\t? {\n\t\t\t\tage: [\n\t\t\t\t\t{ required: true, message: '年龄必填', trigger: 'blur' },\n\t\t\t\t\t{ type: 'number', message: '年龄必须是数字', trigger: 'blur' }\n\t\t\t\t]\n\t\t\t}\n\t\t: {\n\t\t\t\tpassword: [{ validator: validatePassword, trigger: 'blur' }],\n\t\t\t\tconfirm: [{ validator: validateConfirmation, trigger: 'blur' }],\n\t\t\t\tage: [{ validator: validateAge, trigger: 'blur' }]\n\t\t\t}\n);\nfunction readValidationCase() {\n\tvalidationCaseFields.value = (validationForm.value?.fields ?? []).map((field) => ({\n\t\tfield: field.propString,\n\t\tstate: field.validateState,\n\t\tmessage: field.validateMessage\n\t}));\n}\nasync function validateCase(withCallback) {\n\tconst id = ++validationCaseSequence;\n\ttry {\n\t\tconst fulfilledValue = await validationForm.value?.validate(\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tvalidationCaseCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tvalidationCaseSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'all',\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tvalidationCaseSettlement.value = {\n\t\t\tid,\n\t\t\tselector: 'all',\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t}\n}\n\nconst compositionCase = ref();\nconst alignmentModel = ref({ name: '', region: '', type: '' });\nconst alignmentFormPositions = ['left', 'right', 'top'];\nconst alignmentItemPositions = ['', 'left', 'right', 'top'];\nconst alignmentFormPosition = ref('right');\nconst alignmentItemPosition = ref('');\nconst alignmentFields = [\n\t{ key: 'name', label: '姓名' },\n\t{ key: 'region', label: '活动区域' },\n\t{ key: 'type', label: '活动表单' }\n];\nfunction updateAlignment(field, value) {\n\talignmentModel.value = { ...alignmentModel.value, [field]: String(value) };\n}\nconst accessibilityModel = ref({ fullName: '', firstName: '', lastName: '' });\nfunction updateAccessibility(field, value) {\n\taccessibilityModel.value = { ...accessibilityModel.value, [field]: String(value) };\n}\n\nconst dynamicCase = ref(false);\nconst dynamicModel = ref({ email: '', domains: [{ key: 1, value: '' }] });\nconst dynamicForm = ref();\nconst dynamicSettlement = ref();\nconst dynamicCallback = ref();\nconst dynamicEvents = ref([]);\nconst dynamicFields = ref();\nlet dynamicKey = 1;\nlet dynamicSequence = 0;\nconst dynamicRules = computed(() => ({\n\temail: [\n\t\t{ required: true, message: '请输入邮箱地址', trigger: 'blur' },\n\t\t{\n\t\t\ttype: 'email',\n\t\t\tmessage: '请输入正确的邮箱地址',\n\t\t\ttrigger: ['blur', 'change']\n\t\t}\n\t]\n}));\nfunction updateDynamicEmail(value) {\n\tdynamicModel.value = { ...dynamicModel.value, email: String(value) };\n}\nfunction updateDynamicDomain(key, value) {\n\tdynamicModel.value = {\n\t\t...dynamicModel.value,\n\t\tdomains: dynamicModel.value.domains.map((domain) =>\n\t\t\tdomain.key === key ? { ...domain, value: String(value) } : domain\n\t\t)\n\t};\n}\nfunction addDynamicDomain() {\n\tdynamicModel.value = {\n\t\t...dynamicModel.value,\n\t\tdomains: [...dynamicModel.value.domains, { key: ++dynamicKey, value: '' }]\n\t};\n}\nfunction removeDynamicDomain(key) {\n\tdynamicModel.value = {\n\t\t...dynamicModel.value,\n\t\tdomains: dynamicModel.value.domains.filter((domain) => domain.key !== key)\n\t};\n}\nconst onDynamicValidate = (...args) => {\n\tdynamicEvents.value.push({ field: args[0], valid: args[1], message: args[2] });\n};\nfunction readDynamicFields() {\n\tconst field = dynamicForm.value?.getField('domains.0.value');\n\tdynamicFields.value = {\n\t\tfields: (dynamicForm.value?.fields ?? []).map((field) => ({\n\t\t\tprop: field.propString,\n\t\t\tstate: field.validateState,\n\t\t\tmessage: field.validateMessage,\n\t\t\tvalue: field.fieldValue\n\t\t})),\n\t\tsameSegmentedLookup:\n\t\t\tfield !== undefined && field === dynamicForm.value?.getField(['domains', '0', 'value']),\n\t\tremovedIndexMissing:\n\t\t\tdynamicForm.value?.getField(\n\t\t\t\t'domains.' + dynamicModel.value.domains.length + '.value'\n\t\t\t) === undefined\n\t};\n}\nasync function validateDynamic(withCallback) {\n\tconst id = ++dynamicSequence;\n\ttry {\n\t\tconst fulfilledValue = await dynamicForm.value?.validate(\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tdynamicCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tdynamicSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tdynamicSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: typeof error\n\t\t};\n\t}\n}\nasync function validate() {\n\ttry {\n\t\tconst fulfilledValue = await form.value?.validate();\n\t\tvalidationSettlement.value = { settledKind: 'fulfilled', fulfilledValue };\n\t\tresult.value = fulfilledValue ? 'valid' : 'invalid';\n\t} catch (error) {\n\t\tvalidationSettlement.value = {\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: error instanceof Error ? error.name : typeof error\n\t\t};\n\t\tresult.value = 'invalid';\n\t}\n}\nasync function validateWithCallback() {\n\tresult.value = (await form.value?.validate((valid, fields) => {\n\t\tcallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t}))\n\t\t? 'valid'\n\t\t: 'invalid';\n}\n\nconst nativeComposition = ref();\nconst nativeZones = [\n\t{ value: 'shanghai', label: '区域一', raw: { city: 'shanghai' } },\n\t{ value: 'beijing', label: '区域二', raw: { city: 'beijing' } }\n];\nconst nativeActivityTypes = [\n\t'Online activities',\n\t'Promotion activities',\n\t'Offline activities',\n\t'Simple brand exposure'\n];\nconst basicActivity = ref({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst inlineActivity = ref({ user: '', region: '', date: '' });\nconst basicSubmissions = ref([]),\n\tinlineSubmissions = ref([]);\nfunction updateBasicActivity(patch) {\n\tbasicActivity.value = { ...basicActivity.value, ...patch };\n}\nfunction updateInlineActivity(patch) {\n\tinlineActivity.value = { ...inlineActivity.value, ...patch };\n}\nfunction submitBasicActivity() {\n\tbasicSubmissions.value.push({ ...basicActivity.value, type: [...basicActivity.value.type] });\n}\nfunction submitInlineActivity() {\n\tinlineSubmissions.value.push({ ...inlineActivity.value });\n}\nfunction nativeDateFacts(value) {\n\treturn value instanceof Date\n\t\t? {\n\t\t\t\tkind: 'Date',\n\t\t\t\tyear: value.getFullYear(),\n\t\t\t\tmonth: value.getMonth() + 1,\n\t\t\t\tday: value.getDate(),\n\t\t\t\thours: value.getHours(),\n\t\t\t\tminutes: value.getMinutes(),\n\t\t\t\tseconds: value.getSeconds()\n\t\t\t}\n\t\t: { kind: value === null ? 'null' : typeof value, value };\n}\n\nconst nativeSizes = ['large', 'big', 'default', 'small'];\nconst nativeSizeTypes = ['Online activities', 'Promotion activities'];\nconst nativeSize = ref('default');\nconst nativeSizePosition = ref('right');\nconst sizeActivity = ref({\n\tname: '',\n\tregion: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst sizeSubmissions = ref([]);\nfunction updateNativeSize(value) {\n\tif (value === 'large' || value === 'big' || value === 'default' || value === 'small')\n\t\tnativeSize.value = value;\n}\nfunction updateNativeSizePosition(value) {\n\tif (value === 'left' || value === 'right' || value === 'top') nativeSizePosition.value = value;\n}\nfunction updateSizeActivity(patch) {\n\tsizeActivity.value = { ...sizeActivity.value, ...patch };\n}\nfunction submitSizeActivity() {\n\tsizeSubmissions.value.push({ ...sizeActivity.value, type: [...sizeActivity.value.type] });\n}\n\nconst nativeRuleModel = ref({\n\tname: 'Hello',\n\tregion: '',\n\tcount: '',\n\tdate1: '',\n\tdate2: '',\n\tdelivery: false,\n\tlocation: '',\n\ttype: [],\n\tresource: '',\n\tdesc: ''\n});\nconst nativeRuleForm = ref();\nconst nativeCountOptions = Array.from({ length: 10000 }, (_, index) => ({\n\tvalue: String(index + 1),\n\tlabel: String(index + 1),\n\traw: { count: index + 1 }\n}));\nconst nativeLocations = ['Home', 'Company', 'School'];\nconst nativeRuleRules = {\n\tname: [\n\t\t{ required: true, message: '请输入活动名称', trigger: 'blur' },\n\t\t{ min: 3, max: 5, message: '长度应为 3 到 5 个字符', trigger: 'blur' }\n\t],\n\tregion: [{ required: true, message: '请选择活动区域', trigger: 'change' }],\n\tcount: [{ required: true, message: '请选择活动人数', trigger: 'change' }],\n\tdate1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],\n\tdate2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],\n\tlocation: [{ required: true, message: '请选择地点', trigger: 'change' }],\n\ttype: [\n\t\t{\n\t\t\ttype: 'array',\n\t\t\trequired: true,\n\t\t\tmessage: '请至少选择一种活动类型',\n\t\t\ttrigger: 'change'\n\t\t}\n\t],\n\tresource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],\n\tdesc: [{ required: true, message: '请输入活动说明', trigger: 'blur' }]\n};\nconst nativeRuleSettlement = ref(),\n\tnativeRuleCallback = ref();\nconst nativeRuleFields = ref([]),\n\tnativeRuleEvents = ref([]),\n\tnativeRuleSubmissions = ref([]);\nlet nativeRuleSequence = 0;\nfunction updateNativeRule(patch) {\n\tnativeRuleModel.value = { ...nativeRuleModel.value, ...patch };\n}\nconst onNativeRuleValidate = (...args) => {\n\tnativeRuleEvents.value.push({ field: args[0], valid: args[1], message: args[2] });\n};\nfunction readNativeRuleFields() {\n\tnativeRuleFields.value = (nativeRuleForm.value?.fields ?? []).map((field) => ({\n\t\tprop: field.propString,\n\t\tstate: field.validateState,\n\t\tmessage: field.validateMessage,\n\t\tvalue: field.fieldValue\n\t}));\n}\nasync function validateNativeRule(withCallback) {\n\tconst id = ++nativeRuleSequence;\n\ttry {\n\t\tconst fulfilledValue = await nativeRuleForm.value?.validate(\n\t\t\twithCallback\n\t\t\t\t? (valid, fields) => {\n\t\t\t\t\t\tnativeRuleCallback.value = { valid, fields: Object.keys(fields ?? {}) };\n\t\t\t\t\t\tif (valid)\n\t\t\t\t\t\t\tnativeRuleSubmissions.value.push({\n\t\t\t\t\t\t\t\t...nativeRuleModel.value,\n\t\t\t\t\t\t\t\ttype: [...nativeRuleModel.value.type]\n\t\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t: undefined\n\t\t);\n\t\tnativeRuleSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'fulfilled',\n\t\t\tfulfilledValue\n\t\t};\n\t} catch (error) {\n\t\tnativeRuleSettlement.value = {\n\t\t\tid,\n\t\t\tselector: withCallback ? 'callback' : 'no-callback',\n\t\t\tsettledKind: 'rejected',\n\t\t\trejectionFields: error !== null && typeof error === 'object' ? Object.keys(error) : [],\n\t\t\trejectionType: typeof error\n\t\t};\n\t}\n}\nconst protocolSourceKinds = [],\n\tprotocolRequiredProps = ['placeholder'];\nconst protocolControl = defineAsamControl({\n\tcomponent: AsamInput,\n\temptyValue: () => '',\n\tsourceKinds: protocolSourceKinds,\n\trequiredProps: protocolRequiredProps,\n\tsuspendable: false\n});\nconst protocolRegistry = Object.freeze({ 'custom:code': protocolControl });\nconst protocolBuilder = createAsamSchema()(protocolRegistry);\nconst protocolFieldConfig = {\n\tfield: 'code',\n\tcomponent: 'custom:code',\n\tlabel: '注册编码',\n\tcomponentProps: { placeholder: '输入注册编码' },\n\tdefaultValue: () => 'Default',\n\trules: [\n\t\t{ required: true, message: '请输入注册编码', trigger: 'blur' },\n\t\t{ min: 3, message: '编码至少三位', trigger: 'blur' }\n\t]\n};\nconst protocolField = protocolBuilder.field(protocolFieldConfig);\nconst protocolSchema = [protocolField],\n\tprotocolModel = ref({ code: 'Seed' }),\n\tprotocolForm = ref();\nconst protocolEmptyArrays = defineAsamControl({\n\tcomponent: AsamInput,\n\temptyValue: () => [],\n\tsourceKinds: [],\n\tsuspendable: true\n});\nconst firstProtocolEmpty = protocolEmptyArrays.emptyValue(),\n\tsecondProtocolEmpty = protocolEmptyArrays.emptyValue();\nfirstProtocolEmpty.push('changed');\nprotocolRequiredProps.push('placeholder');\nconst protocolDefinition = {\n\tcontrolFrozen: Object.isFrozen(protocolControl),\n\tkindsFrozen: Object.isFrozen(protocolControl.sourceKinds),\n\trequiredFrozen: Object.isFrozen(protocolControl.requiredProps),\n\trequiredProps: [...(protocolControl.requiredProps ?? [])],\n\tkinds: [...protocolControl.sourceKinds],\n\tinputComponentIdentity: protocolControl.component === AsamInput,\n\tsuspendable: protocolControl.suspendable,\n\temptyValue: protocolControl.emptyValue(),\n\tschemaIdentity: protocolField === protocolFieldConfig,\n\tschemaComponentPropsIdentity:\n\t\tprotocolField.componentProps === protocolFieldConfig.componentProps,\n\toriginalModel: { code: 'Seed' },\n\tfirstEmpty: firstProtocolEmpty,\n\tsecondEmpty: secondProtocolEmpty,\n\temptyArraysIndependent: firstProtocolEmpty !== secondProtocolEmpty\n};\nconst protocolConstraints = ref([]);\nfunction checkProtocolRegistration() {\n\tconst valid = { component: AsamInput, emptyValue: () => '', sourceKinds: [] };\n\tconst invalid = [\n\t\t['null', null],\n\t\t['component-missing', { ...valid, component: undefined }],\n\t\t['component-string', { ...valid, component: 'input' }],\n\t\t['component-number', { ...valid, component: 1 }],\n\t\t['emptyValue-missing', { ...valid, emptyValue: undefined }],\n\t\t['emptyValue-value', { ...valid, emptyValue: '' }],\n\t\t['suspendable-string', { ...valid, suspendable: 'true' }],\n\t\t['sourceKinds-missing', { ...valid, sourceKinds: undefined }],\n\t\t['sourceKinds-unknown', { ...valid, sourceKinds: ['other'] }],\n\t\t['sourceKinds-duplicate', { ...valid, sourceKinds: ['static', 'static'] }],\n\t\t['requiredProps-string', { ...valid, requiredProps: 'placeholder' }],\n\t\t['requiredProps-duplicate', { ...valid, requiredProps: ['placeholder', 'placeholder'] }],\n\t\t['requiredProps-empty-key', { ...valid, requiredProps: [''] }],\n\t\t['requiredProps-number', { ...valid, requiredProps: [1] }]\n\t];\n\tprotocolConstraints.value = invalid.map(([name, config]) => {\n\t\ttry {\n\t\t\tReflect.apply(defineAsamControl, undefined, [config]);\n\t\t\treturn { name, rejected: false, kind: undefined, message: '' };\n\t\t} catch (error) {\n\t\t\treturn {\n\t\t\t\tname,\n\t\t\t\trejected: true,\n\t\t\t\tkind:\n\t\t\t\t\terror !== null && typeof error === 'object'\n\t\t\t\t\t\t? Reflect.get(error, 'kind')\n\t\t\t\t\t\t: undefined,\n\t\t\t\tmessage: error instanceof Error ? error.message : String(error)\n\t\t\t};\n\t\t}\n\t});\n}\nconst protocolSettlement = ref(),\n\tprotocolValidateId = ref(0);\nasync function validateProtocolControl() {\n\tconst id = ++protocolValidateId.value;\n\tawait protocolForm.value?.validate((valid, fields) => {\n\t\tprotocolSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...protocolModel.value }\n\t\t};\n\t});\n}\n\nconst unionCommon = {\n\tfield: 'code',\n\tlabel: '协议编码',\n\tdefaultValue: () => 'UnionDefault',\n\trequired: true,\n\trules: [{ min: 3, message: '协议编码至少三位', trigger: 'blur' }]\n};\nconst fixedOptionalUnion = { ...unionCommon, component: 'Input' };\nconst derivedOptionalUnion = {\n\t...unionCommon,\n\tcomponent: 'Input',\n\tresolveDataSource: () => undefined\n};\nconst fixedRequiredUnion = {\n\t...unionCommon,\n\tcomponent: 'custom:code',\n\tcomponentProps: { placeholder: '协议必填占位' }\n};\nconst derivedRequiredUnion = {\n\t...unionCommon,\n\tcomponent: 'custom:code',\n\tcomponentProps: { placeholder: '协议必填占位' },\n\tresolveDataSource: () => undefined\n};\nconst unionSourceMode = ref('fixed'),\n\tunionPropsMode = ref('optional');\nconst unionSchema = computed(() => [\n\tunionPropsMode.value === 'optional'\n\t\t? unionSourceMode.value === 'fixed'\n\t\t\t? fixedOptionalUnion\n\t\t\t: derivedOptionalUnion\n\t\t: unionSourceMode.value === 'fixed'\n\t\t\t? fixedRequiredUnion\n\t\t\t: derivedRequiredUnion\n]);\nconst unionModel = ref({ code: 'Seed' }),\n\tunionForm = ref(),\n\tunionId = ref(0),\n\tunionSettlement = ref();\nasync function validateUnionField() {\n\tconst id = ++unionId.value;\n\tawait unionForm.value?.validate((valid, fields) => {\n\t\tunionSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...unionModel.value }\n\t\t};\n\t});\n}\nconst reservedPropKeys = [\n\t'modelValue',\n\t'update:modelValue',\n\t'onUpdate:modelValue',\n\t'options',\n\t'api',\n\t'request',\n\t'dictType',\n\t'dataSource',\n\t'transform',\n\t'multiple',\n\t'valueMode',\n\t'multipleValueMode',\n\t'separator'\n];\nconst safeReservedProps = { placeholder: '合法控件属性', maxlength: 40, clearable: true };\nconst reservedControl = defineAsamControl({\n\tcomponent: AsamInput,\n\temptyValue: () => '',\n\tsourceKinds: [],\n\trequiredProps: ['placeholder']\n});\nconst reservedRegistry = Object.freeze({ 'custom:reservedCode': reservedControl });\n// Raw schema input demonstrates runtime rejection of externally supplied componentProps.\nconst reservedProps = ref(safeReservedProps),\n\treservedAttempt = ref();\nconst reservedModel = ref({ code: 'ReservedSeed' }),\n\treservedForm = ref();\nlet reservedResolverCalls = 0,\n\treservedStateId = 0,\n\treservedValidationId = 0;\nconst reservedSchema = computed(() => [\n\t{\n\t\tfield: 'code',\n\t\tcomponent: 'custom:reservedCode',\n\t\tlabel: '属性编码',\n\t\trequired: true,\n\t\tdefaultValue: () => 'ReservedDefault',\n\t\tcomponentProps: reservedProps.value,\n\t\tresolveDataSource: () => {\n\t\t\treservedResolverCalls++;\n\t\t\treturn undefined;\n\t\t}\n\t}\n]);\nconst reservedState = ref();\nconst reservedSettlement = ref();\nfunction attemptReservedProp(key) {\n\treservedAttempt.value = key;\n\treservedProps.value = { ...safeReservedProps, [key]: 'Forbidden' };\n}\nfunction restoreReservedProps() {\n\treservedAttempt.value = undefined;\n\treservedProps.value = safeReservedProps;\n}\nfunction captureReservedState() {\n\treservedState.value = {\n\t\tid: ++reservedStateId,\n\t\tmodel: { ...reservedModel.value },\n\t\tkeys: Object.keys(reservedProps.value),\n\t\t...(reservedAttempt.value === undefined ? {} : { attempt: reservedAttempt.value }),\n\t\tresolverCalls: reservedResolverCalls\n\t};\n}\nasync function validateReservedForm() {\n\tconst id = ++reservedValidationId;\n\tawait reservedForm.value?.validate((valid, fields) => {\n\t\treservedSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...reservedModel.value }\n\t\t};\n\t});\n}\nconst controlSourceKeys = ['static', 'api', 'request', 'dict'];\nconst controlSourceCalls = { api: 0, request: 0, dict: 0 };\nconst sourceTypeRuntime = createAsamDataRuntime({\n\tscope: 'complete-control-source-types',\n\tprovider: {\n\t\trequest: async (_config, context) => {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tcontrolSourceCalls.request++;\n\t\t\treturn [{ label: 'Request option', value: 'request-value' }];\n\t\t},\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tcontrolSourceCalls.dict++;\n\t\t\t\treturn [{ label: 'Dict option', value: 'dict-value' }];\n\t\t\t}\n\t\t}\n\t}\n});\nonBeforeUnmount(() => sourceTypeRuntime.invalidate());\nconst controlSources = {\n\tstatic: defineAsamOptions().static({\n\t\toptions: [{ label: 'Static option', value: 'static-value' }]\n\t}),\n\tapi: defineAsamOptions().api({\n\t\tapi: async (_params, context) => {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tcontrolSourceCalls.api++;\n\t\t\treturn [{ label: 'Api option', value: 'api-value' }];\n\t\t},\n\t\tparams: undefined\n\t}),\n\trequest: defineAsamOptions().request({\n\t\trequest: { method: 'get', url: '/local-control-types' }\n\t}),\n\tdict: defineAsamDictSource({ dictType: 'local-control-types' })\n};\nconst sourceTypeOptions = ref([]),\n\tsourceTypeModel = ref({ choice: null }),\n\tsourceTypeForm = ref();\nconst sourceTypeBuilder = createAsamSchema()(asamFormControls);\nconst sourceTypeSchema = computed(() => [\n\tsourceTypeBuilder.field({\n\t\tfield: 'choice',\n\t\tcomponent: 'Select',\n\t\tlabel: '来源选项',\n\t\trequired: true,\n\t\tdefaultValue: () => null,\n\t\tdataSource: defineAsamOptions().static({\n\t\t\toptions: sourceTypeOptions.value,\n\t\t\tfieldNames: { label: 'label', value: 'value' }\n\t\t}),\n\t\tcomponentProps: { teleported: false, placeholder: '选择解析结果' }\n\t})\n]);\nlet sourceTypeLoadId = 0,\n\tsourceTypeValidationId = 0;\nconst controlSourceLoad = ref();\nconst sourceTypeSettlement = ref();\nasync function loadControlSource(kind) {\n\tconst context = sourceTypeRuntime.createContext();\n\ttry {\n\t\tconst source = controlSources[kind],\n\t\t\toptions = await resolveAsamOptions(source, {\n\t\t\t\t...(sourceTypeRuntime.provider ? { provider: sourceTypeRuntime.provider } : {}),\n\t\t\t\tcontext\n\t\t\t});\n\t\tsourceTypeOptions.value = options;\n\t\tcontrolSourceLoad.value = {\n\t\t\tid: ++sourceTypeLoadId,\n\t\t\tkind,\n\t\t\tscope: context.scope,\n\t\t\tsourceFrozen: Object.isFrozen(source),\n\t\t\toptionsFrozen:\n\t\t\t\tObject.isFrozen(options) && options.every((item) => Object.isFrozen(item)),\n\t\t\toptions: options.map(({ label, value }) => ({ label, value })),\n\t\t\tcalls: { ...controlSourceCalls }\n\t\t};\n\t} finally {\n\t\tsourceTypeRuntime.release(context);\n\t}\n}\nasync function validateSourceTypeForm() {\n\tconst id = ++sourceTypeValidationId;\n\tawait sourceTypeForm.value?.validate((valid, fields) => {\n\t\tsourceTypeSettlement.value = {\n\t\t\tid,\n\t\t\tvalid,\n\t\t\tfields: Object.keys(fields ?? {}),\n\t\t\tmodel: { ...sourceTypeModel.value }\n\t\t};\n\t});\n}\nfunction makeControlSourceOrders() {\n\treturn [\n\t\t['static', 'api', 'request', 'dict'],\n\t\t['static', 'api', 'dict', 'request'],\n\t\t['static', 'request', 'api', 'dict'],\n\t\t['static', 'request', 'dict', 'api'],\n\t\t['static', 'dict', 'api', 'request'],\n\t\t['static', 'dict', 'request', 'api'],\n\t\t['api', 'static', 'request', 'dict'],\n\t\t['api', 'static', 'dict', 'request'],\n\t\t['api', 'request', 'static', 'dict'],\n\t\t['api', 'request', 'dict', 'static'],\n\t\t['api', 'dict', 'static', 'request'],\n\t\t['api', 'dict', 'request', 'static'],\n\t\t['request', 'static', 'api', 'dict'],\n\t\t['request', 'static', 'dict', 'api'],\n\t\t['request', 'api', 'static', 'dict'],\n\t\t['request', 'api', 'dict', 'static'],\n\t\t['request', 'dict', 'static', 'api'],\n\t\t['request', 'dict', 'api', 'static'],\n\t\t['dict', 'static', 'api', 'request'],\n\t\t['dict', 'static', 'request', 'api'],\n\t\t['dict', 'api', 'static', 'request'],\n\t\t['dict', 'api', 'request', 'static'],\n\t\t['dict', 'request', 'static', 'api'],\n\t\t['dict', 'request', 'api', 'static']\n\t];\n}\nconst controlSourceRegistration = ref();\nfunction registerControlSourceOrders() {\n\tconst registered = makeControlSourceOrders().map((order) => {\n\t\tconst expected = [...order],\n\t\t\tcontrol = defineAsamControl({\n\t\t\t\tcomponent: asamFormControls.Select.component,\n\t\t\t\temptyValue: () => null,\n\t\t\t\tsourceKinds: order\n\t\t\t});\n\t\tReflect.apply(Array.prototype.pop, order, []);\n\t\treturn {\n\t\t\texpected,\n\t\t\tactual: control.sourceKinds,\n\t\t\tfrozen: Object.isFrozen(control.sourceKinds),\n\t\t\texternalAfter: [...order]\n\t\t};\n\t});\n\tconst rejected = [];\n\tfor (const sourceKinds of [['api', 'api'], ['unknown'], { api: true }]) {\n\t\ttry {\n\t\t\tReflect.apply(defineAsamControl, undefined, [\n\t\t\t\t{ component: AsamInput, emptyValue: () => null, sourceKinds }\n\t\t\t]);\n\t\t} catch (cause) {\n\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\trejected.push({ kind: cause.kind, message: cause.message });\n\t\t}\n\t}\n\tconst empty = defineAsamControl({\n\t\tcomponent: AsamInput,\n\t\temptyValue: () => '',\n\t\tsourceKinds: []\n\t});\n\tconst singleton = defineAsamControl({\n\t\tcomponent: asamFormControls.RemoteSelect.component,\n\t\temptyValue: () => null,\n\t\tsourceKinds: ['api']\n\t});\n\tconst pairs = [\n\t\t['api', 'request'],\n\t\t['request', 'api']\n\t].map(\n\t\t(sourceKinds) =>\n\t\t\tdefineAsamControl({\n\t\t\t\tcomponent: asamFormControls.RemoteSelect.component,\n\t\t\t\temptyValue: () => null,\n\t\t\t\tsourceKinds\n\t\t\t}).sourceKinds\n\t);\n\tcontrolSourceRegistration.value = {\n\t\torders: registered,\n\t\trejected,\n\t\tempty: empty.sourceKinds,\n\t\tsingleton: singleton.sourceKinds,\n\t\tpairs\n\t};\n}\nconst runtimeContractResult = ref([]);\nfunction runRuntimeContract() {\n\tconst observations = [];\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst configFailure = (action) => {\n\t\ttry {\n\t\t\taction();\n\t\t\tthrow Error('Expected configuration rejection');\n\t\t} catch (cause) {\n\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\treturn { kind: cause.kind, message: cause.message };\n\t\t}\n\t};\n\tconst emptyRuntime = createAsamDataRuntime();\n\trecord('runtime-default-construction', {\n\t\tscope: emptyRuntime.scope,\n\t\tepoch: emptyRuntime.epoch,\n\t\tproviderAbsent: emptyRuntime.provider === undefined,\n\t\tfrozen: Object.isFrozen(emptyRuntime)\n\t});\n\tconst hostCause = {},\n\t\tfailureCause = {},\n\t\tcalls = { request: 0, hook: 0, notify: 0 };\n\tlet recursive = false;\n\tconst provider = {\n\t\trequest: async () => {\n\t\t\tcalls.request++;\n\t\t\treturn [];\n\t\t},\n\t\tisErrorNotified: (cause) => {\n\t\t\tcalls.hook++;\n\t\t\treturn cause === hostCause;\n\t\t},\n\t\tonError: (error) => {\n\t\t\tcalls.notify++;\n\t\t\trecursive = runtime.reportError(error, errorContext) === error;\n\t\t}\n\t};\n\tconst runtime = createAsamDataRuntime({ scope: 'runtime-a' });\n\truntime.install(provider);\n\truntime.install(provider);\n\tconst replacement = configFailure(() => runtime.install({}));\n\trecord('runtime-late-install-same-identity-and-replacement-guard', {\n\t\tproviderIdentity: runtime.provider === provider,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\trequestCalls: calls.request,\n\t\treplacement\n\t});\n\tconst a = runtime.createContext(),\n\t\tb = runtime.createContext(),\n\t\tforeign = { ...a };\n\truntime.release(foreign);\n\trecord('runtime-context-identity-readonly-and-foreign-release', {\n\t\tids: [a.requestId, b.requestId],\n\t\tscopes: [a.scope, b.scope],\n\t\tepochs: [a.epoch, b.epoch],\n\t\tfrozen: [Object.isFrozen(a), Object.isFrozen(b)],\n\t\tcurrent: [runtime.isCurrent(a), runtime.isCurrent(b), runtime.isCurrent(foreign)],\n\t\taborted: [a.signal.aborted, b.signal.aborted],\n\t\truntimeFrozen: Object.isFrozen(runtime)\n\t});\n\truntime.release(a);\n\truntime.release(a);\n\trecord('runtime-idempotent-release', {\n\t\tcurrent: [runtime.isCurrent(a), runtime.isCurrent(b)],\n\t\taborted: [a.signal.aborted, b.signal.aborted],\n\t\tepoch: runtime.epoch\n\t});\n\tconst events = [],\n\t\tunsubscribeA = runtime.onInvalidate(() => events.push('A')),\n\t\tunsubscribeB = runtime.onInvalidate(() => events.push('B'));\n\truntime.setScope('runtime-a');\n\trecord('runtime-same-scope-no-invalidation', {\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(b),\n\t\tevents: [...events]\n\t});\n\truntime.setScope('runtime-b');\n\trecord('runtime-scope-change-synchronous-abort-and-all-listeners', {\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(b),\n\t\taborted: b.signal.aborted,\n\t\tevents: [...events]\n\t});\n\tconst c = runtime.createContext();\n\truntime.invalidate();\n\trecord('runtime-explicit-invalidation', {\n\t\tcontext: { id: c.requestId, scope: c.scope, epoch: c.epoch },\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(c),\n\t\taborted: c.signal.aborted,\n\t\tevents: [...events]\n\t});\n\tunsubscribeB();\n\tunsubscribeB();\n\tconst d = runtime.createContext();\n\truntime.invalidate();\n\trecord('runtime-unsubscribe-one-idempotently', {\n\t\tid: d.requestId,\n\t\tcontextEpoch: d.epoch,\n\t\tepoch: runtime.epoch,\n\t\taborted: d.signal.aborted,\n\t\tcurrent: runtime.isCurrent(d),\n\t\tevents: [...events]\n\t});\n\tunsubscribeA();\n\truntime.invalidate();\n\trecord('runtime-unsubscribe-all', { epoch: runtime.epoch, events: [...events] });\n\tconst errorContext = runtime.createContext(),\n\t\toriginal = new AsamDataFailure('request', 'owned runtime request failure', failureCause),\n\t\treported = runtime.reportError(original, errorContext);\n\trecord('runtime-normal-error-notification-recursion-and-dedup', {\n\t\tid: errorContext.requestId,\n\t\tscope: errorContext.scope,\n\t\tepoch: errorContext.epoch,\n\t\tkind: reported.kind,\n\t\tmessage: reported.message,\n\t\tcausePreserved: reported.cause === failureCause,\n\t\trequestId: reported.requestId,\n\t\tnotified: reported.notified,\n\t\tfrozen: Object.isFrozen(reported),\n\t\tsameInput: runtime.reportError(original, errorContext) === reported,\n\t\tsameOutput: runtime.reportError(reported, errorContext) === reported,\n\t\trecursive,\n\t\tcalls: { ...calls }\n\t});\n\tconst owned = runtime.reportError(\n\t\tnew AsamDataFailure('response', 'host handled', hostCause),\n\t\terrorContext\n\t);\n\trecord('runtime-host-owned-error-skips-on-error', {\n\t\tnotified: owned.notified,\n\t\tkind: owned.kind,\n\t\tcausePreserved: owned.cause === hostCause,\n\t\tcalls: { ...calls }\n\t});\n\tconst marked = {\n\t\t\tkind: 'transform',\n\t\t\tmessage: 'already notified',\n\t\t\tcause: failureCause,\n\t\t\tnotified: true,\n\t\t\trequestId: 999\n\t\t},\n\t\tpreNotified = runtime.reportError(marked, errorContext);\n\trecord('runtime-pre-notified-error-skips-both-hooks', {\n\t\tnotified: preNotified.notified,\n\t\tkind: preNotified.kind,\n\t\tmessage: preNotified.message,\n\t\trequestId: preNotified.requestId,\n\t\tcausePreserved: preNotified.cause === failureCause,\n\t\tcalls: { ...calls }\n\t});\n\tconst sameEpoch = runtime.createContext();\n\trecord('runtime-epoch-wide-error-cache', {\n\t\tcontextId: sameEpoch.requestId,\n\t\tsameResult: runtime.reportError(original, sameEpoch) === reported,\n\t\trequestId: reported.requestId,\n\t\tcalls: { ...calls }\n\t});\n\truntime.release(sameEpoch);\n\truntime.release(errorContext);\n\tconst stale = new AsamDataFailure('request', 'stale', failureCause);\n\trecord('runtime-stale-and-foreign-error-return-original', {\n\t\taborted: errorContext.signal.aborted,\n\t\tcurrent: runtime.isCurrent(errorContext),\n\t\tstaleIdentity: runtime.reportError(stale, errorContext) === stale,\n\t\tforeignIdentity: runtime.reportError(stale, foreign) === stale,\n\t\tcalls: { ...calls }\n\t});\n\truntime.invalidate();\n\tconst nextContext = runtime.createContext(),\n\t\tfresh = runtime.reportError(original, nextContext);\n\trecord('runtime-invalidation-clears-notification-cache', {\n\t\tepoch: runtime.epoch,\n\t\tid: nextContext.requestId,\n\t\tnewResult: fresh !== reported,\n\t\trequestId: fresh.requestId,\n\t\tnotified: fresh.notified,\n\t\tcausePreserved: fresh.cause === failureCause,\n\t\tcalls: { ...calls }\n\t});\n\truntime.release(nextContext);\n\tconst noHookContext = emptyRuntime.createContext(),\n\t\tunhandled = emptyRuntime.reportError(original, noHookContext);\n\trecord('runtime-provider-absent-error-normalization', {\n\t\tkind: unhandled.kind,\n\t\tcausePreserved: unhandled.cause === failureCause,\n\t\tnotified: unhandled.notified,\n\t\trequestId: unhandled.requestId,\n\t\tfrozen: Object.isFrozen(unhandled),\n\t\tdeduplicated: emptyRuntime.reportError(original, noHookContext) === unhandled\n\t});\n\temptyRuntime.release(noHookContext);\n\tconst invalidScopes = ['', ' ', 0, null].map((scope) => ({\n\t\tinput: scope,\n\t\tconstructor: configFailure(() =>\n\t\t\tReflect.apply(createAsamDataRuntime, undefined, [{ scope }])\n\t\t),\n\t\tsetter: configFailure(() => Reflect.apply(runtime.setScope, undefined, [scope]))\n\t}));\n\trecord('runtime-invalid-scope-constructor-and-setter', {\n\t\tinvalidScopes,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcalls: { ...calls }\n\t});\n\tconst invalidProviders = [\n\t\t['null', null],\n\t\t['scalar', 'bad'],\n\t\t...['request', 'upload', 'adaptOptions', 'adaptPage', 'onError', 'isErrorNotified'].map(\n\t\t\t(name) => [name, { [name]: true }]\n\t\t),\n\t\t['dict-null', { dict: null }],\n\t\t['dict-get', { dict: { get: true } }],\n\t\t['dict-refresh', { dict: { get: async () => [], refresh: true } }],\n\t\t['pagination-null', { pagination: null }],\n\t\t['pagination-empty-page', { pagination: { page: ' ', pageSize: 'size' } }],\n\t\t['pagination-empty-size', { pagination: { page: 'page', pageSize: '' } }],\n\t\t['pagination-scalar', { pagination: { page: 1, pageSize: 'size' } }],\n\t\t['pagination-duplicate', { pagination: { page: 'same', pageSize: 'same' } }]\n\t];\n\tconst rejectedProviders = invalidProviders.map(([name, value]) => ({\n\t\tname,\n\t\tconstructor: configFailure(() =>\n\t\t\tReflect.apply(createAsamDataRuntime, undefined, [{ provider: value }])\n\t\t),\n\t\tinstaller: configFailure(() => Reflect.apply(runtime.install, undefined, [value]))\n\t}));\n\trecord('runtime-invalid-providers-preserve-installed-provider', {\n\t\trejectedProviders,\n\t\tproviderIdentity: runtime.provider === provider,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch,\n\t\tcalls: { ...calls }\n\t});\n\truntime.invalidate();\n\temptyRuntime.invalidate();\n\trecord('runtime-final-cleanup-and-zero-transport', {\n\t\tepoch: runtime.epoch,\n\t\temptyEpoch: emptyRuntime.epoch,\n\t\tcurrent: runtime.isCurrent(nextContext),\n\t\taborted: nextContext.signal.aborted,\n\t\tevents: [...events],\n\t\tcalls: { ...calls }\n\t});\n\truntimeContractResult.value = observations;\n}\nconst mockContractResult = ref([]),\n\tmockContractRunning = ref(false);\nasync function runMockContract() {\n\tmockContractRunning.value = true;\n\tconst observations = [];\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst rejected = async (action) => {\n\t\ttry {\n\t\t\tawait action();\n\t\t\tthrow Error('Expected mock rejection');\n\t\t} catch (cause) {\n\t\t\treturn cause;\n\t\t}\n\t};\n\tconst typedFailure = (cause) => {\n\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\treturn {\n\t\t\tkind: cause.kind,\n\t\t\tmessage: cause.message,\n\t\t\tcauseAbsent: cause.cause === undefined,\n\t\t\tnotified: cause.notified,\n\t\t\tname: cause.name,\n\t\t\terrorInstance: cause instanceof Error\n\t\t};\n\t};\n\tconst deeplyFrozen = (value) =>\n\t\tvalue === null ||\n\t\ttypeof value !== 'object' ||\n\t\t(Object.isFrozen(value) &&\n\t\t\tReflect.ownKeys(value).every((key) => deeplyFrozen(Reflect.get(value, key))));\n\tconst gate = () => {\n\t\tlet release = () => {},\n\t\t\treject = (_cause) => {\n\t\t\t\tvoid _cause;\n\t\t\t};\n\t\tconst wait = new Promise((resolve, fail) => {\n\t\t\trelease = resolve;\n\t\t\treject = fail;\n\t\t});\n\t\treturn { wait, release, reject };\n\t};\n\tconst runtime = createAsamDataRuntime({ scope: 'mock-contract' }),\n\t\tcontext = runtime.createContext(),\n\t\tdefaultProvider = createAsamMockProvider();\n\tif (!defaultProvider.request || !defaultProvider.dict)\n\t\tthrow Error('Public mock methods missing');\n\trecord('mock-default-absent-refresh-and-zero-calls', {\n\t\tfrozen: Object.isFrozen(defaultProvider),\n\t\tdictFrozen: Object.isFrozen(defaultProvider.dict),\n\t\tcalls: defaultProvider.calls.length,\n\t\trefreshAbsent: defaultProvider.dict.refresh === undefined,\n\t\tuploadAbsent: defaultProvider.upload === undefined\n\t});\n\tconst requestCause = { code: 'request-owned' },\n\t\tdictCause = { code: 'dict-owned' },\n\t\trefreshCause = { code: 'refresh-owned' },\n\t\thostData = { value: 1, nested: { ids: [1] } },\n\t\trequestSteps = [{ data: hostData }, { error: requestCause }],\n\t\tdictSteps = [\n\t\t\t{ data: [{ label: 'One', value: 1, children: [{ label: 'Leaf', value: 2 }] }] },\n\t\t\t{ error: dictCause }\n\t\t],\n\t\trefreshSteps = [{ data: undefined }, { error: refreshCause }];\n\tconst options = {\n\t\t\trequests: { 'get /items': requestSteps, 'post /items': [{ data: 'posted' }] },\n\t\t\tdictionaries: { items: dictSteps },\n\t\t\trefresh: refreshSteps\n\t\t},\n\t\tprovider = createAsamMockProvider(options);\n\tif (!provider.request || !provider.dict?.refresh)\n\t\tthrow Error('Configured mock methods missing');\n\tconst request = provider.request,\n\t\tdict = provider.dict,\n\t\trefresh = provider.dict.refresh;\n\trequestSteps.push({ data: 'external-step' });\n\tdictSteps.push({ data: [] });\n\trefreshSteps.push({ data: undefined });\n\trecord('mock-option-queues-copied-at-construction', {\n\t\tfrozen: Object.isFrozen(provider),\n\t\tdictFrozen: Object.isFrozen(dict),\n\t\tcalls: provider.calls.length,\n\t\toriginalLengths: [requestSteps.length, dictSteps.length, refreshSteps.length]\n\t});\n\tconst hostConfig = { url: '/items', params: { limit: 1, nested: { ids: [1] } } },\n\t\tresponse = await request(hostConfig, context),\n\t\tfirstCalls = provider.calls,\n\t\tfirstCall = firstCalls[0];\n\tif (!firstCall) throw Error('Mock call missing');\n\thostConfig.params.limit = 2;\n\thostConfig.params.nested.ids.push(2);\n\thostData.value = 2;\n\thostData.nested.ids.push(2);\n\trecord('mock-default-get-request-and-deep-snapshots', {\n\t\tresponse,\n\t\trequest: firstCall.request,\n\t\tkey: firstCall.key,\n\t\tkind: firstCall.kind,\n\t\tcontextIdentity: firstCall.context === context,\n\t\tcallsFrozen: Object.isFrozen(firstCalls),\n\t\tcallFrozen: Object.isFrozen(firstCall),\n\t\trequestFrozen: Object.isFrozen(firstCall.request),\n\t\tresponseFrozen: Object.isFrozen(response),\n\t\trequestDeepFrozen: deeplyFrozen(firstCall.request),\n\t\tresponseDeepFrozen: deeplyFrozen(response),\n\t\thostConfig,\n\t\thostData\n\t});\n\trecord('mock-error-step-preserves-original-cause', {\n\t\tidentity: (await rejected(() => request({ url: '/items' }, context))) === requestCause\n\t});\n\trecord('mock-request-exhaustion-without-implicit-repeat', {\n\t\tfailure: typedFailure(await rejected(() => request({ url: '/items' }, context)))\n\t});\n\trecord('mock-explicit-method-route', {\n\t\tresult: await request({ url: '/items', method: 'post' }, context),\n\t\tkey: provider.calls.at(-1)?.key\n\t});\n\trecord('mock-unconfigured-method-and-route', {\n\t\tmethod: typedFailure(\n\t\t\tawait rejected(() => request({ url: '/items', method: 'put' }, context))\n\t\t),\n\t\troute: typedFailure(await rejected(() => request({ url: '/missing' }, context)))\n\t});\n\tconst dictionary = await dict.get('items', context);\n\trecord('mock-dictionary-success-and-frozen-children', {\n\t\tdictionary,\n\t\tfrozen:\n\t\t\tObject.isFrozen(dictionary) &&\n\t\t\tdictionary.every((item) => Object.isFrozen(item) && Object.isFrozen(item.children)),\n\t\tdeepFrozen: deeplyFrozen(dictionary),\n\t\tcall: provider.calls.at(-1)?.kind,\n\t\tkey: provider.calls.at(-1)?.key\n\t});\n\trecord('mock-dictionary-error-step-preserves-original-cause', {\n\t\tidentity: (await rejected(() => dict.get('items', context))) === dictCause\n\t});\n\trecord('mock-dictionary-exhaustion', {\n\t\tfailure: typedFailure(await rejected(() => dict.get('items', context)))\n\t});\n\trecord('mock-refresh-success-undefined', {\n\t\tundefinedResult: (await refresh(context)) === undefined,\n\t\tkind: provider.calls.at(-1)?.kind,\n\t\tkey: provider.calls.at(-1)?.key\n\t});\n\trecord('mock-refresh-error-step-preserves-original-cause', {\n\t\tidentity: (await rejected(() => refresh(context))) === refreshCause\n\t});\n\trecord('mock-refresh-exhaustion', {\n\t\tfailure: typedFailure(await rejected(() => refresh(context)))\n\t});\n\tconst emptyRefresh = createAsamMockProvider({ refresh: [] });\n\tif (!emptyRefresh.dict?.refresh) throw Error('Empty configured refresh must exist');\n\trecord('mock-empty-refresh-is-configured-but-exhausted', {\n\t\texists: true,\n\t\tfailure: typedFailure(await rejected(() => emptyRefresh.dict.refresh(context)))\n\t});\n\tconst combinedCause = { code: 'mixed-owned' },\n\t\tprecedence = createAsamMockProvider({\n\t\t\trequests: {\n\t\t\t\t'get /mixed': [{ data: 'discarded', error: combinedCause }, { error: undefined }]\n\t\t\t}\n\t\t});\n\tif (!precedence.request) throw Error('Mixed request missing');\n\tconst mixedRequest = precedence.request;\n\trecord('mock-data-and-error-step-priority-and-undefined-cause', {\n\t\terrorWins:\n\t\t\t(await rejected(() => mixedRequest({ url: '/mixed' }, context))) === combinedCause,\n\t\tundefinedCausePreserved:\n\t\t\t(await rejected(() => mixedRequest({ url: '/mixed' }, context))) === undefined,\n\t\tcalls: precedence.calls.length\n\t});\n\tconst delays = gate(),\n\t\trejection = gate(),\n\t\tabort = gate(),\n\t\twaitCause = { code: 'wait-owned' },\n\t\tgated = createAsamMockProvider({\n\t\t\trequests: {\n\t\t\t\t'get /gate': [{ data: 'released', wait: delays.wait }, { data: 'next' }],\n\t\t\t\t'get /reject': [{ data: 'unused', wait: rejection.wait }],\n\t\t\t\t'get /abort': [\n\t\t\t\t\t{ data: 'cancelled-data', wait: abort.wait },\n\t\t\t\t\t{ data: 'after-abort' }\n\t\t\t\t],\n\t\t\t\t'get /pre': [{ data: 'not-consumed' }]\n\t\t\t}\n\t\t});\n\tif (!gated.request) throw Error('Gated request missing');\n\tconst gatedRequest = gated.request;\n\tlet settled = false;\n\tconst pending = gatedRequest({ url: '/gate' }, context).then((value) => {\n\t\tsettled = true;\n\t\treturn value;\n\t});\n\tawait Promise.resolve();\n\trecord('mock-wait-gate-pending-with-recorded-call', {\n\t\tsettled,\n\t\tcalls: gated.calls.length,\n\t\tkey: gated.calls[0]?.key\n\t});\n\tdelays.release();\n\trecord('mock-wait-gate-release-and-next-step', {\n\t\tresult: await pending,\n\t\tnext: await gatedRequest({ url: '/gate' }, context),\n\t\tsettled\n\t});\n\tconst rejectedWait = rejected(() => gatedRequest({ url: '/reject' }, context));\n\trejection.reject(waitCause);\n\trecord('mock-wait-gate-rejection-preserves-original', {\n\t\tidentity: (await rejectedWait) === waitCause\n\t});\n\tconst abortContext = runtime.createContext(),\n\t\tabortedWait = rejected(() => gatedRequest({ url: '/abort' }, abortContext));\n\truntime.release(abortContext);\n\trecord('mock-wait-gate-aborts-before-release', {\n\t\tidentity: (await abortedWait) === abortContext.signal.reason,\n\t\taborted: abortContext.signal.aborted,\n\t\tcurrent: runtime.isCurrent(abortContext)\n\t});\n\tabort.release();\n\tawait Promise.resolve();\n\trecord('mock-aborted-wait-consumes-exactly-one-step', {\n\t\tresult: await gatedRequest({ url: '/abort' }, context)\n\t});\n\tconst preContext = runtime.createContext();\n\truntime.release(preContext);\n\tconst preAborted = await rejected(() => gatedRequest({ url: '/pre' }, preContext));\n\trecord('mock-pre-aborted-context-does-not-consume-step', {\n\t\tidentity: preAborted === preContext.signal.reason,\n\t\tresult: await gatedRequest({ url: '/pre' }, context)\n\t});\n\tconst failureKinds = ['config', 'request', 'response', 'transform', 'upload'];\n\trecord('mock-public-data-failure-full-kind-contract', {\n\t\tfailures: failureKinds.map((kind) => {\n\t\t\tconst failure = new AsamDataFailure(kind, 'public ' + kind, requestCause);\n\t\t\treturn {\n\t\t\t\tkind: failure.kind,\n\t\t\t\tmessage: failure.message,\n\t\t\t\tname: failure.name,\n\t\t\t\tcausePreserved: failure.cause === requestCause,\n\t\t\t\tnotified: failure.notified,\n\t\t\t\terrorInstance: failure instanceof Error,\n\t\t\t\tstackString: typeof failure.stack === 'string',\n\t\t\t\tfrozen: Object.isFrozen(failure)\n\t\t\t};\n\t\t}),\n\t\toptionalCauseAbsent: new AsamDataFailure('request', 'without cause').cause === undefined\n\t});\n\trecord('mock-call-snapshots-fresh-frozen-and-context-linked', {\n\t\tcalls: provider.calls.map((call) => ({\n\t\t\tkind: call.kind,\n\t\t\tkey: call.key,\n\t\t\tcontextId: call.context.requestId,\n\t\t\tcontextScope: call.context.scope,\n\t\t\trequestPresent: call.request !== undefined,\n\t\t\tfrozen: Object.isFrozen(call)\n\t\t})),\n\t\tfirstSnapshotLength: firstCalls.length,\n\t\tcurrentLength: provider.calls.length,\n\t\tfreshArray: provider.calls !== provider.calls,\n\t\tgatedKeys: gated.calls.map((call) => call.key),\n\t\toriginalQueueLengths: [requestSteps.length, dictSteps.length, refreshSteps.length]\n\t});\n\truntime.invalidate();\n\trecord('mock-final-cleanup-historical-context-observes-abort', {\n\t\tcontextAborted: provider.calls.every((call) => call.context.signal.aborted),\n\t\tepoch: runtime.epoch,\n\t\tcurrent: runtime.isCurrent(context),\n\t\tproviderCalls: provider.calls.length,\n\t\tgatedCalls: gated.calls.length\n\t});\n\tmockContractResult.value = observations;\n\tmockContractRunning.value = false;\n}\nconst normalizerContractResult = ref([]);\nfunction runNormalizerContract() {\n\tconst observations = [];\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst frozen = (value) =>\n\t\tvalue === null ||\n\t\ttypeof value !== 'object' ||\n\t\t(Object.isFrozen(value) &&\n\t\t\tReflect.ownKeys(value).every((key) => frozen(Reflect.get(value, key))));\n\tconst failure = (action) => {\n\t\ttry {\n\t\t\taction();\n\t\t\tthrow Error('Expected normalization rejection');\n\t\t} catch (cause) {\n\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\treturn {\n\t\t\t\tkind: cause.kind,\n\t\t\t\tmessage: cause.message,\n\t\t\t\tcauseKind: cause.cause instanceof AsamDataFailure ? cause.cause.kind : null,\n\t\t\t\tcauseName: cause.cause instanceof Error ? cause.cause.name : null\n\t\t\t};\n\t\t}\n\t};\n\tconst values = [1, '1', true, false, 0, '', -2.5],\n\t\tinput = values.map((value, i) => ({ label: 'Value-' + i, value })),\n\t\toptions = normalizeAsamOptions(input);\n\trecord('normalizer-default-seven-typed-identities', {\n\t\tvalues: options.map((o) => o.value),\n\t\ttypes: options.map((o) => typeof o.value),\n\t\tfrozen: frozen(options),\n\t\trawIndependent: options.every((o, i) => o.raw !== input[i]),\n\t\tempty: normalizeAsamOptions([])\n\t});\n\tconst host = [\n\t\t\t{ label: '', value: '', disabled: undefined, children: undefined },\n\t\t\t{ label: 'Host', value: 2, meta: { count: 1 } }\n\t\t],\n\t\tsnapshot = normalizeAsamOptions(host);\n\thost[1].meta.count = 2;\n\trecord('normalizer-empty-label-undefined-optionals-and-host-snapshot', {\n\t\toptions: snapshot,\n\t\thostCount: host[1].meta.count,\n\t\tfrozen: frozen(snapshot)\n\t});\n\tconst fields = { label: 'name.label', value: 'id', disabled: 'locked', children: 'nodes' },\n\t\ttreeRules = { tree: true },\n\t\ttree = normalizeAsamOptions(\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\t'name.label': 'Parent',\n\t\t\t\t\tid: 0,\n\t\t\t\t\tlocked: false,\n\t\t\t\t\tnodes: [{ 'name.label': 'Leaf', id: false }]\n\t\t\t\t}\n\t\t\t],\n\t\t\tfields,\n\t\t\ttreeRules\n\t\t);\n\trecord('normalizer-own-dotted-field-mapping-and-tree', {\n\t\ttree,\n\t\tfrozen: frozen(tree),\n\t\tflatEmptyChildren: normalizeAsamOptions([{ label: 'Leaf', value: 'leaf', children: [] }]),\n\t\tsameKeyMapping: normalizeAsamOptions([{ same: 'same' }], { label: 'same', value: 'same' })\n\t});\n\tconst policies = [\n\t\t{ valuePolicy: { multiple: false, valueMode: 'value' } },\n\t\t{ valuePolicy: { multiple: false, valueMode: 'object' } },\n\t\t{ valuePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'array' } },\n\t\t{ valuePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'string' } },\n\t\t{ valuePolicy: { multiple: true, valueMode: 'object', multipleValueMode: 'array' } }\n\t];\n\trecord('normalizer-five-legal-selection-policies', {\n\t\tvalues: policies.map(\n\t\t\t(rule) => normalizeAsamOptions([{ label: 'One', value: 1 }], undefined, rule)[0]?.value\n\t\t),\n\t\tseparatorWhole: normalizeAsamOptions([{ label: 'Colon', value: 'a:b' }], undefined, {\n\t\t\tvaluePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'string' },\n\t\t\tseparator: '::'\n\t\t})[0]?.value\n\t});\n\tconst dictCases = [\n\t\t['string', [1, false, 'x'], 'string'],\n\t\t['number', ['+1.5e2', '-.5', '2.', '1E-2'], 'number'],\n\t\t['boolean', [true, 1, 'true', '1', false, 0, 'false', '0'], 'boolean']\n\t];\n\trecord('normalizer-dictionary-value-conversion-and-original-raw', {\n\t\tcases: dictCases.map(([kind, values, type]) => {\n\t\t\tconst result = values.flatMap((value, i) =>\n\t\t\t\tnormalizeAsamOptions([{ label: 'Dict-' + i, value }], undefined, {}, type)\n\t\t\t);\n\t\t\treturn {\n\t\t\t\tkind,\n\t\t\t\tvalues: result.map((o) => o.value),\n\t\t\t\traw: result.map((o) => o.raw.value),\n\t\t\t\tfrozen: result.every((o) => frozen(o))\n\t\t\t};\n\t\t})\n\t});\n\tconst row = (value) => ({ label: 'Option', value }),\n\t\tcycle = { label: 'Cycle', value: 1 };\n\tcycle.children = [cycle];\n\tconst responseCases = [\n\t\t['null', null],\n\t\t['undefined', undefined],\n\t\t['object', {}],\n\t\t['wrapper', { data: [] }],\n\t\t['null-item', [null]],\n\t\t['scalar-item', [1]],\n\t\t['sparse', new Array(2)],\n\t\t['inherited', [Object.create({ label: 'Inherited', value: 1 })]],\n\t\t['numeric-label', [{ label: 1, value: 1 }]],\n\t\t['missing-value', [{ label: 'Missing' }]],\n\t\t['nan', [row(NaN)]],\n\t\t['infinity', [row(Infinity)]],\n\t\t['null-value', [row(null)]],\n\t\t['object-value', [row({})]],\n\t\t['disabled-string', [{ ...row(1), disabled: 'false' }]],\n\t\t['children-object', [{ ...row(1), children: {} }]],\n\t\t['flat-tree', [{ ...row(1), children: [row(2)] }]],\n\t\t['zero-collision', [row(0), row(-0)]],\n\t\t['boolean-duplicate', [row(false), row(false)]],\n\t\t['cycle', [cycle], undefined, { tree: true }],\n\t\t[\n\t\t\t'tree-global-duplicate',\n\t\t\t[{ ...row(1), children: [row(2)] }, row(2)],\n\t\t\tundefined,\n\t\t\t{ tree: true }\n\t\t],\n\t\t['dict-number-boolean', [row(true)], undefined, {}, 'number'],\n\t\t['dict-number-text', [row('bad')], undefined, {}, 'number'],\n\t\t['dict-boolean-case', [row('True')], undefined, {}, 'boolean'],\n\t\t['dict-invalid-input', [row(Infinity)], undefined, {}, 'string'],\n\t\t['dict-number-alias-collision', [row(1), row('1')], undefined, {}, 'number'],\n\t\t['dict-boolean-alias-collision', [row(true), row(1)], undefined, {}, 'boolean']\n\t];\n\trecord('normalizer-twenty-seven-response-rejections', {\n\t\tcases: responseCases.map(([name, ...args]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() => Reflect.apply(normalizeAsamOptions, undefined, args))\n\t\t}))\n\t});\n\tconst stringRules = {\n\t\t\tvaluePolicy: { multiple: true, valueMode: 'value', multipleValueMode: 'string' },\n\t\t\tseparator: '::'\n\t\t},\n\t\tstringCases = [\n\t\t\t['identity-collision', [1, '1']],\n\t\t\t['empty-token', ['']],\n\t\t\t['whole-separator', ['a::b']]\n\t\t];\n\trecord('normalizer-string-token-ambiguity', {\n\t\tcases: stringCases.map(([name, values]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() =>\n\t\t\t\tReflect.apply(normalizeAsamOptions, undefined, [\n\t\t\t\t\tvalues.map(row),\n\t\t\t\t\tundefined,\n\t\t\t\t\tstringRules\n\t\t\t\t])\n\t\t\t)\n\t\t}))\n\t});\n\tconst configCases = [\n\t\t['fields-null', null, {}],\n\t\t['fields-array', [], {}],\n\t\t['label-missing', { value: 'value' }, {}],\n\t\t['value-missing', { label: 'label' }, {}],\n\t\t['label-number', { label: 1, value: 'value' }, {}],\n\t\t['value-null', { label: 'label', value: null }, {}],\n\t\t['disabled-empty', { label: 'label', value: 'value', disabled: '' }, {}],\n\t\t['children-empty', { label: 'label', value: 'value', children: '' }, {}],\n\t\t['tree-string', undefined, { tree: 'true' }],\n\t\t['policy-scalar', undefined, { valuePolicy: 'bad' }],\n\t\t['multiple-missing', undefined, { valuePolicy: { valueMode: 'value' } }],\n\t\t['multiple-number', undefined, { valuePolicy: { multiple: 1, valueMode: 'value' } }],\n\t\t['mode-invalid', undefined, { valuePolicy: { multiple: false, valueMode: 'wrong' } }],\n\t\t['multi-mode-missing', undefined, { valuePolicy: { multiple: true, valueMode: 'value' } }],\n\t\t[\n\t\t\t'single-extra-mode',\n\t\t\tundefined,\n\t\t\t{ valuePolicy: { multiple: false, valueMode: 'value', multipleValueMode: 'array' } }\n\t\t],\n\t\t[\n\t\t\t'object-string',\n\t\t\tundefined,\n\t\t\t{ valuePolicy: { multiple: true, valueMode: 'object', multipleValueMode: 'string' } }\n\t\t],\n\t\t['separator-empty', undefined, { separator: '' }],\n\t\t['separator-number', undefined, { separator: 1 }]\n\t];\n\trecord('normalizer-eighteen-configuration-rejections', {\n\t\tcases: configCases.map(([name, fields, rules]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() =>\n\t\t\t\tReflect.apply(normalizeAsamOptions, undefined, [[], fields, rules])\n\t\t\t)\n\t\t}))\n\t});\n\tconst hostPage = { list: [{ id: 1, meta: { count: 1 } }], total: 4 },\n\t\tpage = normalizeAsamPage(hostPage);\n\thostPage.list[0].meta.count = 2;\n\thostPage.total = 5;\n\trecord('normalizer-page-shape-copy-freeze-and-empty-pages', {\n\t\tpage,\n\t\thost: hostPage,\n\t\tfrozen: frozen(page),\n\t\tzero: normalizeAsamPage({ list: [], total: 0 }),\n\t\tlaterEmpty: normalizeAsamPage({ list: [], total: 4 }),\n\t\tmaxSafe: normalizeAsamPage({ list: [], total: Number.MAX_SAFE_INTEGER }).total\n\t});\n\tconst pageCases = [\n\t\t['null', null],\n\t\t['array', []],\n\t\t['wrapper', { data: { list: [], total: 0 } }],\n\t\t['inherited-list', Object.create({ list: [], total: 0 })],\n\t\t['list-null', { list: null, total: 0 }],\n\t\t['list-scalar', { list: ['row'], total: 1 }],\n\t\t['list-array-row', { list: [[]], total: 1 }],\n\t\t['list-hole', { list: new Array(2), total: 2 }],\n\t\t['total-missing', { list: [] }],\n\t\t['total-inherited', Object.assign(Object.create({ total: 0 }), { list: [] })],\n\t\t['total-string', { list: [], total: '0' }],\n\t\t['total-negative', { list: [], total: -1 }],\n\t\t['total-fraction', { list: [], total: 1.5 }],\n\t\t['total-nan', { list: [], total: NaN }],\n\t\t['total-infinite', { list: [], total: Infinity }],\n\t\t['total-unsafe', { list: [], total: Number.MAX_SAFE_INTEGER + 1 }],\n\t\t['zero-with-rows', { list: [{ id: 1 }], total: 0 }]\n\t];\n\trecord('normalizer-seventeen-page-rejections', {\n\t\tcases: pageCases.map(([name, value]) => ({\n\t\t\tname,\n\t\t\tfailure: failure(() => normalizeAsamPage(value))\n\t\t}))\n\t});\n\tconst calls = { transform: 0, adapter: 0 },\n\t\tenvelope = { rows: [{ id: 1 }], count: 2 },\n\t\ttransformed = resolveAsamPage(envelope, (value) => {\n\t\t\tcalls.transform++;\n\t\t\treturn { list: value.rows, total: value.count };\n\t\t}),\n\t\tadapted = resolveAsamPage(envelope, undefined, {\n\t\t\tadaptPage: () => {\n\t\t\t\tcalls.adapter++;\n\t\t\t\treturn { list: envelope.rows, total: envelope.count };\n\t\t\t}\n\t\t}),\n\t\tdirect = resolveAsamPage({ list: [{ id: 3 }], total: 1 });\n\tenvelope.rows[0].id = 2;\n\trecord('normalizer-page-two-public-overloads-and-default', {\n\t\ttransformed,\n\t\tadapted,\n\t\tdirect,\n\t\tcalls: { ...calls },\n\t\thost: envelope,\n\t\tfrozen: frozen(transformed) && frozen(adapted) && frozen(direct)\n\t});\n\tconst explicit = Reflect.apply(resolveAsamPage, undefined, [\n\t\t{ rows: [{ id: 4 }], count: 1 },\n\t\t(value) => {\n\t\t\tcalls.transform++;\n\t\t\treturn { list: value.rows, total: value.count };\n\t\t},\n\t\t{\n\t\t\tadaptPage: () => {\n\t\t\t\tcalls.adapter++;\n\t\t\t\tthrow Error('Unexpected adapter');\n\t\t\t}\n\t\t}\n\t]);\n\trecord('normalizer-dynamic-transform-precedence-over-adapter', {\n\t\tpage: explicit,\n\t\tcalls: { ...calls },\n\t\tfrozen: frozen(explicit)\n\t});\n\tconst transformCause = Error('owned page transform'),\n\t\tadapterCause = Error('owned page adapter');\n\tconst transformFailure = failure(() =>\n\t\t\tresolveAsamPage(envelope, () => {\n\t\t\t\tthrow transformCause;\n\t\t\t})\n\t\t),\n\t\tadapterFailure = failure(() =>\n\t\t\tresolveAsamPage(envelope, undefined, {\n\t\t\t\tadaptPage: () => {\n\t\t\t\t\tthrow adapterCause;\n\t\t\t\t}\n\t\t\t})\n\t\t);\n\trecord('normalizer-page-error-stage-and-original-cause', {\n\t\ttransform: transformFailure,\n\t\tadapter: adapterFailure,\n\t\ttransformCausePreserved: (() => {\n\t\t\ttry {\n\t\t\t\tresolveAsamPage(envelope, () => {\n\t\t\t\t\tthrow transformCause;\n\t\t\t\t});\n\t\t\t\treturn false;\n\t\t\t} catch (cause) {\n\t\t\t\treturn cause instanceof AsamDataFailure && cause.cause === transformCause;\n\t\t\t}\n\t\t})(),\n\t\tadapterCausePreserved: (() => {\n\t\t\ttry {\n\t\t\t\tresolveAsamPage(envelope, undefined, {\n\t\t\t\t\tadaptPage: () => {\n\t\t\t\t\t\tthrow adapterCause;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\treturn false;\n\t\t\t} catch (cause) {\n\t\t\t\treturn cause instanceof AsamDataFailure && cause.cause === adapterCause;\n\t\t\t}\n\t\t})(),\n\t\tmalformedDefault: failure(() => resolveAsamPage({ data: [] })),\n\t\tmalformedTransform: failure(() =>\n\t\t\tReflect.apply(resolveAsamPage, undefined, [envelope, () => ({ list: null, total: 0 })])\n\t\t)\n\t});\n\tnormalizerContractResult.value = observations;\n}\nconst sourceContractResult = ref([]);\nconst sourceContractBusy = ref(false);\nasync function runSourceContract() {\n\tsourceContractBusy.value = true;\n\tsourceContractResult.value = [];\n\tconst observations = [];\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst context = (signal = new AbortController().signal) => ({\n\t\tsignal,\n\t\trequestId: 7,\n\t\tscope: 'source-example',\n\t\tepoch: 2\n\t});\n\tconst frozen = (value) =>\n\t\tvalue === null ||\n\t\ttypeof value !== 'object' ||\n\t\t(Object.isFrozen(value) &&\n\t\t\tReflect.ownKeys(value).every((key) => frozen(Reflect.get(value, key))));\n\tconst failure = (cause, original) => {\n\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\treturn {\n\t\t\tkind: cause.kind,\n\t\t\tmessage: cause.message,\n\t\t\tcauseKind: cause.cause instanceof AsamDataFailure ? cause.cause.kind : null,\n\t\t\toriginalCause: original === undefined ? null : cause.cause === original,\n\t\t\tnotified: cause.notified\n\t\t};\n\t};\n\tconst rejectSync = (action) => {\n\t\ttry {\n\t\t\taction();\n\t\t} catch (cause) {\n\t\t\treturn failure(cause);\n\t\t}\n\t\tthrow Error('Expected source construction rejection');\n\t};\n\tconst rejectAsync = async (action, original) => {\n\t\ttry {\n\t\t\tawait action();\n\t\t} catch (cause) {\n\t\t\treturn failure(cause, original);\n\t\t}\n\t\tthrow Error('Expected source resolution rejection');\n\t};\n\ttry {\n\t\tconst factory = defineAsamOptions();\n\t\tconst typed = defineAsamOptions();\n\t\tconst host = [{ title: 'Initial', id: 1, meta: { count: 1 } }],\n\t\t\tfields = { label: 'title', value: 'id' },\n\t\t\tsource = factory.static({ options: host, fieldNames: fields });\n\t\tconst cache = { ttlMs: 1000, key: () => 'owned-key' };\n\t\tconst apiSource = factory.api({ api: async () => [], params: undefined, cache });\n\t\tconst requestSource = factory.request({ request: { url: '/source-example' } }),\n\t\t\tdictSource = defineAsamDictSource({ dictType: 'source-example' });\n\t\tconst kinds = [source.kind, apiSource.kind, requestSource.kind, dictSource.kind];\n\t\trecord('source-factory-four-kinds-and-opaque-frozen-identity', {\n\t\t\tkinds,\n\t\t\tsourcesFrozen: [source, apiSource, requestSource, dictSource].every(Object.isFrozen),\n\t\t\tkeys: [source, apiSource, requestSource, dictSource].map(Object.keys),\n\t\t\tsymbols: Object.getOwnPropertySymbols(source).length,\n\t\t\tfactoryKeys: Object.keys(factory),\n\t\t\tdistinct:\n\t\t\t\tsource !==\n\t\t\t\ttyped.static({ options: host, fieldNames: { label: 'title', value: 'id' } }),\n\t\t\tcacheHostFrozen: Object.isFrozen(cache)\n\t\t});\n\t\tfields.label = 'wrong';\n\t\tconst first = await resolveAsamOptions(source, { context: context() });\n\t\thost[0].title = 'Changed';\n\t\thost[0].meta.count = 2;\n\t\tconst second = await resolveAsamOptions(source, { context: context() });\n\t\trecord('source-static-fields-copy-host-live-read-and-frozen-result', {\n\t\t\tfirst,\n\t\t\tsecond,\n\t\t\tfirstFrozen: frozen(first),\n\t\t\tsecondFrozen: frozen(second),\n\t\t\thostFrozen: Object.isFrozen(host) || Object.isFrozen(host[0]),\n\t\t\trawIndependent: first[0].raw !== host[0],\n\t\t\tchangedFieldIgnored: fields.label\n\t\t});\n\t\tconst params = { query: 'before' },\n\t\t\tapiContext = context(),\n\t\t\tcall = { sameParams: false, sameContext: false, transform: 0, adapter: 0 };\n\t\tconst typedApi = defineAsamOptions().api({\n\t\t\tapi: async (input, current) => {\n\t\t\t\tcall.sameParams = input === params;\n\t\t\t\tcall.sameContext = current === apiContext;\n\t\t\t\treturn { rows: [{ title: input.query, id: 2 }] };\n\t\t\t},\n\t\t\tparams,\n\t\t\ttransform: (response) => {\n\t\t\t\tcall.transform++;\n\t\t\t\treturn response.rows;\n\t\t\t},\n\t\t\tfieldNames: { label: 'title', value: 'id' }\n\t\t});\n\t\tparams.query = 'after';\n\t\tconst apiResult = await resolveAsamOptions(typedApi, {\n\t\t\tcontext: apiContext,\n\t\t\tprovider: {\n\t\t\t\tadaptOptions: () => {\n\t\t\t\t\tcall.adapter++;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\trecord('source-typed-api-param-context-and-transform-precedence', {\n\t\t\toptions: apiResult,\n\t\t\tcalls: call,\n\t\t\tfrozen: frozen(apiResult),\n\t\t\tparamsFrozen: Object.isFrozen(params)\n\t\t});\n\t\tlet apiCalls = 0,\n\t\t\tadapterCalls = 0,\n\t\t\tcacheKeyCalls = 0;\n\t\tconst defaultApi = factory.api({\n\t\t\tapi: async () => {\n\t\t\t\tapiCalls++;\n\t\t\t\treturn { rows: [{ label: 'Adapted', value: true }] };\n\t\t\t},\n\t\t\tparams: undefined,\n\t\t\tcache: {\n\t\t\t\tttlMs: 1000,\n\t\t\t\tkey: () => {\n\t\t\t\t\tcacheKeyCalls++;\n\t\t\t\t\treturn 'same';\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst beforeCalls = apiCalls;\n\t\tconst adapted1 = await resolveAsamOptions(defaultApi, {\n\t\t\tcontext: context(),\n\t\t\tprovider: {\n\t\t\t\tadaptOptions: () => {\n\t\t\t\t\tadapterCalls++;\n\t\t\t\t\treturn [{ label: 'Adapted', value: true }];\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst adapted2 = await resolveAsamOptions(defaultApi, {\n\t\t\tcontext: context(),\n\t\t\tprovider: {\n\t\t\t\tadaptOptions: () => {\n\t\t\t\t\tadapterCalls++;\n\t\t\t\t\treturn [{ label: 'Adapted', value: true }];\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tconst direct = await resolveAsamOptions(\n\t\t\tfactory.api({\n\t\t\t\tapi: async () => [{ label: 'Direct', value: false }],\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\t{ context: context() }\n\t\t);\n\t\trecord('source-default-api-adapter-raw-and-no-one-shot-cache', {\n\t\t\tbeforeCalls,\n\t\t\tapiCalls,\n\t\t\tadapterCalls,\n\t\t\tcacheKeyCalls,\n\t\t\tadapted1,\n\t\t\tadapted2,\n\t\t\tdirect,\n\t\t\tdistinctSnapshots: adapted1 !== adapted2\n\t\t});\n\t\tconst requests = [],\n\t\t\trequestParams = { q: 1 },\n\t\t\trequestData = { body: 2 };\n\t\tfor (const method of [undefined, 'get', 'post', 'put', 'delete']) {\n\t\t\tconst request = {\n\t\t\t\turl: '/source-method',\n\t\t\t\t...(method === undefined ? {} : { method }),\n\t\t\t\tparams: requestParams,\n\t\t\t\t...(method === undefined || method === 'get' ? {} : { data: requestData })\n\t\t\t};\n\t\t\tconst current = context(),\n\t\t\t\tresult = await resolveAsamOptions(factory.request({ request }), {\n\t\t\t\t\tcontext: current,\n\t\t\t\t\tprovider: {\n\t\t\t\t\t\trequest: async (input, received) => {\n\t\t\t\t\t\t\trequests.push({\n\t\t\t\t\t\t\t\tmethod: input.method,\n\t\t\t\t\t\t\t\turl: input.url,\n\t\t\t\t\t\t\t\tcopiedConfig: input !== request,\n\t\t\t\t\t\t\t\tsameParams: input.params === requestParams,\n\t\t\t\t\t\t\t\tsameData: input.data === request.data,\n\t\t\t\t\t\t\t\tsameContext: received === current\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\treturn [{ label: 'URL', value: 'url' }];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tif (!frozen(result)) throw Error('Request result must be frozen');\n\t\t}\n\t\trecord('source-url-default-get-and-four-method-context-identity', {\n\t\t\trequests,\n\t\t\tparamsFrozen: Object.isFrozen(requestParams),\n\t\t\tdataFrozen: Object.isFrozen(requestData)\n\t\t});\n\t\trecord('source-provider-requirements-before-transport', {\n\t\t\trequest: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(requestSource, { context: context() })\n\t\t\t),\n\t\t\tdict: await rejectAsync(() => resolveAsamOptions(dictSource, { context: context() }))\n\t\t});\n\t\tlet mutableCalls = 0;\n\t\tconst mutableRequest = { url: '/valid' },\n\t\t\tmutableSource = factory.request({ request: mutableRequest });\n\t\tmutableRequest.url = ' ';\n\t\trecord('source-url-revalidation-guards-mutated-host-before-transport', {\n\t\t\tfailure: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(mutableSource, {\n\t\t\t\t\tcontext: context(),\n\t\t\t\t\tprovider: {\n\t\t\t\t\t\trequest: async () => {\n\t\t\t\t\t\t\tmutableCalls++;\n\t\t\t\t\t\t\treturn [];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t),\n\t\t\tcalls: mutableCalls\n\t\t});\n\t\tconst dictionaries = [];\n\t\tfor (const kind of [undefined, 'string', 'number', 'boolean']) {\n\t\t\tconst current = context(),\n\t\t\t\tvalue = kind === 'boolean' ? '1' : 3,\n\t\t\t\tdict = defineAsamDictSource({\n\t\t\t\t\tdictType: ' spaced ',\n\t\t\t\t\t...(kind === undefined ? {} : { dictValueType: kind })\n\t\t\t\t});\n\t\t\tlet sameContext = false,\n\t\t\t\treceivedType = '';\n\t\t\tconst options = await resolveAsamOptions(dict, {\n\t\t\t\tcontext: current,\n\t\t\t\tprovider: {\n\t\t\t\t\tdict: {\n\t\t\t\t\t\tget: async (type, received) => {\n\t\t\t\t\t\t\tsameContext = current === received;\n\t\t\t\t\t\t\treceivedType = type;\n\t\t\t\t\t\t\treturn [{ label: 'Dict', value }];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tdictionaries.push({\n\t\t\t\tkind: kind ?? 'default',\n\t\t\t\tvalue: options[0]?.value,\n\t\t\t\traw: options[0]?.raw.value,\n\t\t\t\tsameContext,\n\t\t\t\treceivedType,\n\t\t\t\tfrozen: frozen(options)\n\t\t\t});\n\t\t}\n\t\trecord('source-dictionary-default-and-three-conversions', { dictionaries });\n\t\tconst forged = [{ kind: 'static' }, { ...source }, new Proxy(source, {})];\n\t\trecord('source-opaque-forged-copy-proxy-rejections', {\n\t\t\tfailures: await Promise.all(\n\t\t\t\tforged.map((value) =>\n\t\t\t\t\trejectAsync(() =>\n\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t{ context: context() }\n\t\t\t\t\t\t])\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t});\n\t\tconst constructors = [];\n\t\tfor (const [name, method, valid] of [\n\t\t\t['static', factory.static, { options: [] }],\n\t\t\t['api', factory.api, { api: async () => [], params: undefined }],\n\t\t\t['request', factory.request, { request: { url: '/valid' } }],\n\t\t\t['dict', defineAsamDictSource, { dictType: 'valid' }]\n\t\t]) {\n\t\t\tfor (const [suffix, input] of [\n\t\t\t\t['null', null],\n\t\t\t\t['array', []],\n\t\t\t\t['missing', {}],\n\t\t\t\t['wrong', { data: [] }],\n\t\t\t\t['multiple', { ...valid, data: [] }],\n\t\t\t\t[\n\t\t\t\t\t'null-source',\n\t\t\t\t\t{\n\t\t\t\t\t\t...valid,\n\t\t\t\t\t\t[name === 'static' ? 'options' : name === 'dict' ? 'dictType' : name]: null\n\t\t\t\t\t}\n\t\t\t\t],\n\t\t\t\t['extra', { ...valid, foreign: 1 }]\n\t\t\t])\n\t\t\t\tconstructors.push([\n\t\t\t\t\tname + '-' + suffix,\n\t\t\t\t\t() => Reflect.apply(method, undefined, [input])\n\t\t\t\t]);\n\t\t}\n\t\tfor (const kind of ['api', 'request']) {\n\t\t\tconst method = factory[kind],\n\t\t\t\tvalid =\n\t\t\t\t\tkind === 'api'\n\t\t\t\t\t\t? { api: async () => [], params: undefined }\n\t\t\t\t\t\t: { request: { url: '/valid' } };\n\t\t\tfor (const [suffix, extra] of [\n\t\t\t\t['cache-null', { cache: null }],\n\t\t\t\t['cache-zero', { cache: { ttlMs: 0 } }],\n\t\t\t\t['cache-negative', { cache: { ttlMs: -1 } }],\n\t\t\t\t['cache-fraction', { cache: { ttlMs: 1.5 } }],\n\t\t\t\t['cache-infinite', { cache: { ttlMs: Infinity } }],\n\t\t\t\t['cache-unsafe', { cache: { ttlMs: Number.MAX_SAFE_INTEGER + 1 } }],\n\t\t\t\t['cache-key', { cache: { ttlMs: 1, key: 1 } }],\n\t\t\t\t['transform', { transform: 1 }],\n\t\t\t\t['fields-without-transform', { fieldNames: { label: 'label', value: 'value' } }],\n\t\t\t\t['fields-null', { fieldNames: null }]\n\t\t\t])\n\t\t\t\tconstructors.push([\n\t\t\t\t\tkind + '-' + suffix,\n\t\t\t\t\t() => Reflect.apply(method, undefined, [{ ...valid, ...extra }])\n\t\t\t\t]);\n\t\t}\n\t\tfor (const [suffix, input] of [\n\t\t\t['api-nonfunction', { api: 1 }],\n\t\t\t['static-bad-fields', { options: [], fieldNames: { label: '', value: 'value' } }]\n\t\t])\n\t\t\tconstructors.push([\n\t\t\t\tsuffix,\n\t\t\t\t() =>\n\t\t\t\t\tReflect.apply(\n\t\t\t\t\t\tsuffix.startsWith('api') ? factory.api : factory.static,\n\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t[input]\n\t\t\t\t\t)\n\t\t\t]);\n\t\tfor (const [suffix, request] of [\n\t\t\t['url-empty', { url: '' }],\n\t\t\t['url-numeric', { url: 1 }],\n\t\t\t['method-upper', { url: '/x', method: 'GET' }],\n\t\t\t['get-data', { url: '/x', data: {} }],\n\t\t\t['params-array', { url: '/x', params: [] }]\n\t\t])\n\t\t\tconstructors.push([\n\t\t\t\t'request-' + suffix,\n\t\t\t\t() => Reflect.apply(factory.request, undefined, [{ request }])\n\t\t\t]);\n\t\tfor (const [suffix, input] of [\n\t\t\t['empty', { dictType: '' }],\n\t\t\t['whitespace', { dictType: ' ' }],\n\t\t\t['numeric', { dictType: 1 }],\n\t\t\t['null-value-type', { dictType: 'x', dictValueType: null }],\n\t\t\t['unknown-value-type', { dictType: 'x', dictValueType: 'other' }],\n\t\t\t['cache', { dictType: 'x', cache: { ttlMs: 1 } }]\n\t\t])\n\t\t\tconstructors.push([\n\t\t\t\t'dict-' + suffix,\n\t\t\t\t() => Reflect.apply(defineAsamDictSource, undefined, [input])\n\t\t\t]);\n\t\trecord('source-complete-constructor-config-rejections', {\n\t\t\tcases: constructors.map(([name, action]) => ({ name, failure: rejectSync(action) })),\n\t\t\tallowedUndefinedExtra: factory.static({ options: [], ...{ foreign: undefined } }).kind,\n\t\t\tallowedInheritedSource: Reflect.apply(factory.static, undefined, [\n\t\t\t\tObject.create({ options: [] })\n\t\t\t]).kind\n\t\t});\n\t\tlet guardedCalls = 0;\n\t\tconst guardedProvider = {\n\t\t\trequest: async () => {\n\t\t\t\tguardedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tdict: {\n\t\t\t\tget: async () => {\n\t\t\t\t\tguardedCalls++;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tconst guardedApi = factory.api({\n\t\t\tapi: async () => {\n\t\t\t\tguardedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tparams: undefined\n\t\t});\n\t\trecord('source-rules-validation-before-all-remote-io', {\n\t\t\tfailures: await Promise.all(\n\t\t\t\t[guardedApi, requestSource, dictSource].map((current) =>\n\t\t\t\t\trejectAsync(() =>\n\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\tcurrent,\n\t\t\t\t\t\t\t{ context: context(), provider: guardedProvider, separator: '' }\n\t\t\t\t\t\t])\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\tcalls: guardedCalls\n\t\t});\n\t\tconst transportCases = [];\n\t\tfor (const kind of ['api', 'request', 'dict'])\n\t\t\tfor (const mode of ['throw', 'reject', 'non-promise']) {\n\t\t\t\tconst original = Error(kind + '-' + mode),\n\t\t\t\t\trun = () => {\n\t\t\t\t\t\tif (mode === 'throw') throw original;\n\t\t\t\t\t\treturn mode === 'reject' ? Promise.reject(original) : [];\n\t\t\t\t\t};\n\t\t\t\tconst selected =\n\t\t\t\t\tkind === 'api'\n\t\t\t\t\t\t? Reflect.apply(factory.api, undefined, [{ api: run, params: undefined }])\n\t\t\t\t\t\t: kind === 'request'\n\t\t\t\t\t\t\t? requestSource\n\t\t\t\t\t\t\t: dictSource;\n\t\t\t\ttransportCases.push({\n\t\t\t\t\tkind,\n\t\t\t\t\tmode,\n\t\t\t\t\tfailure: await rejectAsync(\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\t\tselected,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcontext: context(),\n\t\t\t\t\t\t\t\t\tprovider: { request: run, dict: { get: run } }\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]),\n\t\t\t\t\t\tmode === 'non-promise' ? undefined : original\n\t\t\t\t\t)\n\t\t\t\t});\n\t\t\t}\n\t\trecord('source-nine-transport-failures-and-original-causes', { cases: transportCases });\n\t\tconst stages = [];\n\t\tfor (const stage of ['transform', 'adapter'])\n\t\t\tfor (const mode of ['throw', 'async-resolve', 'async-reject', 'malformed']) {\n\t\t\t\tconst original = Error(stage + '-' + mode),\n\t\t\t\t\tparse = () => {\n\t\t\t\t\t\tif (mode === 'throw') throw original;\n\t\t\t\t\t\tif (mode === 'async-reject') return Promise.reject(original);\n\t\t\t\t\t\tif (mode === 'async-resolve') return Promise.resolve([]);\n\t\t\t\t\t\treturn {};\n\t\t\t\t\t};\n\t\t\t\tconst selected = Reflect.apply(factory.api, undefined, [\n\t\t\t\t\t{\n\t\t\t\t\t\tapi: async () => [],\n\t\t\t\t\t\tparams: undefined,\n\t\t\t\t\t\t...(stage === 'transform' ? { transform: parse } : {})\n\t\t\t\t\t}\n\t\t\t\t]);\n\t\t\t\tstages.push({\n\t\t\t\t\tstage,\n\t\t\t\t\tmode,\n\t\t\t\t\tfailure: await rejectAsync(\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\tReflect.apply(resolveAsamOptions, undefined, [\n\t\t\t\t\t\t\t\tselected,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcontext: context(),\n\t\t\t\t\t\t\t\t\tprovider:\n\t\t\t\t\t\t\t\t\t\tstage === 'adapter' ? { adaptOptions: parse } : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]),\n\t\t\t\t\t\tmode === 'throw' ? original : undefined\n\t\t\t\t\t)\n\t\t\t\t});\n\t\t\t}\n\t\trecord('source-eight-transform-adapter-sync-guards-and-error-stages', { cases: stages });\n\t\trecord('source-static-config-versus-remote-response-failures', {\n\t\t\tstatic: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(factory.static({ options: [{ label: 'Bad', value: {} }] }), {\n\t\t\t\t\tcontext: context()\n\t\t\t\t})\n\t\t\t),\n\t\t\tapi: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(factory.api({ api: async () => ({}), params: undefined }), {\n\t\t\t\t\tcontext: context()\n\t\t\t\t})\n\t\t\t),\n\t\t\tdictionary: await rejectAsync(() =>\n\t\t\t\tresolveAsamOptions(\n\t\t\t\t\tdefineAsamDictSource({ dictType: 'invalid', dictValueType: 'number' }),\n\t\t\t\t\t{\n\t\t\t\t\t\tcontext: context(),\n\t\t\t\t\t\tprovider: {\n\t\t\t\t\t\t\tdict: { get: async () => [{ label: 'Bad', value: 'not-number' }] }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t),\n\t\t\tstaticConstructionRemainsLazy: factory.static({\n\t\t\t\toptions: [{ label: 'Bad', value: {} }]\n\t\t\t}).kind\n\t\t});\n\t\tconst aborted = new AbortController(),\n\t\t\treason = { owned: 'pre-abort' };\n\t\taborted.abort(reason);\n\t\tlet abortedCalls = 0;\n\t\tconst abortApi = factory.api({\n\t\t\tapi: async () => {\n\t\t\t\tabortedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tparams: undefined\n\t\t});\n\t\tconst preAborts = [];\n\t\tfor (const current of [source, abortApi, requestSource, dictSource]) {\n\t\t\ttry {\n\t\t\t\tawait resolveAsamOptions(current, {\n\t\t\t\t\tcontext: context(aborted.signal),\n\t\t\t\t\tprovider: {\n\t\t\t\t\t\trequest: async () => {\n\t\t\t\t\t\t\tabortedCalls++;\n\t\t\t\t\t\t\treturn [];\n\t\t\t\t\t\t},\n\t\t\t\t\t\tdict: {\n\t\t\t\t\t\t\tget: async () => {\n\t\t\t\t\t\t\t\tabortedCalls++;\n\t\t\t\t\t\t\t\treturn [];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} catch (cause) {\n\t\t\t\tpreAborts.push(cause === reason);\n\t\t\t}\n\t\t}\n\t\trecord('source-pre-abort-exact-reason-four-kinds-zero-io', {\n\t\t\tpreAborts,\n\t\t\tcalls: abortedCalls\n\t\t});\n\t\tconst lateResults = [];\n\t\tfor (const mode of ['resolve', 'reject']) {\n\t\t\tconst controller = new AbortController(),\n\t\t\t\tabortReason = { mode },\n\t\t\t\tlateCause = Error('late-' + mode);\n\t\t\tlet release = () => {\n\t\t\t\t\tthrow Error('Missing release');\n\t\t\t\t},\n\t\t\t\treject = () => {\n\t\t\t\t\tthrow Error('Missing rejection');\n\t\t\t\t},\n\t\t\t\ttransforms = 0,\n\t\t\t\tcalls = 0;\n\t\t\tconst gated = factory.api({\n\t\t\t\tapi: () => {\n\t\t\t\t\tcalls++;\n\t\t\t\t\treturn new Promise((done, fail) => {\n\t\t\t\t\t\trelease = done;\n\t\t\t\t\t\treject = fail;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tparams: undefined,\n\t\t\t\ttransform: () => {\n\t\t\t\t\ttransforms++;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\t\t\t});\n\t\t\tconst pending = resolveAsamOptions(gated, { context: context(controller.signal) }).then(\n\t\t\t\t() => false,\n\t\t\t\t(cause) => cause === abortReason\n\t\t\t);\n\t\t\tcontroller.abort(abortReason);\n\t\t\tconst promptExactReason = await pending;\n\t\t\tif (mode === 'resolve') release([]);\n\t\t\telse reject(lateCause);\n\t\t\tawait Promise.resolve();\n\t\t\tawait Promise.resolve();\n\t\t\tawait Promise.resolve();\n\t\t\tlateResults.push({ mode, promptExactReason, calls, transforms });\n\t\t}\n\t\trecord('source-prompt-abort-ignored-transport-and-late-settlement', { cases: lateResults });\n\t\tsourceContractResult.value = observations;\n\t} catch (cause) {\n\t\tsourceContractResult.value = [\n\t\t\t...observations,\n\t\t\t{\n\t\t\t\tphase: 'source-contract-unexpected-failure',\n\t\t\t\tstate: { message: cause instanceof Error ? cause.message : String(cause) }\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tsourceContractBusy.value = false;\n\t}\n}\n\nconst optionsStateInjectionTarget = ref();\nconst optionsStateContractResult = ref([]);\nconst optionsStateContractBusy = ref(false);\nasync function runOptionsStateContract() {\n\toptionsStateContractBusy.value = true;\n\toptionsStateContractResult.value = [];\n\tconst observations = [],\n\t\tscopes = [];\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst attach = (config, kind = 'remote') => {\n\t\tconst scope = effectScope();\n\t\tscopes.push(scope);\n\t\tconst state = scope.run(() =>\n\t\t\tkind === 'remote' ? useAsamRemoteOptions(config) : useAsamDictOptions(config)\n\t\t);\n\t\tif (!state) throw Error('Missing scoped options state');\n\t\treturn { state, scope };\n\t};\n\tconst snapshot = (state) => ({\n\t\tvalues: state.data.value.map((o) => o.value),\n\t\tloading: state.loading.value,\n\t\terror: state.error.value?.kind ?? null,\n\t\terrorMessage: state.error.value?.message ?? null,\n\t\tstale: state.stale.value,\n\t\thasSucceeded: state.hasSucceeded.value,\n\t\tempty: state.empty.value,\n\t\tdataKeySet: state.dataKey.value !== null,\n\t\trequestKeySet: state.requestKey.value !== null,\n\t\tkeysMatch: state.dataKey.value !== null && state.dataKey.value === state.requestKey.value\n\t});\n\tconst settle = async (check) => {\n\t\tfor (let i = 0; i < 100 && !check(); i++) await Promise.resolve();\n\t\tif (!check()) throw Error('Options state did not settle within microtasks');\n\t};\n\tconst gate = () => {\n\t\tlet release = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t},\n\t\t\treject = () => {\n\t\t\t\tthrow Error('Missing gate');\n\t\t\t};\n\t\tconst promise = new Promise((done, fail) => {\n\t\t\trelease = done;\n\t\t\treject = fail;\n\t\t});\n\t\treturn { promise, release, reject };\n\t};\n\ttry {\n\t\tconst factory = defineAsamOptions(),\n\t\t\tfirstGate = gate(),\n\t\t\tfailedGate = gate(),\n\t\t\temptyGate = gate(),\n\t\t\tjobs = [firstGate, failedGate, emptyGate];\n\t\tlet calls = 0,\n\t\t\tsuccess = 0,\n\t\t\tlocalErrors = 0,\n\t\t\tnotifications = 0,\n\t\t\tsuccessSame = false,\n\t\t\terrorSame = false;\n\t\tconst runtime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\tnotifications++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\tsource = factory.api({ api: () => jobs[calls++].promise, params: undefined });\n\n\t\tconst attached = attach({\n\t\t\tsource,\n\t\t\truntime,\n\t\t\timmediate: false,\n\t\t\tonSuccess: (data) => {\n\t\t\t\tsuccess++;\n\t\t\t\tsuccessSame = data === current?.data.value;\n\t\t\t},\n\t\t\tonError: (error) => {\n\t\t\t\tlocalErrors++;\n\t\t\t\terrorSame = error === current?.error.value;\n\t\t\t}\n\t\t});\n\t\tconst current = attached.state;\n\t\trecord('options-state-all-public-members-and-manual-initial-state', {\n\t\t\tmembers: Object.keys(current),\n\t\t\tsnapshot: snapshot(current),\n\t\t\tcalls\n\t\t});\n\t\tconst first = current.reload();\n\t\trecord('options-state-held-loading-before-first-success', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tcalls\n\t\t});\n\t\tfirstGate.release([{ label: 'One', value: 1 }]);\n\t\tconst firstResult = await first;\n\t\trecord('options-state-success-frozen-data-keys-and-callbacks', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tstatus: firstResult.status,\n\t\t\tfromCache: firstResult.status === 'success' ? firstResult.fromCache : null,\n\t\t\tsuccess,\n\t\t\tlocalErrors,\n\t\t\tnotifications,\n\t\t\tsuccessSame,\n\t\t\tfrozen:\n\t\t\t\tObject.isFrozen(current.data.value) &&\n\t\t\t\tObject.isFrozen(current.data.value[0]) &&\n\t\t\t\tObject.isFrozen(current.data.value[0]?.raw)\n\t\t});\n\t\tconst original = Error('owned hook request failure'),\n\t\t\tfailed = current.reload();\n\t\tfailedGate.reject(original);\n\t\tconst failedResult = await failed;\n\t\trecord('options-state-request-failure-retains-stale-success-and-error-hooks', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tstatus: failedResult.status,\n\t\t\toriginalCause: current.error.value?.cause === original,\n\t\t\tnotified: current.error.value?.notified,\n\t\t\tsuccess,\n\t\t\tlocalErrors,\n\t\t\tnotifications,\n\t\t\terrorSame\n\t\t});\n\t\tconst empty = current.reload();\n\t\temptyGate.release([]);\n\t\tconst emptyResult = await empty;\n\t\trecord('options-state-empty-success-clears-error-stale-and-restores-callback', {\n\t\t\tsnapshot: snapshot(current),\n\t\t\tstatus: emptyResult.status,\n\t\t\tsuccess,\n\t\t\tlocalErrors,\n\t\t\tnotifications\n\t\t});\n\t\tattached.scope.stop();\n\t\trecord('options-state-disposal-removes-consumer-and-cancels-reload', {\n\t\t\tstatus: (await current.reload()).status,\n\t\t\tcalls,\n\t\t\tsnapshot: snapshot(current)\n\t\t});\n\t\tconst active = ref(false);\n\t\tlet activeCalls = 0;\n\t\tconst activeSource = factory.api({\n\t\t\t\tapi: async () => {\n\t\t\t\t\tactiveCalls++;\n\t\t\t\t\treturn [{ label: 'Active', value: 2 }];\n\t\t\t\t},\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\tactiveState = attach({\n\t\t\t\tsource: activeSource,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tactive,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tconst inactiveInitial = snapshot(activeState),\n\t\t\tinactiveReload = (await activeState.reload()).status;\n\t\tactive.value = true;\n\t\tconst enabledBeforeReload = snapshot(activeState);\n\t\tawait activeState.reload();\n\t\tactive.value = false;\n\t\tconst disabledAfterSuccess = snapshot(activeState),\n\t\t\tinactiveAfterSuccess = (await activeState.reload()).status;\n\t\tactive.value = true;\n\t\tconst restored = snapshot(activeState);\n\t\trecord('options-state-reactive-active-retention-and-immediate-false', {\n\t\t\tinactiveInitial,\n\t\t\tinactiveReload,\n\t\t\tenabledBeforeReload,\n\t\t\tdisabledAfterSuccess,\n\t\t\tinactiveAfterSuccess,\n\t\t\trestored,\n\t\t\tcalls: activeCalls\n\t\t});\n\t\tconst obsolete = gate(),\n\t\t\tlatest = gate();\n\t\tlet raceCalls = 0,\n\t\t\tlateCallbacks = 0;\n\t\tconst raceRuntime = createAsamDataRuntime(),\n\t\t\tquery = ref('old'),\n\t\t\traceApi = (input) => {\n\t\t\t\traceCalls++;\n\t\t\t\treturn input.query === 'old' ? obsolete.promise : latest.promise;\n\t\t\t},\n\t\t\traceSource = computed(() =>\n\t\t\t\tfactory.api({ api: raceApi, params: { query: query.value } })\n\t\t\t),\n\t\t\traceState = attach({\n\t\t\t\tsource: raceSource,\n\t\t\t\truntime: raceRuntime,\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tlateCallbacks++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tconst oldJob = raceState.reload(),\n\t\t\toldKey = raceState.requestKey.value;\n\t\tquery.value = 'new';\n\t\tconst cancelledOld = await oldJob,\n\t\t\tnewJob = raceState.reload(),\n\t\t\tchangedKey = raceState.requestKey.value !== oldKey;\n\t\tlatest.release([{ label: 'New', value: 'new' }]);\n\t\tawait newJob;\n\t\tobsolete.release([{ label: 'Obsolete', value: 'old' }]);\n\t\tawait settle(() => !raceState.loading.value);\n\t\trecord('options-state-source-replacement-cancels-old-and-blocks-late-write', {\n\t\t\tcancelledOld: cancelledOld.status,\n\t\t\tchangedKey,\n\t\t\tsnapshot: snapshot(raceState),\n\t\t\tcalls: raceCalls,\n\t\t\tsuccessCallbacks: lateCallbacks\n\t\t});\n\t\tconst cancelGate = gate();\n\t\tlet cancelCalls = 0,\n\t\t\tcancelCallbacks = 0;\n\t\tconst cancelOwner = attach({\n\t\t\t\tsource: factory.api({\n\t\t\t\t\tapi: () => {\n\t\t\t\t\t\tcancelCalls++;\n\t\t\t\t\t\treturn cancelGate.promise;\n\t\t\t\t\t},\n\t\t\t\t\tparams: undefined\n\t\t\t\t}),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tcancelCallbacks++;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tcancelState = cancelOwner.state,\n\t\t\tcancelJob = cancelState.reload();\n\t\tcancelState.cancel();\n\t\tconst cancelled = await cancelJob;\n\t\tcancelGate.release([{ label: 'Late', value: 9 }]);\n\t\tawait settle(() => !cancelState.loading.value);\n\t\trecord('options-state-explicit-cancel-settles-pending-without-success', {\n\t\t\tstatus: cancelled.status,\n\t\t\tsnapshot: snapshot(cancelState),\n\t\t\tcalls: cancelCalls,\n\t\t\tsuccessCallbacks: cancelCallbacks\n\t\t});\n\t\tconst sharedGate = gate();\n\t\tlet sharedCalls = 0;\n\t\tconst sharedApi = () => {\n\t\t\t\tsharedCalls++;\n\t\t\t\treturn sharedGate.promise;\n\t\t\t},\n\t\t\tsharedSource = factory.api({\n\t\t\t\tapi: sharedApi,\n\t\t\t\tparams: { q: 1 },\n\t\t\t\tcache: { ttlMs: 10000 }\n\t\t\t}),\n\t\t\tsharedRuntime = createAsamDataRuntime(),\n\t\t\tsharedA = attach({\n\t\t\t\tsource: sharedSource,\n\t\t\t\truntime: sharedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state,\n\t\t\tsharedB = attach({\n\t\t\t\tsource: sharedSource,\n\t\t\t\truntime: sharedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tconst sharedJobA = sharedA.reload(),\n\t\t\tsharedJobB = sharedB.reload();\n\t\tconst joined = {\n\t\t\tcalls: sharedCalls,\n\t\t\tsameRequestKey: sharedA.requestKey.value === sharedB.requestKey.value,\n\t\t\tbothLoading: sharedA.loading.value && sharedB.loading.value\n\t\t};\n\t\tsharedA.cancel();\n\t\tconst detached = await sharedJobA;\n\t\tsharedGate.release([{ label: 'Shared', value: 3 }]);\n\t\tawait sharedJobB;\n\t\tconst cached = await sharedA.reload();\n\t\trecord('options-state-cache-shared-flight-independent-cancel-and-rejoin', {\n\t\t\tjoined,\n\t\t\tdetached: detached.status,\n\t\t\tfromCache: cached.status === 'success' ? cached.fromCache : null,\n\t\t\tcalls: sharedCalls,\n\t\t\tsameSnapshot: sharedA.data.value === sharedB.data.value,\n\t\t\ta: snapshot(sharedA),\n\t\t\tb: snapshot(sharedB)\n\t\t});\n\t\tlet isolatedCalls = 0;\n\t\tconst isolatedApi = async () => {\n\t\t\t\tisolatedCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tisolatedSource = factory.api({ api: isolatedApi, params: { q: 1 } }),\n\t\t\tisolatedRuntime = createAsamDataRuntime(),\n\t\t\tisolatedA = attach({\n\t\t\t\tsource: isolatedSource,\n\t\t\t\truntime: isolatedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state,\n\t\t\tisolatedB = attach({\n\t\t\t\tsource: isolatedSource,\n\t\t\t\truntime: isolatedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait Promise.all([isolatedA.reload(), isolatedB.reload()]);\n\t\trecord('options-state-uncached-remote-consumers-have-isolated-jobs', {\n\t\t\tcalls: isolatedCalls,\n\t\t\tdifferentRequestKey: isolatedA.requestKey.value !== isolatedB.requestKey.value,\n\t\t\ta: snapshot(isolatedA),\n\t\t\tb: snapshot(isolatedB)\n\t\t});\n\t\tconst ordinaryGate = gate(),\n\t\t\tforceGate = gate();\n\t\tlet forceCalls = 0;\n\t\tconst forceSource = factory.api({\n\t\t\t\tapi: () => [ordinaryGate, forceGate][forceCalls++].promise,\n\t\t\t\tparams: undefined,\n\t\t\t\tcache: { ttlMs: 10000 }\n\t\t\t}),\n\t\t\tforceRuntime = createAsamDataRuntime(),\n\t\t\tforceA = attach({ source: forceSource, runtime: forceRuntime, immediate: false }).state,\n\t\t\tforceB = attach({ source: forceSource, runtime: forceRuntime, immediate: false }).state;\n\t\tconst ordinary = forceA.reload(),\n\t\t\tforcedA = forceA.reload({ force: true }),\n\t\t\tforcedB = forceB.reload({ force: true }),\n\t\t\tordinaryCancelled = await ordinary;\n\t\tforceGate.release([{ label: 'Forced', value: 4 }]);\n\t\tconst forceResults = await Promise.all([forcedA, forcedB]);\n\t\tordinaryGate.release([{ label: 'Obsolete', value: 0 }]);\n\t\tawait settle(() => !forceA.loading.value);\n\t\trecord('options-state-force-replaces-normal-flight-and-shares-forced-generation', {\n\t\t\tordinary: ordinaryCancelled.status,\n\t\t\tforced: forceResults.map((r) => r.status),\n\t\t\tfromCache: forceResults.map((r) => (r.status === 'success' ? r.fromCache : null)),\n\t\t\tcalls: forceCalls,\n\t\t\tsameSnapshot: forceA.data.value === forceB.data.value,\n\t\t\ta: snapshot(forceA),\n\t\t\tb: snapshot(forceB)\n\t\t});\n\t\tlet scopedCalls = 0;\n\t\tconst scopedRuntime = createAsamDataRuntime({ scope: 'first' }),\n\t\t\tscopedApi = async () => {\n\t\t\t\tscopedCalls++;\n\t\t\t\treturn [{ label: 'Scope', value: scopedCalls }];\n\t\t\t},\n\t\t\tscopedState = attach({\n\t\t\t\tsource: factory.api({ api: scopedApi, params: undefined, cache: { ttlMs: 10000 } }),\n\t\t\t\truntime: scopedRuntime,\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait scopedState.reload();\n\t\tconst scopeKey = scopedState.requestKey.value;\n\t\tscopedRuntime.setScope('second');\n\t\tconst clearedOnScope = snapshot(scopedState),\n\t\t\tscopeKeyChanged = scopedState.requestKey.value !== scopeKey;\n\t\tawait scopedState.reload();\n\t\tscopedRuntime.invalidate();\n\t\tconst clearedOnInvalidate = snapshot(scopedState);\n\t\tawait scopedState.reload();\n\t\trecord('options-state-scope-epoch-invalidation-clears-data-and-cache', {\n\t\t\tclearedOnScope,\n\t\t\tclearedOnInvalidate,\n\t\t\tscopeKeyChanged,\n\t\t\tcalls: scopedCalls,\n\t\t\tsnapshot: snapshot(scopedState),\n\t\t\tscope: scopedRuntime.scope,\n\t\t\tepoch: scopedRuntime.epoch\n\t\t});\n\t\tconst badSource = shallowRef(undefined);\n\t\tlet configErrors = 0,\n\t\t\tconfigNotifications = 0;\n\t\tconst badRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\tconfigNotifications++;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\tbadState = attach({\n\t\t\t\tsource: badSource,\n\t\t\t\truntime: badRuntime,\n\t\t\t\timmediate: false,\n\t\t\t\tonError: () => {\n\t\t\t\t\tconfigErrors++;\n\t\t\t\t}\n\t\t\t}).state;\n\t\tReflect.set(badSource, 'value', Object.freeze({ kind: 'api' }));\n\t\tconst dedup = {\n\t\t\terrors: configErrors,\n\t\t\tnotifications: configNotifications,\n\t\t\tsnapshot: snapshot(badState)\n\t\t};\n\t\tbadSource.value = factory.api({ api: async () => [], params: undefined });\n\t\tawait badState.reload();\n\t\trecord('options-state-config-error-dedup-and-valid-source-recovery', {\n\t\t\tdedup,\n\t\t\trecovered: snapshot(badState),\n\t\t\terrors: configErrors,\n\t\t\tnotifications: configNotifications\n\t\t});\n\t\tconst wrongKinds = [];\n\t\tfor (const [name, kind, input] of [\n\t\t\t['remote-static', 'remote', factory.static({ options: [] })],\n\t\t\t['remote-dict', 'remote', defineAsamDictSource({ dictType: 'x' })],\n\t\t\t['dict-api', 'dict', factory.api({ api: async () => [], params: undefined })],\n\t\t\t['dict-url', 'dict', factory.request({ request: { url: '/x' } })]\n\t\t]) {\n\t\t\tconst state = attach(\n\t\t\t\t{ source: input, runtime: createAsamDataRuntime(), immediate: false },\n\t\t\t\tkind\n\t\t\t).state;\n\t\t\twrongKinds.push({\n\t\t\t\tname,\n\t\t\t\tsnapshot: snapshot(state),\n\t\t\t\treload: (await state.reload()).status\n\t\t\t});\n\t\t}\n\t\trecord('options-state-remote-dict-source-kind-restrictions', { cases: wrongKinds });\n\t\tconst invalidConfig = [];\n\t\tfor (const [name, extra] of [\n\t\t\t['negative-debounce', { debounceMs: -1 }],\n\t\t\t['fraction-debounce', { debounceMs: 0.5 }],\n\t\t\t['unsafe-debounce', { debounceMs: Number.MAX_SAFE_INTEGER + 1 }],\n\t\t\t[\n\t\t\t\t'bad-cache-key',\n\t\t\t\t{\n\t\t\t\t\tsource: factory.api({\n\t\t\t\t\t\tapi: async () => [],\n\t\t\t\t\t\tparams: undefined,\n\t\t\t\t\t\tcache: { ttlMs: 1, key: () => '' }\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t],\n\t\t\t[\n\t\t\t\t'throw-cache-key',\n\t\t\t\t{\n\t\t\t\t\tsource: factory.api({\n\t\t\t\t\t\tapi: async () => [],\n\t\t\t\t\t\tparams: undefined,\n\t\t\t\t\t\tcache: {\n\t\t\t\t\t\t\tttlMs: 1,\n\t\t\t\t\t\t\tkey: () => {\n\t\t\t\t\t\t\t\tthrow Error('owned cache key');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t]\n\t\t]) {\n\t\t\tconst owner = Reflect.apply(attach, undefined, [\n\t\t\t\t{\n\t\t\t\t\tsource: factory.api({ api: async () => [], params: undefined }),\n\t\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\t\timmediate: false,\n\t\t\t\t\t...extra\n\t\t\t\t}\n\t\t\t]);\n\t\t\tinvalidConfig.push({\n\t\t\t\tname,\n\t\t\t\tsnapshot: snapshot(owner.state),\n\t\t\t\treload: (await owner.state.reload()).status\n\t\t\t});\n\t\t}\n\t\trecord('options-state-debounce-and-cache-key-config-guards', { cases: invalidConfig });\n\t\tconst treeSource = factory.api({\n\t\t\t\tapi: async () => [\n\t\t\t\t\t{ label: 'Parent', value: 1, children: [{ label: 'Leaf', value: 2 }] }\n\t\t\t\t],\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\ttreeState = attach({\n\t\t\t\tsource: treeSource,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\ttree: true,\n\t\t\t\timmediate: false,\n\t\t\t\tvaluePolicy: { multiple: true, valueMode: 'object', multipleValueMode: 'array' },\n\t\t\t\tseparator: '::'\n\t\t\t}).state;\n\t\tawait treeState.reload();\n\t\tconst flatState = attach({\n\t\t\tsource: treeSource,\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\timmediate: false\n\t\t}).state;\n\t\tawait flatState.reload();\n\t\trecord('options-state-tree-policy-separator-normalization-versus-flat-error', {\n\t\t\ttree: snapshot(treeState),\n\t\t\tchildren: treeState.data.value[0]?.children?.map((o) => o.value),\n\t\t\tflat: snapshot(flatState)\n\t\t});\n\t\tlet dictCalls = 0,\n\t\t\trefreshCalls = 0;\n\t\tconst dictRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tdict: {\n\t\t\t\t\t\tget: async () => {\n\t\t\t\t\t\t\tdictCalls++;\n\t\t\t\t\t\t\treturn [{ label: 'Dict', value: dictCalls }];\n\t\t\t\t\t\t},\n\t\t\t\t\t\trefresh: async () => {\n\t\t\t\t\t\t\trefreshCalls++;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\tdictInput = defineAsamDictSource({ dictType: 'hook-dict', dictValueType: 'number' }),\n\t\t\tdictA = attach(\n\t\t\t\t{ source: dictInput, runtime: dictRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state,\n\t\t\tdictB = attach(\n\t\t\t\t{ source: dictInput, runtime: dictRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state;\n\t\tawait Promise.all([dictA.reload(), dictB.reload()]);\n\t\tconst beforeForce = {\n\t\t\tcalls: dictCalls,\n\t\t\trefreshCalls,\n\t\t\tsameSnapshot: dictA.data.value === dictB.data.value\n\t\t};\n\t\tconst dictForced = await Promise.all([\n\t\t\tdictA.reload({ force: true }),\n\t\t\tdictB.reload({ force: true })\n\t\t]);\n\t\trecord('options-state-dictionary-sharing-and-deduplicated-force-refresh', {\n\t\t\tbeforeForce,\n\t\t\tcalls: dictCalls,\n\t\t\trefreshCalls,\n\t\t\tstatuses: dictForced.map((r) => r.status),\n\t\t\ta: snapshot(dictA),\n\t\t\tb: snapshot(dictB),\n\t\t\tsameSnapshot: dictA.data.value === dictB.data.value\n\t\t});\n\t\tconst unavailable = attach(\n\t\t\t{\n\t\t\t\tsource: dictInput,\n\t\t\t\truntime: createAsamDataRuntime({ provider: { dict: { get: async () => [] } } }),\n\t\t\t\timmediate: false\n\t\t\t},\n\t\t\t'dict'\n\t\t).state;\n\t\tconst noRefresh = await unavailable.reload({ force: true });\n\t\trecord('options-state-dictionary-force-without-refresh-config-error', {\n\t\t\tstatus: noRefresh.status,\n\t\t\tsnapshot: snapshot(unavailable)\n\t\t});\n\t\tconst disposedGate = gate();\n\t\tlet disposedCallbacks = 0;\n\t\tconst disposedOwner = attach({\n\t\t\t\tsource: factory.api({ api: () => disposedGate.promise, params: undefined }),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tdisposedCallbacks++;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tdisposedJob = disposedOwner.state.reload();\n\t\tdisposedOwner.scope.stop();\n\t\tconst disposedResult = await disposedJob;\n\t\tdisposedGate.release([{ label: 'Disposed', value: 9 }]);\n\t\tawait settle(() => !disposedOwner.state.loading.value);\n\t\trecord('options-state-disposal-cancels-held-job-and-blocks-late-callback', {\n\t\t\tstatus: disposedResult.status,\n\t\t\tcallbacks: disposedCallbacks,\n\t\t\treloadAfterDispose: (await disposedOwner.state.reload()).status,\n\t\t\tsnapshot: snapshot(disposedOwner.state)\n\t\t});\n\t\tconst searchText = ref('first'),\n\t\t\tdebounceMs = ref(25),\n\t\t\tsearchCalls = [];\n\t\tlet searchDone = () => {};\n\t\tconst searchApi = async (params) => {\n\t\t\t\tsearchCalls.push(params.q);\n\t\t\t\treturn [{ label: params.q, value: params.q }];\n\t\t\t},\n\t\t\tsearchInput = computed(() =>\n\t\t\t\tfactory.api({ api: searchApi, params: { q: searchText.value } })\n\t\t\t),\n\t\t\tsearchOwner = attach({\n\t\t\t\tsource: searchInput,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tsearchText,\n\t\t\t\tdebounceMs,\n\t\t\t\tonSuccess: () => searchDone()\n\t\t\t}),\n\t\t\tsearchState = searchOwner.state;\n\t\tawait settle(() => searchState.hasSucceeded.value);\n\t\tconst firstSearch = snapshot(searchState),\n\t\t\tsearchReady = new Promise((done) => {\n\t\t\t\tsearchDone = done;\n\t\t\t});\n\t\tsearchText.value = 'second';\n\t\tsearchText.value = 'third';\n\t\tconst debouncing = snapshot(searchState),\n\t\t\tcallsBeforeDebounce = [...searchCalls];\n\t\tawait searchReady;\n\t\tconst debounced = snapshot(searchState);\n\t\tdebounceMs.value = 0;\n\t\tsearchText.value = 'fourth';\n\t\tawait settle(() => searchState.data.value[0]?.value === 'fourth');\n\t\trecord('options-state-immediate-search-reactivity-default-debounce-and-zero', {\n\t\t\tfirstSearch,\n\t\t\tdebouncing,\n\t\t\tcallsBeforeDebounce,\n\t\t\tdebounced,\n\t\t\tfinal: snapshot(searchState),\n\t\t\tcalls: searchCalls\n\t\t});\n\t\tlet deadlineCalls = 0;\n\t\tconst deadlineSource = factory.api({\n\t\t\t\tapi: async () => {\n\t\t\t\t\tdeadlineCalls++;\n\t\t\t\t\treturn [{ label: 'TTL', value: deadlineCalls }];\n\t\t\t\t},\n\t\t\t\tparams: undefined,\n\t\t\t\tcache: { ttlMs: 200 }\n\t\t\t}),\n\t\t\tdeadlineState = attach({\n\t\t\t\tsource: deadlineSource,\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait deadlineState.reload();\n\t\tconst withinDeadline = await deadlineState.reload();\n\t\tawait new Promise((done) => setTimeout(done, 250));\n\t\tconst afterDeadline = await deadlineState.reload();\n\t\trecord('options-state-real-cache-ttl-hit-and-expiry', {\n\t\t\tcalls: deadlineCalls,\n\t\t\twithinDeadline: withinDeadline.status === 'success' ? withinDeadline.fromCache : null,\n\t\t\tafterDeadline: afterDeadline.status === 'success' ? afterDeadline.fromCache : null,\n\t\t\tsnapshot: snapshot(deadlineState),\n\t\t\texpiryObservation: 'real timer after documented 200ms TTL; no clock replacement'\n\t\t});\n\t\tlet serialCalls = 0;\n\t\tconst serialApi = async (_params) => {\n\t\t\t\tvoid _params;\n\t\t\t\tserialCalls++;\n\t\t\t\treturn [];\n\t\t\t},\n\t\t\tserialInput = new Date('2030-01-01T00:00:00Z'),\n\t\t\tfallbackState = attach({\n\t\t\t\tsource: factory.api({ api: serialApi, params: serialInput }),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait fallbackState.reload();\n\t\tconst strictState = attach({\n\t\t\t\tsource: factory.api({\n\t\t\t\t\tapi: serialApi,\n\t\t\t\t\tparams: serialInput,\n\t\t\t\t\tcache: { ttlMs: 1000 }\n\t\t\t\t}),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state,\n\t\t\tcustomKeyState = attach({\n\t\t\t\tsource: factory.api({\n\t\t\t\t\tapi: serialApi,\n\t\t\t\t\tparams: serialInput,\n\t\t\t\t\tcache: { ttlMs: 1000, key: (input) => String(input) }\n\t\t\t\t}),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\timmediate: false\n\t\t\t}).state;\n\t\tawait customKeyState.reload();\n\t\trecord('options-state-uncached-identity-fallback-versus-cache-key-serialization', {\n\t\t\tcalls: serialCalls,\n\t\t\tfallback: snapshot(fallbackState),\n\t\t\tstrict: snapshot(strictState),\n\t\t\tcustom: snapshot(customKeyState)\n\t\t});\n\t\tconst policy = ref({ multiple: false, valueMode: 'value' }),\n\t\t\tseparator = ref('::');\n\t\tlet policyCalls = 0;\n\t\tconst policyState = attach({\n\t\t\tsource: factory.api({\n\t\t\t\tapi: async () => {\n\t\t\t\t\tpolicyCalls++;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{ label: 'Numeric', value: 1 },\n\t\t\t\t\t\t{ label: 'String', value: '1' }\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t\tparams: undefined\n\t\t\t}),\n\t\t\truntime: createAsamDataRuntime(),\n\t\t\timmediate: false,\n\t\t\tvaluePolicy: policy,\n\t\t\tseparator\n\t\t}).state;\n\t\tawait policyState.reload();\n\t\tconst policyBefore = snapshot(policyState);\n\t\tpolicy.value = { multiple: true, valueMode: 'value', multipleValueMode: 'string' };\n\t\tawait policyState.reload();\n\t\tconst policyRejected = snapshot(policyState);\n\t\tpolicy.value = { multiple: true, valueMode: 'object', multipleValueMode: 'array' };\n\t\tseparator.value = '|';\n\t\tawait policyState.reload();\n\t\trecord('options-state-reactive-policy-separator-and-token-error-recovery', {\n\t\t\tbefore: policyBefore,\n\t\t\trejected: policyRejected,\n\t\t\trecovered: snapshot(policyState),\n\t\t\tcalls: policyCalls\n\t\t});\n\t\tconst defaultSearch = ref('initial'),\n\t\t\tdefaultCalls = [];\n\t\tlet defaultDone = () => {};\n\t\tconst defaultApi = async (input) => {\n\t\t\t\tdefaultCalls.push(input.q);\n\t\t\t\treturn [{ label: input.q, value: input.q }];\n\t\t\t},\n\t\t\tdefaultState = attach({\n\t\t\t\tsource: computed(() =>\n\t\t\t\t\tfactory.api({ api: defaultApi, params: { q: defaultSearch.value } })\n\t\t\t\t),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tsearchText: defaultSearch,\n\t\t\t\tonSuccess: () => defaultDone()\n\t\t\t}).state;\n\t\tawait settle(() => defaultState.hasSucceeded.value);\n\t\tconst defaultReady = new Promise((done) => {\n\t\t\tdefaultDone = done;\n\t\t});\n\t\tdefaultSearch.value = 'discard';\n\t\tdefaultSearch.value = 'default-latest';\n\t\tconst defaultBefore = [...defaultCalls];\n\t\tawait defaultReady;\n\t\trecord('options-state-default-search-debounce-retains-only-latest-input', {\n\t\t\tbefore: defaultBefore,\n\t\t\tcalls: defaultCalls,\n\t\t\tsnapshot: snapshot(defaultState)\n\t\t});\n\t\tconst suspendedActive = ref(true),\n\t\t\tsuspendedGate = gate();\n\t\tlet suspendedCallbacks = 0;\n\t\tconst suspendedState = attach({\n\t\t\t\tsource: factory.api({ api: () => suspendedGate.promise, params: undefined }),\n\t\t\t\truntime: createAsamDataRuntime(),\n\t\t\t\tactive: () => suspendedActive.value,\n\t\t\t\timmediate: false,\n\t\t\t\tonSuccess: () => {\n\t\t\t\t\tsuspendedCallbacks++;\n\t\t\t\t}\n\t\t\t}).state,\n\t\t\tsuspendedJob = suspendedState.reload();\n\t\tsuspendedActive.value = false;\n\t\tconst suspendedResult = await suspendedJob;\n\t\tsuspendedGate.release([{ label: 'Suspended', value: 9 }]);\n\t\tawait settle(() => !suspendedState.loading.value);\n\t\trecord('options-state-active-getter-suspends-held-request-without-late-success', {\n\t\t\tstatus: suspendedResult.status,\n\t\t\tsnapshot: snapshot(suspendedState),\n\t\t\tcallbacks: suspendedCallbacks\n\t\t});\n\t\tlet refreshFailureCalls = 0,\n\t\t\trefreshAttempts = 0,\n\t\t\trefreshNotifications = 0;\n\t\tconst refreshOriginal = Error('owned dict refresh failure'),\n\t\t\trefreshRuntime = createAsamDataRuntime({\n\t\t\t\tprovider: {\n\t\t\t\t\tonError: () => {\n\t\t\t\t\t\trefreshNotifications++;\n\t\t\t\t\t},\n\t\t\t\t\tdict: {\n\t\t\t\t\t\tget: async () => {\n\t\t\t\t\t\t\trefreshFailureCalls++;\n\t\t\t\t\t\t\treturn [{ label: 'Refresh', value: refreshFailureCalls }];\n\t\t\t\t\t\t},\n\t\t\t\t\t\trefresh: async () => {\n\t\t\t\t\t\t\trefreshAttempts++;\n\t\t\t\t\t\t\tif (refreshAttempts === 1) throw refreshOriginal;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}),\n\t\t\trefreshSource = defineAsamDictSource({\n\t\t\t\tdictType: 'refresh-failure',\n\t\t\t\tdictValueType: 'number'\n\t\t\t}),\n\t\t\trefreshA = attach(\n\t\t\t\t{ source: refreshSource, runtime: refreshRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state,\n\t\t\trefreshB = attach(\n\t\t\t\t{ source: refreshSource, runtime: refreshRuntime, immediate: false },\n\t\t\t\t'dict'\n\t\t\t).state;\n\t\tawait Promise.all([refreshA.reload(), refreshB.reload()]);\n\t\tconst refreshRejected = await Promise.all([\n\t\t\t\trefreshA.reload({ force: true }),\n\t\t\t\trefreshB.reload({ force: true })\n\t\t\t]),\n\t\t\trejectedA = snapshot(refreshA),\n\t\t\trejectedB = snapshot(refreshB),\n\t\t\tsameError = refreshA.error.value === refreshB.error.value,\n\t\t\toriginalRefreshCause = refreshA.error.value?.cause === refreshOriginal;\n\t\tawait Promise.all([refreshA.reload({ force: true }), refreshB.reload({ force: true })]);\n\t\trecord('options-state-dictionary-refresh-failure-shares-notification-and-recovers', {\n\t\t\trejected: refreshRejected.map((r) => r.status),\n\t\t\trejectedA,\n\t\t\trejectedB,\n\t\t\tsameError,\n\t\t\toriginalRefreshCause,\n\t\t\trefreshNotifications,\n\t\t\tcalls: refreshFailureCalls,\n\t\t\trefreshAttempts,\n\t\t\trecoveredA: snapshot(refreshA),\n\t\t\trecoveredB: snapshot(refreshB)\n\t\t});\n\t\tconst missingRuntime = [];\n\t\tfor (const kind of ['remote', 'dict']) {\n\t\t\ttry {\n\t\t\t\tattach(\n\t\t\t\t\t{\n\t\t\t\t\t\tsource: factory.api({ api: async () => [], params: undefined }),\n\t\t\t\t\t\timmediate: false\n\t\t\t\t\t},\n\t\t\t\t\tkind\n\t\t\t\t);\n\t\t\t\tthrow Error('Expected missing runtime');\n\t\t\t} catch (cause) {\n\t\t\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\t\t\tmissingRuntime.push({ kind, errorKind: cause.kind, message: cause.message });\n\t\t\t}\n\t\t}\n\t\trecord('options-state-both-hooks-require-runtime-outside-a-component', {\n\t\t\tcases: missingRuntime\n\t\t});\n\t\tif (typeof document !== 'undefined' && optionsStateInjectionTarget.value) {\n\t\t\tlet injected,\n\t\t\t\tinjectedCalls = 0;\n\t\t\tlet mounted = false;\n\t\t\tconst host = document.createElement('div'),\n\t\t\t\tapp = createApp(\n\t\t\t\t\tdefineComponent({\n\t\t\t\t\t\tsetup() {\n\t\t\t\t\t\t\tinjected = useAsamRemoteOptions({\n\t\t\t\t\t\t\t\tsource: factory.api({\n\t\t\t\t\t\t\t\t\tapi: async () => {\n\t\t\t\t\t\t\t\t\t\tinjectedCalls++;\n\t\t\t\t\t\t\t\t\t\treturn [{ label: 'Injected', value: 8 }];\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tparams: undefined\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\timmediate: false\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tconst state = injected;\n\t\t\t\t\t\t\treturn () =>\n\t\t\t\t\t\t\t\th(\n\t\t\t\t\t\t\t\t\t'output',\n\t\t\t\t\t\t\t\t\t{ 'data-testid': 'options-state-injected-output' },\n\t\t\t\t\t\t\t\t\tJSON.stringify(snapshot(state))\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t);\n\t\t\toptionsStateInjectionTarget.value.append(host);\n\t\t\tprovideAsamData(app, {});\n\t\t\ttry {\n\t\t\t\tapp.mount(host);\n\t\t\t\tmounted = true;\n\t\t\t\tif (!injected) throw Error('Missing injected state');\n\t\t\t\tconst noInitialRequest = injectedCalls === 0,\n\t\t\t\t\tbefore = snapshot(injected);\n\t\t\t\tawait injected.reload();\n\t\t\t\tawait nextTick();\n\t\t\t\tconst after = snapshot(injected),\n\t\t\t\t\trendered = host.querySelector('output') !== null,\n\t\t\t\t\trenderedSnapshot = JSON.parse(\n\t\t\t\t\t\thost.querySelector('output')?.textContent ?? '{}'\n\t\t\t\t\t);\n\t\t\t\tapp.unmount();\n\t\t\t\tmounted = false;\n\t\t\t\tconst cancelledReload = (await injected.reload()).status;\n\t\t\t\trecord('options-state-mounted-app-injection-and-unmount-cleanup', {\n\t\t\t\t\tnoInitialRequest,\n\t\t\t\t\tbefore,\n\t\t\t\t\tafter,\n\t\t\t\t\trendered,\n\t\t\t\t\trenderedSnapshot,\n\t\t\t\t\tcalls: injectedCalls,\n\t\t\t\t\tcancelledReload\n\t\t\t\t});\n\t\t\t} finally {\n\t\t\t\tif (mounted) app.unmount();\n\t\t\t\thost.remove();\n\t\t\t}\n\t\t}\n\t\toptionsStateContractResult.value = observations;\n\t} catch (cause) {\n\t\toptionsStateContractResult.value = [\n\t\t\t...observations,\n\t\t\t{\n\t\t\t\tphase: 'options-state-contract-unexpected-failure',\n\t\t\t\tstate: { message: cause instanceof Error ? cause.message : String(cause) }\n\t\t\t}\n\t\t];\n\t} finally {\n\t\tfor (const scope of scopes) scope.stop();\n\t\toptionsStateContractBusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.form-events {\n\tmax-height: 32rem;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-7 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-8 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-9 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-10 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-11 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-12 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-13 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-14 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-15 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-16 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-17 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-18 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-19 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "NarrowChoice.vue",
									"sourcePath": "apps/website/examples/AsamForm/layout-registry/js/NarrowChoice.vue",
									"sha256": "13c3610707bfe3c05d4d4706585e0cb8c258b88513ae8aea8183d2f97ca60ed0",
									"source": "<template>\n\t<fieldset class=\"demo-spacing-1\">\n\t\t<legend>{{ caption }}</legend>\n\t\t<AsamRadioItem\n\t\t\tname=\"narrow-status\"\n\t\t\t:model-value=\"modelValue\"\n\t\t\tvalue=\"yes\"\n\t\t\t@change=\"emit('update:modelValue', 'yes')\"\n\t\t>\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t是\n\t\t</AsamRadioItem>\n\t\t<AsamRadioItem\n\t\t\tname=\"narrow-status\"\n\t\t\t:model-value=\"modelValue\"\n\t\t\tvalue=\"no\"\n\t\t\t@change=\"emit('update:modelValue', 'no')\"\n\t\t>\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t否\n\t\t</AsamRadioItem>\n\t</fieldset>\n</template>\n\n<script setup>\nimport { AsamRadioItem } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamFormNarrowChoiceDemo' });\ndefineProps({\n\tmodelValue: { type: String, required: true },\n\tcaption: { type: String, required: true }\n});\nconst emit = defineEmits(['update:modelValue']);\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "注册子控件的局部请求错误",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/local-error/ts/Demo.vue",
									"sha256": "ac5738686a673490a56c06094ee104631caf9df2fb239f9c1efd177d85fd0fae",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamForm-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamForm/local-error/ts/Child.vue",
									"sha256": "badc23859a723875708fc40dd01cfc708d3706e9a465bb5b64cca8d10c7c0c1c",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamForm\n\t\t\tv-model=\"model\"\n\t\t\t:schema=\"schema\"\n\t\t\t:registry=\"registry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t/>\n\t\t<pre data-testid=\"form-model\">{{ model }}</pre>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormChildLocalErrorExample' });\nimport { ref } from 'vue';\nimport { AsamForm, defineAsamControl, createAsamSchema } from '@asam-ui/ui';\nimport RequestSelect from './RequestSelect.vue';\nimport type { Transport } from './transport.js';\ninterface Model {\n\tstatus: string | null;\n}\nconst props = defineProps<{ readonly transport: Transport }>();\nconst control = defineAsamControl<string | null, { transport: Transport }>({\n\tcomponent: RequestSelect,\n\temptyValue: () => null,\n\tsourceKinds: []\n});\nconst registry = { 'custom:request-status': control };\nconst builder = createAsamSchema<Model>()(registry);\nconst schema = [\n\tbuilder.field({\n\t\tfield: 'status',\n\t\tcomponent: 'custom:request-status',\n\t\tlabel: '请求状态',\n\t\tcomponentProps: { transport: props.transport }\n\t})\n];\nconst model = ref<Model>({ status: null });\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "RequestSelect.vue",
									"sourcePath": "apps/website/examples/AsamForm/local-error/ts/RequestSelect.vue",
									"sha256": "5b067c33ba87f9f5289021fe28f8056fafd10c89005250d13b57234ca4f0a5ea",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormRequestSelectLocalErrorExample' });\nimport { computed, ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose, AsamAsyncSelectSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport; readonly modelValue: string | null }>();\nconst transport = props.transport;\nconst emit = defineEmits<{ 'update:modelValue': [value: string | null] }>();\nconst value = computed({\n\tget: () => props.modelValue,\n\tset: (value) => emit('update:modelValue', value)\n});\nconst control = ref<AsamAsyncSelectExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncSelectSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamForm/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamForm/local-error/js/Demo.vue",
									"sha256": "db46c84bbd7a9d85815e32f4803162af4bd0d2e29bc0a0d2e87d735b7518dc23",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamFormDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamForm-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamForm/local-error/js/Child.vue",
									"sha256": "84b213bad2dc884a06cef2c7e8085a5712c27509b1695c17add0685e66ccd1fa",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamForm\n\t\t\tv-model=\"model\"\n\t\t\t:schema=\"schema\"\n\t\t\t:registry=\"registry\"\n\t\t\t:inline=\"false\"\n\t\t\t:show-search=\"false\"\n\t\t\t:show-reset=\"false\"\n\t\t/>\n\t\t<pre data-testid=\"form-model\">{{ model }}</pre>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamFormChildLocalErrorExample' });\nimport { ref } from 'vue';\nimport { AsamForm, defineAsamControl, createAsamSchema } from '@asam-ui/ui';\nimport RequestSelect from './RequestSelect.vue';\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst control = defineAsamControl({\n\tcomponent: RequestSelect,\n\temptyValue: () => null,\n\tsourceKinds: []\n});\nconst registry = { 'custom:request-status': control };\nconst builder = createAsamSchema()(registry);\nconst schema = [\n\tbuilder.field({\n\t\tfield: 'status',\n\t\tcomponent: 'custom:request-status',\n\t\tlabel: '请求状态',\n\t\tcomponentProps: { transport: props.transport }\n\t})\n];\nconst model = ref({ status: null });\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "RequestSelect.vue",
									"sourcePath": "apps/website/examples/AsamForm/local-error/js/RequestSelect.vue",
									"sha256": "5069f1a6a8c525724187f514109b041110b67986829ed07c90e45c0cfd4270c9",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamFormRequestSelectLocalErrorExample' });\nimport { computed, ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({\n\ttransport: { type: Object, required: true },\n\tmodelValue: { type: String, default: null }\n});\nconst transport = props.transport;\nconst emit = defineEmits(['update:modelValue']);\nconst value = computed({\n\tget: () => props.modelValue,\n\tset: (value) => emit('update:modelValue', value)\n});\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamForm/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamOption",
			"documentation": "/component-AsamOption.html",
			"demos": [
				{
					"id": "basic",
					"title": "分组与显示内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOption/basic/ts/Demo.vue",
									"sha256": "68d1e41482a7dce68c6a041cf1d935f35666ca2c3ce6b858d445a6f52b62c9a5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tclearable: true,\n\t\t\t\tfilterable: true,\n\t\t\t\t'aria-label': '团队'\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamOptionGroup label=\"可用团队\">\n\t\t\t\t<AsamOption label=\"设计\" value=\"design\">\n\t\t\t\t\t<span> 设计团队 · 视觉 </span>\n\t\t\t\t</AsamOption>\n\t\t\t\t<AsamOption label=\"开发\" value=\"dev\">\n\t\t\t\t\t<span> 开发团队 · 工程 </span>\n\t\t\t\t</AsamOption>\n\t\t\t</AsamOptionGroup>\n\t\t\t<AsamOptionGroup label=\"停用团队\" disabled>\n\t\t\t\t<AsamOption label=\"停用\" value=\"off\" />\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>原始值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOptionBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nconst value = ref<string | null>('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOption/basic/js/Demo.vue",
									"sha256": "8a0b02de028613ae47add4926203709c8ef547719d0029d5399bf94ae7f80027",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tclearable: true,\n\t\t\t\tfilterable: true,\n\t\t\t\t'aria-label': '团队'\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamOptionGroup label=\"可用团队\">\n\t\t\t\t<AsamOption label=\"设计\" value=\"design\">\n\t\t\t\t\t<span> 设计团队 · 视觉 </span>\n\t\t\t\t</AsamOption>\n\t\t\t\t<AsamOption label=\"开发\" value=\"dev\">\n\t\t\t\t\t<span> 开发团队 · 工程 </span>\n\t\t\t\t</AsamOption>\n\t\t\t</AsamOptionGroup>\n\t\t\t<AsamOptionGroup label=\"停用团队\" disabled>\n\t\t\t\t<AsamOption label=\"停用\" value=\"off\" />\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>原始值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOptionBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "objects",
					"title": "原始对象与唯一键",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOption/objects/ts/Demo.vue",
									"sha256": "519789443873da3892e53020521ffb5678c0ea06b209c2f4bb3f7e85e3c44235",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect v-model=\"value\" value-mode=\"native\" value-key=\"id\">\n\t\t\t<AsamOptionGroup label=\"对象选项\">\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"item in teams\"\n\t\t\t\t\t:key=\"item.id\"\n\t\t\t\t\tv-bind=\"{ label: item.name, value: item }\"\n\t\t\t\t/>\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>对象：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOptionObjectsExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nimport { teams } from './data.js';\nconst value = ref<(typeof teams)[number] | null>(teams[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "data.ts",
									"sourcePath": "apps/website/examples/AsamOption/objects/ts/data.ts",
									"sha256": "7a054a39a10d4392341027baf3750b7a457e1f5b9af650c54285d70db2b28576",
									"source": "export const teams = [\n\t{ id: 'design', name: '设计' },\n\t{ id: 'dev', name: '开发' }\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOption/objects/js/Demo.vue",
									"sha256": "0f8bbff3e9ac372c6fe2152ab324be43baacced207591f5593958b905d1a1093",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect v-model=\"value\" value-mode=\"native\" value-key=\"id\">\n\t\t\t<AsamOptionGroup label=\"对象选项\">\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"item in teams\"\n\t\t\t\t\t:key=\"item.id\"\n\t\t\t\t\tv-bind=\"{ label: item.name, value: item }\"\n\t\t\t\t/>\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>对象：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOptionObjectsExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nimport { teams } from './data.js';\nconst value = ref(teams[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "data.js",
									"sourcePath": "apps/website/examples/AsamOption/objects/js/data.js",
									"sha256": "7a054a39a10d4392341027baf3750b7a457e1f5b9af650c54285d70db2b28576",
									"source": "export const teams = [\n\t{ id: 'design', name: '设计' },\n\t{ id: 'dev', name: '开发' }\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOption/sizes/ts/Demo.vue",
									"sha256": "ced0da12578c9e378a932eff72e3591f93f6c13f52150b8718ced03da45bb4b5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelect size=\"large\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelect size=\"big\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelect size=\"default\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelect size=\"small\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelect model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOptionSizesExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamOptionGroup,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOption/sizes/js/Demo.vue",
									"sha256": "0dbeeffee5961fcafdbd55ea0530df6bc24007258cf30182c2089844d8632d76",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelect size=\"large\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelect size=\"big\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelect size=\"default\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelect size=\"small\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelect model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOptionSizesExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamOptionGroup,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamButtonGroup",
			"documentation": "/component-AsamButtonGroup.html",
			"demos": [
				{
					"id": "basic",
					"title": "共享颜色与显式覆盖",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButtonGroup/basic/ts/Demo.vue",
									"sha256": "25be521909ecad24b31cb431ee310a3a11b14af61ed64320b8df1a1d243a865c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButtonGroup type=\"primary\" size=\"big\">\n\t\t\t<AsamButton @click=\"action = '新建'\"> 新建 </AsamButton>\n\t\t\t<AsamButton @click=\"action = '复制'\"> 复制 </AsamButton>\n\t\t\t<AsamButton type=\"danger\" size=\"small\" @click=\"action = '删除'\"> 删除 </AsamButton>\n\t\t</AsamButtonGroup>\n\t\t<output>操作：{{ action }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamButtonGroup } from '@asam-ui/ui';\nconst action = ref('未选择');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButtonGroup/basic/js/Demo.vue",
									"sha256": "9e7549bce3db91abb27812dfa0bcd00950660d21fc7c4d20430573904742cad2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButtonGroup type=\"primary\" size=\"big\">\n\t\t\t<AsamButton @click=\"action = '新建'\"> 新建 </AsamButton>\n\t\t\t<AsamButton @click=\"action = '复制'\"> 复制 </AsamButton>\n\t\t\t<AsamButton type=\"danger\" size=\"small\" @click=\"action = '删除'\"> 删除 </AsamButton>\n\t\t</AsamButtonGroup>\n\t\t<output>操作：{{ action }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamButtonGroup } from '@asam-ui/ui';\nconst action = ref('未选择');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "direction",
					"title": "垂直排列",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButtonGroup/direction/ts/Demo.vue",
									"sha256": "8870b0b987b8ee0b9a76521d75d311c2407dfca9569221aa7cb6c7347c89cbcd",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButtonGroup direction=\"vertical\" type=\"secondary\">\n\t\t\t<AsamButton> 上一步 </AsamButton>\n\t\t\t<AsamButton> 当前步骤 </AsamButton>\n\t\t\t<AsamButton> 下一步 </AsamButton>\n\t\t</AsamButtonGroup>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonGroupDirectionExample' });\nimport { AsamButton, AsamButtonGroup } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButtonGroup/direction/js/Demo.vue",
									"sha256": "10181d55f4f863e0eed4a2943cb468a0502f333420b77b1ac95fea4be3907088",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButtonGroup direction=\"vertical\" type=\"secondary\">\n\t\t\t<AsamButton> 上一步 </AsamButton>\n\t\t\t<AsamButton> 当前步骤 </AsamButton>\n\t\t\t<AsamButton> 下一步 </AsamButton>\n\t\t</AsamButtonGroup>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonGroupDirectionExample' });\nimport { AsamButton, AsamButtonGroup } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButtonGroup/sizes/ts/Demo.vue",
									"sha256": "770b537f423485f22a41a7900caefdb256f1cec96b6043d1f00f97991647264f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButtonGroup size=\"large\" v-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\">\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t\t<AsamButtonGroup size=\"big\" v-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\">\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t\t<AsamButtonGroup\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t>\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t\t<AsamButtonGroup size=\"small\" v-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\">\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamButtonGroup v-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\">\n\t\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t\t</AsamButtonGroup>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamButtonGroupSizesExample' });\nimport { ref } from 'vue';\nimport { AsamButtonGroup, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamButtonGroup/sizes/js/Demo.vue",
									"sha256": "2eee2970f1487e6a995fede652f858f62e49afacf4a286dd734c103cacee7901",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButtonGroup size=\"large\" v-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\">\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t\t<AsamButtonGroup size=\"big\" v-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\">\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t\t<AsamButtonGroup\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t>\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t\t<AsamButtonGroup size=\"small\" v-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\">\n\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamButtonGroup v-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\">\n\t\t\t\t\t<AsamButton> 操作 </AsamButton>\n\t\t\t\t\t<AsamButton> 更多 </AsamButton>\n\t\t\t\t</AsamButtonGroup>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamButtonGroupSizesExample' });\nimport { ref } from 'vue';\nimport { AsamButtonGroup, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamInputTag",
			"documentation": "/component-AsamInputTag.html",
			"demos": [
				{
					"id": "basic",
					"title": "新增、删除与数量上限",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/basic/ts/Demo.vue",
									"sha256": "e99e7cf0c7333331386ae8b90f6f63a83b01d0c9b2297d4f224eb109c119b0e3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputTag\n\t\t\tv-model=\"tags\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '项目标签' }\"\n\t\t\tplaceholder=\"输入后按 Enter\"\n\t\t\t:max=\"5\"\n\t\t\tclearable\n\t\t\t@add-tag=\"event = '新增：' + String($event)\"\n\t\t\t@remove-tag=\"(value, index) => (event = '删除：' + value + '，索引 ' + index)\"\n\t\t/>\n\t\t<output>标签：{{ tags?.join('、') }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputTagBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag } from '@asam-ui/ui';\nconst tags = ref<string[] | undefined>(['设计', '开发']);\nconst event = ref('尚未操作');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/basic/js/Demo.vue",
									"sha256": "3af3f7713ad07b35d39ec1559ede241d69e1f88c817ec423fa85fe52af7ef5d8",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputTag\n\t\t\tv-model=\"tags\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '项目标签' }\"\n\t\t\tplaceholder=\"输入后按 Enter\"\n\t\t\t:max=\"5\"\n\t\t\tclearable\n\t\t\t@add-tag=\"event = '新增：' + String($event)\"\n\t\t\t@remove-tag=\"(value, index) => (event = '删除：' + value + '，索引 ' + index)\"\n\t\t/>\n\t\t<output>标签：{{ tags?.join('、') }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputTagBasicExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag } from '@asam-ui/ui';\nconst tags = ref(['设计', '开发']);\nconst event = ref('尚未操作');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "delimiter",
					"title": "分隔、拖动与折叠",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/delimiter/ts/Demo.vue",
									"sha256": "ac2c539ca3c61a3765f6205f0d6cbf0c729957f26504bc78d402c9a576636f13",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputTag\n\t\t\tv-model=\"tags\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '可排序标签' }\"\n\t\t\tdelimiter=\",\"\n\t\t\tdraggable\n\t\t\tsave-on-blur\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"2\"\n\t\t\ttag-type=\"success\"\n\t\t\ttag-effect=\"plain\"\n\t\t\t@drag-tag=\"(oldIndex, newIndex) => (order = oldIndex + ' → ' + newIndex)\"\n\t\t/>\n\t\t<output>顺序：{{ tags?.join('、') }}；拖动：{{ order }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputTagDelimiterExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag } from '@asam-ui/ui';\nconst tags = ref<string[] | undefined>(['需求', '设计', '开发', '验证']);\nconst order = ref('尚未拖动');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/delimiter/js/Demo.vue",
									"sha256": "fa5949aefad142dff546da51c6b27d5ad4b820f2f27947b16bdef1051a34ea16",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputTag\n\t\t\tv-model=\"tags\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '可排序标签' }\"\n\t\t\tdelimiter=\",\"\n\t\t\tdraggable\n\t\t\tsave-on-blur\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"2\"\n\t\t\ttag-type=\"success\"\n\t\t\ttag-effect=\"plain\"\n\t\t\t@drag-tag=\"(oldIndex, newIndex) => (order = oldIndex + ' → ' + newIndex)\"\n\t\t/>\n\t\t<output>顺序：{{ tags?.join('、') }}；拖动：{{ order }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputTagDelimiterExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag } from '@asam-ui/ui';\nconst tags = ref(['需求', '设计', '开发', '验证']);\nconst order = ref('尚未拖动');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "标签插槽与实例操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/slots/ts/Demo.vue",
									"sha256": "ebd5c7e410acfb1a4e9841b6c60f8449a2298e8ddaed84599899bd28a61ac42c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputTag\n\t\t\tref=\"input\"\n\t\t\tv-model=\"tags\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '编号标签' }\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<CollectionTag style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #tag=\"{ value, index }\"> {{ index + 1 }} · {{ value }} </template>\n\t\t\t<template #suffix> 标签 </template>\n\t\t</AsamInputTag>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦标签 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.blur()\"> 失焦标签 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputTagSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag, AsamButton } from '@asam-ui/ui';\nimport type { AsamInputTagExpose } from '@asam-ui/ui';\nimport { CollectionTag } from '@asam-ui/icons-vue';\nconst input = ref<AsamInputTagExpose>();\nconst tags = ref<string[] | undefined>(['ASAM', 'Vue']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/slots/js/Demo.vue",
									"sha256": "4b8f349b9049dacba27719429d97b78343e82f61b3b6364b98d149635aa8411f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamInputTag\n\t\t\tref=\"input\"\n\t\t\tv-model=\"tags\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '编号标签' }\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<CollectionTag style=\"width: 16px\" />\n\t\t\t</template>\n\t\t\t<template #tag=\"{ value, index }\"> {{ index + 1 }} · {{ value }} </template>\n\t\t\t<template #suffix> 标签 </template>\n\t\t</AsamInputTag>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"input?.focus()\"> 聚焦标签 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"input?.blur()\"> 失焦标签 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputTagSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag, AsamButton } from '@asam-ui/ui';\nimport { CollectionTag } from '@asam-ui/icons-vue';\nconst input = ref();\nconst tags = ref(['ASAM', 'Vue']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/sizes/ts/Demo.vue",
									"sha256": "9228d5ce819d8d871e30c13cc29b88776e44fe29361d32d39f418145c2fcbe1c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputTagSizesExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/sizes/js/Demo.vue",
									"sha256": "e22ceaabd60c3bea6ce9ed4da507c914d2158a1afc5dcdc7687e840540144693",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t\t<AsamInputTag\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\t:model-value=\"['ASAM']\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInputTagSizesExample' });\nimport { ref } from 'vue';\nimport { AsamInputTag, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "behavior",
					"title": "触发、上限、折叠与拖拽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/behavior/ts/Demo.vue",
									"sha256": "ac8482f8e7c499aefafe681f955e2c9b76858b1cd05be34f0fa50911078206ae",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<label>触发键<AsamSelect v-model=\"trigger\">\n\t\t\t\t<AsamOption label=\"回车键\" :value='\"Enter\"'>输入</AsamOption>\n\t\t\t\t<AsamOption label=\"空格键\" :value='\"Space\"'>间距</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<AsamCheckboxItem v-model=\"collapse\"> 折叠标签</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"saveOnBlur\"> 失焦保存</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamInputTag\n\t\t\tv-model=\"tags\"\n\t\t\t:trigger=\"trigger\"\n\t\t\t:max=\"4\"\n\t\t\tdraggable\n\t\t\t:save-on-blur=\"saveOnBlur\"\n\t\t\t:collapse-tags=\"collapse\"\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"clearIcon\"\n\t\t\taria-label=\"最多四个标签\"\n\t\t\t@add-tag=\"record('add', $event)\"\n\t\t\t@remove-tag=\"(value, index) => record('remove', { value, index })\"\n\t\t\t@drag-tag=\"(from, to, value) => record('drag', { from, to, value })\"\n\t\t\t@clear=\"record('clear', null)\"\n\t\t/>\n\t\t<output>{{ tags }}；{{ event }}</output>\n\t\t<p class=\"example-paragraph\">拖动已创建标签改变顺序；最多四个标签；折叠时悬停 +N 查看其余标签。</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInputTagBehaviorExample' });\nimport { ref, h } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamInputTag } from '@asam-ui/ui';\nconst tags = ref(['one', 'two']);\nconst trigger = ref<'Enter' | 'Space'>('Enter');\nconst collapse = ref(false);\nconst saveOnBlur = ref(true);\nconst event = ref('');\nconst clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');\nfunction record(name: string, value: unknown) {\n\tevent.value = name + ': ' + JSON.stringify(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/behavior/js/Demo.vue",
									"sha256": "cde042cfe565587a3f245e79b44450160605f56a56b1f79320b32a925aaf2a2b",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<label>触发键<AsamSelect v-model=\"trigger\">\n\t\t\t\t<AsamOption label=\"回车键\" :value='\"Enter\"'>输入</AsamOption>\n\t\t\t\t<AsamOption label=\"空格键\" :value='\"Space\"'>间距</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<AsamCheckboxItem v-model=\"collapse\"> 折叠标签</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"saveOnBlur\"> 失焦保存</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamInputTag\n\t\t\tv-model=\"tags\"\n\t\t\t:trigger=\"trigger\"\n\t\t\t:max=\"4\"\n\t\t\tdraggable\n\t\t\t:save-on-blur=\"saveOnBlur\"\n\t\t\t:collapse-tags=\"collapse\"\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\tclearable\n\t\t\t:clear-icon=\"clearIcon\"\n\t\t\taria-label=\"最多四个标签\"\n\t\t\t@add-tag=\"record('add', $event)\"\n\t\t\t@remove-tag=\"(value, index) => record('remove', { value, index })\"\n\t\t\t@drag-tag=\"(from, to, value) => record('drag', { from, to, value })\"\n\t\t\t@clear=\"record('clear', null)\"\n\t\t/>\n\t\t<output>{{ tags }}；{{ event }}</output>\n\t\t<p class=\"example-paragraph\">拖动已创建标签改变顺序；最多四个标签；折叠时悬停 +N 查看其余标签。</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInputTagBehaviorExample' });\nimport { ref, h } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamInputTag } from '@asam-ui/ui';\nconst tags = ref(['one', 'two']);\nconst trigger = ref('Enter');\nconst collapse = ref(false);\nconst saveOnBlur = ref(true);\nconst event = ref('');\nconst clearIcon = () => h('span', { 'aria-hidden': 'true' }, '×');\nfunction record(name, value) {\n\tevent.value = name + ': ' + JSON.stringify(value);\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form-inputs",
					"title": "五入口表单继承与校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/form-inputs/ts/Demo.vue",
									"sha256": "9a3ae0f474c1c59619f4c4dbc496c236424820088b3d00deca764e4e70a02443",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({\n\tinput: '',\n\tpassword: '',\n\ttextarea: '',\n\tautocomplete: '',\n\ttags: [] as string[]\n});\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref<AsamBaseFormExpose>();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref<{ prop: string; valid: boolean }[]>([]);\nfunction record(prop: string | string[], valid: boolean) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/form-inputs/js/Demo.vue",
									"sha256": "55507e95d0a63bc8acfdcc59f65911401ee05d1d2ed8d6ccd72c91ac83fb4cab",
									"source": "<template>\n\t<!-- prettier-ignore -->\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"disabled\"\n\t\t\taria-label=\"禁用五入口表单\">禁用整个表单</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\" aria-label=\"五入口自动校验\">自动\n\t\t\tchange/blur 校验</AsamCheckboxItem>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t@validate=\"record\"\n\t\t>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"单行\"\n\t\t\t\tprop=\"input\"\n\t\t\t>\n\t\t\t\t<AsamInput\n\t\t\t\t\tv-model=\"model.input\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单单行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"密码\"\n\t\t\t\tprop=\"password\"\n\t\t\t>\n\t\t\t\t<AsamPassword\n\t\t\t\t\tv-model=\"model.password\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单密码\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"多行\"\n\t\t\t\tprop=\"textarea\"\n\t\t\t>\n\t\t\t\t<AsamTextarea\n\t\t\t\t\tv-model=\"model.textarea\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单多行\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"建议\"\n\t\t\t\tprop=\"autocomplete\"\n\t\t\t>\n\t\t\t\t<AsamAutocomplete\n\t\t\t\t\tv-model=\"model.autocomplete\"\n\t\t\t\t\t:fetch-suggestions=\"suggestions\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单建议\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"标签\"\n\t\t\t\tprop=\"tags\"\n\t\t\t>\n\t\t\t\t<AsamInputTag\n\t\t\t\t\tv-model=\"model.tags\"\n\t\t\t\t\t:validate-event=\"validateEvent\"\n\t\t\t\t\taria-label=\"表单标签\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\">重置模型和校验记录</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">提交编辑</AsamButton>\n\t\t<output>{{ JSON.stringify({ model, disabled, validateEvent, validations }) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamPassword,\n\tAsamTextarea,\n\tAsamAutocomplete,\n\tAsamInputTag\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamFiveInputsFormExample' });\nconst model = ref({ input: '', password: '', textarea: '', autocomplete: '', tags: [] });\nconst disabled = ref(false);\nconst validateEvent = ref(true);\nconst form = ref();\nconst rules = Object.fromEntries(\n\t['input', 'password', 'textarea', 'autocomplete', 'tags'].map((key) => [\n\t\tkey,\n\t\t[{ required: true, message: '请完善此项', trigger: ['change', 'blur'] }]\n\t])\n);\nconst suggestions = [{ value: 'Alpha' }];\nconst validations = ref([]);\nfunction record(prop, valid) {\n\tvalidations.value.push({ prop: String(prop), valid });\n}\nfunction reset() {\n\tmodel.value = { input: '', password: '', textarea: '', autocomplete: '', tags: [] };\n\tvalidations.value = [];\n\tform.value?.clearValidate();\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-delegation",
					"title": "原生委托与事件记录",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/native-delegation/ts/Demo.vue",
									"sha256": "c14d7bc16cae1996de8670ca513856e1ed209bd6fbcc41047408407bf5f47918",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamInputTag\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamInputTag } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputTagNativeDelegationExample' });\nconst asam = ref<string[] | undefined>(['一']);\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref<{ source: string; event: string; values: unknown[] }[]>([]);\nfunction record(source: string, event: string, ...values: unknown[]) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInputTag/native-delegation/js/Demo.vue",
									"sha256": "b3f41617e86d04d0d829072ba0207d0a10cdaf9241b96533ffb06ee5e67bcba2",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamInputTag\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamInputTag } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamInputTagNativeDelegationExample' });\nconst asam = ref(['一']);\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst events = ref([]);\nfunction record(source, event, ...values) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMention",
			"documentation": "/component-AsamMention.html",
			"demos": [
				{
					"id": "basic",
					"title": "触发与选择",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/basic/ts/Demo.vue",
									"sha256": "69df1676551cff9112a4a69fbccad5c58408006313ee6f31298924ca2be03293",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '评论提及' }\"\n\t\t\t:options=\"options\"\n\t\t\t@select=\"(item, prefix) => (selected = prefix + item.label)\"\n\t\t\t@search=\"(pattern, prefix) => (query = prefix + pattern)\"\n\t\t/>\n\t\t<output>评论：{{ value }}；选择：{{ selected }}；检索：{{ query }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionBasicExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nimport type { AsamMentionOption } from '@asam-ui/ui';\nconst value = ref('');\nconst selected = ref('');\nconst query = ref('');\nconst options: AsamMentionOption[] = [\n\t{ value: 'design', label: '设计组' },\n\t{ value: 'dev', label: '开发组' },\n\t{ value: 'disabled', label: '停用组', disabled: true }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/basic/js/Demo.vue",
									"sha256": "cf6decae9371c65bd7ed26b78710801f1b3655385d41c20967ab9ed107ab1b54",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '评论提及' }\"\n\t\t\t:options=\"options\"\n\t\t\t@select=\"(item, prefix) => (selected = prefix + item.label)\"\n\t\t\t@search=\"(pattern, prefix) => (query = prefix + pattern)\"\n\t\t/>\n\t\t<output>评论：{{ value }}；选择：{{ selected }}；检索：{{ query }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMentionBasicExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst selected = ref('');\nconst query = ref('');\nconst options = [\n\t{ value: 'design', label: '设计组' },\n\t{ value: 'dev', label: '开发组' },\n\t{ value: 'disabled', label: '停用组', disabled: true }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "custom",
					"title": "多触发字符与自定义标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/custom/ts/Demo.vue",
									"sha256": "deefdb87fdb70d91745656460eecf9779f1d4ae798a4b136973aecb79d72eaea",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '人员主题提及' }\"\n\t\t\t:options=\"options\"\n\t\t\t:prefix=\"['@', '#']\"\n\t\t\tsplit=\" \"\n\t\t\twhole\n\t\t\t@whole-remove=\"(pattern, prefix) => (removed = prefix + pattern)\"\n\t\t>\n\t\t\t<template #label=\"{ item, index }\"> {{ index + 1 }} · {{ item.label }} </template>\n\t\t\t<template #header> 选择人员或主题 </template>\n\t\t\t<template #footer> 支持 @ 和 # </template>\n\t\t</AsamMention>\n\t\t<output>整项删除：{{ removed }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionCustomExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst removed = ref('');\nconst options = [\n\t{ value: 'asam', label: 'ASAM 主题' },\n\t{ value: 'team', label: '协作小组' }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/custom/js/Demo.vue",
									"sha256": "2597daaafce33b8b8d7a7d5dd73a042e87d7116f44d28a29dddb3e17a7465156",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '人员主题提及' }\"\n\t\t\t:options=\"options\"\n\t\t\t:prefix=\"['@', '#']\"\n\t\t\tsplit=\" \"\n\t\t\twhole\n\t\t\t@whole-remove=\"(pattern, prefix) => (removed = prefix + pattern)\"\n\t\t>\n\t\t\t<template #label=\"{ item, index }\"> {{ index + 1 }} · {{ item.label }} </template>\n\t\t\t<template #header> 选择人员或主题 </template>\n\t\t\t<template #footer> 支持 @ 和 # </template>\n\t\t</AsamMention>\n\t\t<output>整项删除：{{ removed }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMentionCustomExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst removed = ref('');\nconst options = [\n\t{ value: 'asam', label: 'ASAM 主题' },\n\t{ value: 'team', label: '协作小组' }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "multiline",
					"title": "多行提及与公开状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/multiline/ts/Demo.vue",
									"sha256": "7ee8a49c4ee23a80679ed52b7e7c164f8245758e8eb9a5eab1250ff58de4b933",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tref=\"mention\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '多行评论' }\"\n\t\t\ttype=\"textarea\"\n\t\t\t:rows=\"3\"\n\t\t\t:autosize=\"{ minRows: 3, maxRows: 5 }\"\n\t\t\t:options=\"options\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<ChatDotRound style=\"width: 16px\" />\n\t\t\t</template>\n\t\t</AsamMention>\n\t\t<AsamButton type=\"default\" @click=\"visible = mention?.dropdownVisible ?? false\">\n\t\t\t读取提及面板状态\n\t\t</AsamButton>\n\t\t<output>面板可见：{{ visible }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionMultilineExample' });\nimport { ref } from 'vue';\nimport { AsamMention, AsamButton } from '@asam-ui/ui';\nimport type { AsamMentionExpose } from '@asam-ui/ui';\nimport { ChatDotRound } from '@asam-ui/icons-vue';\nconst mention = ref<AsamMentionExpose>();\nconst value = ref('');\nconst visible = ref(false);\nconst options = [\n\t{ value: 'design', label: '设计组' },\n\t{ value: 'dev', label: '开发组' }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/multiline/js/Demo.vue",
									"sha256": "68c5e92714aee329e38a57c5ad04016aad3593206fb5468388b53552c483273e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tref=\"mention\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ class: 'field', 'aria-label': '多行评论' }\"\n\t\t\ttype=\"textarea\"\n\t\t\t:rows=\"3\"\n\t\t\t:autosize=\"{ minRows: 3, maxRows: 5 }\"\n\t\t\t:options=\"options\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<ChatDotRound style=\"width: 16px\" />\n\t\t\t</template>\n\t\t</AsamMention>\n\t\t<AsamButton type=\"default\" @click=\"visible = mention?.dropdownVisible ?? false\">\n\t\t\t读取提及面板状态\n\t\t</AsamButton>\n\t\t<output>面板可见：{{ visible }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMentionMultilineExample' });\nimport { ref } from 'vue';\nimport { AsamMention, AsamButton } from '@asam-ui/ui';\nimport { ChatDotRound } from '@asam-ui/icons-vue';\nconst mention = ref();\nconst value = ref('');\nconst visible = ref(false);\nconst options = [\n\t{ value: 'design', label: '设计组' },\n\t{ value: 'dev', label: '开发组' }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档密度与继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/sizes/ts/Demo.vue",
									"sha256": "227a51c2f59bf076f302d4b8ee35314dfe6d899b7dc1eded5dd8d88441ff8e71",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamMention\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t\t<AsamMention\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t\t<AsamMention\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t\t<AsamMention\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamMention\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionSizesExample' });\nimport { ref } from 'vue';\nimport { AsamMention, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/sizes/js/Demo.vue",
									"sha256": "ae274312d1bc53a2d2f5e5953c035531ec1234a537681d93648a79e016e30c97",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamMention\n\t\t\t\tsize=\"large\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'large尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t\t<AsamMention\n\t\t\t\tsize=\"big\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'big尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t\t<AsamMention\n\t\t\t\tsize=\"default\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'default尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t\t<AsamMention\n\t\t\t\tsize=\"small\"\n\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': 'small尺寸' }\"\n\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<div class=\"example\">\n\t\t\t\t<AsamMention\n\t\t\t\t\tv-bind=\"{ class: 'field', 'aria-label': '继承尺寸' }\"\n\t\t\t\t\tmodel-value=\"@team\"\n\t\t\t\t\t:options=\"[{ value: 'team', label: '协作组' }]\"\n\t\t\t\t/>\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamConfigProvider>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMentionSizesExample' });\nimport { ref } from 'vue';\nimport { AsamMention, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.field {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "loading",
					"title": "应用异步选项与字段映射",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/loading/ts/Demo.vue",
									"sha256": "58020e644fed4ae3af0823fae0a264f5e72a75310185eca15ea1ec180452b7d5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'id', label: 'name', disabled: 'inactive' }\"\n\t\t\t:loading=\"loading\"\n\t\t\t:filter-option=\"false\"\n\t\t\taria-label=\"异步人员\"\n\t\t\t@search=\"search\"\n\t\t>\n\t\t\t<template #label=\"{ item }\">\n\t\t\t\t{{ item.name }}（{{ 'id' in item ? item.id : '' }}） </template\n\t\t\t><template #loading>查询人员中</template> </AsamMention\n\t\t><output>{{ value }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t此处用本地定时结果模拟应用请求；options/loading由宿主管理，旧请求结果由序号丢弃。映射选项字段时关闭内置过滤，使用服务端已过滤结果。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionLoadingExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst options = ref<{ id: string; name: string; inactive?: boolean }[]>([]);\nconst loading = ref(false);\nlet request = 0;\nasync function search(pattern: string) {\n\tconst current = ++request;\n\tloading.value = true;\n\tawait new Promise((resolve) => setTimeout(resolve, 400));\n\tif (current !== request) return;\n\toptions.value = [\n\t\t{ id: pattern || 'alice', name: 'Alice ' + pattern },\n\t\t{ id: 'disabled', name: '不可选', inactive: true }\n\t];\n\tloading.value = false;\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/loading/js/Demo.vue",
									"sha256": "9ce516681bee86153b0ba0a57f61aae7f2acb6ae5c111e19a2b3c960a5b9c453",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'id', label: 'name', disabled: 'inactive' }\"\n\t\t\t:loading=\"loading\"\n\t\t\t:filter-option=\"false\"\n\t\t\taria-label=\"异步人员\"\n\t\t\t@search=\"search\"\n\t\t>\n\t\t\t<template #label=\"{ item }\">\n\t\t\t\t{{ item.name }}（{{ 'id' in item ? item.id : '' }}） </template\n\t\t\t><template #loading>查询人员中</template> </AsamMention\n\t\t><output>{{ value }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t此处用本地定时结果模拟应用请求；options/loading由宿主管理，旧请求结果由序号丢弃。映射选项字段时关闭内置过滤，使用服务端已过滤结果。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamMentionLoadingExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst options = ref([]);\nconst loading = ref(false);\nlet request = 0;\nasync function search(pattern) {\n\tconst current = ++request;\n\tloading.value = true;\n\tawait new Promise((resolve) => setTimeout(resolve, 400));\n\tif (current !== request) return;\n\toptions.value = [\n\t\t{ id: pattern || 'alice', name: 'Alice ' + pattern },\n\t\t{ id: 'disabled', name: '不可选', inactive: true }\n\t];\n\tloading.value = false;\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "composition",
					"title": "组合输入与完整事件负载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/composition/ts/Demo.vue",
									"sha256": "ac571c788e5ddefd8536e028b9bc65ab167072229fbf3d92d013663c60c19e97",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\taria-label=\"组合输入提及\"\n\t\t\t@input=\"input = $event\"\n\t\t\t@compositionstart=\"record\"\n\t\t\t@compositionupdate=\"record\"\n\t\t\t@compositionend=\"record\"\n\t\t/><output>input 字符串：{{ input }}；composition：{{ composition }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t使用操作系统输入法编辑文本；组合期间不会将尚未提交的文本提前作为完整input模型。composition事件参数为原生CompositionEvent。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionCompositionExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst input = ref('');\nconst composition = ref('');\nconst options = [{ value: 'alice', label: 'Alice' }];\nfunction record(event: CompositionEvent) {\n\tcomposition.value = event.type + ': ' + event.data;\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/composition/js/Demo.vue",
									"sha256": "71c6d0a24f7fbb4af19cea9d577a7f79881a0e4059a6b4fea9982f0ea9232b4e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\taria-label=\"组合输入提及\"\n\t\t\t@input=\"input = $event\"\n\t\t\t@compositionstart=\"record\"\n\t\t\t@compositionupdate=\"record\"\n\t\t\t@compositionend=\"record\"\n\t\t/><output>input 字符串：{{ input }}；composition：{{ composition }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t使用操作系统输入法编辑文本；组合期间不会将尚未提交的文本提前作为完整input模型。composition事件参数为原生CompositionEvent。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamMentionCompositionExample' });\nimport { ref } from 'vue';\nimport { AsamMention } from '@asam-ui/ui';\nconst value = ref('');\nconst input = ref('');\nconst composition = ref('');\nconst options = [{ value: 'alice', label: 'Alice' }];\nfunction record(event) {\n\tcomposition.value = event.type + ': ' + event.data;\n}\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "form",
					"title": "提及与表单校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/form/ts/Demo.vue",
									"sha256": "6d8ed4e65ac02239bf187cb2a72c3f3375ea8d8412d3d418b4fa5d071ebe96dc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm :model=\"model\" :rules=\"rules\" size=\"big\">\n\t\t\t<AsamFormItem label=\"消息\" prop=\"message\">\n\t\t\t\t<AsamMention\n\t\t\t\t\tv-model=\"model.message\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:check-is-whole=\"checkIsWhole\"\n\t\t\t\t\twhole\n\t\t\t\t\t:prefix=\"['@', '#']\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<p class=\"example-paragraph\">\n\t\t\t失焦触发必填校验；默认按选项label过滤。整项删除只允许alice，试输 @alice 或 #alice\n\t\t\t后选择并退格。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionFormExample' });\nimport { ref } from 'vue';\nimport { AsamMention, AsamBaseForm, AsamFormItem } from '@asam-ui/ui';\nconst model = ref({ message: '' });\nconst options = [\n\t{ value: 'alice', label: 'Alice' },\n\t{ value: 'bob', label: 'Bob' }\n];\nconst rules = { message: [{ required: true, message: '请输入消息', trigger: 'blur' }] };\nconst checkIsWhole = (pattern: string) => pattern === 'alice';\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/form/js/Demo.vue",
									"sha256": "76300fec05a80235b51aa3bc023cb5e59aa81d0edca87aff0fb8aa358ef82240",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm :model=\"model\" :rules=\"rules\" size=\"big\">\n\t\t\t<AsamFormItem label=\"消息\" prop=\"message\">\n\t\t\t\t<AsamMention\n\t\t\t\t\tv-model=\"model.message\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:check-is-whole=\"checkIsWhole\"\n\t\t\t\t\twhole\n\t\t\t\t\t:prefix=\"['@', '#']\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<p class=\"example-paragraph\">\n\t\t\t失焦触发必填校验；默认按选项label过滤。整项删除只允许alice，试输 @alice 或 #alice\n\t\t\t后选择并退格。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamMentionFormExample' });\nimport { ref } from 'vue';\nimport { AsamMention, AsamBaseForm, AsamFormItem } from '@asam-ui/ui';\nconst model = ref({ message: '' });\nconst options = [\n\t{ value: 'alice', label: 'Alice' },\n\t{ value: 'bob', label: 'Bob' }\n];\nconst rules = { message: [{ required: true, message: '请输入消息', trigger: 'blur' }] };\nconst checkIsWhole = (pattern) => pattern === 'alice';\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\tcolor: var(--asam-color-text-secondary);\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "events",
					"title": "完整继承输入事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/events/ts/Demo.vue",
									"sha256": "04b3e6c4d7837ab6fc609874ca6433ff615be27f31f4b4e0479ef8a1bdceeda5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tclearable\n\t\t\taria-label=\"继承输入事件\"\n\t\t\t@update:model-value=\"record('update', $event)\"\n\t\t\t@input=\"record('input', $event)\"\n\t\t\t@change=\"changed\"\n\t\t\t@clear=\"cleared\"\n\t\t\t@keydown=\"keyed\"\n\t\t\t@mouseenter=\"entered\"\n\t\t\t@mouseleave=\"left\"\n\t\t\t@focus=\"record('focus', $event.type)\"\n\t\t\t@blur=\"record('blur', $event.type)\"\n\t\t\t@compositionstart=\"record('compositionstart', $event.type)\"\n\t\t\t@compositionupdate=\"record('compositionupdate', $event.type)\"\n\t\t\t@compositionend=\"record('compositionend', $event.type)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出输入焦点</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, events }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamMention } from '@asam-ui/ui';\nimport type { AsamMentionEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionEventsExample' });\nconst value = ref('');\nconst options = [{ value: 'sam', label: 'Sam' }];\nconst events = ref<{ name: string; value: unknown }[]>([]);\nfunction record(name: string, value: unknown) {\n\tevents.value.push({ name, value });\n}\nfunction changed(...[value, event]: AsamMentionEmits['change']) {\n\trecord('change', { value, event: event?.type });\n}\nfunction cleared(...[event]: AsamMentionEmits['clear']) {\n\trecord('clear', { event: event?.type });\n}\nfunction keyed(...[event]: AsamMentionEmits['keydown']) {\n\trecord('keydown', {\n\t\tevent: event.type,\n\t\tkey: event instanceof KeyboardEvent ? event.key : null\n\t});\n}\nfunction entered(...[event]: AsamMentionEmits['mouseenter']) {\n\trecord('mouseenter', event.type);\n}\nfunction left(...[event]: AsamMentionEmits['mouseleave']) {\n\trecord('mouseleave', event.type);\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/events/js/Demo.vue",
									"sha256": "5b96f15c24fd0515967ddd72ecab0dbd302e63edf9cbac321ecc701705c1c6a1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tclearable\n\t\t\taria-label=\"继承输入事件\"\n\t\t\t@update:model-value=\"record('update', $event)\"\n\t\t\t@input=\"record('input', $event)\"\n\t\t\t@change=\"changed\"\n\t\t\t@clear=\"cleared\"\n\t\t\t@keydown=\"keyed\"\n\t\t\t@mouseenter=\"entered\"\n\t\t\t@mouseleave=\"left\"\n\t\t\t@focus=\"record('focus', $event.type)\"\n\t\t\t@blur=\"record('blur', $event.type)\"\n\t\t\t@compositionstart=\"record('compositionstart', $event.type)\"\n\t\t\t@compositionupdate=\"record('compositionupdate', $event.type)\"\n\t\t\t@compositionend=\"record('compositionend', $event.type)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出输入焦点</AsamButton>\n\t\t<output>{{ JSON.stringify({ value, events }) }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamMention } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionEventsExample' });\nconst value = ref('');\nconst options = [{ value: 'sam', label: 'Sam' }];\nconst events = ref([]);\nfunction record(name, value) {\n\tevents.value.push({ name, value });\n}\nfunction changed(...[value, event]) {\n\trecord('change', { value, event: event?.type });\n}\nfunction cleared(...[event]) {\n\trecord('clear', { event: event?.type });\n}\nfunction keyed(...[event]) {\n\trecord('keydown', {\n\t\tevent: event.type,\n\t\tkey: event instanceof KeyboardEvent ? event.key : null\n\t});\n}\nfunction entered(...[event]) {\n\trecord('mouseenter', event.type);\n}\nfunction left(...[event]) {\n\trecord('mouseleave', event.type);\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-input",
					"title": "完整继承输入组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/native-input/ts/Demo.vue",
									"sha256": "3e06b5892caf02678eb310403fbf99574f2b4dc524af38b76c1e5bd53948a3f2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"numeric\"\n\t\t\t:options=\"options\"\n\t\t\ttype=\"number\"\n\t\t\t:min=\"1\"\n\t\t\t:max=\"9\"\n\t\t\t:step=\"0.5\"\n\t\t\taria-label=\"原生约束\"\n\t\t/>\n\t\t<AsamMention\n\t\t\tv-model=\"amount\"\n\t\t\t:options=\"options\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"继承格式化\"\n\t\t/>\n\t\t<AsamMention\n\t\t\tv-model.trim.lazy=\"modified\"\n\t\t\t:options=\"options\"\n\t\t\taria-label=\"提及或建议修饰符\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"modified = '42'\"\n\t\t\t>外部设置字符串 42</AsamButton\n\t\t>\n\t\t<AsamMention\n\t\t\tv-model=\"text\"\n\t\t\t:options=\"options\"\n\t\t\ttype=\"textarea\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 4 }\"\n\t\t\t:maxlength=\"3\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\t:count-graphemes=\"countGraphemes\"\n\t\t\taria-label=\"多行建议与字素\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ numeric, amount, modified, text, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t原生数字约束作用于实际 input；formatter/parser\n\t\t\t改变显示并解析模型；模型使用字符串，修饰符处理委托原生；textarea\n\t\t\t与字素计数适用于本入口的提及或建议。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamMention } from '@asam-ui/ui';\nimport type { AsamMentionEmits } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionNativeInputExample' });\nconst options = [{ value: 'Alice', label: 'Alice' }];\nconst numeric = ref<string>('1');\nconst amount = ref<string>('1234');\nconst modified = ref<string>('');\nconst text = ref('👩‍👩‍👧‍👦');\nconst updates = ref<(string | number)[]>([]);\nfunction record(...[value]: AsamMentionEmits['update:modelValue']) {\n\tupdates.value.push(value);\n}\nconst formatter = (value: string) =>\n\tvalue === '' ? '' : '$' + value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value: string) => value.replace(/[$,]/g, '');\nconst countGraphemes = (value: string) => Array.from(new Intl.Segmenter().segment(value)).length;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/native-input/js/Demo.vue",
									"sha256": "30d9b7f7617ca9ee8b5289592f06ce60c39140621755da2e8d9ce2c2a96195e2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamMention\n\t\t\tv-model=\"numeric\"\n\t\t\t:options=\"options\"\n\t\t\ttype=\"number\"\n\t\t\t:min=\"1\"\n\t\t\t:max=\"9\"\n\t\t\t:step=\"0.5\"\n\t\t\taria-label=\"原生约束\"\n\t\t/>\n\t\t<AsamMention\n\t\t\tv-model=\"amount\"\n\t\t\t:options=\"options\"\n\t\t\t:formatter=\"formatter\"\n\t\t\t:parser=\"parser\"\n\t\t\taria-label=\"继承格式化\"\n\t\t/>\n\t\t<AsamMention\n\t\t\tv-model.trim.lazy=\"modified\"\n\t\t\t:options=\"options\"\n\t\t\taria-label=\"提及或建议修饰符\"\n\t\t\t@update:model-value=\"record\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"modified = '42'\"\n\t\t\t>外部设置字符串 42</AsamButton\n\t\t>\n\t\t<AsamMention\n\t\t\tv-model=\"text\"\n\t\t\t:options=\"options\"\n\t\t\ttype=\"textarea\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 4 }\"\n\t\t\t:maxlength=\"3\"\n\t\t\tshow-word-limit\n\t\t\tword-limit-position=\"outside\"\n\t\t\t:count-graphemes=\"countGraphemes\"\n\t\t\taria-label=\"多行建议与字素\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\">移出焦点提交</AsamButton>\n\t\t<output>{{ JSON.stringify({ numeric, amount, modified, text, updates }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\t原生数字约束作用于实际 input；formatter/parser\n\t\t\t改变显示并解析模型；模型使用字符串，修饰符处理委托原生；textarea\n\t\t\t与字素计数适用于本入口的提及或建议。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamMention } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionNativeInputExample' });\nconst options = [{ value: 'Alice', label: 'Alice' }];\nconst numeric = ref('1');\nconst amount = ref('1234');\nconst modified = ref('');\nconst text = ref('👩‍👩‍👧‍👦');\nconst updates = ref([]);\nfunction record(...[value]) {\n\tupdates.value.push(value);\n}\nconst formatter = (value) =>\n\tvalue === '' ? '' : '$' + value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\nconst parser = (value) => value.replace(/[$,]/g, '');\nconst countGraphemes = (value) => Array.from(new Intl.Segmenter().segment(value)).length;\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "input-instance",
					"title": "单行装饰槽与嵌套输入实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/input-instance/ts/Demo.vue",
									"sha256": "e3df8ec8f0428a9c54b847af2582f58e2c169fcb8cac3835ff354f7647f08189",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.focus()\">单行聚焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.blur()\">单行失焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.select()\">单行全选</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.clear()\">单行清空</AsamButton>\n\t\t</div>\n\t\t<AsamMention\n\t\t\tref=\"single\"\n\t\t\tv-model=\"singleValue\"\n\t\t\t:options=\"options\"\n\t\t\tshow-password\n\t\t\taria-label=\"单行提及实例\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<span>前</span>\n\t\t\t</template>\n\t\t\t<template #suffix>\n\t\t\t\t<span>后</span>\n\t\t\t</template>\n\t\t\t<template #prepend>\n\t\t\t\t<span>账号</span>\n\t\t\t</template>\n\t\t\t<template #append>\n\t\t\t\t<span>域</span>\n\t\t\t</template>\n\t\t\t<template #password-icon=\"{ visible }\">\n\t\t\t\t<span :aria-label=\"visible ? '隐藏密码' : '显示密码'\">\n\t\t\t\t\t{{ visible ? '隐' : '显' }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamMention>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.focus()\">多行聚焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.blur()\">多行失焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.select()\">多行全选</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.clear()\">多行清空</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"refillAndMeasure\">回填并重新测量</AsamButton>\n\t\t</div>\n\t\t<AsamMention\n\t\t\tref=\"multi\"\n\t\t\tv-model=\"multiValue\"\n\t\t\t:options=\"options\"\n\t\t\ttype=\"textarea\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 4 }\"\n\t\t\taria-label=\"多行提及实例\"\n\t\t/>\n\t\t<output>{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultiValue,\n\t\t\t\tsingleHasInput: Boolean(single?.input?.input),\n\t\t\t\tmultiHasTextarea: Boolean(multi?.input?.textarea),\n\t\t\t\tsingleRef: single?.input?.ref?.tagName,\n\t\t\t\tmultiRef: multi?.input?.ref?.tagName,\n\t\t\t\tpasswordVisible: single?.input?.passwordVisible,\n\t\t\t\tisComposing: single?.input?.isComposing,\n\t\t\t\tautosize: multi?.input?.autosize,\n\t\t\t\ttextareaStyle: multi?.input?.textareaStyle\n\t\t\t})\n\t\t}}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { nextTick, ref } from 'vue';\nimport { AsamMention, AsamButton } from '@asam-ui/ui';\nimport type { AsamMentionExpose } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionInputInstanceExample' });\nconst single = ref<AsamMentionExpose>();\nconst multi = ref<AsamMentionExpose>();\nconst singleValue = ref<string>('seed');\nconst multiValue = ref<string>('first\\nsecond');\nconst options = [{ value: 'sam', label: 'Sam' }];\nasync function refillAndMeasure() {\n\tmultiValue.value = 'first\\nsecond\\nthird\\nfourth';\n\tawait nextTick();\n\tmulti.value?.input?.resizeTextarea();\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/input-instance/js/Demo.vue",
									"sha256": "bb4ae0d1574e9db7a9c9f0c3f61cf5b8ba1729e393eb67ca17f774b77f89818a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.focus()\">单行聚焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.blur()\">单行失焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.select()\">单行全选</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.input?.clear()\">单行清空</AsamButton>\n\t\t</div>\n\t\t<AsamMention\n\t\t\tref=\"single\"\n\t\t\tv-model=\"singleValue\"\n\t\t\t:options=\"options\"\n\t\t\tshow-password\n\t\t\taria-label=\"单行提及实例\"\n\t\t>\n\t\t\t<template #prefix>\n\t\t\t\t<span>前</span>\n\t\t\t</template>\n\t\t\t<template #suffix>\n\t\t\t\t<span>后</span>\n\t\t\t</template>\n\t\t\t<template #prepend>\n\t\t\t\t<span>账号</span>\n\t\t\t</template>\n\t\t\t<template #append>\n\t\t\t\t<span>域</span>\n\t\t\t</template>\n\t\t\t<template #password-icon=\"{ visible }\">\n\t\t\t\t<span :aria-label=\"visible ? '隐藏密码' : '显示密码'\">\n\t\t\t\t\t{{ visible ? '隐' : '显' }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamMention>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.focus()\">多行聚焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.blur()\">多行失焦</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.select()\">多行全选</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"multi?.input?.clear()\">多行清空</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"refillAndMeasure\">回填并重新测量</AsamButton>\n\t\t</div>\n\t\t<AsamMention\n\t\t\tref=\"multi\"\n\t\t\tv-model=\"multiValue\"\n\t\t\t:options=\"options\"\n\t\t\ttype=\"textarea\"\n\t\t\t:autosize=\"{ minRows: 2, maxRows: 4 }\"\n\t\t\taria-label=\"多行提及实例\"\n\t\t/>\n\t\t<output>{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultiValue,\n\t\t\t\tsingleHasInput: Boolean(single?.input?.input),\n\t\t\t\tmultiHasTextarea: Boolean(multi?.input?.textarea),\n\t\t\t\tsingleRef: single?.input?.ref?.tagName,\n\t\t\t\tmultiRef: multi?.input?.ref?.tagName,\n\t\t\t\tpasswordVisible: single?.input?.passwordVisible,\n\t\t\t\tisComposing: single?.input?.isComposing,\n\t\t\t\tautosize: multi?.input?.autosize,\n\t\t\t\ttextareaStyle: multi?.input?.textareaStyle\n\t\t\t})\n\t\t}}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { nextTick, ref } from 'vue';\nimport { AsamMention, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionInputInstanceExample' });\nconst single = ref();\nconst multi = ref();\nconst singleValue = ref('seed');\nconst multiValue = ref('first\\nsecond');\nconst options = [{ value: 'sam', label: 'Sam' }];\nasync function refillAndMeasure() {\n\tmultiValue.value = 'first\\nsecond\\nthird\\nfourth';\n\tawait nextTick();\n\tmulti.value?.input?.resizeTextarea();\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dynamic-type",
					"title": "动态原生类型与状态保留",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/dynamic-type/ts/Demo.vue",
									"sha256": "64c0d9640d1c6268bd8100aa4bd655c5ce2be7bc05a5b06a97858ba0ee324ac7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tv-for=\"kind in kinds\"\n\t\t\t\t:key=\"kind\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@pointerdown.prevent\n\t\t\t\t@click=\"type = kind\"\n\t\t\t>\n\t\t\t\t{{ kind }}\n\t\t\t</AsamButton>\n\t\t\t<span>先输入 42，再保持焦点切换类型；前缀按钮的计数应保留。</span>\n\t\t</div>\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\t:options=\"suggestions\"\n\t\t\taria-label=\"动态输入类型\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t>\n\t\t\t<template #prefix><SlotCounter /></template>\n\t\t</AsamMention>\n\t\t<output>{{ JSON.stringify({ type, value, inputs }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tnumber 的 min/max/step 保留原生约束；切回 text 或 password\n\t\t\t后继续编辑。类型切换与光标行为由底层输入处理。number\n\t\t\t不支持文本选区，调用文本选区方法可能抛出\n\t\t\tInvalidStateError；此入口不补做游标恢复，也不保证未提交编辑值或焦点跨类型保留。\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMentionDynamicTypeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamMention } from '@asam-ui/ui';\nimport SlotCounter from './SlotCounter.vue';\nconst kinds = ['text', 'password', 'number'] as const;\nconst type = ref<(typeof kinds)[number]>('text');\nconst value = ref<string>('42');\nconst inputs = ref<(string | number)[]>([]);\nconst suggestions = [{ value: '4', label: '四' }];\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SlotCounter.vue",
									"sourcePath": "apps/website/examples/AsamMention/dynamic-type/ts/SlotCounter.vue",
									"sha256": "93e28d9d9ad2e9aad8dcbecaeaf990061cc6f3a06af1d4c157c565359a5e1f40",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\"\n\t\t>前缀计数 {{ count }}</AsamButton\n\t>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/dynamic-type/js/Demo.vue",
									"sha256": "46a2c9ca729eecf40db9389bcb4bd2584f819a6bb2baf9f347a8472b937555b9",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tv-for=\"kind in kinds\"\n\t\t\t\t:key=\"kind\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@pointerdown.prevent\n\t\t\t\t@click=\"type = kind\"\n\t\t\t>\n\t\t\t\t{{ kind }}\n\t\t\t</AsamButton>\n\t\t\t<span>先输入 42，再保持焦点切换类型；前缀按钮的计数应保留。</span>\n\t\t</div>\n\t\t<AsamMention\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:min=\"2\"\n\t\t\t:max=\"10\"\n\t\t\t:step=\"2\"\n\t\t\t:options=\"suggestions\"\n\t\t\taria-label=\"动态输入类型\"\n\t\t\t@input=\"inputs.push($event)\"\n\t\t>\n\t\t\t<template #prefix><SlotCounter /></template>\n\t\t</AsamMention>\n\t\t<output>{{ JSON.stringify({ type, value, inputs }) }}</output>\n\t\t<p class=\"example-paragraph\">\n\t\t\tnumber 的 min/max/step 保留原生约束；切回 text 或 password\n\t\t\t后继续编辑。类型切换与光标行为由底层输入处理。number\n\t\t\t不支持文本选区，调用文本选区方法可能抛出\n\t\t\tInvalidStateError；此入口不补做游标恢复，也不保证未提交编辑值或焦点跨类型保留。\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamMentionDynamicTypeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamMention } from '@asam-ui/ui';\nimport SlotCounter from './SlotCounter.vue';\nconst kinds = ['text', 'password', 'number'];\nconst type = ref('text');\nconst value = ref('42');\nconst inputs = ref([]);\nconst suggestions = [{ value: '4', label: '四' }];\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "SlotCounter.vue",
									"sourcePath": "apps/website/examples/AsamMention/dynamic-type/js/SlotCounter.vue",
									"sha256": "7e9ccded7731443c0828a76d7511bd44223855832daa687a3b8573c76584ead5",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\"\n\t\t>前缀计数 {{ count }}</AsamButton\n\t>\n</template>\n<script setup>\nimport { AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nconst count = ref(0);\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-delegation",
					"title": "原生委托与事件记录",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/native-delegation/ts/Demo.vue",
									"sha256": "bea80a5ab46aebb20e7abdbe1fc874d0d187a6fe1ff9e45bea99b98a59db6509",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamMention\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\t:options=\"suggestions\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamMention } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionNativeDelegationExample' });\nconst asam = ref<string>('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst suggestions = [{ value: 'Alpha', label: 'Alpha' }];\nconst events = ref<{ source: string; event: string; values: unknown[] }[]>([]);\nfunction record(source: string, event: string, ...values: unknown[]) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMention/native-delegation/js/Demo.vue",
									"sha256": "1abfb8e7494ec92d6400c575f38d297da39861bb24a2cc645ecf70cec36a5c24",
									"source": "<template>\n\t<section class=\"native-comparison\">\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"readonly\">只读</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"validateEvent\">自动校验</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\">ASAM</p>\n\t\t<AsamMention\n\t\t\tv-model=\"asam\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:readonly=\"readonly\"\n\t\t\t:validate-event=\"validateEvent\"\n\t\t\t:options=\"suggestions\"\n\t\t\taria-label=\"ASAM 原生委托\"\n\t\t\t@update:model-value=\"(...args) => record('ASAM', 'update:modelValue', ...args)\"\n\t\t\t@input=\"(...args) => record('ASAM', 'input', ...args)\"\n\t\t\t@change=\"(...args) => record('ASAM', 'change', ...args)\"\n\t\t\t@blur=\"(...args) => record('ASAM', 'blur', ...args)\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"events = []\"\n\t\t\t>清空事件记录</AsamButton\n\t\t>\n\t\t<pre>{{ JSON.stringify({ asam, events }, null, 2) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamMention } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamMentionNativeDelegationExample' });\nconst asam = ref('');\nconst disabled = ref(false);\nconst readonly = ref(false);\nconst validateEvent = ref(true);\nconst suggestions = [{ value: 'Alpha', label: 'Alpha' }];\nconst events = ref([]);\nfunction record(source, event, ...values) {\n\tevents.value.push({\n\t\tsource,\n\t\tevent,\n\t\tvalues: values.map((value) => (value instanceof Event ? value.type : value))\n\t});\n}\n</script>\n<style scoped>\n.native-comparison {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDynamicSizeGrid",
			"documentation": "/component-AsamDynamicSizeGrid.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeGrid/basic/ts/Demo.vue",
									"sha256": "c8d2c869754af4c67c8ccd657bef5d108ed4ac00f0808e7a865c212e873eb820",
									"source": "<template>\n\t<AsamDynamicSizeGrid\n\t\tv-bind=\"{\n\t\t\theight: 200,\n\t\t\twidth: 280,\n\t\t\ttotalRow: 50,\n\t\t\ttotalColumn: 5,\n\t\t\trowHeight,\n\t\t\tcolumnWidth,\n\t\t\testimatedRowHeight: 50,\n\t\t\testimatedColumnWidth: 110\n\t\t}\"\n\t>\n\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">\n\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t</div>\n\t\t</template>\n\t</AsamDynamicSizeGrid>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDynamicSizeGridBasicDemo' });\nimport { AsamDynamicSizeGrid } from '@asam-ui/ui';\nconst rowHeight = (index: number): number => (index % 2 === 0 ? 40 : 60);\nconst columnWidth = (index: number): number => (index % 2 === 0 ? 100 : 120);\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeGrid/basic/js/Demo.vue",
									"sha256": "a90e1db736dbfe50fefd3f8fe447deef949a4e6838fec346ae7f09d3db046718",
									"source": "<template>\n\t<AsamDynamicSizeGrid\n\t\tv-bind=\"{\n\t\t\theight: 200,\n\t\t\twidth: 280,\n\t\t\ttotalRow: 50,\n\t\t\ttotalColumn: 5,\n\t\t\trowHeight,\n\t\t\tcolumnWidth,\n\t\t\testimatedRowHeight: 50,\n\t\t\testimatedColumnWidth: 110\n\t\t}\"\n\t>\n\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">\n\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t</div>\n\t\t</template>\n\t</AsamDynamicSizeGrid>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDynamicSizeGridBasicDemo' });\nimport { AsamDynamicSizeGrid } from '@asam-ui/ui';\nconst rowHeight = (index) => (index % 2 === 0 ? 40 : 60);\nconst columnWidth = (index) => (index % 2 === 0 ? 100 : 120);\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "boundary",
					"title": "首尾定位、动态尺寸、RTL 与滚动条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeGrid/boundary/ts/Demo.vue",
									"sha256": "06e3c552a5ac81adfc6570eb705458614302a38111d35dfc5fee02a6c4fae513",
									"source": "<template>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"grid?.scrollToItem(99, 29, 'end')\"\n\t\t>到最后单元格</AsamButton\n\t>\n\t<AsamButton\n\t\tnative-type=\"submit\"\n\t type=\"default\"\n\t\t@click=\"grid?.scrollTo({ scrollLeft: 0, scrollTop: 0 })\"\n\t\t>返回网格起点</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变行列尺寸</AsamButton>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"latestRequest\"\n\t\t>连续定位末端后原点</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"unmountPending\"\n\t\t>调用滚动后卸载</AsamButton\n\t>\n\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}</p>\n\t<AsamDynamicSizeGrid\n\t\tv-if=\"mounted\"\n\t\t:key=\"rtl ? 'rtl' : 'ltr'\"\n\t\tref=\"grid\"\n\t\t:height=\"220\"\n\t\t:width=\"360\"\n\t\t:total-row=\"100\"\n\t\t:total-column=\"30\"\n\t\t:row-height=\"rowHeight\"\n\t\t:column-width=\"columnWidth\"\n\t\t:estimated-row-height=\"50\"\n\t\t:estimated-column-width=\"110\"\n\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t:scrollbar-always-on=\"always\"\n\t\t@item-rendered=\"onRendered\"\n\t\t@scroll=\"onScroll\"\n\t>\n\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-cell=\"rowIndex + ':' + columnIndex\">\n\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t</div>\n\t\t</template>\n\t</AsamDynamicSizeGrid>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDynamicSizeGridBoundaryDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDynamicSizeGrid } from '@asam-ui/ui';\nimport type { AsamDynamicSizeGridExpose, AsamDynamicSizeGridEmits } from '@asam-ui/ui';\nconst grid = ref<AsamDynamicSizeGridExpose>();\nconst large = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst mounted = ref(true);\nconst range = ref('');\nconst eventState = ref('');\nfunction onRendered(value: AsamDynamicSizeGridEmits['itemRendered'][0]): void {\n\trange.value =\n\t\tvalue.rowVisibleStart +\n\t\t':' +\n\t\tvalue.rowVisibleEnd +\n\t\t'/' +\n\t\tvalue.columnVisibleStart +\n\t\t':' +\n\t\tvalue.columnVisibleEnd;\n}\nfunction onScroll(value: AsamDynamicSizeGridEmits['scroll'][0]): void {\n\teventState.value = value.scrollTop + ':' + value.scrollLeft;\n}\nconst rowHeight = (index: number): number => (index % 2 ? 60 : 40) + (large.value ? 30 : 0);\nconst columnWidth = (index: number): number => (index % 2 ? 120 : 100) + (large.value ? 40 : 0);\nfunction resize(): void {\n\tlarge.value = !large.value;\n\tgrid.value?.resetAfter({ rowIndex: 0, columnIndex: 0 }, true);\n}\nfunction latestRequest(): void {\n\tgrid.value?.scrollToItem(99, 29, 'end');\n\tgrid.value?.scrollTo({ scrollLeft: 0, scrollTop: 0 });\n}\nfunction unmountPending(): void {\n\tgrid.value?.scrollToItem(99, 29, 'end');\n\tmounted.value = false;\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeGrid/boundary/js/Demo.vue",
									"sha256": "1c5a0b6756cf49fec2f18028587d6514b7c4bc0f895625167a29df9e0cf2eb91",
									"source": "<template>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"grid?.scrollToItem(99, 29, 'end')\"\n\t\t>到最后单元格</AsamButton\n\t>\n\t<AsamButton\n\t\tnative-type=\"submit\"\n\t type=\"default\"\n\t\t@click=\"grid?.scrollTo({ scrollLeft: 0, scrollTop: 0 })\"\n\t\t>返回网格起点</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变行列尺寸</AsamButton>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"latestRequest\"\n\t\t>连续定位末端后原点</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"unmountPending\"\n\t\t>调用滚动后卸载</AsamButton\n\t>\n\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}</p>\n\t<AsamDynamicSizeGrid\n\t\tv-if=\"mounted\"\n\t\t:key=\"rtl ? 'rtl' : 'ltr'\"\n\t\tref=\"grid\"\n\t\t:height=\"220\"\n\t\t:width=\"360\"\n\t\t:total-row=\"100\"\n\t\t:total-column=\"30\"\n\t\t:row-height=\"rowHeight\"\n\t\t:column-width=\"columnWidth\"\n\t\t:estimated-row-height=\"50\"\n\t\t:estimated-column-width=\"110\"\n\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t:scrollbar-always-on=\"always\"\n\t\t@item-rendered=\"onRendered\"\n\t\t@scroll=\"onScroll\"\n\t>\n\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-cell=\"rowIndex + ':' + columnIndex\">\n\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t</div>\n\t\t</template>\n\t</AsamDynamicSizeGrid>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDynamicSizeGridBoundaryDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDynamicSizeGrid } from '@asam-ui/ui';\nconst grid = ref();\nconst large = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst mounted = ref(true);\nconst range = ref('');\nconst eventState = ref('');\nfunction onRendered(value) {\n\trange.value =\n\t\tvalue.rowVisibleStart +\n\t\t':' +\n\t\tvalue.rowVisibleEnd +\n\t\t'/' +\n\t\tvalue.columnVisibleStart +\n\t\t':' +\n\t\tvalue.columnVisibleEnd;\n}\nfunction onScroll(value) {\n\teventState.value = value.scrollTop + ':' + value.scrollLeft;\n}\nconst rowHeight = (index) => (index % 2 ? 60 : 40) + (large.value ? 30 : 0);\nconst columnWidth = (index) => (index % 2 ? 120 : 100) + (large.value ? 40 : 0);\nfunction resize() {\n\tlarge.value = !large.value;\n\tgrid.value?.resetAfter({ rowIndex: 0, columnIndex: 0 }, true);\n}\nfunction latestRequest() {\n\tgrid.value?.scrollToItem(99, 29, 'end');\n\tgrid.value?.scrollTo({ scrollLeft: 0, scrollTop: 0 });\n}\nfunction unmountPending() {\n\tgrid.value?.scrollToItem(99, 29, 'end');\n\tmounted.value = false;\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDynamicSizeList",
			"documentation": "/component-AsamDynamicSizeList.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeList/basic/ts/Demo.vue",
									"sha256": "a50c32fcbb2e2f7d1f99532f1227ac3327036a47fdddde2284395a106b7c1ed8",
									"source": "<template>\n\t<AsamDynamicSizeList\n\t\tv-bind=\"{\n\t\t\theight: 200,\n\t\t\twidth: 280,\n\t\t\ttotal: items.length,\n\t\t\tdata: items,\n\t\t\titemSize,\n\t\t\testimatedItemSize: 50\n\t\t}\"\n\t>\n\t\t<template #default=\"{ index, data, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">{{ data[index] }}</div>\n\t\t</template>\n\t</AsamDynamicSizeList>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDynamicSizeListBasicDemo' });\nimport { AsamDynamicSizeList } from '@asam-ui/ui';\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst itemSize = (index: number): number => (index % 2 === 0 ? 40 : 60);\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeList/basic/js/Demo.vue",
									"sha256": "d00804fdba7e18ff817c88062b26b49c82cd7e625028e950fe45a675cb4f7292",
									"source": "<template>\n\t<AsamDynamicSizeList\n\t\tv-bind=\"{\n\t\t\theight: 200,\n\t\t\twidth: 280,\n\t\t\ttotal: items.length,\n\t\t\tdata: items,\n\t\t\titemSize,\n\t\t\testimatedItemSize: 50\n\t\t}\"\n\t>\n\t\t<template #default=\"{ index, data, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">{{ data[index] }}</div>\n\t\t</template>\n\t</AsamDynamicSizeList>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDynamicSizeListBasicDemo' });\nimport { AsamDynamicSizeList } from '@asam-ui/ui';\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst itemSize = (index) => (index % 2 === 0 ? 40 : 60);\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "boundary",
					"title": "首尾定位、动态尺寸、RTL 与滚动条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeList/boundary/ts/Demo.vue",
									"sha256": "10b53f67321a96af1dce5bb000dff49d68258a731d5130a09b96503945a77f16",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.scrollToItem(99, 'end')\"\n\t\t\t>到最后一项</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.resetScrollTop()\"\n\t\t\t>返回起点</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变项目尺寸</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"horizontal\">水平布局</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}；边界 {{ edge }}</p>\n\t\t<AsamDynamicSizeList\n\t\t\t:key=\"[revision, horizontal, rtl].join(':')\"\n\t\t\tref=\"list\"\n\t\t\t:data=\"items\"\n\t\t\t:height=\"200\"\n\t\t\t:width=\"320\"\n\t\t\t:total=\"items.length\"\n\t\t\t:item-size=\"itemSize\"\n\t\t\t:estimated-item-size=\"50\"\n\t\t\t:layout=\"horizontal ? 'horizontal' : 'vertical'\"\n\t\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\t:scrollbar-always-on=\"always\"\n\t\t\t:use-is-scrolling=\"true\"\n\t\t\t@item-rendered=\"onRendered\"\n\t\t\t@scroll=\"onScroll\"\n\t\t\t@end-reached=\"edge = $event\"\n\t\t>\n\t\t\t<template #default=\"{ index, style, isScrolling }\">\n\t\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-index=\"index\">\n\t\t\t\t\t{{ items[index] }}{{ isScrolling ? '（滚动中）' : '' }}\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDynamicSizeList>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDynamicSizeListBoundaryDemo' });\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDynamicSizeList } from '@asam-ui/ui';\nimport type { AsamDynamicSizeListExpose, AsamDynamicSizeListEmits } from '@asam-ui/ui';\nconst list = ref<AsamDynamicSizeListExpose>();\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst horizontal = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst revision = ref(0);\nconst eventState = ref('');\nconst edge = ref('');\nconst onScroll = (...[direction, offset, requested]: AsamDynamicSizeListEmits['scroll']): void => {\n\teventState.value = direction + ':' + offset + ':' + requested;\n};\nconst onRendered = (\n\t...[start, end, first, last]: AsamDynamicSizeListEmits['itemRendered']\n): void => {\n\trange.value = start + ':' + end + ':' + first + ':' + last;\n};\nconst range = ref('');\nconst large = ref(false);\nconst itemSize = (index: number): number => (index % 2 ? 60 : 40) + (large.value ? 30 : 0);\nasync function resize(): Promise<void> {\n\tconst offset = list.value?.states.scrollOffset ?? 0;\n\tlarge.value = !large.value;\n\trevision.value++;\n\tawait nextTick();\n\tlist.value?.scrollTo(offset);\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDynamicSizeList/boundary/js/Demo.vue",
									"sha256": "12aef5a0423fe324d67e56434e2b6d987fb206721a098e63ce2d1d7edd3c7997",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.scrollToItem(99, 'end')\"\n\t\t\t>到最后一项</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.resetScrollTop()\"\n\t\t\t>返回起点</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变项目尺寸</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"horizontal\">水平布局</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}；边界 {{ edge }}</p>\n\t\t<AsamDynamicSizeList\n\t\t\t:key=\"[revision, horizontal, rtl].join(':')\"\n\t\t\tref=\"list\"\n\t\t\t:data=\"items\"\n\t\t\t:height=\"200\"\n\t\t\t:width=\"320\"\n\t\t\t:total=\"items.length\"\n\t\t\t:item-size=\"itemSize\"\n\t\t\t:estimated-item-size=\"50\"\n\t\t\t:layout=\"horizontal ? 'horizontal' : 'vertical'\"\n\t\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\t:scrollbar-always-on=\"always\"\n\t\t\t:use-is-scrolling=\"true\"\n\t\t\t@item-rendered=\"onRendered\"\n\t\t\t@scroll=\"onScroll\"\n\t\t\t@end-reached=\"edge = $event\"\n\t\t>\n\t\t\t<template #default=\"{ index, style, isScrolling }\">\n\t\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-index=\"index\">\n\t\t\t\t\t{{ items[index] }}{{ isScrolling ? '（滚动中）' : '' }}\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDynamicSizeList>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDynamicSizeListBoundaryDemo' });\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDynamicSizeList } from '@asam-ui/ui';\nconst list = ref();\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst horizontal = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst revision = ref(0);\nconst eventState = ref('');\nconst edge = ref('');\nconst onScroll = (...[direction, offset, requested]) => {\n\teventState.value = direction + ':' + offset + ':' + requested;\n};\nconst onRendered = (...[start, end, first, last]) => {\n\trange.value = start + ':' + end + ':' + first + ':' + last;\n};\nconst range = ref('');\nconst large = ref(false);\nconst itemSize = (index) => (index % 2 ? 60 : 40) + (large.value ? 30 : 0);\nasync function resize() {\n\tconst offset = list.value?.states.scrollOffset ?? 0;\n\tlarge.value = !large.value;\n\trevision.value++;\n\tawait nextTick();\n\tlist.value?.scrollTo(offset);\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAffix",
			"documentation": "/component-AsamAffix.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/basic/ts/Demo.vue",
									"sha256": "6ac74c4994657e0d1f1128f9781e87ccec91d4928c7a92937b2a8becd131fa13",
									"source": "<template>\n\t<div ref=\"scroll\" class=\"affix-scroll\">\n\t\t<div class=\"doc010-affix-region\">\n\t\t\t<AsamAffix target=\".doc010-affix-region\" :offset=\"offset\" @change=\"fixed = $event\">\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">固定操作</AsamButton>\n\t\t\t</AsamAffix>\n\t\t\t<p class=\"example-paragraph\">滚动查看固定范围</p>\n\t\t</div>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ fixed ? '操作已固定' : '向下滚动本区域以固定操作' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAffixBasicDemo' });\nimport { AsamButton, AsamAffix } from '@asam-ui/ui';\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nconst scroll = ref<HTMLElement>();\nconst offset = ref(0);\nconst fixed = ref(false);\nconst updateOffset = () => {\n\toffset.value = (scroll.value?.getBoundingClientRect().top ?? 0) + 8;\n};\nonMounted(() => {\n\tupdateOffset();\n\twindow.addEventListener('resize', updateOffset);\n\twindow.addEventListener('scroll', updateOffset, { passive: true });\n});\nonBeforeUnmount(() => {\n\twindow.removeEventListener('resize', updateOffset);\n\twindow.removeEventListener('scroll', updateOffset);\n});\n</script>\n\n<style scoped>\n.affix-scroll {\n\theight: 200px;\n\toverflow: auto;\n}\n\n.doc010-affix-region {\n\theight: 500px;\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/basic/js/Demo.vue",
									"sha256": "3b27ab1c57ef73f5bf1a04a2167306690cd36e6fdcdebf821a39043f0c620c0e",
									"source": "<template>\n\t<div ref=\"scroll\" class=\"affix-scroll\">\n\t\t<div class=\"doc010-affix-region\">\n\t\t\t<AsamAffix target=\".doc010-affix-region\" :offset=\"offset\" @change=\"fixed = $event\">\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">固定操作</AsamButton>\n\t\t\t</AsamAffix>\n\t\t\t<p class=\"example-paragraph\">滚动查看固定范围</p>\n\t\t</div>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ fixed ? '操作已固定' : '向下滚动本区域以固定操作' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAffixBasicDemo' });\nimport { AsamButton, AsamAffix } from '@asam-ui/ui';\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nconst scroll = ref();\nconst offset = ref(0);\nconst fixed = ref(false);\nconst updateOffset = () => {\n\toffset.value = (scroll.value?.getBoundingClientRect().top ?? 0) + 8;\n};\nonMounted(() => {\n\tupdateOffset();\n\twindow.addEventListener('resize', updateOffset);\n\twindow.addEventListener('scroll', updateOffset, { passive: true });\n});\nonBeforeUnmount(() => {\n\twindow.removeEventListener('resize', updateOffset);\n\twindow.removeEventListener('scroll', updateOffset);\n});\n</script>\n\n<style scoped>\n.affix-scroll {\n\theight: 200px;\n\toverflow: auto;\n}\n\n.doc010-affix-region {\n\theight: 500px;\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/cap-basic/ts/Demo.vue",
									"sha256": "161ff6ff3c6ac40ed053aa5d46c2acacfcbf548e5d8caabcdb557f22e3e5d3dc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\n-->\n<template>\n\t<AsamAffix :offset=\"120\">\n\t\t<AsamButton type=\"default\">顶部偏移 120px</AsamButton>\n\t</AsamAffix>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAffixCapBasicDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "bb889d382609f2524132cff56cdf2e7cb46d2eba668f172ebab1c4105e053ef1",
									"notice": {
										"id": "77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4",
										"url": "/licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"licenseFilename": "LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/basic.vue",
											"sourceSha256": "841a06d2bd54cf2d221d884e28dd7e70a73f7908e9e937e3a997b3c0618fae65",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/cap-basic/js/Demo.vue",
									"sha256": "f58011bc37d7826a5e41317128db62dbfe20b7e90989f46ec47ea0995d417650",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\n-->\n<template>\n\t<AsamAffix :offset=\"120\">\n\t\t<AsamButton type=\"default\">顶部偏移 120px</AsamButton>\n\t</AsamAffix>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAffixCapBasicDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "0dfdf15ccce22ab32bbf2997a2f3f45e11516a71f7ddcabca345634ae907a6d8",
									"notice": {
										"id": "77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4",
										"url": "/licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"licenseFilename": "LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/basic.vue",
											"sourceSha256": "841a06d2bd54cf2d221d884e28dd7e70a73f7908e9e937e3a997b3c0618fae65",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-target",
					"title": "目标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/cap-target/ts/Demo.vue",
									"sha256": "9ff71712e1b7c7d5ea6d4401b5dee5feab58fbf0d0afdcc6b19794ad2e03001d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt\n-->\n<template>\n\t<div class=\"affix-container\">\n\t\t<AsamAffix target=\".affix-container\" :offset=\"80\">\n\t\t\t<AsamButton type=\"default\">目标容器</AsamButton>\n\t\t</AsamAffix>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAffixCapTargetDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.affix-container {\n\ttext-align: center;\n\theight: 400px;\n\tborder-radius: 4px;\n\tbackground: var(--el-color-primary-light-9);\n}\n</style>\n",
									"originalSourceSha256": "edfafe3051e8c81eb80bb33b0b4d5f7bb048b50b2b40e92a67dffacd42a4e764",
									"notice": {
										"id": "7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473",
										"url": "/licenses/source-notices/7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt",
										"licenseFilename": "LICENSE-7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/target.vue",
											"sourceSha256": "78b78df82d4ed40422909859707e3efb6a73dc5b2fd72e87317188fa8ac2e35a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/cap-target/js/Demo.vue",
									"sha256": "d1bef31afbc350c95c8f80b047d464771d2c5148159df13caead49f4656ba362",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt\n-->\n<template>\n\t<div class=\"affix-container\">\n\t\t<AsamAffix target=\".affix-container\" :offset=\"80\">\n\t\t\t<AsamButton type=\"default\">目标容器</AsamButton>\n\t\t</AsamAffix>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAffixCapTargetDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.affix-container {\n\ttext-align: center;\n\theight: 400px;\n\tborder-radius: 4px;\n\tbackground: var(--el-color-primary-light-9);\n}\n</style>\n",
									"originalSourceSha256": "b5b0c5baba379fbac1cd015e7c54fa761601473047272438b1278d5d14c2e1c1",
									"notice": {
										"id": "7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473",
										"url": "/licenses/source-notices/7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt",
										"licenseFilename": "LICENSE-7ed55121a57f39df175f33be813256f1f3d97160a94980bd2000df7f53ca0473.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/target.vue",
											"sourceSha256": "78b78df82d4ed40422909859707e3efb6a73dc5b2fd72e87317188fa8ac2e35a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-fixed",
					"title": "固定位置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/cap-fixed/ts/Demo.vue",
									"sha256": "152d02077035dd75d58b261c24b615a0838158309d8c0245dbe7f1e643e6d6d9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt\n-->\n<template>\n\t<AsamAffix position=\"bottom\" :offset=\"20\">\n\t\t<AsamButton type=\"default\">底部偏移 20px</AsamButton>\n\t</AsamAffix>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAffixCapFixedDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "05d3735c3e04f97c0df468fc9064c4b15f51daa51523c637a4b18977e76289e7",
									"notice": {
										"id": "9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64",
										"url": "/licenses/source-notices/9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt",
										"licenseFilename": "LICENSE-9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/fixed.vue",
											"sourceSha256": "708a732eaaf908a9f43409085efe77d57963e59a3cdc7afcdc915f97b7a4e275",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/cap-fixed/js/Demo.vue",
									"sha256": "c0b81d9cf6c3f8f0c806bfe00575d48e94f15671459e7d30f69125eccc25fa71",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt\n-->\n<template>\n\t<AsamAffix position=\"bottom\" :offset=\"20\">\n\t\t<AsamButton type=\"default\">底部偏移 20px</AsamButton>\n\t</AsamAffix>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAffixCapFixedDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "5a9eb0a65cb87cb46ee04f0145223a914335c21d36d4b6e815fbdd57b2f93e1c",
									"notice": {
										"id": "9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64",
										"url": "/licenses/source-notices/9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt",
										"licenseFilename": "LICENSE-9fe3e767bd1d416d8f027043e9e2fce098430e137dcf91923053e60ed1686c64.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/fixed.vue",
											"sourceSha256": "708a732eaaf908a9f43409085efe77d57963e59a3cdc7afcdc915f97b7a4e275",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/popup-container/ts/Demo.vue",
									"sha256": "d2c5371f4c464f11288f42a1240f870729f19091caee8d76c5ff901b705ce188",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\n-->\n<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamAffix :offset=\"120\" :teleported=\"globalPopup\">\n\t\t\t<AsamButton type=\"default\">顶部偏移 120px</AsamButton>\n\t\t</AsamAffix>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAffixCapBasicDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "54f8c49555806b798e1ccc9365df1740ca32ee7a48d9326ca23b6c56f4784e47",
									"notice": {
										"id": "77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4",
										"url": "/licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"licenseFilename": "LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/basic.vue",
											"sourceSha256": "841a06d2bd54cf2d221d884e28dd7e70a73f7908e9e937e3a997b3c0618fae65",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAffix/popup-container/js/Demo.vue",
									"sha256": "ebcc3babe182950dda2cf42190308441c78612acb71265a08584f8fcd28173b7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt\n-->\n<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamAffix :offset=\"120\" :teleported=\"globalPopup\">\n\t\t\t<AsamButton type=\"default\">顶部偏移 120px</AsamButton>\n\t\t</AsamAffix>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAffixCapBasicDemo' });\nimport { AsamAffix, AsamButton } from '@asam-ui/ui';\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "61f81e6a020af5b158cf9004a79ccabeb5fface06ef82a01c92cafe0c8099926",
									"notice": {
										"id": "77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4",
										"url": "/licenses/source-notices/77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"licenseFilename": "LICENSE-77631e2d1f79b5b52858878eb8d96266547ffcaa1f85db92af9a9e0061d8d4e4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/affix/basic.vue",
											"sourceSha256": "841a06d2bd54cf2d221d884e28dd7e70a73f7908e9e937e3a997b3c0618fae65",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAnchor",
			"documentation": "/component-AsamAnchor.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/basic/ts/Demo.vue",
									"sha256": "c71b5da63e24feeae40d362e3a6bb2c7cbb9afec1e95d6215b1f30fd4a66819d",
									"source": "<template>\n\t<div class=\"anchor-demo\">\n\t\t<AsamAnchor :container=\"scroll\" @change=\"href = $event\">\n\t\t\t<AsamAnchorLink href=\"#doc010-section-one\" title=\"第一节\" />\n\t\t\t<AsamAnchorLink href=\"#doc010-section-two\" title=\"第二节\" />\n\t\t</AsamAnchor>\n\t\t<div ref=\"scroll\" class=\"anchor-scroll\">\n\t\t\t<section id=\"doc010-section-one\" class=\"anchor-section\">第一节内容</section>\n\t\t\t<section id=\"doc010-section-two\" class=\"anchor-section\">第二节内容</section>\n\t\t</div>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前锚点：{{ href }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nconst scroll = ref<HTMLElement>();\nconst href = ref('');\n</script>\n\n<style scoped>\n.anchor-demo {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.anchor-scroll {\n\theight: 200px;\n\toverflow: auto;\n\tflex: 1;\n}\n\n.anchor-section {\n\theight: 260px;\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/basic/js/Demo.vue",
									"sha256": "dbb50073bed1cc904c40bda976a1620d23f34920f7d61535354ffc9d1e41f832",
									"source": "<template>\n\t<div class=\"anchor-demo\">\n\t\t<AsamAnchor :container=\"scroll\" @change=\"href = $event\">\n\t\t\t<AsamAnchorLink href=\"#doc010-section-one\" title=\"第一节\" />\n\t\t\t<AsamAnchorLink href=\"#doc010-section-two\" title=\"第二节\" />\n\t\t</AsamAnchor>\n\t\t<div ref=\"scroll\" class=\"anchor-scroll\">\n\t\t\t<section id=\"doc010-section-one\" class=\"anchor-section\">第一节内容</section>\n\t\t\t<section id=\"doc010-section-two\" class=\"anchor-section\">第二节内容</section>\n\t\t</div>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前锚点：{{ href }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nconst scroll = ref();\nconst href = ref('');\n</script>\n\n<style scoped>\n.anchor-demo {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.anchor-scroll {\n\theight: 200px;\n\toverflow: auto;\n\tflex: 1;\n}\n\n.anchor-section {\n\theight: 260px;\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-basic/ts/Demo.vue",
									"sha256": "83ad574139c57a093c296a7df761ff015cc47df34b3b7123ceca510cd08a2be8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt\n-->\n<template>\n\t<AsamAnchor :offset=\"70\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t{{ locale['Anchor API'] }}\n\t\t\t<template #sub-link>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t</template>\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorCapBasicDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\n\nimport { computed } from 'vue';\n\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-basic-basic-usage',\n\t'horizontal-mode': 'ui032-cap-basic-horizontal-mode',\n\t'scroll-container': 'ui032-cap-basic-scroll-container',\n\t'anchor-api': 'ui032-cap-basic-anchor-api',\n\t'anchor-attributes': 'ui032-cap-basic-anchor-attributes',\n\t'anchor-events': 'ui032-cap-basic-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "5d9a27ac76bb25e125c7633d478b5c000c637768f92752629e8fb4c82f7f2f71",
									"notice": {
										"id": "4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba",
										"url": "/licenses/source-notices/4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt",
										"licenseFilename": "LICENSE-4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/basic.vue",
											"sourceSha256": "32c6e799d131032bda72e1166bcefddcfb75056936bb7cbf759932ff300542c7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-basic/js/Demo.vue",
									"sha256": "65f8dc5fc35d24a527c2bc7ec0978c27a78363cd0af1e99f361af1552b5f7f0a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt\n-->\n<template>\n\t<AsamAnchor :offset=\"70\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t{{ locale['Anchor API'] }}\n\t\t\t<template #sub-link>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t</template>\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorCapBasicDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nimport { computed } from 'vue';\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-basic-basic-usage',\n\t'horizontal-mode': 'ui032-cap-basic-horizontal-mode',\n\t'scroll-container': 'ui032-cap-basic-scroll-container',\n\t'anchor-api': 'ui032-cap-basic-anchor-api',\n\t'anchor-attributes': 'ui032-cap-basic-anchor-attributes',\n\t'anchor-events': 'ui032-cap-basic-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "d409c81c124c6b5b1b3c366a76239a5f09c873afb5678bf163652fb60b54521f",
									"notice": {
										"id": "4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba",
										"url": "/licenses/source-notices/4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt",
										"licenseFilename": "LICENSE-4de0d78e981b704a7ae9b17a938246088248079856ab9285ffb2a299c4796aba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/basic.vue",
											"sourceSha256": "32c6e799d131032bda72e1166bcefddcfb75056936bb7cbf759932ff300542c7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-horizontal",
					"title": "水平模式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-horizontal/ts/Demo.vue",
									"sha256": "c93c8f226e92f59e81c8ae70a15f89d06b0f7e916bda74658cde5825afc5945a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt\n-->\n<template>\n\t<AsamAnchor :offset=\"70\" direction=\"horizontal\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorCapHorizontalDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\n\nimport { computed } from 'vue';\n\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-horizontal-basic-usage',\n\t'horizontal-mode': 'ui032-cap-horizontal-horizontal-mode',\n\t'scroll-container': 'ui032-cap-horizontal-scroll-container',\n\t'anchor-api': 'ui032-cap-horizontal-anchor-api',\n\t'anchor-attributes': 'ui032-cap-horizontal-anchor-attributes',\n\t'anchor-events': 'ui032-cap-horizontal-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "2b90b5b043140038a34bde1c8c73eb62d0d10f23e6dcf5b2e0d8369ac0081580",
									"notice": {
										"id": "5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b",
										"url": "/licenses/source-notices/5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt",
										"licenseFilename": "LICENSE-5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/horizontal.vue",
											"sourceSha256": "75919ad49cfbabd556a4091b1e03f0e337c7b9d7da93a2a6b9cefe394e7acc60",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-horizontal/js/Demo.vue",
									"sha256": "13ccdf3f10886616901b575817efe2f07d3d0455205e45f11c8456695fc8054a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt\n-->\n<template>\n\t<AsamAnchor :offset=\"70\" direction=\"horizontal\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorCapHorizontalDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nimport { computed } from 'vue';\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-horizontal-basic-usage',\n\t'horizontal-mode': 'ui032-cap-horizontal-horizontal-mode',\n\t'scroll-container': 'ui032-cap-horizontal-scroll-container',\n\t'anchor-api': 'ui032-cap-horizontal-anchor-api',\n\t'anchor-attributes': 'ui032-cap-horizontal-anchor-attributes',\n\t'anchor-events': 'ui032-cap-horizontal-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "4c3e1108ae321ecdf5277887ddaf4dfa5dcf3686919fc17befc3a2272e9a6519",
									"notice": {
										"id": "5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b",
										"url": "/licenses/source-notices/5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt",
										"licenseFilename": "LICENSE-5ac4e19c8e5b88bb122c21f9c331a68c59214e0ede7d6673f817b62e4be3f30b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/horizontal.vue",
											"sourceSha256": "75919ad49cfbabd556a4091b1e03f0e337c7b9d7da93a2a6b9cefe394e7acc60",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-scroll",
					"title": "滚动容器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-scroll/ts/Demo.vue",
									"sha256": "634c106d7065fcd66a8c22c691c262070430a502576148ab55318ee8b81f90e6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt\n-->\n<template>\n\t<div>\n\t\t<AsamRow>\n\t\t\t<AsamCol :span=\"18\">\n\t\t\t\t<div\n\t\t\t\t\tstyle=\"\n\t\t\t\t\t\theight: 30px;\n\t\t\t\t\t\twidth: 70%;\n\t\t\t\t\t\tbackground: #000;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t顶部固定区域\n\t\t\t\t</div>\n\t\t\t\t<div ref=\"containerRef\" style=\"height: 300px; overflow-y: auto\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"part1\"\n\t\t\t\t\t\tstyle=\"height: 300px; background: rgb(255 0 0 / 2%); margin-top: 30px\"\n\t\t\t\t\t>\n\t\t\t\t\t\t第一部分\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"part2\"\n\t\t\t\t\t\tstyle=\"height: 300px; background: rgb(0 255 0 / 2%); margin-top: 30px\"\n\t\t\t\t\t>\n\t\t\t\t\t\t第二部分\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"part3\"\n\t\t\t\t\t\tstyle=\"height: 300px; background: rgb(0 0 255 / 2%); margin-top: 30px\"\n\t\t\t\t\t>\n\t\t\t\t\t\t第三部分\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</AsamCol>\n\t\t\t<AsamCol :span=\"6\">\n\t\t\t\t<div class=\"vp-raw\">\n\t\t\t\t\t<AsamAnchor\n\t\t\t\t\t\t:container=\"containerRef\"\n\t\t\t\t\t\tdirection=\"vertical\"\n\t\t\t\t\t\ttype=\"default\"\n\t\t\t\t\t\t:offset=\"30\"\n\t\t\t\t\t\t@click=\"handleClick\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamAnchorLink href=\"#part1\" title=\"第一部分\" />\n\t\t\t\t\t\t<AsamAnchorLink href=\"#part2\" title=\"第二部分\" />\n\t\t\t\t\t\t<AsamAnchorLink href=\"#part3\" title=\"第三部分\" />\n\t\t\t\t\t</AsamAnchor>\n\t\t\t\t</div>\n\t\t\t</AsamCol>\n\t\t</AsamRow>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorCapScrollDemo' });\nimport { AsamRow, AsamCol, AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst containerRef = ref<HTMLElement | null>(null);\n\nconst handleClick = (e: MouseEvent) => {\n\te.preventDefault();\n};\n</script>\n",
									"originalSourceSha256": "7c70bb7fa5cf0245f8449b62fd11625a60cdc4f3b07a6dae3c30a494d1e6290c",
									"notice": {
										"id": "25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55",
										"url": "/licenses/source-notices/25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt",
										"licenseFilename": "LICENSE-25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/scroll.vue",
											"sourceSha256": "53f38a721d010433323e53005274d5c5f5999e585e3992f072b4cf6e347acec4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-scroll/js/Demo.vue",
									"sha256": "2c4d0d098045790bb3c6a1357c2e516affe2bdcf65296a2541b4007a75c4c81d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt\n-->\n<template>\n\t<div>\n\t\t<AsamRow>\n\t\t\t<AsamCol :span=\"18\">\n\t\t\t\t<div\n\t\t\t\t\tstyle=\"\n\t\t\t\t\t\theight: 30px;\n\t\t\t\t\t\twidth: 70%;\n\t\t\t\t\t\tbackground: #000;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: 0;\n\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\tcolor: #fff;\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t顶部固定区域\n\t\t\t\t</div>\n\t\t\t\t<div ref=\"containerRef\" style=\"height: 300px; overflow-y: auto\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"part1\"\n\t\t\t\t\t\tstyle=\"height: 300px; background: rgb(255 0 0 / 2%); margin-top: 30px\"\n\t\t\t\t\t>\n\t\t\t\t\t\t第一部分\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"part2\"\n\t\t\t\t\t\tstyle=\"height: 300px; background: rgb(0 255 0 / 2%); margin-top: 30px\"\n\t\t\t\t\t>\n\t\t\t\t\t\t第二部分\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tid=\"part3\"\n\t\t\t\t\t\tstyle=\"height: 300px; background: rgb(0 0 255 / 2%); margin-top: 30px\"\n\t\t\t\t\t>\n\t\t\t\t\t\t第三部分\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</AsamCol>\n\t\t\t<AsamCol :span=\"6\">\n\t\t\t\t<div class=\"vp-raw\">\n\t\t\t\t\t<AsamAnchor\n\t\t\t\t\t\t:container=\"containerRef\"\n\t\t\t\t\t\tdirection=\"vertical\"\n\t\t\t\t\t\ttype=\"default\"\n\t\t\t\t\t\t:offset=\"30\"\n\t\t\t\t\t\t@click=\"handleClick\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamAnchorLink href=\"#part1\" title=\"第一部分\" />\n\t\t\t\t\t\t<AsamAnchorLink href=\"#part2\" title=\"第二部分\" />\n\t\t\t\t\t\t<AsamAnchorLink href=\"#part3\" title=\"第三部分\" />\n\t\t\t\t\t</AsamAnchor>\n\t\t\t\t</div>\n\t\t\t</AsamCol>\n\t\t</AsamRow>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorCapScrollDemo' });\nimport { AsamRow, AsamCol, AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst containerRef = ref(null);\nconst handleClick = (e) => {\n\te.preventDefault();\n};\n</script>\n",
									"originalSourceSha256": "ea615d8f46ae160f1a22ad032720582d11732ddfae402fc81a8789dc9e183f30",
									"notice": {
										"id": "25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55",
										"url": "/licenses/source-notices/25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt",
										"licenseFilename": "LICENSE-25639840230f100172ac7f6f60e14353826c55b8e2464e413b3286a85b7e5d55.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/scroll.vue",
											"sourceSha256": "53f38a721d010433323e53005274d5c5f5999e585e3992f072b4cf6e347acec4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-change",
					"title": "锚点链接变化",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-change/ts/Demo.vue",
									"sha256": "84dad9143998f9c4a1ea6a7cb87f62decae1aa44777cf4010320ad507b86982e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt\n-->\n<template>\n\t<AsamAnchor :offset=\"70\" @change=\"handleChange\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t{{ locale['Anchor API'] }}\n\t\t\t<template #sub-link>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t</template>\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorCapChangeDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\n\nimport { computed } from 'vue';\n\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-change-basic-usage',\n\t'horizontal-mode': 'ui032-cap-change-horizontal-mode',\n\t'scroll-container': 'ui032-cap-change-scroll-container',\n\t'anchor-api': 'ui032-cap-change-anchor-api',\n\t'anchor-attributes': 'ui032-cap-change-anchor-attributes',\n\t'anchor-events': 'ui032-cap-change-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n\nconst handleChange = (href: string) => {\n\tconsole.log(`anchor change: ${href}`);\n};\n</script>\n",
									"originalSourceSha256": "596b466feca896add9fb85f01888dafd77aa8d3ba4cf52621f5a3029814e2080",
									"notice": {
										"id": "040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664",
										"url": "/licenses/source-notices/040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt",
										"licenseFilename": "LICENSE-040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/change.vue",
											"sourceSha256": "2a5ad789ff63acd8764141c51191b55351c46d53cf9f57ebfebbfa7e9e22c8ce",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-change/js/Demo.vue",
									"sha256": "a73d2ac299d6329a3088afc99c91d6111918b78551fa853cb5adb4cff3eaa212",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt\n-->\n<template>\n\t<AsamAnchor :offset=\"70\" @change=\"handleChange\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t{{ locale['Anchor API'] }}\n\t\t\t<template #sub-link>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t</template>\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorCapChangeDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nimport { computed } from 'vue';\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-change-basic-usage',\n\t'horizontal-mode': 'ui032-cap-change-horizontal-mode',\n\t'scroll-container': 'ui032-cap-change-scroll-container',\n\t'anchor-api': 'ui032-cap-change-anchor-api',\n\t'anchor-attributes': 'ui032-cap-change-anchor-attributes',\n\t'anchor-events': 'ui032-cap-change-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\nconst handleChange = (href) => {\n\tconsole.log(`anchor change: ${href}`);\n};\n</script>\n",
									"originalSourceSha256": "f4cacc1d314d57a73c11c573e844a8663503842e942b66828715f492e99d78a3",
									"notice": {
										"id": "040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664",
										"url": "/licenses/source-notices/040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt",
										"licenseFilename": "LICENSE-040cd023b1888038e945f7a20e44e4760b8ba97ee0d21baa3b5f6b1ecba66664.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/change.vue",
											"sourceSha256": "2a5ad789ff63acd8764141c51191b55351c46d53cf9f57ebfebbfa7e9e22c8ce",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-underline",
					"title": "下划线",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-underline/ts/Demo.vue",
									"sha256": "a3f84d7d4e4e2089b70ac1be2fad081259ff1aff4067072a8537b3555f48c976",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt\n-->\n<template>\n\t<AsamAnchor type=\"underline\" :offset=\"70\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t{{ locale['Anchor API'] }}\n\t\t\t<template #sub-link>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t</template>\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorCapUnderlineDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\n\nimport { computed } from 'vue';\n\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-underline-basic-usage',\n\t'horizontal-mode': 'ui032-cap-underline-horizontal-mode',\n\t'scroll-container': 'ui032-cap-underline-scroll-container',\n\t'anchor-api': 'ui032-cap-underline-anchor-api',\n\t'anchor-attributes': 'ui032-cap-underline-anchor-attributes',\n\t'anchor-events': 'ui032-cap-underline-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "f2f013aabb270184e81d5a905efab8c2dc3c2dd609457bda76acf23909b59293",
									"notice": {
										"id": "1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e",
										"url": "/licenses/source-notices/1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt",
										"licenseFilename": "LICENSE-1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/underline.vue",
											"sourceSha256": "d9c864e3d3a7f85c463668c10add15a28cebb7b0b99d710effa4656e9faaaf60",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-underline/js/Demo.vue",
									"sha256": "1ae6e6bab5f5e8e76f0f4acc790d588eb294b8b7eb22df740a2d34bf0d33fd83",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt\n-->\n<template>\n\t<AsamAnchor type=\"underline\" :offset=\"70\">\n\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t{{ locale['Basic Usage'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t{{ locale['Scroll Container'] }}\n\t\t</AsamAnchorLink>\n\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t{{ locale['Anchor API'] }}\n\t\t\t<template #sub-link>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t</AsamAnchorLink>\n\t\t\t</template>\n\t\t</AsamAnchorLink>\n\t</AsamAnchor>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorCapUnderlineDemo' });\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nimport { computed } from 'vue';\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-underline-basic-usage',\n\t'horizontal-mode': 'ui032-cap-underline-horizontal-mode',\n\t'scroll-container': 'ui032-cap-underline-scroll-container',\n\t'anchor-api': 'ui032-cap-underline-anchor-api',\n\t'anchor-attributes': 'ui032-cap-underline-anchor-attributes',\n\t'anchor-events': 'ui032-cap-underline-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "353a9d5bb04bb31bfd682ab88cb6fb4e7bf3b2be1d5204ba5e053b7c702031e5",
									"notice": {
										"id": "1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e",
										"url": "/licenses/source-notices/1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt",
										"licenseFilename": "LICENSE-1a82e31f20e5c908478d3856e4caa92800e6ebb56b23608b3d93b19772d5d70e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/underline.vue",
											"sourceSha256": "d9c864e3d3a7f85c463668c10add15a28cebb7b0b99d710effa4656e9faaaf60",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-affix",
					"title": "固定模式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-affix/ts/Demo.vue",
									"sha256": "21028133de8e9095e0442ddd3d3e12ff993b8ccc81bc1e9541d91cb53307fbb5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt\n-->\n<template>\n\t<AsamAffix :offset=\"60\">\n\t\t<AsamAnchor :offset=\"70\" style=\"width: 300px\">\n\t\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t\t{{ locale['Basic Usage'] }}\n\t\t\t</AsamAnchorLink>\n\t\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t\t</AsamAnchorLink>\n\t\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t\t{{ locale['Scroll Container'] }}\n\t\t\t</AsamAnchorLink>\n\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t\t{{ locale['Anchor API'] }}\n\t\t\t\t<template #sub-link>\n\t\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t\t</AsamAnchorLink>\n\t\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t\t</AsamAnchorLink>\n\t\t\t\t</template>\n\t\t\t</AsamAnchorLink>\n\t\t</AsamAnchor>\n\t</AsamAffix>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorCapAffixDemo' });\nimport { AsamAffix, AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\n\nimport { computed } from 'vue';\n\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-affix-basic-usage',\n\t'horizontal-mode': 'ui032-cap-affix-horizontal-mode',\n\t'scroll-container': 'ui032-cap-affix-scroll-container',\n\t'anchor-api': 'ui032-cap-affix-anchor-api',\n\t'anchor-attributes': 'ui032-cap-affix-anchor-attributes',\n\t'anchor-events': 'ui032-cap-affix-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "a3f7f198b500d41281ad3dc686db35eadc641ad6a19883369518ec620de166e7",
									"notice": {
										"id": "a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa",
										"url": "/licenses/source-notices/a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt",
										"licenseFilename": "LICENSE-a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/affix.vue",
											"sourceSha256": "113f877e00ec17a30685f180071f077c3e31d78b56614f21017d4063dd055375",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchor/cap-affix/js/Demo.vue",
									"sha256": "3b128b41f923548a91d292154af99db4c7f1f6ade3572d82a468a73bf41f5218",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt\n-->\n<template>\n\t<AsamAffix :offset=\"60\">\n\t\t<AsamAnchor :offset=\"70\" style=\"width: 300px\">\n\t\t\t<AsamAnchorLink :href=\"`#${locale['basic-usage']}`\">\n\t\t\t\t{{ locale['Basic Usage'] }}\n\t\t\t</AsamAnchorLink>\n\t\t\t<AsamAnchorLink :href=\"`#${locale['horizontal-mode']}`\">\n\t\t\t\t{{ locale['Horizontal Mode'] }}\n\t\t\t</AsamAnchorLink>\n\t\t\t<AsamAnchorLink :href=\"`#${locale['scroll-container']}`\">\n\t\t\t\t{{ locale['Scroll Container'] }}\n\t\t\t</AsamAnchorLink>\n\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-api']}`\">\n\t\t\t\t{{ locale['Anchor API'] }}\n\t\t\t\t<template #sub-link>\n\t\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-attributes']}`\">\n\t\t\t\t\t\t{{ locale['Anchor Attributes'] }}\n\t\t\t\t\t</AsamAnchorLink>\n\t\t\t\t\t<AsamAnchorLink :href=\"`#${locale['anchor-events']}`\">\n\t\t\t\t\t\t{{ locale['Anchor Events'] }}\n\t\t\t\t\t</AsamAnchorLink>\n\t\t\t\t</template>\n\t\t\t</AsamAnchorLink>\n\t\t</AsamAnchor>\n\t</AsamAffix>\n\t<section\n\t\tv-for=\"(target, key) in locale\"\n\t\t:id=\"key === key.toLowerCase() ? target : undefined\"\n\t\t:key=\"key\"\n\t\tstyle=\"min-height: 180px\"\n\t>\n\t\t{{ target }}\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorCapAffixDemo' });\nimport { AsamAffix, AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nimport { computed } from 'vue';\nconst locale = computed(() => ({\n\t'basic-usage': 'ui032-cap-affix-basic-usage',\n\t'horizontal-mode': 'ui032-cap-affix-horizontal-mode',\n\t'scroll-container': 'ui032-cap-affix-scroll-container',\n\t'anchor-api': 'ui032-cap-affix-anchor-api',\n\t'anchor-attributes': 'ui032-cap-affix-anchor-attributes',\n\t'anchor-events': 'ui032-cap-affix-anchor-events',\n\t'Basic Usage': '基础用法',\n\t'Horizontal Mode': '水平模式',\n\t'Scroll Container': '滚动容器',\n\t'Anchor API': '锚点 API',\n\t'Anchor Attributes': '锚点属性',\n\t'Anchor Events': '锚点事件'\n}));\n</script>\n",
									"originalSourceSha256": "1a044d1fc03cb8994244f8dafd09d692b4e867a1ce508b49d1920786c06430db",
									"notice": {
										"id": "a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa",
										"url": "/licenses/source-notices/a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt",
										"licenseFilename": "LICENSE-a39095b82898f6e607b83a984383d4ef171bef41c7653e3acb5fde59b65b42aa.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/anchor/affix.vue",
											"sourceSha256": "113f877e00ec17a30685f180071f077c3e31d78b56614f21017d4063dd055375",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAnchorLink",
			"documentation": "/component-AsamAnchorLink.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchorLink/basic/ts/Demo.vue",
									"sha256": "11ba753967636457b61c4a9b5a41fe9e9b4d370c5fb7207760379f949abebf03",
									"source": "<template>\n\t<div class=\"anchor-demo\">\n\t\t<AsamAnchor :container=\"scroll\" @change=\"href = $event\">\n\t\t\t<AsamAnchorLink href=\"#doc010-section-one\" title=\"第一节\" />\n\t\t\t<AsamAnchorLink href=\"#doc010-section-two\" title=\"第二节\" />\n\t\t</AsamAnchor>\n\t\t<div ref=\"scroll\" class=\"anchor-scroll\">\n\t\t\t<section id=\"doc010-section-one\" class=\"anchor-section\">第一节内容</section>\n\t\t\t<section id=\"doc010-section-two\" class=\"anchor-section\">第二节内容</section>\n\t\t</div>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前锚点：{{ href }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAnchorLinkBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nconst scroll = ref<HTMLElement>();\nconst href = ref('');\n</script>\n\n<style scoped>\n.anchor-demo {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.anchor-scroll {\n\theight: 200px;\n\toverflow: auto;\n\tflex: 1;\n}\n\n.anchor-section {\n\theight: 260px;\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAnchorLink/basic/js/Demo.vue",
									"sha256": "82c2f2c4d11daa64d33e8681e78e4f54f59bb74c537b47f03d4ec8d9a866ffcb",
									"source": "<template>\n\t<div class=\"anchor-demo\">\n\t\t<AsamAnchor :container=\"scroll\" @change=\"href = $event\">\n\t\t\t<AsamAnchorLink href=\"#doc010-section-one\" title=\"第一节\" />\n\t\t\t<AsamAnchorLink href=\"#doc010-section-two\" title=\"第二节\" />\n\t\t</AsamAnchor>\n\t\t<div ref=\"scroll\" class=\"anchor-scroll\">\n\t\t\t<section id=\"doc010-section-one\" class=\"anchor-section\">第一节内容</section>\n\t\t\t<section id=\"doc010-section-two\" class=\"anchor-section\">第二节内容</section>\n\t\t</div>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前锚点：{{ href }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAnchorLinkBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamAnchor, AsamAnchorLink } from '@asam-ui/ui';\nconst scroll = ref();\nconst href = ref('');\n</script>\n\n<style scoped>\n.anchor-demo {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.anchor-scroll {\n\theight: 200px;\n\toverflow: auto;\n\tflex: 1;\n}\n\n.anchor-section {\n\theight: 260px;\n\tpadding: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAside",
			"documentation": "/component-AsamAside.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAside/basic/ts/Demo.vue",
									"sha256": "0626f2c6baf047918d452131ce1e2c1cc9b47779376f2451aa6c15630d75be1c",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAsideBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAside/basic/js/Demo.vue",
									"sha256": "7676a0454cc283fb5b0a06eeaa82bd0bdeccfd4b21128f074df29b8fafcdc6db",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAsideBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAutoResizer",
			"documentation": "/component-AsamAutoResizer.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutoResizer/basic/ts/Demo.vue",
									"sha256": "cb782a704220fbeef4eec157bb9a3eddc8d2341e93fa15d5e4cdb18521a767dd",
									"source": "<template>\n\t<div class=\"resize-host\">\n\t\t<AsamAutoResizer>\n\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t<div class=\"panel\">\n\t\t\t\t\t可用尺寸：{{ Math.round(width) }} × {{ Math.round(height) }}\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamAutoResizer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutoResizerBasicDemo' });\nimport { AsamAutoResizer } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.resize-host {\n\theight: 180px;\n\twidth: 100%;\n\tresize: horizontal;\n\toverflow: auto;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutoResizer/basic/js/Demo.vue",
									"sha256": "6230e298d0e1ee8a5b64125542d3ba852ac786fae5d159cd0244e61908addd58",
									"source": "<template>\n\t<div class=\"resize-host\">\n\t\t<AsamAutoResizer>\n\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t<div class=\"panel\">\n\t\t\t\t\t可用尺寸：{{ Math.round(width) }} × {{ Math.round(height) }}\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamAutoResizer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAutoResizerBasicDemo' });\nimport { AsamAutoResizer } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.resize-host {\n\theight: 180px;\n\twidth: 100%;\n\tresize: horizontal;\n\toverflow: auto;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "resize",
					"title": "真实容器观测与独立维度",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutoResizer/resize/ts/Demo.vue",
									"sha256": "e5a207eb60fe3a9292f5c87338624b16d267adf264f16d7257110d5259613436",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"wide = !wide\"\n\t\t\t>改变容器宽高</AsamButton\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"disabled\">固定消费宽度</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabledHeight\">固定消费高度</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"hidden\">隐藏容器</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"mounted\">挂载观测器</AsamCheckboxItem>\n\t\t<div\n\t\t\tv-show=\"!hidden\"\n\t\t\t:style=\"{ width: wide ? '420px' : '280px', height: wide ? '220px' : '160px' }\"\n\t\t>\n\t\t\t<AsamAutoResizer\n\t\t\t\tv-if=\"mounted\"\n\t\t\t\tid=\"ui030-observer\"\n\t\t\t\tref=\"observer\"\n\t\t\t\tdata-observer=\"retained\"\n\t\t\t\t:disable-width=\"disabled\"\n\t\t\t\t:disable-height=\"disabledHeight\"\n\t\t\t\t:on-resize=\"onResize\"\n\t\t\t>\n\t\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t\t<p class=\"example-paragraph\" role=\"status\">{{ Math.round(width) }} × {{ Math.round(height) }}</p>\n\t\t\t\t\t<!-- 2.14.7 still measures both axes; fixed dimensions are a host choice. -->\n\t\t\t\t\t<AsamTableV2\n\t\t\t\t\t\t:width=\"disabled ? 280 : width\"\n\t\t\t\t\t\t:height=\"disabledHeight ? 120 : Math.max(height - 32, 0)\"\n\t\t\t\t\t\t:columns=\"columns\"\n\t\t\t\t\t\t:data=\"rows\"\n\t\t\t\t\t/>\n\t\t\t\t</template>\n\t\t\t</AsamAutoResizer>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" data-testid=\"resize-callback\">观测回调 {{ changed }}；次数 {{ callbackCount }}</p>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"rootName = observer?.$el?.getAttribute('data-observer') ?? ''\"\n\t\t>\n\t\t\t读取原生根实例\n\t\t</AsamButton>\n\t\t<output data-testid=\"resize-root\">{{ rootName }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAutoResizerResizeDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamAutoResizer, AsamTableV2 } from '@asam-ui/ui';\nimport type { AsamAutoResizerExpose, AsamTableV2Columns } from '@asam-ui/ui';\nconst observer = ref<AsamAutoResizerExpose>();\nconst wide = ref(false);\nconst disabled = ref(false);\nconst disabledHeight = ref(false);\nconst hidden = ref(false);\nconst mounted = ref(true);\nconst changed = ref('');\nconst callbackCount = ref(0);\nconst rootName = ref('');\nconst rows = Array.from({ length: 20 }, (_, id) => ({ id, name: `记录 ${id + 1}` }));\nconst columns: AsamTableV2Columns<unknown> = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 280 }\n];\nfunction onResize({ width, height }: { width: number; height: number }): void {\n\tchanged.value = `${width}:${height}`;\n\tcallbackCount.value++;\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAutoResizer/resize/js/Demo.vue",
									"sha256": "7304a739140920d1456d927a7a2e6387aea6bf63b872ff9d74d3aec2b8a0eabf",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"wide = !wide\"\n\t\t\t>改变容器宽高</AsamButton\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"disabled\">固定消费宽度</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabledHeight\">固定消费高度</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"hidden\">隐藏容器</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"mounted\">挂载观测器</AsamCheckboxItem>\n\t\t<div\n\t\t\tv-show=\"!hidden\"\n\t\t\t:style=\"{ width: wide ? '420px' : '280px', height: wide ? '220px' : '160px' }\"\n\t\t>\n\t\t\t<AsamAutoResizer\n\t\t\t\tv-if=\"mounted\"\n\t\t\t\tid=\"ui030-observer\"\n\t\t\t\tref=\"observer\"\n\t\t\t\tdata-observer=\"retained\"\n\t\t\t\t:disable-width=\"disabled\"\n\t\t\t\t:disable-height=\"disabledHeight\"\n\t\t\t\t:on-resize=\"onResize\"\n\t\t\t>\n\t\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t\t<p class=\"example-paragraph\" role=\"status\">{{ Math.round(width) }} × {{ Math.round(height) }}</p>\n\t\t\t\t\t<!-- 2.14.7 still measures both axes; fixed dimensions are a host choice. -->\n\t\t\t\t\t<AsamTableV2\n\t\t\t\t\t\t:width=\"disabled ? 280 : width\"\n\t\t\t\t\t\t:height=\"disabledHeight ? 120 : Math.max(height - 32, 0)\"\n\t\t\t\t\t\t:columns=\"columns\"\n\t\t\t\t\t\t:data=\"rows\"\n\t\t\t\t\t/>\n\t\t\t\t</template>\n\t\t\t</AsamAutoResizer>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" data-testid=\"resize-callback\">观测回调 {{ changed }}；次数 {{ callbackCount }}</p>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"rootName = observer?.$el?.getAttribute('data-observer') ?? ''\"\n\t\t>\n\t\t\t读取原生根实例\n\t\t</AsamButton>\n\t\t<output data-testid=\"resize-root\">{{ rootName }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamAutoResizerResizeDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamAutoResizer, AsamTableV2 } from '@asam-ui/ui';\nconst observer = ref();\nconst wide = ref(false);\nconst disabled = ref(false);\nconst disabledHeight = ref(false);\nconst hidden = ref(false);\nconst mounted = ref(true);\nconst changed = ref('');\nconst callbackCount = ref(0);\nconst rootName = ref('');\nconst rows = Array.from({ length: 20 }, (_, id) => ({ id, name: `记录 ${id + 1}` }));\nconst columns = [{ key: 'name', dataKey: 'name', title: '名称', width: 280 }];\nfunction onResize({ width, height }) {\n\tchanged.value = `${width}:${height}`;\n\tcallbackCount.value++;\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAvatar",
			"documentation": "/component-AsamAvatar.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/basic/ts/Demo.vue",
									"sha256": "94f8cf090660f8c53a1e0f337cda63e670d8358b6a9d8226a58d5630f9480e67",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamAvatar :size=\"40\">张</AsamAvatar>\n\t\t<AsamAvatar :size=\"48\" shape=\"square\" :icon=\"InfoFilled\" />\n\t\t<AsamAvatar src=\"data:image/png;base64,invalid\" @error=\"failed = true\">后备</AsamAvatar>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ failed ? '图片失败，显示后备内容' : '等待图片结果' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamAvatar } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst failed = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/basic/js/Demo.vue",
									"sha256": "a064a09be0a41a689890ea0af45991cd07e4b1e582bcfc7b165ddb961e257306",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamAvatar :size=\"40\">张</AsamAvatar>\n\t\t<AsamAvatar :size=\"48\" shape=\"square\" :icon=\"InfoFilled\" />\n\t\t<AsamAvatar src=\"data:image/png;base64,invalid\" @error=\"failed = true\">后备</AsamAvatar>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ failed ? '图片失败，显示后备内容' : '等待图片结果' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamAvatar } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst failed = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-basic/ts/Demo.vue",
									"sha256": "8ed3efeb8b58cd711db0de9e41d74d1c33ef7088ae001823c62e7d9ff8c1f26d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt\n-->\n<template>\n\t<AsamRow class=\"demo-avatar demo-basic\">\n\t\t<AsamCol :lg=\"12\" :md=\"12\">\n\t\t\t<div class=\"sub-title\">circle</div>\n\t\t\t<div class=\"demo-basic--circle\">\n\t\t\t\t<div class=\"block\">\n\t\t\t\t\t<AsamAvatar :size=\"50\" :src=\"circleUrl\" />\n\t\t\t\t</div>\n\t\t\t\t<div v-for=\"size in sizeList\" :key=\"size\" class=\"block\">\n\t\t\t\t\t<AsamAvatar :size=\"size\" :src=\"circleUrl\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t\t<AsamCol :lg=\"12\" :md=\"12\">\n\t\t\t<div class=\"sub-title\">square</div>\n\t\t\t<div class=\"demo-basic--circle\">\n\t\t\t\t<div class=\"block\">\n\t\t\t\t\t<AsamAvatar shape=\"square\" :size=\"50\" :src=\"squareUrl\" />\n\t\t\t\t</div>\n\t\t\t\t<div v-for=\"size in sizeList\" :key=\"size\" class=\"block\">\n\t\t\t\t\t<AsamAvatar shape=\"square\" :size=\"size\" :src=\"squareUrl\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarCapBasicDemo' });\nimport { AsamRow, AsamCol, AsamAvatar } from '@asam-ui/ui';\n\nimport { reactive, toRefs } from 'vue';\n\nconst state = reactive({\n\tcircleUrl:\n\t\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\tsquareUrl:\n\t\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\tsizeList: ['small', '', 'large'] as const\n});\n\nconst { circleUrl, squareUrl, sizeList } = toRefs(state);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-basic {\n\ttext-align: center;\n}\n\n.demo-basic .sub-title {\n\tmargin-bottom: 10px;\n\tfont-size: 14px;\n\tcolor: var(--el-text-color-secondary);\n}\n\n.demo-basic .demo-basic--circle,\n.demo-basic .demo-basic--square {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.demo-basic .block {\n\tflex: 1;\n}\n\n.demo-basic .block:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n\n.demo-basic .el-col:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n\n@media screen and (width <= 992px) {\n\t.demo-basic .el-col:not(:last-child) {\n\t\tborder-right: none;\n\t}\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "0bed4223e3f77478981a4cb0e8f27727ab6d9c9d0491f017853a014be9cd2403",
									"notice": {
										"id": "18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8",
										"url": "/licenses/source-notices/18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt",
										"licenseFilename": "LICENSE-18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/basic.vue",
											"sourceSha256": "27685fedcc5c8b43ff1bdb5d1846f301a6feea731109881b1900fa559b028893",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-basic/js/Demo.vue",
									"sha256": "9b9fbd7b3262ea73bd9dbd04afb2a567b09bc84ae32499a78ff62cbd826ee110",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt\n-->\n<template>\n\t<AsamRow class=\"demo-avatar demo-basic\">\n\t\t<AsamCol :lg=\"12\" :md=\"12\">\n\t\t\t<div class=\"sub-title\">circle</div>\n\t\t\t<div class=\"demo-basic--circle\">\n\t\t\t\t<div class=\"block\">\n\t\t\t\t\t<AsamAvatar :size=\"50\" :src=\"circleUrl\" />\n\t\t\t\t</div>\n\t\t\t\t<div v-for=\"size in sizeList\" :key=\"size\" class=\"block\">\n\t\t\t\t\t<AsamAvatar :size=\"size\" :src=\"circleUrl\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t\t<AsamCol :lg=\"12\" :md=\"12\">\n\t\t\t<div class=\"sub-title\">square</div>\n\t\t\t<div class=\"demo-basic--circle\">\n\t\t\t\t<div class=\"block\">\n\t\t\t\t\t<AsamAvatar shape=\"square\" :size=\"50\" :src=\"squareUrl\" />\n\t\t\t\t</div>\n\t\t\t\t<div v-for=\"size in sizeList\" :key=\"size\" class=\"block\">\n\t\t\t\t\t<AsamAvatar shape=\"square\" :size=\"size\" :src=\"squareUrl\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarCapBasicDemo' });\nimport { AsamRow, AsamCol, AsamAvatar } from '@asam-ui/ui';\nimport { reactive, toRefs } from 'vue';\nconst state = reactive({\n\tcircleUrl:\n\t\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\tsquareUrl:\n\t\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\tsizeList: ['small', '', 'large']\n});\nconst { circleUrl, squareUrl, sizeList } = toRefs(state);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-basic {\n\ttext-align: center;\n}\n\n.demo-basic .sub-title {\n\tmargin-bottom: 10px;\n\tfont-size: 14px;\n\tcolor: var(--el-text-color-secondary);\n}\n\n.demo-basic .demo-basic--circle,\n.demo-basic .demo-basic--square {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.demo-basic .block {\n\tflex: 1;\n}\n\n.demo-basic .block:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n\n.demo-basic .el-col:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n\n@media screen and (width <= 992px) {\n\t.demo-basic .el-col:not(:last-child) {\n\t\tborder-right: none;\n\t}\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "e5f487a6548233eb531b24127a34e58042981fc36c288e54276ae85c8919e7a7",
									"notice": {
										"id": "18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8",
										"url": "/licenses/source-notices/18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt",
										"licenseFilename": "LICENSE-18ce1b6317e8f99ca4e197817e2edcf28d8e352e8aa01bbe90ebf580536844d8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/basic.vue",
											"sourceSha256": "27685fedcc5c8b43ff1bdb5d1846f301a6feea731109881b1900fa559b028893",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-types",
					"title": "不同状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-types/ts/Demo.vue",
									"sha256": "53c614f54073d7f5f7948e880bde1090e5d34b11db0daf9b448850a64da8976e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt\n-->\n<template>\n\t<div class=\"demo-type\">\n\t\t<div>\n\t\t\t<AsamAvatar :icon=\"UserFilled\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<AsamAvatar\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</div>\n\t\t<div>\n\t\t\t<AsamAvatar> user </AsamAvatar>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarCapTypesDemo' });\nimport { AsamAvatar } from '@asam-ui/ui';\n\nimport { UserFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.demo-type {\n\tdisplay: flex;\n}\n\n.demo-type > div {\n\tflex: 1;\n\ttext-align: center;\n}\n\n.demo-type > div:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n</style>\n",
									"originalSourceSha256": "520a5400ff5df37aece36cbf21f5a6ed582bd757b1192e92bde8478c7dffef51",
									"notice": {
										"id": "6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073",
										"url": "/licenses/source-notices/6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt",
										"licenseFilename": "LICENSE-6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/types.vue",
											"sourceSha256": "6e45b830ed6ed7a65364ed0867a597623a8fe7a1943d57fa79c82923486a7adb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-types/js/Demo.vue",
									"sha256": "2b4b11e2f908f7761fe9d07ece1d9ce04c5d11a4ac337c9c864355b8d568de58",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt\n-->\n<template>\n\t<div class=\"demo-type\">\n\t\t<div>\n\t\t\t<AsamAvatar :icon=\"UserFilled\" />\n\t\t</div>\n\t\t<div>\n\t\t\t<AsamAvatar\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</div>\n\t\t<div>\n\t\t\t<AsamAvatar> user </AsamAvatar>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarCapTypesDemo' });\nimport { AsamAvatar } from '@asam-ui/ui';\nimport { UserFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.demo-type {\n\tdisplay: flex;\n}\n\n.demo-type > div {\n\tflex: 1;\n\ttext-align: center;\n}\n\n.demo-type > div:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n</style>\n",
									"originalSourceSha256": "58c11b51411c786438ede48e71fca130d9ca5f6968ac8c0def673534ac603a34",
									"notice": {
										"id": "6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073",
										"url": "/licenses/source-notices/6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt",
										"licenseFilename": "LICENSE-6c50f4c87188b75863af6c75629eebbed55ea70d9ff25fce0ac86291b9b72073.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/types.vue",
											"sourceSha256": "6e45b830ed6ed7a65364ed0867a597623a8fe7a1943d57fa79c82923486a7adb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-fallback",
					"title": "回退行为",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-fallback/ts/Demo.vue",
									"sha256": "d4309803240c2aae7415737655f2c956c45f0548c345bfe15a63fb51565e6e6c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt\n-->\n<template>\n\t<div class=\"demo-type\">\n\t\t<AsamAvatar :size=\"60\" src=\"data:image/png;base64,AA==\" @error=\"errorHandler\">\n\t\t\t<AsamImage\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</AsamAvatar>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarCapFallbackDemo' });\nimport { AsamImage, AsamAvatar } from '@asam-ui/ui';\n\nconst errorHandler = () => true;\n</script>\n",
									"originalSourceSha256": "db92e3bc2750d1e8877c8c1c67735e988a70ca33249f2db8b77f117557b0e631",
									"notice": {
										"id": "1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2",
										"url": "/licenses/source-notices/1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt",
										"licenseFilename": "LICENSE-1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/fallback.vue",
											"sourceSha256": "dce18e696ee806ac1c8651f1ff6b11b373d8e876a9c7b6aae39b90b22da5e2e7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-fallback/js/Demo.vue",
									"sha256": "391b4be5a0bdfab7c14d295ab6491f86f83f85758936d78c9a8769685cffa2d2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt\n-->\n<template>\n\t<div class=\"demo-type\">\n\t\t<AsamAvatar :size=\"60\" src=\"data:image/png;base64,AA==\" @error=\"errorHandler\">\n\t\t\t<AsamImage\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</AsamAvatar>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarCapFallbackDemo' });\nimport { AsamImage, AsamAvatar } from '@asam-ui/ui';\nconst errorHandler = () => true;\n</script>\n",
									"originalSourceSha256": "a7f76ad899f8239e72132ece38836456a44892c03c3905f1c4d0f491a368ab95",
									"notice": {
										"id": "1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2",
										"url": "/licenses/source-notices/1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt",
										"licenseFilename": "LICENSE-1a9bb0a4b2561070c0377104ab37731a22588c0e97be26458ccf71faa8fac8a2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/fallback.vue",
											"sourceSha256": "dce18e696ee806ac1c8651f1ff6b11b373d8e876a9c7b6aae39b90b22da5e2e7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-fit",
					"title": "适应容器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-fit/ts/Demo.vue",
									"sha256": "564e647c365a4e4ad721b1f5e54e4a65453a10878452b0834691fa65c0c4aed3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt\n-->\n<template>\n\t<div class=\"demo-fit\">\n\t\t<div v-for=\"fit in fits\" :key=\"fit\" class=\"block\">\n\t\t\t<span class=\"title\">{{ fit }}</span>\n\t\t\t<AsamAvatar shape=\"square\" :size=\"100\" :fit=\"fit\" :src=\"url\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarCapFitDemo' });\nimport { AsamAvatar } from '@asam-ui/ui';\n\nimport { reactive, toRefs } from 'vue';\n\nimport type { CSSProperties } from 'vue';\n\nconst state = reactive({\n\tfits: ['fill', 'contain', 'cover', 'none', 'scale-down'] as CSSProperties['object-fit'][],\n\turl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n});\n\nconst { fits, url } = toRefs(state);\n</script>\n\n<style scoped>\n.demo-fit {\n\tdisplay: flex;\n\ttext-align: center;\n\tjustify-content: space-between;\n}\n\n.demo-fit .block {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-grow: 0;\n}\n\n.demo-fit .title {\n\tmargin-bottom: 10px;\n\tfont-size: 14px;\n\tcolor: var(--el-text-color-secondary);\n}\n</style>\n",
									"originalSourceSha256": "b0e327de52e8e5c67e9829e934a4768851968236da0ba6b094bf0340d311f24d",
									"notice": {
										"id": "3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108",
										"url": "/licenses/source-notices/3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt",
										"licenseFilename": "LICENSE-3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/fit.vue",
											"sourceSha256": "31e38a07f8567287acd7942b3aa7947761faa0d3193209629c95462d24df1eb9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-fit/js/Demo.vue",
									"sha256": "c27b45c3f4e62ef07d433eea1bb424b9be50f430b60006b1b2060cadd40f734f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt\n-->\n<template>\n\t<div class=\"demo-fit\">\n\t\t<div v-for=\"fit in fits\" :key=\"fit\" class=\"block\">\n\t\t\t<span class=\"title\">{{ fit }}</span>\n\t\t\t<AsamAvatar shape=\"square\" :size=\"100\" :fit=\"fit\" :src=\"url\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarCapFitDemo' });\nimport { AsamAvatar } from '@asam-ui/ui';\nimport { reactive, toRefs } from 'vue';\nconst state = reactive({\n\tfits: ['fill', 'contain', 'cover', 'none', 'scale-down'],\n\turl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n});\nconst { fits, url } = toRefs(state);\n</script>\n\n<style scoped>\n.demo-fit {\n\tdisplay: flex;\n\ttext-align: center;\n\tjustify-content: space-between;\n}\n\n.demo-fit .block {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-grow: 0;\n}\n\n.demo-fit .title {\n\tmargin-bottom: 10px;\n\tfont-size: 14px;\n\tcolor: var(--el-text-color-secondary);\n}\n</style>\n",
									"originalSourceSha256": "2b018844526cea165d07988dfd5579af4b33c34cedfb43c9d1190a575eb9a3ef",
									"notice": {
										"id": "3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108",
										"url": "/licenses/source-notices/3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt",
										"licenseFilename": "LICENSE-3cfd60162928b2363ae62642f37cec881ad302e1311562f403e9782f7e823108.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/fit.vue",
											"sourceSha256": "31e38a07f8567287acd7942b3aa7947761faa0d3193209629c95462d24df1eb9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-group",
					"title": "头像组 2.13.1",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-group/ts/Demo.vue",
									"sha256": "e26a3bb7332860372ca7c3d07354f3bc7cd44f64bb5d9fc3896f13dde5d00335",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">default</p>\n\t\t<AsamAvatarGroup>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 collapse-avatars</p>\n\t\t<AsamAvatarGroup collapse-avatars>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 collapse-class 和 collapse-style</p>\n\t\t<AsamAvatarGroup\n\t\t\tcollapse-avatars\n\t\t\t:collapse-style=\"{ 'background-color': '#d9ecff' }\"\n\t\t\tcollapse-class=\"my-collapse-avatar\"\n\t\t>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 max-collapse-avatars</p>\n\t\t<AsamAvatarGroup collapse-avatars :max-collapse-avatars=\"3\">\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 collapse-avatars-tooltip</p>\n\t\t<AsamAvatarGroup collapse-avatars :max-collapse-avatars=\"3\" collapse-avatars-tooltip>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarCapGroupDemo' });\nimport { AsamAvatarGroup, AsamAvatar } from '@asam-ui/ui';\n\nconst circleUrl =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style>\n.my-collapse-avatar {\n\tcolor: #409eff;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.m-4 {\n\tmargin: 1rem;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "79c7a067609026d775bd904adc6370d5318fd343f64bbce2ec4b92d50d024cad",
									"notice": {
										"id": "60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd",
										"url": "/licenses/source-notices/60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt",
										"licenseFilename": "LICENSE-60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/group.vue",
											"sourceSha256": "dfec5bb1613c17d871563d813f4f53151a4d7f49cb1205a622cd658b2b347841",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatar/cap-group/js/Demo.vue",
									"sha256": "e386aadcbc853ee4de22f445cd108251f068102756a7f5e4435018f293b5d9d6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">default</p>\n\t\t<AsamAvatarGroup>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 collapse-avatars</p>\n\t\t<AsamAvatarGroup collapse-avatars>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 collapse-class 和 collapse-style</p>\n\t\t<AsamAvatarGroup\n\t\t\tcollapse-avatars\n\t\t\t:collapse-style=\"{ 'background-color': '#d9ecff' }\"\n\t\t\tcollapse-class=\"my-collapse-avatar\"\n\t\t>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 max-collapse-avatars</p>\n\t\t<AsamAvatarGroup collapse-avatars :max-collapse-avatars=\"3\">\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用 collapse-avatars-tooltip</p>\n\t\t<AsamAvatarGroup collapse-avatars :max-collapse-avatars=\"3\" collapse-avatars-tooltip>\n\t\t\t<AsamAvatar v-for=\"number in 5\" :key=\"number\" :src=\"circleUrl\" />\n\t\t</AsamAvatarGroup>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarCapGroupDemo' });\nimport { AsamAvatarGroup, AsamAvatar } from '@asam-ui/ui';\nconst circleUrl =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style>\n.my-collapse-avatar {\n\tcolor: #409eff;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.m-4 {\n\tmargin: 1rem;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "38086213131c1f7e383f289eec1eb0d17d940378b865a4d84fe12379c6bf24cf",
									"notice": {
										"id": "60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd",
										"url": "/licenses/source-notices/60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt",
										"licenseFilename": "LICENSE-60cbaff8031fef9c871925fa76bb6de2868ba8be0c14fabf478e1806af9f06cd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/avatar/group.vue",
											"sourceSha256": "dfec5bb1613c17d871563d813f4f53151a4d7f49cb1205a622cd658b2b347841",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAvatarGroup",
			"documentation": "/component-AsamAvatarGroup.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatarGroup/basic/ts/Demo.vue",
									"sha256": "708db79be9f5ac8d1f4d7da6fd3e975677784d91d57fc0719f5821fc6bad0acb",
									"source": "<template>\n\t<AsamAvatarGroup\n\t\tv-bind=\"{\n\t\t\tsize: 40,\n\t\t\tcollapseAvatars: true,\n\t\t\tcollapseAvatarsTooltip: true,\n\t\t\tmaxCollapseAvatars: 3\n\t\t}\"\n\t>\n\t\t<AsamAvatar>张</AsamAvatar>\n\t\t<AsamAvatar>李</AsamAvatar>\n\t\t<AsamAvatar>王</AsamAvatar>\n\t\t<AsamAvatar>赵</AsamAvatar>\n\t</AsamAvatarGroup>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAvatarGroupBasicDemo' });\nimport { AsamAvatarGroup, AsamAvatar } from '@asam-ui/ui';\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAvatarGroup/basic/js/Demo.vue",
									"sha256": "9d7d3580ae0654f4f66e2815ac9e176e58a55233ece7af138ff989f7ed52027f",
									"source": "<template>\n\t<AsamAvatarGroup\n\t\tv-bind=\"{\n\t\t\tsize: 40,\n\t\t\tcollapseAvatars: true,\n\t\t\tcollapseAvatarsTooltip: true,\n\t\t\tmaxCollapseAvatars: 3\n\t\t}\"\n\t>\n\t\t<AsamAvatar>张</AsamAvatar>\n\t\t<AsamAvatar>李</AsamAvatar>\n\t\t<AsamAvatar>王</AsamAvatar>\n\t\t<AsamAvatar>赵</AsamAvatar>\n\t</AsamAvatarGroup>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAvatarGroupBasicDemo' });\nimport { AsamAvatarGroup, AsamAvatar } from '@asam-ui/ui';\n</script>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamBacktop",
			"documentation": "/component-AsamBacktop.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBacktop/basic/ts/Demo.vue",
									"sha256": "45204a8458bb5ffb9508f23bd2189d4976309e69c3e61681a7757018c114f250",
									"source": "<template>\n\t<div class=\"doc010-backtop-scroll\">\n\t\t<p class=\"example-paragraph\" v-for=\"line in 30\" :key=\"line\">记录 {{ line }}</p>\n\t\t<AsamBacktop\n\t\t\ttarget=\".doc010-backtop-scroll\"\n\t\t\t:visibility-height=\"80\"\n\t\t\t:right=\"32\"\n\t\t\t:bottom=\"32\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBacktopBasicDemo' });\nimport { AsamBacktop } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.doc010-backtop-scroll {\n\theight: 200px;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBacktop/basic/js/Demo.vue",
									"sha256": "ff675afe29d9f65c12f0ba16ff0cf6ede3b53e10537963d406bf0606ceec6f30",
									"source": "<template>\n\t<div class=\"doc010-backtop-scroll\">\n\t\t<p class=\"example-paragraph\" v-for=\"line in 30\" :key=\"line\">记录 {{ line }}</p>\n\t\t<AsamBacktop\n\t\t\ttarget=\".doc010-backtop-scroll\"\n\t\t\t:visibility-height=\"80\"\n\t\t\t:right=\"32\"\n\t\t\t:bottom=\"32\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBacktopBasicDemo' });\nimport { AsamBacktop } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.doc010-backtop-scroll {\n\theight: 200px;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBacktop/cap-basic/ts/Demo.vue",
									"sha256": "74fc498891a264ae8365b21e580075efb6a9d6b8b6671b68a28b28a76bb2c226",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt\n-->\n<template>\n\t向下滚动可看到右下角按钮。\n\t<AsamBacktop :right=\"100\" :bottom=\"100\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBacktopCapBasicDemo' });\nimport { AsamBacktop } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "93fc837de0b376821401a8ebd3d064ff04e1db559ba178da90ef4fe058b88de5",
									"notice": {
										"id": "0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5",
										"url": "/licenses/source-notices/0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt",
										"licenseFilename": "LICENSE-0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/backtop/basic.vue",
											"sourceSha256": "2f5471ae8086e50415ce2097282c1167a37de2662017483e3325d09b277b0cd7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBacktop/cap-basic/js/Demo.vue",
									"sha256": "c12b067b852ce75a98c461ca9173eada2f4826fcfe081468b37b55bbb2c78b06",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt\n-->\n<template>\n\t向下滚动可看到右下角按钮。\n\t<AsamBacktop :right=\"100\" :bottom=\"100\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBacktopCapBasicDemo' });\nimport { AsamBacktop } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "508f146a7ca26f94acf75c25e70af5c3bc4198aa9fc2dae7c7250e978763f117",
									"notice": {
										"id": "0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5",
										"url": "/licenses/source-notices/0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt",
										"licenseFilename": "LICENSE-0145113b1ba941829f87af16fa73df1c3ac78b861fcd533d0b1340d4b962d0f5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/backtop/basic.vue",
											"sourceSha256": "2f5471ae8086e50415ce2097282c1167a37de2662017483e3325d09b277b0cd7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom",
					"title": "自定义显示内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBacktop/cap-custom/ts/Demo.vue",
									"sha256": "30a9d4012878009849e08db05253fb3cd5681d8a8d9cc452b5dde44cfca9a3a7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt\n-->\n<template>\n\t向下滚动可看到右下角按钮。\n\t<AsamBacktop :bottom=\"100\">\n\t\t<div\n\t\t\tstyle=\"\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: var(--el-bg-color-overlay);\n\t\t\t\tbox-shadow: var(--el-box-shadow-lighter);\n\t\t\t\ttext-align: center;\n\t\t\t\tline-height: 40px;\n\t\t\t\tcolor: #1989fa;\n\t\t\t\"\n\t\t>\n\t\t\tUP\n\t\t</div>\n\t</AsamBacktop>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBacktopCapCustomDemo' });\nimport { AsamBacktop } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "78d9121bb6b2eebd3372e38c33c9011c02ebfa8f7cca649bf87c496649b7981a",
									"notice": {
										"id": "3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc",
										"url": "/licenses/source-notices/3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt",
										"licenseFilename": "LICENSE-3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/backtop/custom.vue",
											"sourceSha256": "425859b0bf7141cc50fb561ba5337ffba30be89b52915c67177ac6ff1a2c4026",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBacktop/cap-custom/js/Demo.vue",
									"sha256": "116ee584473ad0cb17ce3b9099130f775985bf57ec237890ef2b8d115d81cd55",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt\n-->\n<template>\n\t向下滚动可看到右下角按钮。\n\t<AsamBacktop :bottom=\"100\">\n\t\t<div\n\t\t\tstyle=\"\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: var(--el-bg-color-overlay);\n\t\t\t\tbox-shadow: var(--el-box-shadow-lighter);\n\t\t\t\ttext-align: center;\n\t\t\t\tline-height: 40px;\n\t\t\t\tcolor: #1989fa;\n\t\t\t\"\n\t\t>\n\t\t\tUP\n\t\t</div>\n\t</AsamBacktop>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBacktopCapCustomDemo' });\nimport { AsamBacktop } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "24044781b34ba1cc3f779698f4f193493e5b86fed9772ebff890a28aaa7608da",
									"notice": {
										"id": "3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc",
										"url": "/licenses/source-notices/3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt",
										"licenseFilename": "LICENSE-3ac71e9d5863d64c1f7b278f8b28cbe2e94714abee1b7185c6c7e86e862792fc.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/backtop/custom.vue",
											"sourceSha256": "425859b0bf7141cc50fb561ba5337ffba30be89b52915c67177ac6ff1a2c4026",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamBadge",
			"documentation": "/component-AsamBadge.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/basic/ts/Demo.vue",
									"sha256": "a444836d5a05c06597c6b21ba7323804fd2f961d3f24568da25887277c6c8225",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamBadge :value=\"count\" :max=\"9\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\">本地通知</AsamButton>\n\t\t</AsamBadge>\n\t\t<AsamBadge is-dot>\n\t\t\t<span>有更新</span>\n\t\t</AsamBadge>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBadgeBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamBadge } from '@asam-ui/ui';\nconst count = ref(3);\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/basic/js/Demo.vue",
									"sha256": "fbb2d1c7846513241754f0d2b8d57689b38150b92a6c91d1e7706e5184a524ff",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamBadge :value=\"count\" :max=\"9\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\">本地通知</AsamButton>\n\t\t</AsamBadge>\n\t\t<AsamBadge is-dot>\n\t\t\t<span>有更新</span>\n\t\t</AsamBadge>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBadgeBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamBadge } from '@asam-ui/ui';\nconst count = ref(3);\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-basic/ts/Demo.vue",
									"sha256": "4908085241c3da4a40fc6da5f3583a1260ef94c00be7a4711b87a444e178788e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt\n-->\n<template>\n\t<AsamBadge :value=\"12\" class=\"item\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"3\" class=\"item\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"1\" class=\"item\" type=\"primary\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"2\" class=\"item\" type=\"warning\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"1\" class=\"item\" color=\"green\">\n\t\t<AsamButton type=\"default\">自定义背景</AsamButton>\n\t</AsamBadge>\n\t<AsamDropdown trigger=\"click\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t点击按钮\n\t\t\t<AsamIcon class=\"el-icon--right\"><caret-bottom /></AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem class=\"clearfix\">\n\t\t\t\t\t评论\n\t\t\t\t\t<AsamBadge class=\"mark\" :value=\"12\" />\n\t\t\t\t</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem class=\"clearfix\">\n\t\t\t\t\t回复\n\t\t\t\t\t<AsamBadge class=\"mark\" :value=\"3\" />\n\t\t\t\t</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBadgeCapBasicDemo' });\nimport {\n\tAsamBadge,\n\tAsamButton,\n\tAsamDropdown,\n\tAsamIcon,\n\tAsamDropdownMenu,\n\tAsamDropdownItem\n} from '@asam-ui/ui';\n\nimport { CaretBottom } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 30px;\n}\n\n.el-dropdown {\n\tmargin-top: 1.1rem;\n}\n</style>\n",
									"originalSourceSha256": "48038ba8adcee2f1b929edf4b717c8c452d93ed2191abd8522b6a89e7ac79e96",
									"notice": {
										"id": "a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f",
										"url": "/licenses/source-notices/a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt",
										"licenseFilename": "LICENSE-a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/basic.vue",
											"sourceSha256": "ff09e5b14534cc342a7f236d8354bd647102165a26da6b18f6648f76f8995aa1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-basic/js/Demo.vue",
									"sha256": "dcaf9e4f80899a1ffb7122df017a965d247c34a3fbacb7f02797d9eeb77cd526",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt\n-->\n<template>\n\t<AsamBadge :value=\"12\" class=\"item\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"3\" class=\"item\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"1\" class=\"item\" type=\"primary\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"2\" class=\"item\" type=\"warning\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"1\" class=\"item\" color=\"green\">\n\t\t<AsamButton type=\"default\">自定义背景</AsamButton>\n\t</AsamBadge>\n\t<AsamDropdown trigger=\"click\">\n\t\t<span class=\"el-dropdown-link\">\n\t\t\t点击按钮\n\t\t\t<AsamIcon class=\"el-icon--right\"><caret-bottom /></AsamIcon>\n\t\t</span>\n\t\t<template #dropdown>\n\t\t\t<AsamDropdownMenu>\n\t\t\t\t<AsamDropdownItem class=\"clearfix\">\n\t\t\t\t\t评论\n\t\t\t\t\t<AsamBadge class=\"mark\" :value=\"12\" />\n\t\t\t\t</AsamDropdownItem>\n\t\t\t\t<AsamDropdownItem class=\"clearfix\">\n\t\t\t\t\t回复\n\t\t\t\t\t<AsamBadge class=\"mark\" :value=\"3\" />\n\t\t\t\t</AsamDropdownItem>\n\t\t\t</AsamDropdownMenu>\n\t\t</template>\n\t</AsamDropdown>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBadgeCapBasicDemo' });\nimport {\n\tAsamBadge,\n\tAsamButton,\n\tAsamDropdown,\n\tAsamIcon,\n\tAsamDropdownMenu,\n\tAsamDropdownItem\n} from '@asam-ui/ui';\nimport { CaretBottom } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 30px;\n}\n\n.el-dropdown {\n\tmargin-top: 1.1rem;\n}\n</style>\n",
									"originalSourceSha256": "34fcbe2053555a0dff59a1a597f65d417785182d0198736540d3ce911b897d4a",
									"notice": {
										"id": "a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f",
										"url": "/licenses/source-notices/a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt",
										"licenseFilename": "LICENSE-a318623b1b11afd15597c7b9c804eca4096c6da606608deaa7464e487f41999f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/basic.vue",
											"sourceSha256": "ff09e5b14534cc342a7f236d8354bd647102165a26da6b18f6648f76f8995aa1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-max",
					"title": "最大值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-max/ts/Demo.vue",
									"sha256": "0a363ba6ef50b88b03a5a2d77d5465f63ade2b1ad5db9633e530c8ab7a0b9ea6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt\n-->\n<template>\n\t<AsamBadge :value=\"200\" :max=\"99\" class=\"item\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"100\" :max=\"10\" class=\"item\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBadgeCapMaxDemo' });\nimport { AsamBadge, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 40px;\n}\n</style>\n",
									"originalSourceSha256": "53e1b0d65e4a6ea25953dd8d0379045ad69a298f47371cf256839e43f8de9d23",
									"notice": {
										"id": "40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a",
										"url": "/licenses/source-notices/40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt",
										"licenseFilename": "LICENSE-40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/max.vue",
											"sourceSha256": "d578fc5f5bee2174a7f28f45ab72314500d25b2432b2b073abe521ed4bd92022",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-max/js/Demo.vue",
									"sha256": "0132d894baf469fe9705054409c9da18feda90ed023571583c8ecca6cffa999f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt\n-->\n<template>\n\t<AsamBadge :value=\"200\" :max=\"99\" class=\"item\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge :value=\"100\" :max=\"10\" class=\"item\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBadgeCapMaxDemo' });\nimport { AsamBadge, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 40px;\n}\n</style>\n",
									"originalSourceSha256": "9118ad87e3f0bf483e793ac89b76d2a71aa470d0d3d222ba96ab87fa23ea705a",
									"notice": {
										"id": "40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a",
										"url": "/licenses/source-notices/40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt",
										"licenseFilename": "LICENSE-40aa414f789b851d1af8b574132f7e4d7751d0e04931fb9a054af6d795c6a10a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/max.vue",
											"sourceSha256": "d578fc5f5bee2174a7f28f45ab72314500d25b2432b2b073abe521ed4bd92022",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customize",
					"title": "自定义弹出框的内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-customize/ts/Demo.vue",
									"sha256": "b4d5b5906556e8c56247029f1f2e73f74f79a75460e34f2196adf023d97ff218",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt\n-->\n<template>\n\t<AsamBadge value=\"new\" class=\"item\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge value=\"hot\" class=\"item\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge value=\"99\" class=\"item\">\n\t\t<AsamButton type=\"default\">分享</AsamButton>\n\t\t<template #content=\"{ value }\">\n\t\t\t<div class=\"custom-content\">\n\t\t\t\t<AsamIcon>\n\t\t\t\t\t<Message />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<span>{{ value }}</span>\n\t\t\t</div>\n\t\t</template>\n\t</AsamBadge>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBadgeCapCustomizeDemo' });\nimport { AsamBadge, AsamButton, AsamIcon } from '@asam-ui/ui';\n\nimport { Message } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 40px;\n}\n\n.custom-content {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n}\n</style>\n",
									"originalSourceSha256": "25630af5b8993ada0ab5d42873779c2115af5c1d729cbbccd4f8ab8697fb2f57",
									"notice": {
										"id": "3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244",
										"url": "/licenses/source-notices/3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt",
										"licenseFilename": "LICENSE-3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/customize.vue",
											"sourceSha256": "27259afab985ab275c66a495555048a83a8eb4aa9e7d8fb1e5fc97ce382a8f73",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-customize/js/Demo.vue",
									"sha256": "6988123fa97be8613a5217c22a4d0cf787fb47090729e12585cf7162d0f98e21",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt\n-->\n<template>\n\t<AsamBadge value=\"new\" class=\"item\">\n\t\t<AsamButton type=\"default\">评论</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge value=\"hot\" class=\"item\">\n\t\t<AsamButton type=\"default\">回复</AsamButton>\n\t</AsamBadge>\n\t<AsamBadge value=\"99\" class=\"item\">\n\t\t<AsamButton type=\"default\">分享</AsamButton>\n\t\t<template #content=\"{ value }\">\n\t\t\t<div class=\"custom-content\">\n\t\t\t\t<AsamIcon>\n\t\t\t\t\t<Message />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<span>{{ value }}</span>\n\t\t\t</div>\n\t\t</template>\n\t</AsamBadge>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBadgeCapCustomizeDemo' });\nimport { AsamBadge, AsamButton, AsamIcon } from '@asam-ui/ui';\nimport { Message } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 40px;\n}\n\n.custom-content {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n}\n</style>\n",
									"originalSourceSha256": "e383c00b23aa067beca7c98a976434795cdf909f1f09c0ed9ad56b98b6c549c2",
									"notice": {
										"id": "3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244",
										"url": "/licenses/source-notices/3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt",
										"licenseFilename": "LICENSE-3216be483d98adc098a3c45ad81c2f238a4d7a33e4765b24818eb366f039d244.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/customize.vue",
											"sourceSha256": "27259afab985ab275c66a495555048a83a8eb4aa9e7d8fb1e5fc97ce382a8f73",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-dot",
					"title": "小红点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-dot/ts/Demo.vue",
									"sha256": "227bb8477f9af7268c685eef8656a05a6fce09fb750f64765d2ee6deee809e58",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt\n-->\n<template>\n\t<AsamBadge is-dot class=\"item\">查询</AsamBadge>\n\t<AsamBadge is-dot class=\"item\">\n\t\t<AsamButton class=\"share-button\" :icon=\"Share\" type=\"default\" />\n\t</AsamBadge>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBadgeCapDotDemo' });\nimport { AsamBadge, AsamButton } from '@asam-ui/ui';\n\nimport { Share } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 40px;\n}\n</style>\n",
									"originalSourceSha256": "1d6b71158c5b8a45f526d49d06cff9510ba8716acf473a6b2f6cd086ae5afd09",
									"notice": {
										"id": "5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e",
										"url": "/licenses/source-notices/5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt",
										"licenseFilename": "LICENSE-5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/dot.vue",
											"sourceSha256": "d5811fa644c97faca565c181198a93a2c7d5d5a94b02cccd2d5e846bdee735f7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-dot/js/Demo.vue",
									"sha256": "d09dd4b32e48a965e036de533a0bf0a4796f5ecc95de5438f60e92e5eec24733",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt\n-->\n<template>\n\t<AsamBadge is-dot class=\"item\">查询</AsamBadge>\n\t<AsamBadge is-dot class=\"item\">\n\t\t<AsamButton class=\"share-button\" :icon=\"Share\" type=\"default\" />\n\t</AsamBadge>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBadgeCapDotDemo' });\nimport { AsamBadge, AsamButton } from '@asam-ui/ui';\nimport { Share } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 40px;\n}\n</style>\n",
									"originalSourceSha256": "1cc8a4e43e111c351a6b8f8bd7db969ce6860790dda30c2f4a753b013e7b60f8",
									"notice": {
										"id": "5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e",
										"url": "/licenses/source-notices/5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt",
										"licenseFilename": "LICENSE-5b8057d667604827f5043d95a190fc4c429841c76469747c80952b22f247387e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/dot.vue",
											"sourceSha256": "d5811fa644c97faca565c181198a93a2c7d5d5a94b02cccd2d5e846bdee735f7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-offset",
					"title": "偏移量 2.7.0",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-offset/ts/Demo.vue",
									"sha256": "860769771c3c30de9d062028c74f28d0dd95f4d6d609f9313f68da086606bcaf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt\n-->\n<template>\n\t<AsamBadge class=\"item\" :value=\"1\" :offset=\"[10, 5]\">\n\t\t<AsamButton type=\"default\">偏移量（offset）</AsamButton>\n\t</AsamBadge>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBadgeCapOffsetDemo' });\nimport { AsamBadge, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 30px;\n}\n</style>\n",
									"originalSourceSha256": "035c940842ea6f33f07e73fc67ab3abe55aff6be809cbcc0f7f7e63fec5cdcb4",
									"notice": {
										"id": "4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778",
										"url": "/licenses/source-notices/4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt",
										"licenseFilename": "LICENSE-4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/offset.vue",
											"sourceSha256": "924dcef34c6d6cc4a02f5e0d14fdd22b57d2123cec050d10599d43dcebb52419",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBadge/cap-offset/js/Demo.vue",
									"sha256": "6a8b0896103985e687710d07e7e42e60e78444153b027d2fb68268df16c9d14e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt\n-->\n<template>\n\t<AsamBadge class=\"item\" :value=\"1\" :offset=\"[10, 5]\">\n\t\t<AsamButton type=\"default\">偏移量（offset）</AsamButton>\n\t</AsamBadge>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBadgeCapOffsetDemo' });\nimport { AsamBadge, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.item {\n\tmargin-top: 10px;\n\tmargin-right: 30px;\n}\n</style>\n",
									"originalSourceSha256": "dd06f9ec28675bd99341d123a1cad83bd6b532244eee0e38439523bb4489dec6",
									"notice": {
										"id": "4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778",
										"url": "/licenses/source-notices/4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt",
										"licenseFilename": "LICENSE-4facce33c0202da77d651d86fcea0394dc208155d61157f51d11c917c86d6778.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/badge/offset.vue",
											"sourceSha256": "924dcef34c6d6cc4a02f5e0d14fdd22b57d2123cec050d10599d43dcebb52419",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamBreadcrumb",
			"documentation": "/component-AsamBreadcrumb.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumb/basic/ts/Demo.vue",
									"sha256": "3ebf7d1c5a4ef1e15ea23949a7cfdc6b85ae81c3a01edfb33552361e339880f7",
									"source": "<template>\n\t<AsamBreadcrumb separator=\"/\">\n\t\t<AsamBreadcrumbItem>\n\t\t\t<AsamLink href=\"#doc010-crumb-target\">工作台</AsamLink>\n\t\t</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>当前说明</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n\t<p class=\"example-paragraph\" id=\"doc010-crumb-target\">本页目标</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBreadcrumbBasicDemo' });\nimport { AsamLink, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumb/basic/js/Demo.vue",
									"sha256": "002181dec167bbf48131c0dda03775179350df47dd6e36c444006663f9ef16fb",
									"source": "<template>\n\t<AsamBreadcrumb separator=\"/\">\n\t\t<AsamBreadcrumbItem>\n\t\t\t<AsamLink href=\"#doc010-crumb-target\">工作台</AsamLink>\n\t\t</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>当前说明</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n\t<p class=\"example-paragraph\" id=\"doc010-crumb-target\">本页目标</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBreadcrumbBasicDemo' });\nimport { AsamLink, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumb/cap-basic/ts/Demo.vue",
									"sha256": "cc5faf0e4a83e96d3d3de62754b0cb9d58d6d1ed6123aa2718cfbca865f0891d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt\n-->\n<template>\n\t<AsamBreadcrumb separator=\"/\">\n\t\t<AsamBreadcrumbItem :to=\"{ path: '/' }\">首页</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>\n\t\t\t<AsamLink href=\"/\">活动管理</AsamLink>\n\t\t</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动列表</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动详情</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBreadcrumbCapBasicDemo' });\nimport { AsamLink, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "092ec3791caf447b8376aa8d688bf378272e714b4d54dd83612f5d359248e1e2",
									"notice": {
										"id": "9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca",
										"url": "/licenses/source-notices/9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt",
										"licenseFilename": "LICENSE-9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/breadcrumb/basic.vue",
											"sourceSha256": "f1daadc8a80e73286ee45ccb2b01f96098e025f7fffd917460532bf0c2efa739",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumb/cap-basic/js/Demo.vue",
									"sha256": "1535c32bd0b9586b6eed6836282b26c9cf79c415cb60d8a50b7893f486273d3e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt\n-->\n<template>\n\t<AsamBreadcrumb separator=\"/\">\n\t\t<AsamBreadcrumbItem :to=\"{ path: '/' }\">首页</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>\n\t\t\t<AsamLink href=\"/\">活动管理</AsamLink>\n\t\t</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动列表</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动详情</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBreadcrumbCapBasicDemo' });\nimport { AsamLink, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "ed1ac33e7e3001b71ddb9d6bdfe06439e65100b10e94f44f9c2412fcce21e799",
									"notice": {
										"id": "9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca",
										"url": "/licenses/source-notices/9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt",
										"licenseFilename": "LICENSE-9cc63d8a9b6312a760cbb2f6cd603b731343646925a40f7e1b9e71d3e1f7ceca.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/breadcrumb/basic.vue",
											"sourceSha256": "f1daadc8a80e73286ee45ccb2b01f96098e025f7fffd917460532bf0c2efa739",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-icon",
					"title": "图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumb/cap-icon/ts/Demo.vue",
									"sha256": "1ed4ea75d3d2ec3c36485fa6bd1b464a8b171c9843f2061e63823a2c1c83fb2a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt\n-->\n<template>\n\t<AsamBreadcrumb :separator-icon=\"ArrowRight\">\n\t\t<AsamBreadcrumbItem :to=\"{ path: '/' }\">首页</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动管理</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动列表</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动详情</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBreadcrumbCapIconDemo' });\nimport { AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n\nimport { ArrowRight } from '@asam-ui/icons-vue';\n</script>\n",
									"originalSourceSha256": "779062037c6e027455209dff629f488777107d3d5f03681c41bfabe9f561a192",
									"notice": {
										"id": "e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717",
										"url": "/licenses/source-notices/e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt",
										"licenseFilename": "LICENSE-e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/breadcrumb/icon.vue",
											"sourceSha256": "5533b21aedd9b87a618bab4e9150b7fc4ea05f092e6fe4be2dee8677e9bd0c57",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumb/cap-icon/js/Demo.vue",
									"sha256": "24a95554011087d6cc7b317efb6db5fc7572ef73cd9b8526453b352bb0af3cb6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt\n-->\n<template>\n\t<AsamBreadcrumb :separator-icon=\"ArrowRight\">\n\t\t<AsamBreadcrumbItem :to=\"{ path: '/' }\">首页</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动管理</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动列表</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>活动详情</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBreadcrumbCapIconDemo' });\nimport { AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\nimport { ArrowRight } from '@asam-ui/icons-vue';\n</script>\n",
									"originalSourceSha256": "f5455446c635fd6790630c4d14fa02ee6cd8ac2070c570597dc84f780c475d06",
									"notice": {
										"id": "e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717",
										"url": "/licenses/source-notices/e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt",
										"licenseFilename": "LICENSE-e915599463c4f6cad0a2d5507750cda0fe0417810dcd79245533d0e7dc25e717.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/breadcrumb/icon.vue",
											"sourceSha256": "5533b21aedd9b87a618bab4e9150b7fc4ea05f092e6fe4be2dee8677e9bd0c57",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamBreadcrumbItem",
			"documentation": "/component-AsamBreadcrumbItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumbItem/basic/ts/Demo.vue",
									"sha256": "faa32e371498a1f17c260ff346b1a1b8356733b773b8d13e1372064a76fa54b7",
									"source": "<template>\n\t<AsamBreadcrumb separator=\"/\">\n\t\t<AsamBreadcrumbItem>\n\t\t\t<AsamLink href=\"#doc010-crumb-target\">工作台</AsamLink>\n\t\t</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>当前说明</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n\t<p class=\"example-paragraph\" id=\"doc010-crumb-target\">本页目标</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBreadcrumbItemBasicDemo' });\nimport { AsamLink, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBreadcrumbItem/basic/js/Demo.vue",
									"sha256": "684d164e70efed5262cb7b5139926214cffe8fc61e11e3d446bff06916af0900",
									"source": "<template>\n\t<AsamBreadcrumb separator=\"/\">\n\t\t<AsamBreadcrumbItem>\n\t\t\t<AsamLink href=\"#doc010-crumb-target\">工作台</AsamLink>\n\t\t</AsamBreadcrumbItem>\n\t\t<AsamBreadcrumbItem>当前说明</AsamBreadcrumbItem>\n\t</AsamBreadcrumb>\n\t<p class=\"example-paragraph\" id=\"doc010-crumb-target\">本页目标</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBreadcrumbItemBasicDemo' });\nimport { AsamLink, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCalendar",
			"documentation": "/component-AsamCalendar.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/basic/ts/Demo.vue",
									"sha256": "0160f069e4f802bf76a3e0d9d0a8b1e9c8d8b5155b36d6af7485a0eeed16b7af",
									"source": "<template>\n\t<AsamCalendar v-model=\"date\">\n\t\t<template #date-cell=\"{ data }\">\n\t\t\t<span>{{ data.day }}{{ data.isSelected ? ' · 当前' : '' }}</span>\n\t\t</template>\n\t</AsamCalendar>\n\t<p class=\"example-paragraph\" role=\"status\">{{ date.toLocaleDateString() }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCalendarBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCalendar } from '@asam-ui/ui';\nconst date = ref(new Date(2026, 9, 1));\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/basic/js/Demo.vue",
									"sha256": "42dc54fe67830a4f493d7bea63bc0f8f66f062fa44f97bf5b7ac2f49f99664f1",
									"source": "<template>\n\t<AsamCalendar v-model=\"date\">\n\t\t<template #date-cell=\"{ data }\">\n\t\t\t<span>{{ data.day }}{{ data.isSelected ? ' · 当前' : '' }}</span>\n\t\t</template>\n\t</AsamCalendar>\n\t<p class=\"example-paragraph\" role=\"status\">{{ date.toLocaleDateString() }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCalendarBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCalendar } from '@asam-ui/ui';\nconst date = ref(new Date(2026, 9, 1));\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "formatter-instance",
					"title": "年月格式与完整实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/formatter-instance/ts/Demo.vue",
									"sha256": "f6cf4b9d0c84c83df1b0cc86c67de5862fa660f18eb1db63cbe8a0e9417d104e",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCalendar\n\t\t\tref=\"calendar\"\n\t\t\tv-model=\"value\"\n\t\t\tcontroller-type=\"select\"\n\t\t\t:formatter=\"formatter\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"calendar?.selectDate('next-year')\">下一年</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"calendar?.selectDate('prev-month')\"\n\t\t\t>上一月</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"calendar?.selectDate('today')\"\n\t\t\t>今天</AsamButton\n\t\t>\n\t\t<output>{{ value }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCalendarformatterinstanceExample' });\n\nimport { ref } from 'vue';\nimport { AsamButton, AsamCalendar } from '@asam-ui/ui';\nimport type { AsamCalendarInstance } from '@asam-ui/ui';\nconst value = ref(new Date(2026, 9, 4));\nconst calendar = ref<AsamCalendarInstance>();\nconst formatter = (value: number, type: 'year' | 'month') =>\n\ttype === 'year' ? value + '年' : value + '月';\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/formatter-instance/js/Demo.vue",
									"sha256": "71399970397abc824a13b56f485a1b386af5e13d73fa5d56e564e2b029049cf8",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCalendar\n\t\t\tref=\"calendar\"\n\t\t\tv-model=\"value\"\n\t\t\tcontroller-type=\"select\"\n\t\t\t:formatter=\"formatter\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"calendar?.selectDate('next-year')\">下一年</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"calendar?.selectDate('prev-month')\"\n\t\t\t>上一月</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"calendar?.selectDate('today')\"\n\t\t\t>今天</AsamButton\n\t\t>\n\t\t<output>{{ value }}</output>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamCalendarformatterinstanceExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCalendar } from '@asam-ui/ui';\nconst value = ref(new Date(2026, 9, 4));\nconst calendar = ref();\nconst formatter = (value, type) => (type === 'year' ? value + '年' : value + '月');\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "official-calendar-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-basic/ts/Demo.vue",
									"sha256": "29d0117a7147bfdb539f0a031f79cf86cd6a3237fb691943f72c988ec66c7d02",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt\n-->\n<template>\n\t<AsamCalendar v-model=\"value\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarbasicExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref(new Date());\n</script>\n",
									"originalSourceSha256": "16232cc47efca55d9fcb3a6f412908e98c185cd919d95d2ffeea9dbc88aadffc",
									"notice": {
										"id": "0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02",
										"url": "/licenses/source-notices/0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt",
										"licenseFilename": "LICENSE-0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/basic.vue",
											"sourceSha256": "e80f4dc7aa598c9e666890d948fe15b9a939087bf42a7c9a2fe2d0d7124d56bc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-basic/js/Demo.vue",
									"sha256": "4de9c3914269a3bd25dd16a5d4a15a9d002dab6c4ca79ced972c1cbc68cde592",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt\n-->\n<template>\n\t<AsamCalendar v-model=\"value\" />\n</template>\n\n<script setup>\nimport { AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarbasicExample' });\nimport { ref } from 'vue';\nconst value = ref(new Date());\n</script>\n",
									"originalSourceSha256": "806064b617715a2d83f8600bbed11c2e09a7af6862a3e2bd6dd2592e6865e71b",
									"notice": {
										"id": "0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02",
										"url": "/licenses/source-notices/0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt",
										"licenseFilename": "LICENSE-0e04c184c6b2804985ece3c4d0f63a53444d89d0955514386c7752bae2a17f02.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/basic.vue",
											"sourceSha256": "e80f4dc7aa598c9e666890d948fe15b9a939087bf42a7c9a2fe2d0d7124d56bc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-calendar-controller-type",
					"title": "控制器类型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-controller-type/ts/Demo.vue",
									"sha256": "6df179240679e7cec56c4fa5857dd37baa3eda3f517e102a2f494fa3f69963f9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup :model-value=\"controllerType\" @update:model-value=\"updatecontrollerType\">\n\t\t\t<AsamRadioButton label=\"select\" value=\"select\" />\n\t\t\t<AsamRadioButton label=\"button\" value=\"button\" />\n\t\t</AsamRadioGroup>\n\n\t\t<AsamCalendar v-model=\"value\" :controller-type=\"controllerType\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamRadioGroup, AsamRadioButton, AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarcontrollertypeExample' });\n\nimport { ref } from 'vue';\n\nconst controllerType = ref<'select' | 'button'>('select');\nconst value = ref(new Date());\nfunction updatecontrollerType(value: unknown) {\n\tif (value === 'button' || value === 'select') controllerType.value = value;\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "029dfc74eded93a922be7e404ada95b6438c11d4f7e22df63ad019c85865bfaf",
									"notice": {
										"id": "ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627",
										"url": "/licenses/source-notices/ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt",
										"licenseFilename": "LICENSE-ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/controller-type.vue",
											"sourceSha256": "89e2e350b39643994f79c9c9afbd36ff2195a27a6464e43dc377f721630f4d14",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-controller-type/js/Demo.vue",
									"sha256": "22fe6c244001f200c281ac4a97b1c5d75c3f9c3fd3ea677a92f6d0af4ea992a0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup :model-value=\"controllerType\" @update:model-value=\"updatecontrollerType\">\n\t\t\t<AsamRadioButton label=\"select\" value=\"select\" />\n\t\t\t<AsamRadioButton label=\"button\" value=\"button\" />\n\t\t</AsamRadioGroup>\n\n\t\t<AsamCalendar v-model=\"value\" :controller-type=\"controllerType\" />\n\t</div>\n</template>\n\n<script setup>\nimport { AsamRadioGroup, AsamRadioButton, AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarcontrollertypeExample' });\nimport { ref } from 'vue';\nconst controllerType = ref('select');\nconst value = ref(new Date());\nfunction updatecontrollerType(value) {\n\tif (value === 'button' || value === 'select') controllerType.value = value;\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "5abe2840a5ee98e23f5bf9486c906127fac7399e112fb923f4c94091cf28ab2b",
									"notice": {
										"id": "ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627",
										"url": "/licenses/source-notices/ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt",
										"licenseFilename": "LICENSE-ea2274f17060821bd4c76558ab0f892f55ab4267096a0d7b85ce459f2285e627.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/controller-type.vue",
											"sourceSha256": "89e2e350b39643994f79c9c9afbd36ff2195a27a6464e43dc377f721630f4d14",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-calendar-customize",
					"title": "自定义日期内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-customize/ts/Demo.vue",
									"sha256": "d06e50140f03239cecf19204656e057d310323711d23fc6f0ebd28d95af8944a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt\n-->\n<template>\n\t<AsamCalendar>\n\t\t<template #date-cell=\"{ data }\">\n\t\t\t<p class=\"example-paragraph\" :class=\"data.isSelected ? 'is-selected' : ''\">\n\t\t\t\t{{ data.day.split('-').slice(1).join('-') }}\n\t\t\t\t{{ data.isSelected ? '✔️' : '' }}\n\t\t\t</p>\n\t\t</template>\n\t</AsamCalendar>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarcustomizeExample' });\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.is-selected {\n\tcolor: var(--asam-color-primary);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "a32d044753f1fd6ace300b3a4a10c44e27ac7abbd6c0d42f777b48871c08b758",
									"notice": {
										"id": "f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f",
										"url": "/licenses/source-notices/f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt",
										"licenseFilename": "LICENSE-f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/customize.vue",
											"sourceSha256": "828808d4e3a9d8c11a569c12e4fcadb58eddec4ff9e0888034c7818ef374c6ed",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-customize/js/Demo.vue",
									"sha256": "d8e41f33a5b1672c0c717732ac5031e516a141a7e754b1d5b9a8388b869fe4dc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt\n-->\n<template>\n\t<AsamCalendar>\n\t\t<template #date-cell=\"{ data }\">\n\t\t\t<p class=\"example-paragraph\" :class=\"data.isSelected ? 'is-selected' : ''\">\n\t\t\t\t{{ data.day.split('-').slice(1).join('-') }}\n\t\t\t\t{{ data.isSelected ? '✔️' : '' }}\n\t\t\t</p>\n\t\t</template>\n\t</AsamCalendar>\n</template>\n<script setup>\nimport { AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarcustomizeExample' });\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.is-selected {\n\tcolor: var(--asam-color-primary);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "136fa2b7faeea9c724fe618e18818e5f586470fe10f56e91e54f83f52d3c2e1f",
									"notice": {
										"id": "f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f",
										"url": "/licenses/source-notices/f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt",
										"licenseFilename": "LICENSE-f3da9241a57802e758859acea56250acf8548d1ca4098f012af3a5f480dba94f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/customize.vue",
											"sourceSha256": "828808d4e3a9d8c11a569c12e4fcadb58eddec4ff9e0888034c7818ef374c6ed",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-calendar-range",
					"title": "指定范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-range/ts/Demo.vue",
									"sha256": "fa675040faac5d7c6ba5bf41c32ae33ba90876d1c9b6096a4dea38abca8ce827",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt\n-->\n<template>\n\t<AsamCalendar :range=\"[new Date(2019, 2, 4), new Date(2019, 2, 24)]\" />\n</template>\n<script lang=\"ts\" setup>\nimport { AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarrangeExample' });\n</script>\n",
									"originalSourceSha256": "431a50043ce7c685ddd4a5c35dfca2c271ca0b2c1ff80e9da2750d57a4220c0a",
									"notice": {
										"id": "3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d",
										"url": "/licenses/source-notices/3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt",
										"licenseFilename": "LICENSE-3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/range.vue",
											"sourceSha256": "22cab4aaafbb7d43ffc4ae70cf8b15ae163947b78a42159a253bdf11cf0c4657",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-range/js/Demo.vue",
									"sha256": "485496edc2c2297bcef0c907b2c7cc7a87d190ffc372c2ef2b8d036939a6a67d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt\n-->\n<template>\n\t<AsamCalendar :range=\"[new Date(2019, 2, 4), new Date(2019, 2, 24)]\" />\n</template>\n<script setup>\nimport { AsamCalendar } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarrangeExample' });\n</script>\n",
									"originalSourceSha256": "7db444c3a6302b4e5ede55e232d19d72c802ddc16e36e4016845be4571964f04",
									"notice": {
										"id": "3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d",
										"url": "/licenses/source-notices/3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt",
										"licenseFilename": "LICENSE-3236da2b4ca91938cf805c008527f53e508fd1a326de5d56c7266f62981ed33d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/range.vue",
											"sourceSha256": "22cab4aaafbb7d43ffc4ae70cf8b15ae163947b78a42159a253bdf11cf0c4657",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-calendar-header",
					"title": "自定义头部",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-header/ts/Demo.vue",
									"sha256": "cab155e77475d98c4d2e926dffe80113a583895fb268aab0d9799b754f92b929",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt\n-->\n<template>\n\t<AsamCalendar ref=\"calendar\">\n\t\t<template #header=\"{ date }\">\n\t\t\t<span>自定义头部内容</span>\n\t\t\t<span>{{ date }}</span>\n\t\t\t<AsamButtonGroup>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('prev-year')\">\n\t\t\t\t\t上一年\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('prev-month')\">\n\t\t\t\t\t上个月\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('today')\"\n\t\t\t\t\t>今天</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('next-month')\">\n\t\t\t\t\t下个月\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('next-year')\">\n\t\t\t\t\t下一年\n\t\t\t\t</AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t</template>\n\t</AsamCalendar>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamCalendar, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarheaderExample' });\n\nimport { ref } from 'vue';\n\nimport type {\n\tAsamCalendarDateType as CalendarDateType,\n\tAsamCalendarInstance as CalendarInstance\n} from '@asam-ui/ui';\n\nconst calendar = ref<CalendarInstance>();\nconst selectDate = (val: CalendarDateType) => {\n\tif (!calendar.value) return;\n\tcalendar.value.selectDate(val);\n};\n</script>\n",
									"originalSourceSha256": "3e61370619ea268aa0e3b8f2196074a6a7f2dd0d975c0879dbb6a2e5afbc7e01",
									"notice": {
										"id": "e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa",
										"url": "/licenses/source-notices/e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt",
										"licenseFilename": "LICENSE-e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/header.vue",
											"sourceSha256": "24aa5ce2811321873abe63cb76c69be9b737c1300f78269f049beb47433be2bb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/official-calendar-header/js/Demo.vue",
									"sha256": "09930045c59495753b598532840e9bd28ecb17be70cccb2c9395f5aa779369b5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt\n-->\n<template>\n\t<AsamCalendar ref=\"calendar\">\n\t\t<template #header=\"{ date }\">\n\t\t\t<span>自定义头部内容</span>\n\t\t\t<span>{{ date }}</span>\n\t\t\t<AsamButtonGroup>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('prev-year')\">\n\t\t\t\t\t上一年\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('prev-month')\">\n\t\t\t\t\t上个月\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('today')\"\n\t\t\t\t\t>今天</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('next-month')\">\n\t\t\t\t\t下个月\n\t\t\t\t</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"selectDate('next-year')\">\n\t\t\t\t\t下一年\n\t\t\t\t</AsamButton>\n\t\t\t</AsamButtonGroup>\n\t\t</template>\n\t</AsamCalendar>\n</template>\n\n<script setup>\nimport { AsamCalendar, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamCalendarofficialcalendarheaderExample' });\nimport { ref } from 'vue';\nconst calendar = ref();\nconst selectDate = (val) => {\n\tif (!calendar.value) return;\n\tcalendar.value.selectDate(val);\n};\n</script>\n",
									"originalSourceSha256": "3003ee224e6b23601cd0f0e46d157455e9567dde85fa7aeefa20b0308db3e735",
									"notice": {
										"id": "e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa",
										"url": "/licenses/source-notices/e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt",
										"licenseFilename": "LICENSE-e82c3874e42205f5e75cc0b4ad1bcbe77c3f2427a0813fa25541cd4e5201baaa.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/calendar/header.vue",
											"sourceSha256": "24aa5ce2811321873abe63cb76c69be9b737c1300f78269f049beb47433be2bb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "advanced-contract",
					"title": "本地化与高级配置的完整 SFC",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/advanced-contract/ts/Demo.vue",
									"sha256": "b31027bd1267674af3ef020b561af5ee9d042f695173ad39881533e2c8181c14",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamCalendar\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"changes++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；模型更新次数 {{ changes }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, watch, onUnmounted } from 'vue';\nimport { createCalendarDateLocaleSession } from './date-locale-session.js';\nimport { AsamCheckboxItem, AsamCalendar, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamCalendarProps } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\ndefineOptions({ name: 'AsamCalendarAdvancedContractExample' });\nconst chinese = ref(true);\n// Fixed Calendar reads the global week start once when its table is created.\nconst dateLocaleSession = createCalendarDateLocaleSession();\nwatch(chinese, (enabled) => dateLocaleSession.select(enabled ? 'zh-cn' : 'en'), {\n\timmediate: true,\n\tflush: 'sync'\n});\nonUnmounted(dateLocaleSession.release);\nconst changes = ref(0);\nconst value = ref<Date>(new Date(2026, 9, 4));\nconst configuration: AsamCalendarProps = {\n\tcontrollerType: 'select',\n\tformatter: (value, type) => value + (type === 'year' ? '年' : '月')\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.ts",
									"sourcePath": "apps/website/examples/AsamCalendar/advanced-contract/ts/locale.ts",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								},
								{
									"name": "date-locale-session.ts",
									"sourcePath": "apps/website/examples/AsamCalendar/advanced-contract/ts/date-locale-session.ts",
									"sha256": "19b2ae7006c9dbbf2272dec13536ac53b3f4d01fb0fc4ccacc0288abae3db17d",
									"source": "import dayjs from 'dayjs';\n\ninterface LocaleSelection {\n\tlocale: string;\n\torder: number;\n}\ninterface LocaleSession {\n\tbaseline: string;\n\tlastWritten: string;\n\tsequence: number;\n\tselections: Map<symbol, LocaleSelection>;\n}\ndeclare global {\n\t// Application example state is shared by TS/JS copies, keyed by the public Day.js object.\n\tvar asamCalendarAdvancedExampleLocalesV1: WeakMap<typeof dayjs, LocaleSession> | undefined;\n}\n\n/** Own only the example's global date-locale changes; no native instance or private API. */\nexport function createCalendarDateLocaleSession() {\n\tconst sessions = (globalThis.asamCalendarAdvancedExampleLocalesV1 ??= new WeakMap());\n\tlet session = sessions.get(dayjs);\n\tif (!session) {\n\t\tconst baseline = dayjs.locale();\n\t\tsession = { baseline, lastWritten: baseline, sequence: 0, selections: new Map() };\n\t\tsessions.set(dayjs, session);\n\t}\n\tconst state = session;\n\tconst token = Symbol('calendar-example');\n\tlet released = false;\n\tconst observeExternalLocale = () => {\n\t\tconst current = dayjs.locale();\n\t\tif (current !== state.lastWritten) state.baseline = current;\n\t};\n\tconst write = (locale: string) => {\n\t\tstate.lastWritten = dayjs.locale(locale);\n\t};\n\treturn {\n\t\tselect(locale: 'zh-cn' | 'en') {\n\t\t\tif (released) return;\n\t\t\tobserveExternalLocale();\n\t\t\tstate.selections.set(token, { locale, order: ++state.sequence });\n\t\t\twrite(locale);\n\t\t},\n\t\trelease() {\n\t\t\tif (released) return;\n\t\t\treleased = true;\n\t\t\tobserveExternalLocale();\n\t\t\tstate.selections.delete(token);\n\t\t\tconst remaining = [...state.selections.values()].sort((a, b) => b.order - a.order)[0];\n\t\t\twrite(remaining?.locale ?? state.baseline);\n\t\t\tif (!state.selections.size) sessions.delete(dayjs);\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCalendar/advanced-contract/js/Demo.vue",
									"sha256": "97d196ae619f7d77972727e8574f5886e8712dd76cc68f7d4e93ca3ff620686e",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamCalendar\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"changes++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；模型更新次数 {{ changes }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref, watch, onUnmounted } from 'vue';\nimport { createCalendarDateLocaleSession } from './date-locale-session.js';\nimport { AsamCheckboxItem, AsamCalendar, AsamConfigProvider } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\ndefineOptions({ name: 'AsamCalendarAdvancedContractExample' });\nconst chinese = ref(true);\n// Fixed Calendar reads the global week start once when its table is created.\nconst dateLocaleSession = createCalendarDateLocaleSession();\nwatch(chinese, (enabled) => dateLocaleSession.select(enabled ? 'zh-cn' : 'en'), {\n\timmediate: true,\n\tflush: 'sync'\n});\nonUnmounted(dateLocaleSession.release);\nconst changes = ref(0);\nconst value = ref(new Date(2026, 9, 4));\nconst configuration = {\n\tcontrollerType: 'select',\n\tformatter: (value, type) => value + (type === 'year' ? '年' : '月')\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.js",
									"sourcePath": "apps/website/examples/AsamCalendar/advanced-contract/js/locale.js",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								},
								{
									"name": "date-locale-session.js",
									"sourcePath": "apps/website/examples/AsamCalendar/advanced-contract/js/date-locale-session.js",
									"sha256": "114ce4c447232d7b1ef72a57b46ea6913569c80bcc1e797bc07aaef202c12c5e",
									"source": "import dayjs from 'dayjs';\n/** Own only the example's global date-locale changes; no native instance or private API. */\nexport function createCalendarDateLocaleSession() {\n\tconst sessions = (globalThis.asamCalendarAdvancedExampleLocalesV1 ??= new WeakMap());\n\tlet session = sessions.get(dayjs);\n\tif (!session) {\n\t\tconst baseline = dayjs.locale();\n\t\tsession = { baseline, lastWritten: baseline, sequence: 0, selections: new Map() };\n\t\tsessions.set(dayjs, session);\n\t}\n\tconst state = session;\n\tconst token = Symbol('calendar-example');\n\tlet released = false;\n\tconst observeExternalLocale = () => {\n\t\tconst current = dayjs.locale();\n\t\tif (current !== state.lastWritten) state.baseline = current;\n\t};\n\tconst write = (locale) => {\n\t\tstate.lastWritten = dayjs.locale(locale);\n\t};\n\treturn {\n\t\tselect(locale) {\n\t\t\tif (released) return;\n\t\t\tobserveExternalLocale();\n\t\t\tstate.selections.set(token, { locale, order: ++state.sequence });\n\t\t\twrite(locale);\n\t\t},\n\t\trelease() {\n\t\t\tif (released) return;\n\t\t\treleased = true;\n\t\t\tobserveExternalLocale();\n\t\t\tstate.selections.delete(token);\n\t\t\tconst remaining = [...state.selections.values()].sort((a, b) => b.order - a.order)[0];\n\t\t\twrite(remaining?.locale ?? state.baseline);\n\t\t\tif (!state.selections.size) sessions.delete(dayjs);\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCarousel",
			"documentation": "/component-AsamCarousel.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/basic/ts/Demo.vue",
									"sha256": "fc6243bac52e2e5dfc2c4e23ba16d0a4adae26d8a3c78efb7380f20408d4f0c1",
									"source": "<template>\n\t<AsamCarousel\n\t\tv-bind=\"{ height: '180px', autoplay: false, trigger: 'click', arrow: 'always' }\"\n\t\t@change=\"index = $event\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 3\" :key=\"item\" :name=\"String(item)\">\n\t\t\t<div class=\"slide\">本地内容 {{ item }}</div>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n\t<p class=\"example-paragraph\" role=\"status\">当前索引：{{ index }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\nconst index = ref(0);\n</script>\n\n<style scoped>\n.slide {\n\theight: 100%;\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/basic/js/Demo.vue",
									"sha256": "3ae3f27512e97cc5941417db9118ad55ee95ee8a4ba70d548ed92dfb3e11b1f9",
									"source": "<template>\n\t<AsamCarousel\n\t\tv-bind=\"{ height: '180px', autoplay: false, trigger: 'click', arrow: 'always' }\"\n\t\t@change=\"index = $event\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 3\" :key=\"item\" :name=\"String(item)\">\n\t\t\t<div class=\"slide\">本地内容 {{ item }}</div>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n\t<p class=\"example-paragraph\" role=\"status\">当前索引：{{ index }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\nconst index = ref(0);\n</script>\n\n<style scoped>\n.slide {\n\theight: 100%;\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-basic/ts/Demo.vue",
									"sha256": "c549cf1af557dc6a8222add82f7fb89d8eda05a0a17cc879f38089ebb193b38b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt\n-->\n<template>\n\t<div class=\"block text-center\">\n\t\t<span class=\"demonstration\"> 悬停指示器切换（默认） </span>\n\t\t<AsamCarousel height=\"150px\">\n\t\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">{{ item }}</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n\t<div class=\"block text-center ui032-mt-4\">\n\t\t<span class=\"demonstration\">点击指示器切换</span>\n\t\t<AsamCarousel trigger=\"click\" height=\"150px\">\n\t\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">{{ item }}</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapBasicDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demonstration {\n\tcolor: var(--el-text-color-secondary);\n}\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 150px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-mt-4 {\n\tmargin-top: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "df93ac58ced1e10c5f58c27c1152bf4334bc4ff9fb0ad54e5e0b4e2a534e1837",
									"notice": {
										"id": "ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd",
										"url": "/licenses/source-notices/ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt",
										"licenseFilename": "LICENSE-ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/basic.vue",
											"sourceSha256": "9897a230ce857d959d79a753be08e9a43de6ffb9ca4a0d50dc78b31df59ce467",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-basic/js/Demo.vue",
									"sha256": "29170aafb6e3104a8ec06cbb7a5639ee983e28d41588a1ebfd4f7956d598dd59",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt\n-->\n<template>\n\t<div class=\"block text-center\">\n\t\t<span class=\"demonstration\"> 悬停指示器切换（默认） </span>\n\t\t<AsamCarousel height=\"150px\">\n\t\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">{{ item }}</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n\t<div class=\"block text-center ui032-mt-4\">\n\t\t<span class=\"demonstration\">点击指示器切换</span>\n\t\t<AsamCarousel trigger=\"click\" height=\"150px\">\n\t\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">{{ item }}</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapBasicDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demonstration {\n\tcolor: var(--el-text-color-secondary);\n}\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 150px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-mt-4 {\n\tmargin-top: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "46a0c5731b497818979fc1de7c4bc66141b2b797acbf6f435b169e4cb88fcda7",
									"notice": {
										"id": "ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd",
										"url": "/licenses/source-notices/ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt",
										"licenseFilename": "LICENSE-ebf45f937e51566610a5069d57a65ae3c4f470ed636a2e82048447350a7d27fd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/basic.vue",
											"sourceSha256": "9897a230ce857d959d79a753be08e9a43de6ffb9ca4a0d50dc78b31df59ce467",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-motion-blur",
					"title": "动态模糊 2.6.0",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-motion-blur/ts/Demo.vue",
									"sha256": "9e208a08f1310206ad54efbfda10d54d5a6142c5e55ff861dd4e99810511b904",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt\n-->\n<template>\n\t<div class=\"block text-center\">\n\t\t<span class=\"demonstration\">切换时模糊效果（默认）</span>\n\t\t<AsamCarousel height=\"200px\" motion-blur>\n\t\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">{{ item }}</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n\t<p class=\"text-center demonstration example-paragraph\">垂直效果</p>\n\t<!-- prettier-ignore -->\n\t<AsamCarousel\n\t\theight=\"200px\"\n\t\tdirection=\"vertical\"\n\t\tmotion-blur\n\t\t:autoplay=\"false\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapMotionBlurDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demonstration {\n\tcolor: var(--el-text-color-secondary);\n}\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 200px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "b6f1281d6c7c81cf2fbd3ab19e24f938f372903181f4d1a3039b9d2c4c4a206f",
									"notice": {
										"id": "c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d",
										"url": "/licenses/source-notices/c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt",
										"licenseFilename": "LICENSE-c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/motion-blur.vue",
											"sourceSha256": "007373d2c18b76df02e2b2610f8a78656e7a44b1bcccb7528093b4ff65d98a17",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-motion-blur/js/Demo.vue",
									"sha256": "ebf569687b1a5a7b61fc945b100a63b3f67c8040b632dd27493ea41955275da3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt\n-->\n<template>\n\t<div class=\"block text-center\">\n\t\t<span class=\"demonstration\">切换时模糊效果（默认）</span>\n\t\t<AsamCarousel height=\"200px\" motion-blur>\n\t\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">{{ item }}</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n\t<p class=\"text-center demonstration example-paragraph\">垂直效果</p>\n\t<!-- prettier-ignore -->\n\t<AsamCarousel\n\t\theight=\"200px\"\n\t\tdirection=\"vertical\"\n\t\tmotion-blur\n\t\t:autoplay=\"false\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapMotionBlurDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demonstration {\n\tcolor: var(--el-text-color-secondary);\n}\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 200px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "29c8567e2231b7cbc89cebd82e36752732997f9283ceae6b89ee1f0a0eda80a6",
									"notice": {
										"id": "c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d",
										"url": "/licenses/source-notices/c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt",
										"licenseFilename": "LICENSE-c5432e46342743068bcae000f197f962376ef0defda63dc97ce9ac80c8d7311d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/motion-blur.vue",
											"sourceSha256": "007373d2c18b76df02e2b2610f8a78656e7a44b1bcccb7528093b4ff65d98a17",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-indicator",
					"title": "指示器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-indicator/ts/Demo.vue",
									"sha256": "0f0f146a87a256807a6d984b31c5c799d7272f425702492e42b2d8d743339be9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt\n-->\n<template>\n\t<AsamCarousel indicator-position=\"outside\">\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapIndicatorDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tdisplay: flex;\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 300px;\n\tmargin: 0;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "cb3226a1dfca005b221bcb6e5c0299566210f35da9bcea55245a6089f7f11068",
									"notice": {
										"id": "0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7",
										"url": "/licenses/source-notices/0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt",
										"licenseFilename": "LICENSE-0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/indicator.vue",
											"sourceSha256": "0544f9ab5e9af74a56c12ccfa9d5ea6ad9ae722e7c687464d1f64e50401e0255",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-indicator/js/Demo.vue",
									"sha256": "71fc376c849b8c234884b9d26381946fa5a611b7b30e22733e1928e51aad4e44",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt\n-->\n<template>\n\t<AsamCarousel indicator-position=\"outside\">\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapIndicatorDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tdisplay: flex;\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 300px;\n\tmargin: 0;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "4ad79704a8d2fa81ebea69066f0e0fcb8f74ee7e1a9bedfaa00e7f9d9145c05a",
									"notice": {
										"id": "0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7",
										"url": "/licenses/source-notices/0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt",
										"licenseFilename": "LICENSE-0329db13270f78ef5e9dfca93098e73e52f20e2f1db1437bd2289a5170841ac7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/indicator.vue",
											"sourceSha256": "0544f9ab5e9af74a56c12ccfa9d5ea6ad9ae722e7c687464d1f64e50401e0255",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-arrows",
					"title": "切换箭头",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-arrows/ts/Demo.vue",
									"sha256": "03039ceaaa2c4b29a85ba6a841e8d7ae2e18569f14d6db79d42b872e68fee75f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt\n-->\n<template>\n\t<AsamCarousel :interval=\"5000\" arrow=\"always\">\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapArrowsDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 300px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "bcab8df6b08cfe1e9bec415f4d6e135eb63f957702b29ab04f2d055ec2c1723f",
									"notice": {
										"id": "8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1",
										"url": "/licenses/source-notices/8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt",
										"licenseFilename": "LICENSE-8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/arrows.vue",
											"sourceSha256": "2b9d893d5b679af761b910259d66eba8c1ede7eb3b3bf2404d35abda7df9cf9b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-arrows/js/Demo.vue",
									"sha256": "2b0bfe760a7adc6f8345d42b68c87e17268deb2ddab78365c4da75a721b02fff",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt\n-->\n<template>\n\t<AsamCarousel :interval=\"5000\" arrow=\"always\">\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapArrowsDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 300px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "83d0433275a27f1115152be8d3f1ea8a58c730703a21881138929f47172b19b6",
									"notice": {
										"id": "8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1",
										"url": "/licenses/source-notices/8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt",
										"licenseFilename": "LICENSE-8432179338c59459797aebddb65f8827ef860daff24ed61da64028d41c507af1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/arrows.vue",
											"sourceSha256": "2b9d893d5b679af761b910259d66eba8c1ede7eb3b3bf2404d35abda7df9cf9b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-auto-height",
					"title": "自动高度",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-auto-height/ts/Demo.vue",
									"sha256": "8658f20e1a79257a150890c23ccc43c8a415e669b5ada57498375ec178ca5ccb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt\n-->\n<template>\n\t<div class=\"block text-center\" style=\"height: 300px\">\n\t\t<span class=\"demonstration\">每个轮播项具有不同高度</span>\n\t\t<AsamCarousel height=\"auto\" autoplay>\n\t\t\t<AsamCarouselItem style=\"height: 100px\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">高度 100px</h3>\n\t\t\t</AsamCarouselItem>\n\t\t\t<AsamCarouselItem style=\"height: 200px\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">高度 200px</h3>\n\t\t\t</AsamCarouselItem>\n\t\t\t<AsamCarouselItem style=\"height: 300px\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">高度 300px</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapAutoHeightDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.carousel-item {\n\tcolor: #475669;\n\topacity: 0.75;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 0;\n\ttext-align: center;\n\theight: 100%;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n</style>\n",
									"originalSourceSha256": "da760a7dbd6677f217095e88ddaf8353db108f6eb0277c75aa13afd79db62220",
									"notice": {
										"id": "559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4",
										"url": "/licenses/source-notices/559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt",
										"licenseFilename": "LICENSE-559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/auto-height.vue",
											"sourceSha256": "14fba0f7aedae86a1b9f8b9259107c80f049a757d02dbee02f17dd6fa9af7718",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-auto-height/js/Demo.vue",
									"sha256": "cf4d73743a518e4e18a6b74871755ef90dfe60622ba7c26777bd44d2e5df6c8e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt\n-->\n<template>\n\t<div class=\"block text-center\" style=\"height: 300px\">\n\t\t<span class=\"demonstration\">每个轮播项具有不同高度</span>\n\t\t<AsamCarousel height=\"auto\" autoplay>\n\t\t\t<AsamCarouselItem style=\"height: 100px\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">高度 100px</h3>\n\t\t\t</AsamCarouselItem>\n\t\t\t<AsamCarouselItem style=\"height: 200px\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">高度 200px</h3>\n\t\t\t</AsamCarouselItem>\n\t\t\t<AsamCarouselItem style=\"height: 300px\">\n\t\t\t\t<h3 class=\"small justify-center ui032-text-2xl\">高度 300px</h3>\n\t\t\t</AsamCarouselItem>\n\t\t</AsamCarousel>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapAutoHeightDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.carousel-item {\n\tcolor: #475669;\n\topacity: 0.75;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 0;\n\ttext-align: center;\n\theight: 100%;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n</style>\n",
									"originalSourceSha256": "b20207da4cb74a47c1b184c9fa0523c2c30aec8b1d4dcdfb1d0fe034a16c1047",
									"notice": {
										"id": "559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4",
										"url": "/licenses/source-notices/559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt",
										"licenseFilename": "LICENSE-559bda7d4a50f97a71182a6ebe8e8e2b223fb9a88584e4666ad4658a48bfdaa4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/auto-height.vue",
											"sourceSha256": "14fba0f7aedae86a1b9f8b9259107c80f049a757d02dbee02f17dd6fa9af7718",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-card",
					"title": "卡片模式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-card/ts/Demo.vue",
									"sha256": "e8744467278190c6bffdf061be73fcf028df88bacfd785aff28f3271869e5432",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt\n-->\n<template>\n\t<AsamCarousel :interval=\"4000\" type=\"card\" height=\"200px\">\n\t\t<AsamCarouselItem v-for=\"item in 6\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapCardDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 200px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "c326dc0f95bd2a52358fe169c786946f125d4323513b5c1a587dd74a53c452fe",
									"notice": {
										"id": "bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016",
										"url": "/licenses/source-notices/bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt",
										"licenseFilename": "LICENSE-bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/card.vue",
											"sourceSha256": "13d506970e02422197cd864adff6878bb9c655c3abeeff8e2cad28e4d4c61f5b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-card/js/Demo.vue",
									"sha256": "3911299ae38f4efc795564a738b0491d1f9ac91bfd8e93891586524c8c3de4c0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt\n-->\n<template>\n\t<AsamCarousel :interval=\"4000\" type=\"card\" height=\"200px\">\n\t\t<AsamCarouselItem v-for=\"item in 6\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapCardDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 200px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "0707afa0efb0befb25ef138b03b02db50bbccd0fa246d71ca10c36c72d14ea13",
									"notice": {
										"id": "bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016",
										"url": "/licenses/source-notices/bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt",
										"licenseFilename": "LICENSE-bd4b81af21642608971a1a7418e6bd9ef75b2a58984246bf1a57f6b2d9beb016.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/card.vue",
											"sourceSha256": "13d506970e02422197cd864adff6878bb9c655c3abeeff8e2cad28e4d4c61f5b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical",
					"title": "垂直布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-vertical/ts/Demo.vue",
									"sha256": "bc85540112e8d6ee9bccfbcb3aa71d688c5849f940c9fa1ca7bb7c69cdeb2de5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt\n-->\n<template>\n\t<p class=\"text-center demonstration example-paragraph\">普通垂直布局</p>\n\t<AsamCarousel height=\"200px\" direction=\"vertical\" :autoplay=\"false\">\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n\t<p class=\"text-center demonstration example-paragraph\">卡片垂直布局</p>\n\t<!-- prettier-ignore -->\n\t<AsamCarousel\n\t\theight=\"400px\"\n\t\tdirection=\"vertical\"\n\t\ttype=\"card\"\n\t\t:autoplay=\"false\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselCapVerticalDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 200px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "729f08b0fc2189ae452f6380ab08da1bea87032ab5431de3931b6b97d43e90b0",
									"notice": {
										"id": "6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9",
										"url": "/licenses/source-notices/6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt",
										"licenseFilename": "LICENSE-6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/vertical.vue",
											"sourceSha256": "09f128f57006d303c56fdb3bdd96599d6098a7eca9acce74130ff69286593132",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarousel/cap-vertical/js/Demo.vue",
									"sha256": "1e1864817167b1732d78f0ac36e4cf8856f3c3b2c68983f8dd868d4526ddd062",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt\n-->\n<template>\n\t<p class=\"text-center demonstration example-paragraph\">普通垂直布局</p>\n\t<AsamCarousel height=\"200px\" direction=\"vertical\" :autoplay=\"false\">\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n\t<p class=\"text-center demonstration example-paragraph\">卡片垂直布局</p>\n\t<!-- prettier-ignore -->\n\t<AsamCarousel\n\t\theight=\"400px\"\n\t\tdirection=\"vertical\"\n\t\ttype=\"card\"\n\t\t:autoplay=\"false\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 4\" :key=\"item\">\n\t\t\t<h3 class=\"ui032-text-2xl ui032-justify-center\">{{ item }}</h3>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselCapVerticalDemo' });\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-carousel__item h3 {\n\tcolor: #475669;\n\topacity: 0.75;\n\tline-height: 200px;\n\tmargin: 0;\n\ttext-align: center;\n}\n\n.el-carousel__item:nth-child(2n) {\n\tbackground-color: #99a9bf;\n}\n\n.el-carousel__item:nth-child(2n + 1) {\n\tbackground-color: #d3dce6;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n</style>\n\n<style scoped>\n.ui032-text-2xl {\n\tfont-size: 1.5rem;\n}\n\n.ui032-justify-center {\n\tjustify-content: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "9d4a3ed4c7148d77b87ba9a46bd519a3b0dee75ae134c0210769d35c8167e231",
									"notice": {
										"id": "6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9",
										"url": "/licenses/source-notices/6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt",
										"licenseFilename": "LICENSE-6b99511962a5f6acd0bc4c155f2dfb5f00f2cf3edcce72c94e4d19bfbd5654a9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/carousel/vertical.vue",
											"sourceSha256": "09f128f57006d303c56fdb3bdd96599d6098a7eca9acce74130ff69286593132",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCarouselItem",
			"documentation": "/component-AsamCarouselItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarouselItem/basic/ts/Demo.vue",
									"sha256": "7cae65ab9f29223e4a19204bdbee9484c7d809911ab130f06f74cf602e79ee49",
									"source": "<template>\n\t<AsamCarousel\n\t\tv-bind=\"{ height: '180px', autoplay: false, trigger: 'click', arrow: 'always' }\"\n\t\t@change=\"index = $event\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 3\" :key=\"item\" :name=\"String(item)\">\n\t\t\t<div class=\"slide\">本地内容 {{ item }}</div>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n\t<p class=\"example-paragraph\" role=\"status\">当前索引：{{ index }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCarouselItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\nconst index = ref(0);\n</script>\n\n<style scoped>\n.slide {\n\theight: 100%;\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCarouselItem/basic/js/Demo.vue",
									"sha256": "a74535443c2ddd48acea8e7c48aeadd9e112e55e7dcc7cb7d8abb63097b3e749",
									"source": "<template>\n\t<AsamCarousel\n\t\tv-bind=\"{ height: '180px', autoplay: false, trigger: 'click', arrow: 'always' }\"\n\t\t@change=\"index = $event\"\n\t>\n\t\t<AsamCarouselItem v-for=\"item in 3\" :key=\"item\" :name=\"String(item)\">\n\t\t\t<div class=\"slide\">本地内容 {{ item }}</div>\n\t\t</AsamCarouselItem>\n\t</AsamCarousel>\n\t<p class=\"example-paragraph\" role=\"status\">当前索引：{{ index }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCarouselItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';\nconst index = ref(0);\n</script>\n\n<style scoped>\n.slide {\n\theight: 100%;\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCheckTag",
			"documentation": "/component-AsamCheckTag.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckTag/basic/ts/Demo.vue",
									"sha256": "60e776ecd84edc69c73c3fcd26479dcd479fc6b66470d5d2e57e46747779d4fd",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamCheckTag v-model:checked=\"checked\">仅看草稿</AsamCheckTag>\n\t\t<AsamCheckTag checked disabled>固定标签</AsamCheckTag>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ checked ? '已选草稿' : '未选择草稿' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckTagBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckTag } from '@asam-ui/ui';\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckTag/basic/js/Demo.vue",
									"sha256": "2c7aeee42681dcaab314a51d289ba3d69cf7a52589b038fa1c8bc212d9117a19",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamCheckTag v-model:checked=\"checked\">仅看草稿</AsamCheckTag>\n\t\t<AsamCheckTag checked disabled>固定标签</AsamCheckTag>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ checked ? '已选草稿' : '未选择草稿' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckTagBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckTag } from '@asam-ui/ui';\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCol",
			"documentation": "/component-AsamCol.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/basic/ts/Demo.vue",
									"sha256": "9da70baaa6c46b3974ae61dd1fd3f6d8e31bc76143009ac8fc8c23eba87bb1ca",
									"source": "<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">窄屏整行，宽屏半行</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">响应式第二列</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColBasicDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/basic/js/Demo.vue",
									"sha256": "caa29718a289a52b76bcff029d8bda155a72599f29e910e2c10244da9dc3aae7",
									"source": "<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">窄屏整行，宽屏半行</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">响应式第二列</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColBasicDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-layout",
					"title": "基础布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-basic-layout/ts/Demo.vue",
									"sha256": "6013a93126f193af53a1086af577edadba6986dd75ce9c8b8ff2469cc18b0964",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt\n-->\n<template>\n\t<AsamRow>\n\t\t<AsamCol :span=\"24\">\n\t\t\t<div class=\"grid-content ep-bg-purple-dark\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"12\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"12\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColCapBasicLayoutDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "c9b2397c9aec7a29389768390fce55d3e93e1900584f7b838a8c2660ce2a7b48",
									"notice": {
										"id": "8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c",
										"url": "/licenses/source-notices/8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt",
										"licenseFilename": "LICENSE-8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/basic-layout.vue",
											"sourceSha256": "27925019930db82517a1035eeba96d9c92f1da570dcb84ffb61daa1d33d23453",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-basic-layout/js/Demo.vue",
									"sha256": "004b07367d07a8dd65003a0a9ab5e7ade4d79725cfde0eeae1ee1e985601710d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt\n-->\n<template>\n\t<AsamRow>\n\t\t<AsamCol :span=\"24\">\n\t\t\t<div class=\"grid-content ep-bg-purple-dark\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"12\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"12\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"8\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"4\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColCapBasicLayoutDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "6cd76db167f04a618a8f173c66770033a36062a4d455f0e64492aefc7472f266",
									"notice": {
										"id": "8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c",
										"url": "/licenses/source-notices/8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt",
										"licenseFilename": "LICENSE-8a3587a19867bdce43ee85c9ab5e0a7b5aab7dea76c5f79139977b84b5f9bf6c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/basic-layout.vue",
											"sourceSha256": "27925019930db82517a1035eeba96d9c92f1da570dcb84ffb61daa1d33d23453",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-column-spacing",
					"title": "分栏间隔",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-column-spacing/ts/Demo.vue",
									"sha256": "18137185055e6e999a3486b0b29b33bddde1a66a51788ff3c9f29604db011494",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt\n-->\n<template>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColCapColumnSpacingDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "d249636d2dadf8a4bf2387f1e4bb2f76c9c1b296b63059e79dca9161761c9c34",
									"notice": {
										"id": "91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0",
										"url": "/licenses/source-notices/91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt",
										"licenseFilename": "LICENSE-91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/column-spacing.vue",
											"sourceSha256": "fbfad542b407e683e36ff194d8f82a64ff94ed14945745ec023888f3d5996b91",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-column-spacing/js/Demo.vue",
									"sha256": "dab79bbec569d43137203df7b5ccb6cc1c8ec2c500176e70bdb148b57274705e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt\n-->\n<template>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColCapColumnSpacingDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "42b336da78abb0a6e574c42b1602dc138a6ba81609b185e4a72232f1a46800bd",
									"notice": {
										"id": "91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0",
										"url": "/licenses/source-notices/91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt",
										"licenseFilename": "LICENSE-91ee12432351934278bfd1fde0237e3f6009620d88c114785bbeb5bdafddd9f0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/column-spacing.vue",
											"sourceSha256": "fbfad542b407e683e36ff194d8f82a64ff94ed14945745ec023888f3d5996b91",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-hybrid-layout",
					"title": "混合布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-hybrid-layout/ts/Demo.vue",
									"sha256": "3330f4d86739325b9b6c05023b8c7cfc55242e9bdee8dde8692a5d012eaa11f3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt\n-->\n<template>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"16\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"8\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"8\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"8\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"16\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColCapHybridLayoutDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "7361c7d13eb450ba0ed84e29de71ebded7a74d8eddf58cb9cc21fb07d3f639d1",
									"notice": {
										"id": "7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f",
										"url": "/licenses/source-notices/7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt",
										"licenseFilename": "LICENSE-7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/hybrid-layout.vue",
											"sourceSha256": "52b7187ce204fc7f81c60cc40afd31fb74a78934e885f627ef8c87c49f4c4b83",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-hybrid-layout/js/Demo.vue",
									"sha256": "90c83f2e679b78a9b1af04aabe8481c96a4b62e1a92184fe2257b1dac04d62c2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt\n-->\n<template>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"16\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"8\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"8\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"8\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"16\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"4\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColCapHybridLayoutDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "c3fb73456178cc68392f1e9cae9999ed496b1b7467b4202b45fe1901212690de",
									"notice": {
										"id": "7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f",
										"url": "/licenses/source-notices/7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt",
										"licenseFilename": "LICENSE-7fabf0706c4ac49f3e21398859f541e9c87e2d879d0e28bed0ac7f2573913d2f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/hybrid-layout.vue",
											"sourceSha256": "52b7187ce204fc7f81c60cc40afd31fb74a78934e885f627ef8c87c49f4c4b83",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-column-offset",
					"title": "列偏移",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-column-offset/ts/Demo.vue",
									"sha256": "3c36d82b14f4d96a24baba3da1110c5aed14a848e23d635a06c8fdeb3cc29a67",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt\n-->\n<template>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"6\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"12\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColCapColumnOffsetDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "a0f9e29f3094885e14884f22607e937c882b408ec6dddbc9d5b6ff5988563c6d",
									"notice": {
										"id": "54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05",
										"url": "/licenses/source-notices/54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt",
										"licenseFilename": "LICENSE-54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/column-offset.vue",
											"sourceSha256": "99c4d88793cd9ad54d9fb6db65cbfdbeca303ad95e2dfc350d60f4d5e53dec8e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-column-offset/js/Demo.vue",
									"sha256": "434e1c95842610669bb92a928ef2c6dafc3858e926d3e1e39531e36d36bcb973",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt\n-->\n<template>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"6\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"6\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n\t<AsamRow :gutter=\"20\">\n\t\t<AsamCol :span=\"12\" :offset=\"6\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColCapColumnOffsetDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "67960ce1e29f0dadf04a0ba0cf1cf848f668d11a3d6374a807163e719cfcd019",
									"notice": {
										"id": "54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05",
										"url": "/licenses/source-notices/54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt",
										"licenseFilename": "LICENSE-54ecabd6f8f2df8b0e43677e255d0cfb409610bb46c573a152c5dc5ea2642e05.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/column-offset.vue",
											"sourceSha256": "99c4d88793cd9ad54d9fb6db65cbfdbeca303ad95e2dfc350d60f4d5e53dec8e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-alignment",
					"title": "对齐方式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-alignment/ts/Demo.vue",
									"sha256": "26aaaf82698b6e7a15d06fb3c0c5b51eedc4e371aa979dac427cb2c3527eebfa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt\n-->\n<template>\n\t<AsamRow class=\"row-bg\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"center\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"end\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"space-between\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"space-around\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"space-evenly\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColCapAlignmentDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "9cb2d36c9c26f57fd782cd17ac934b14a0667a94ad15bbcf00cd4bd703ede252",
									"notice": {
										"id": "d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b",
										"url": "/licenses/source-notices/d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt",
										"licenseFilename": "LICENSE-d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/alignment.vue",
											"sourceSha256": "aae78c6d0df0b98357e6c03f1374cf735e434538c11bb6250405668f9f598a36",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-alignment/js/Demo.vue",
									"sha256": "f0d8d444f2b7cbc13b0c89ad0613e2b69952f67bd242be6509c5488bbfd8c499",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt\n-->\n<template>\n\t<AsamRow class=\"row-bg\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"center\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"end\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"space-between\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"space-around\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n\t<AsamRow class=\"row-bg\" justify=\"space-evenly\">\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple-light\" /></AsamCol>\n\t\t<AsamCol :span=\"6\"><div class=\"grid-content ep-bg-purple\" /></AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColCapAlignmentDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-row {\n\tmargin-bottom: 20px;\n}\n\n.el-row:last-child {\n\tmargin-bottom: 0;\n}\n\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "5063646f3a8f42eb766c227337c6db6a47f7b1e3a2001bd0b8949e15af5ceb91",
									"notice": {
										"id": "d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b",
										"url": "/licenses/source-notices/d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt",
										"licenseFilename": "LICENSE-d1162ccba3a9896f4757b1780bdc129659a88d93605c1a7753fbbae8f8c4bd2b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/alignment.vue",
											"sourceSha256": "aae78c6d0df0b98357e6c03f1374cf735e434538c11bb6250405668f9f598a36",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-responsive-layout",
					"title": "响应式布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-responsive-layout/ts/Demo.vue",
									"sha256": "4b4cdcbb1890cef7d6ba484edc8a38f534a69b1dfb68db10a4e1d6782c90bd4c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt\n-->\n<template>\n\t<AsamRow :gutter=\"10\">\n\t\t<AsamCol :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColCapResponsiveLayoutDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "a4cd59d067d316be2f3dfba54bbcfb84e0a709ac89275a5465cc8905bb8715cc",
									"notice": {
										"id": "14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3",
										"url": "/licenses/source-notices/14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt",
										"licenseFilename": "LICENSE-14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/responsive-layout.vue",
											"sourceSha256": "415092e7ba674163408562b2694d9137e646a0da3d6c95b6bae8b2c837d06f34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCol/cap-responsive-layout/js/Demo.vue",
									"sha256": "c9f92983d372f28c079031949c40205ba34e163c052f72e378c0e521fd7863e8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt\n-->\n<template>\n\t<AsamRow :gutter=\"10\">\n\t\t<AsamCol :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\">\n\t\t\t<div class=\"grid-content ep-bg-purple\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\">\n\t\t\t<div class=\"grid-content ep-bg-purple-light\" />\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColCapResponsiveLayoutDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-col {\n\tborder-radius: 4px;\n}\n\n.grid-content {\n\tborder-radius: 4px;\n\tmin-height: 36px;\n}\n</style>\n",
									"originalSourceSha256": "ff8f2d61aaa48523579c8d2c43c8f61142ec0bd1e505395924e6e8e6d28fd7cd",
									"notice": {
										"id": "14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3",
										"url": "/licenses/source-notices/14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt",
										"licenseFilename": "LICENSE-14a5cb72088bc1918bc5674660b5354067565876f10515f278ff566f074172b3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/layout/responsive-layout.vue",
											"sourceSha256": "415092e7ba674163408562b2694d9137e646a0da3d6c95b6bae8b2c837d06f34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCollapse",
			"documentation": "/component-AsamCollapse.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/basic/ts/Demo.vue",
									"sha256": "78d97a109fcd4a751c6410c193f7395ee91dc8aa01de7ef4e8ecf1d580bad2f5",
									"source": "<template>\n\t<AsamCollapse\n\t\t:model-value=\"active\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\tactive = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamCollapseItem title=\"基础说明\" name=\"intro\">\n\t\t\t<p class=\"example-paragraph\">本地说明内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem name=\"detail\">\n\t\t\t<template #title>补充说明</template>\n\t\t\t<p class=\"example-paragraph\">可展开的补充内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem title=\"禁用项\" name=\"locked\" disabled />\n\t</AsamCollapse>\n\t<p class=\"example-paragraph\" role=\"status\">展开项：{{ active.join(', ') }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nconst active = ref<string[]>(['intro']);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/basic/js/Demo.vue",
									"sha256": "4b87f4e35ee6a6ba54b818d9a36b44d2f9a51a320f862ae6bcc30b1347a848d9",
									"source": "<template>\n\t<AsamCollapse\n\t\t:model-value=\"active\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\tactive = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamCollapseItem title=\"基础说明\" name=\"intro\">\n\t\t\t<p class=\"example-paragraph\">本地说明内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem name=\"detail\">\n\t\t\t<template #title>补充说明</template>\n\t\t\t<p class=\"example-paragraph\">可展开的补充内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem title=\"禁用项\" name=\"locked\" disabled />\n\t</AsamCollapse>\n\t<p class=\"example-paragraph\" role=\"status\">展开项：{{ active.join(', ') }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nconst active = ref(['intro']);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-basic/ts/Demo.vue",
									"sha256": "298211cc7c1893f277e88d63ceb1186e27fa56dc1d0069c8cf9056d99165b783",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeNames\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\t\tactiveNames = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t\t@change=\"handleChange\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseCapBasicDemo' });\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamCollapseModelValue } from '@asam-ui/ui';\n\nconst activeNames = ref(['1']);\nconst handleChange = (val: AsamCollapseModelValue) => {\n\tconsole.log(val);\n};\n</script>\n",
									"originalSourceSha256": "29b1bf8219afe0e37eec822af74dce7234770f15dca3f5d8803a279ff8625268",
									"notice": {
										"id": "e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592",
										"url": "/licenses/source-notices/e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt",
										"licenseFilename": "LICENSE-e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/basic.vue",
											"sourceSha256": "934e10ac5563b49404f5bac3ea1f1a647f2ce2ccb8dd89f8f0a9f33f032e1a39",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-basic/js/Demo.vue",
									"sha256": "2113d64bc2954997e28e4e618de071b423cbc8c2851c3963f4d014120b385e2f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeNames\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\t\tactiveNames = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t\t@change=\"handleChange\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseCapBasicDemo' });\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activeNames = ref(['1']);\nconst handleChange = (val) => {\n\tconsole.log(val);\n};\n</script>\n",
									"originalSourceSha256": "4eef50b3f529086478f4627d8cfffbe86691fc679ecbdcb8870b09414961ae7f",
									"notice": {
										"id": "e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592",
										"url": "/licenses/source-notices/e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt",
										"licenseFilename": "LICENSE-e0d5f646e024a66a00fdb8fb7143fdb377759022f2246a7028fd05cea6951592.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/basic.vue",
											"sourceSha256": "934e10ac5563b49404f5bac3ea1f1a647f2ce2ccb8dd89f8f0a9f33f032e1a39",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-accordion",
					"title": "手风琴效果",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-accordion/ts/Demo.vue",
									"sha256": "f97136bcf2ce5ac4e05b0672ddde5f7664f2517ec78c52101a4e16b51487bc6d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeName\"\n\t\t\taccordion\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'string') activeName = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseCapAccordionDemo' });\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst activeName = ref('1');\n</script>\n",
									"originalSourceSha256": "688090e1196d623342342b76238fec97e54b3e8138686d1306e2513a910adfc0",
									"notice": {
										"id": "8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5",
										"url": "/licenses/source-notices/8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt",
										"licenseFilename": "LICENSE-8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/accordion.vue",
											"sourceSha256": "25cb2bca869a0457cffb20255c6b8cb951787225afc84d2bb02335730d2749a5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-accordion/js/Demo.vue",
									"sha256": "446c405811c22bfda5f18260b811a7bb82c8c97bd623e3dd79483ec4f9021de5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeName\"\n\t\t\taccordion\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'string') activeName = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseCapAccordionDemo' });\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activeName = ref('1');\n</script>\n",
									"originalSourceSha256": "084e64fd982476b84d5b66da0dd13eeb04ab5546fd57d5a7a6e79dbdbf70f0c2",
									"notice": {
										"id": "8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5",
										"url": "/licenses/source-notices/8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt",
										"licenseFilename": "LICENSE-8a68258179de3c0500d10e7b0edb59591a3d52e8c9b90b77087856423be527d5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/accordion.vue",
											"sourceSha256": "25cb2bca869a0457cffb20255c6b8cb951787225afc84d2bb02335730d2749a5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customization",
					"title": "个性化",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-customization/ts/Demo.vue",
									"sha256": "c11d1beb16aa06e71c9f577472a17224221358366869c8d2b983e51721da9fd7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse accordion>\n\t\t\t<AsamCollapseItem name=\"1\">\n\t\t\t\t<template #title=\"{ isActive }\">\n\t\t\t\t\t<div :class=\"['title-wrapper', { 'is-active': isActive }]\">\n\t\t\t\t\t\t一致性\n\t\t\t\t\t\t<AsamIcon class=\"header-icon\">\n\t\t\t\t\t\t\t<info-filled />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseCapCustomizationDemo' });\nimport { AsamCollapse, AsamCollapseItem, AsamIcon } from '@asam-ui/ui';\n\nimport { InfoFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.title-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n}\n\n.title-wrapper.is-active {\n\tcolor: var(--el-color-primary);\n}\n</style>\n",
									"originalSourceSha256": "c84b6f89f8638590dff5a2c6836c6a7c0813067931e27b5673159eb5ee775165",
									"notice": {
										"id": "711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0",
										"url": "/licenses/source-notices/711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt",
										"licenseFilename": "LICENSE-711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/customization.vue",
											"sourceSha256": "5f4100a4c3423baf2f83ce2366ca83d3f3002f611c1a8f4b0a9381401b93e045",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-customization/js/Demo.vue",
									"sha256": "4ca2a593fb1020369c37148d08ee822e291da780e2e7c10da27f7bed761529be",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse accordion>\n\t\t\t<AsamCollapseItem name=\"1\">\n\t\t\t\t<template #title=\"{ isActive }\">\n\t\t\t\t\t<div :class=\"['title-wrapper', { 'is-active': isActive }]\">\n\t\t\t\t\t\t一致性\n\t\t\t\t\t\t<AsamIcon class=\"header-icon\">\n\t\t\t\t\t\t\t<info-filled />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseCapCustomizationDemo' });\nimport { AsamCollapse, AsamCollapseItem, AsamIcon } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.title-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n}\n\n.title-wrapper.is-active {\n\tcolor: var(--el-color-primary);\n}\n</style>\n",
									"originalSourceSha256": "67a164e5c6ff59a9cd64fb1e97d268f8741a915b948278352d2e143855d192e9",
									"notice": {
										"id": "711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0",
										"url": "/licenses/source-notices/711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt",
										"licenseFilename": "LICENSE-711b427ad8f9ad0764f93473d1887c89e5c9f511a50531bf3e3a43d106eac4d0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/customization.vue",
											"sourceSha256": "5f4100a4c3423baf2f83ce2366ca83d3f3002f611c1a8f4b0a9381401b93e045",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-icon",
					"title": "自定义图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-custom-icon/ts/Demo.vue",
									"sha256": "0445895637f32a8d553b04405fb5b53f450ce8c1c9f415d6460f7f54ecc2283d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeNames\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\t\tactiveNames = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t\t@change=\"handleChange\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\" :icon=\"CaretRight\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<template #icon=\"{ isActive }\">\n\t\t\t\t\t<span class=\"icon-ele\">\n\t\t\t\t\t\t{{ isActive ? 'Expanded' : '已收起' }}\n\t\t\t\t\t</span>\n\t\t\t\t</template>\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseCapCustomIconDemo' });\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { CaretRight } from '@asam-ui/icons-vue';\n\nimport type { AsamCollapseModelValue } from '@asam-ui/ui';\n\nconst activeNames = ref(['1']);\nconst handleChange = (val: AsamCollapseModelValue) => {\n\tconsole.log(val);\n};\n</script>\n\n<style scoped>\n.icon-ele {\n\tmargin: 0 8px 0 auto;\n\tcolor: #409eff;\n}\n</style>\n",
									"originalSourceSha256": "aae1eb900aafabce621ab79ef29a9f5d0ed1763c17b020234bffa9098f6676cb",
									"notice": {
										"id": "3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62",
										"url": "/licenses/source-notices/3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt",
										"licenseFilename": "LICENSE-3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/custom-icon.vue",
											"sourceSha256": "fd082a19ab5b96937ea415e998e13ca81ad741141ce9a86b02a45f0c885268c5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-custom-icon/js/Demo.vue",
									"sha256": "4891f5c9de449992a61fecea671b2db5b1c4fc188700c3c2716c61b7ce6aaf3a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt\n-->\n<template>\n\t<div class=\"demo-collapse\">\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeNames\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\t\tactiveNames = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t\t@change=\"handleChange\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\" :icon=\"CaretRight\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<template #icon=\"{ isActive }\">\n\t\t\t\t\t<span class=\"icon-ele\">\n\t\t\t\t\t\t{{ isActive ? 'Expanded' : '已收起' }}\n\t\t\t\t\t</span>\n\t\t\t\t</template>\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseCapCustomIconDemo' });\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { CaretRight } from '@asam-ui/icons-vue';\nconst activeNames = ref(['1']);\nconst handleChange = (val) => {\n\tconsole.log(val);\n};\n</script>\n\n<style scoped>\n.icon-ele {\n\tmargin: 0 8px 0 auto;\n\tcolor: #409eff;\n}\n</style>\n",
									"originalSourceSha256": "76ec25e6badb55b2031dd0dbdb1f950581c04bb32f53910b546127a477d90615",
									"notice": {
										"id": "3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62",
										"url": "/licenses/source-notices/3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt",
										"licenseFilename": "LICENSE-3e7f1039c144041c9327a45d4403416e86fb1a9be117f0a1f2a4172ca767ee62.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/custom-icon.vue",
											"sourceSha256": "fd082a19ab5b96937ea415e998e13ca81ad741141ce9a86b02a45f0c885268c5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-icon-position",
					"title": "自定义图标位置 2.9.10",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-custom-icon-position/ts/Demo.vue",
									"sha256": "efc20ea60d5907af1ebbe2bc018fbb77872da38851495914fc6e8d243764c204",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt\n-->\n<template>\n\t<div class=\"demo-collapse-position\">\n\t\t<div class=\"flex items-center mb-4\">\n\t\t\t<span class=\"mr-4\">展开图标位置： </span>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"position\"\n\t\t\t\tinactive-value=\"left\"\n\t\t\t\tactive-value=\"right\"\n\t\t\t\tinactive-text=\"left\"\n\t\t\t\tactive-text=\"right\"\n\t\t\t\tclass=\"ui032-position-switch\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'left' || value === 'right') position = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\n\t\t<AsamCollapse :expand-icon-position=\"position\">\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseCapCustomIconPositionDemo' });\nimport { AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamCollapseIconPositionType } from '@asam-ui/ui';\n\nconst position = ref<AsamCollapseIconPositionType>('left');\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n\n.mr-4 {\n\tmargin-right: 1rem;\n}\n\n.ui032-position-switch {\n\t--el-switch-off-color: #88b8fe;\n}\n</style>\n",
									"originalSourceSha256": "d387b9b5f3f0ed72beb05cd31acc4cb34a07ea754df013f15b9ba3a1441d4e15",
									"notice": {
										"id": "38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9",
										"url": "/licenses/source-notices/38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt",
										"licenseFilename": "LICENSE-38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/custom-icon-position.vue",
											"sourceSha256": "767219769c1b2c5d84c5f2a2c15067bac84ec5e49a9e7340e7ef105f6f4a226e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-custom-icon-position/js/Demo.vue",
									"sha256": "2f3f6e0d5013f75d826e3e7b4538525a6552688ad907fbf3f825e971d9669882",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt\n-->\n<template>\n\t<div class=\"demo-collapse-position\">\n\t\t<div class=\"flex items-center mb-4\">\n\t\t\t<span class=\"mr-4\">展开图标位置： </span>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"position\"\n\t\t\t\tinactive-value=\"left\"\n\t\t\t\tactive-value=\"right\"\n\t\t\t\tinactive-text=\"left\"\n\t\t\t\tactive-text=\"right\"\n\t\t\t\tclass=\"ui032-position-switch\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'left' || value === 'right') position = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\n\t\t<AsamCollapse :expand-icon-position=\"position\">\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseCapCustomIconPositionDemo' });\nimport { AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst position = ref('left');\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n\n.mr-4 {\n\tmargin-right: 1rem;\n}\n\n.ui032-position-switch {\n\t--el-switch-off-color: #88b8fe;\n}\n</style>\n",
									"originalSourceSha256": "eae4e26f1b7ebbf70be4fadcaa09fb21bf4ee5e57892e1fa185454416c66d2c7",
									"notice": {
										"id": "38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9",
										"url": "/licenses/source-notices/38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt",
										"licenseFilename": "LICENSE-38bfdc7eba09301412959751ab1a380b7f58e9f1240659172f7f34e016c873d9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/custom-icon-position.vue",
											"sourceSha256": "767219769c1b2c5d84c5f2a2c15067bac84ec5e49a9e7340e7ef105f6f4a226e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-prevent-collapsing",
					"title": "阻止折叠 2.9.11",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-prevent-collapsing/ts/Demo.vue",
									"sha256": "5625705f9a94f0ebe7d853eb3f0948ef1e62a0f446bd57ff9939f9292de97f9d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt\n-->\n<template>\n\t<div v-asam-loading=\"loading\" class=\"demo-collapse\">\n\t\t<div class=\"flex items-center mb-4\">\n\t\t\t<span class=\"mr-4\">关闭前返回： </span>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"before\"\n\t\t\t\t:inactive-value=\"false\"\n\t\t\t\t:active-value=\"true\"\n\t\t\t\tinactive-text=\"false\"\n\t\t\t\tactive-text=\"true\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') before = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeNames\"\n\t\t\t:before-collapse=\"beforeCollapse\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\t\tactiveNames = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseCapPreventCollapsingDemo' });\nimport { vAsamLoading, AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst before = ref(true);\nconst activeNames = ref(['1']);\nconst loading = ref(false);\n\nconst beforeCollapse = (): Promise<boolean> => {\n\tloading.value = true;\n\treturn new Promise((resolve) => {\n\t\tsetTimeout(() => {\n\t\t\tloading.value = false;\n\t\t\treturn resolve(before.value);\n\t\t}, 1000);\n\t});\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n\n.mr-4 {\n\tmargin-right: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "44468951d509df2387fe634173b65caabb3549543913fc54e5e639af08f92297",
									"notice": {
										"id": "993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331",
										"url": "/licenses/source-notices/993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt",
										"licenseFilename": "LICENSE-993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/prevent-collapsing.vue",
											"sourceSha256": "602202033ff1eec484df0cf0c441050b6634fc2c2815dc7b183548fcb7ee19b4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapse/cap-prevent-collapsing/js/Demo.vue",
									"sha256": "676a49278490ccbe9a2047c15da7cc1cb379d2aad0d39e4f5e76bc0e72a14460",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt\n-->\n<template>\n\t<div v-asam-loading=\"loading\" class=\"demo-collapse\">\n\t\t<div class=\"flex items-center mb-4\">\n\t\t\t<span class=\"mr-4\">关闭前返回： </span>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"before\"\n\t\t\t\t:inactive-value=\"false\"\n\t\t\t\t:active-value=\"true\"\n\t\t\t\tinactive-text=\"false\"\n\t\t\t\tactive-text=\"true\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') before = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\n\t\t<AsamCollapse\n\t\t\t:model-value=\"activeNames\"\n\t\t\t:before-collapse=\"beforeCollapse\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\t\tactiveNames = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamCollapseItem title=\"一致性\" name=\"1\">\n\t\t\t\t<div>与生活一致：符合实际流程与逻辑，采用用户熟悉的语言和习惯。</div>\n\t\t\t\t<div>界面内部一致：设计风格、图标、文字及元素位置等保持一致。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"反馈\" name=\"2\">\n\t\t\t\t<div>操作反馈：通过样式变化和交互效果，让用户明确感知操作结果。</div>\n\t\t\t\t<div>视觉反馈：通过更新或调整页面元素来反映当前状态。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"效率\" name=\"3\">\n\t\t\t\t<div>简化流程：操作步骤应简单直观。</div>\n\t\t\t\t<div>明确清晰：清楚表达意图，让用户快速理解并作出决定。</div>\n\t\t\t\t<div>易于识别：界面直观清晰，减少用户记忆与回想的负担。</div>\n\t\t\t</AsamCollapseItem>\n\t\t\t<AsamCollapseItem title=\"可控性\" name=\"4\">\n\t\t\t\t<div>决策自主：可以给出操作建议，但不替用户作决定。</div>\n\t\t\t\t<div>结果可控：允许用户取消、中止或结束当前操作。</div>\n\t\t\t</AsamCollapseItem>\n\t\t</AsamCollapse>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseCapPreventCollapsingDemo' });\nimport { vAsamLoading, AsamSwitch, AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst before = ref(true);\nconst activeNames = ref(['1']);\nconst loading = ref(false);\nconst beforeCollapse = () => {\n\tloading.value = true;\n\treturn new Promise((resolve) => {\n\t\tsetTimeout(() => {\n\t\t\tloading.value = false;\n\t\t\treturn resolve(before.value);\n\t\t}, 1000);\n\t});\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n\n.mr-4 {\n\tmargin-right: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "25862bdeab8546c1df04d90f586ddb1024b85018df1544c56a7b1a7a669eb1de",
									"notice": {
										"id": "993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331",
										"url": "/licenses/source-notices/993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt",
										"licenseFilename": "LICENSE-993d3e24bcbabc11b4fa25d1c70b621ea8242816e70e79a9e94f18bca5f2e331.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/collapse/prevent-collapsing.vue",
											"sourceSha256": "602202033ff1eec484df0cf0c441050b6634fc2c2815dc7b183548fcb7ee19b4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCollapseItem",
			"documentation": "/component-AsamCollapseItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapseItem/basic/ts/Demo.vue",
									"sha256": "95c7d3d594d79318700526d81dd16d1954763c7ed9c090739a0c9a83623e6f91",
									"source": "<template>\n\t<AsamCollapse\n\t\t:model-value=\"active\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\tactive = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamCollapseItem title=\"基础说明\" name=\"intro\">\n\t\t\t<p class=\"example-paragraph\">本地说明内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem name=\"detail\">\n\t\t\t<template #title>补充说明</template>\n\t\t\t<p class=\"example-paragraph\">可展开的补充内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem title=\"禁用项\" name=\"locked\" disabled />\n\t</AsamCollapse>\n\t<p class=\"example-paragraph\" role=\"status\">展开项：{{ active.join(', ') }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nconst active = ref<string[]>(['intro']);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapseItem/basic/js/Demo.vue",
									"sha256": "0b0c82b5b94372ba18ec7aebb29a21186895cac49f623bdd7c70062db1f6f836",
									"source": "<template>\n\t<AsamCollapse\n\t\t:model-value=\"active\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (Array.isArray(value) && value.every((name) => typeof name === 'string'))\n\t\t\t\t\tactive = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamCollapseItem title=\"基础说明\" name=\"intro\">\n\t\t\t<p class=\"example-paragraph\">本地说明内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem name=\"detail\">\n\t\t\t<template #title>补充说明</template>\n\t\t\t<p class=\"example-paragraph\">可展开的补充内容。</p>\n\t\t</AsamCollapseItem>\n\t\t<AsamCollapseItem title=\"禁用项\" name=\"locked\" disabled />\n\t</AsamCollapse>\n\t<p class=\"example-paragraph\" role=\"status\">展开项：{{ active.join(', ') }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamCollapse, AsamCollapseItem } from '@asam-ui/ui';\nconst active = ref(['intro']);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCollapseTransition",
			"documentation": "/component-AsamCollapseTransition.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapseTransition/basic/ts/Demo.vue",
									"sha256": "20a6cc27e3252116c6611b7d5577230d40c77ff2524c7354030ecc0748d43ad8",
									"source": "<template>\n\t<div class=\"demo\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t>切换说明</AsamButton\n\t\t>\n\t\t<AsamCollapseTransition>\n\t\t\t<div v-show=\"visible\" class=\"panel\">可折叠的本地说明</div>\n\t\t</AsamCollapseTransition>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCollapseTransitionBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCollapseTransition } from '@asam-ui/ui';\nconst visible = ref(true);\n</script>\n\n<style scoped>\n.demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.demo > .asam-button {\n\tjustify-self: start;\n}\n\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCollapseTransition/basic/js/Demo.vue",
									"sha256": "f18123c46e6516828dd303236d2b92b96f25fc2c4712869e3908a5495667df3b",
									"source": "<template>\n\t<div class=\"demo\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t>切换说明</AsamButton\n\t\t>\n\t\t<AsamCollapseTransition>\n\t\t\t<div v-show=\"visible\" class=\"panel\">可折叠的本地说明</div>\n\t\t</AsamCollapseTransition>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCollapseTransitionBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCollapseTransition } from '@asam-ui/ui';\nconst visible = ref(true);\n</script>\n\n<style scoped>\n.demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.demo > .asam-button {\n\tjustify-self: start;\n}\n\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamContainer",
			"documentation": "/component-AsamContainer.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/basic/ts/Demo.vue",
									"sha256": "b46bb7a0c8db6ddcab72c2bbc2b96e121e0a752252a84944ca0cac9a6af810ae",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/basic/js/Demo.vue",
									"sha256": "c93721548b7dc4248181c4b3c5be4e718223c587c36b4969d9ba345f1963d524",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-hm",
					"title": "页头与主内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-hm/ts/Demo.vue",
									"sha256": "2d2e2908d57a87d14ab3ac1045d5969939f779b94b370822884ba23a3ff89039",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamMain>主体</AsamMain>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHmDemo' });\nimport { AsamContainer, AsamHeader, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "60d54e14e71741167e743dcf4038772f6a4f9310c7cec0f180621fe8a783bf3c",
									"notice": {
										"id": "eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263",
										"url": "/licenses/source-notices/eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt",
										"licenseFilename": "LICENSE-eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-hm.vue",
											"sourceSha256": "81cdd70f06901f92ccb9b2a5d752e9b3d27f6d7a4e763f98dc27a398add91a72",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-hm/js/Demo.vue",
									"sha256": "0e8d31db88a389606b1920dc0c61966641117ebeb580259e2850ed151aa01bc8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamMain>主体</AsamMain>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHmDemo' });\nimport { AsamContainer, AsamHeader, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "6a366802ff2248d26caadc54a9842819463b1014565629f2ef8d95e39d404ca1",
									"notice": {
										"id": "eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263",
										"url": "/licenses/source-notices/eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt",
										"licenseFilename": "LICENSE-eec6080091301034687bc2e55422acf5507c6b83d357dc080ec825b232d71263.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-hm.vue",
											"sourceSha256": "81cdd70f06901f92ccb9b2a5d752e9b3d27f6d7a4e763f98dc27a398add91a72",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-hmf",
					"title": "页头、主内容与页脚",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-hmf/ts/Demo.vue",
									"sha256": "58b552b55dce37d9c431dec913be800cf787d4bbe1795da06d66e0cb194e0010",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t<AsamFooter>底部</AsamFooter>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHmfDemo' });\nimport { AsamContainer, AsamHeader, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "15e588d21756da5bd7d056948e5f0d9671963b07e2c463c8ff5b028a92268b7c",
									"notice": {
										"id": "1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859",
										"url": "/licenses/source-notices/1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt",
										"licenseFilename": "LICENSE-1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-hmf.vue",
											"sourceSha256": "b63d1e033dfc19fed5654f65187bbf94ba48268fdc87b0b98e24909b674e5cb5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-hmf/js/Demo.vue",
									"sha256": "b8f1e1722fac3cf9a1fb4895759d6027a3b20190cd8632bc06969b5ad62dd301",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t<AsamFooter>底部</AsamFooter>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHmfDemo' });\nimport { AsamContainer, AsamHeader, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "5f07896224f505a56dfe7cd683cc732ade6031b06338f765dc465f124734bcd5",
									"notice": {
										"id": "1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859",
										"url": "/licenses/source-notices/1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt",
										"licenseFilename": "LICENSE-1a88f35705acbfbc93f27040cd46a17b8d5da18f0eb92ab36075d1f6337ac859.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-hmf.vue",
											"sourceSha256": "b63d1e033dfc19fed5654f65187bbf94ba48268fdc87b0b98e24909b674e5cb5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-am",
					"title": "侧栏与主内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-am/ts/Demo.vue",
									"sha256": "12b8884fa51d600e1e7d497237eac00b3cbd48b2fdd3d53cbd1ae18f3c0df1d2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutAmDemo' });\nimport { AsamContainer, AsamAside, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "d706eabab75fef2de395202fd1a8b4842220e58e650c5450be3078d6355ab622",
									"notice": {
										"id": "c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010",
										"url": "/licenses/source-notices/c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt",
										"licenseFilename": "LICENSE-c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-am.vue",
											"sourceSha256": "804fbe6ba7258457a0e8f081b4e5b6ea77cbca9194711f6d03e905a73d162ea1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-am/js/Demo.vue",
									"sha256": "2e7164554da06542ac9e0bdf39c06025cc3f3767ff329944dbddef86bbb6ef02",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutAmDemo' });\nimport { AsamContainer, AsamAside, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "ff1ff0df6d50a434ee57d3abe0712e7e106bdbaf4ce23e2d85eed1563cd19eef",
									"notice": {
										"id": "c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010",
										"url": "/licenses/source-notices/c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt",
										"licenseFilename": "LICENSE-c3d98994fe481d8b4e4dff8f365a61a2d5c09adcb219d541cb8fb4b8aa057010.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-am.vue",
											"sourceSha256": "804fbe6ba7258457a0e8f081b4e5b6ea77cbca9194711f6d03e905a73d162ea1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-ham",
					"title": "页头、侧栏与主内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-ham/ts/Demo.vue",
									"sha256": "25a2109850cb46f33572b76271d89096a4769d01cf9c3f46199462677fb76a26",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHamDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "724a49089ae565ba3374a4341c672e7f87a7e460e9eb9635bd30ea4b6f44b50e",
									"notice": {
										"id": "d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86",
										"url": "/licenses/source-notices/d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt",
										"licenseFilename": "LICENSE-d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-ham.vue",
											"sourceSha256": "1fc5442859d12aeb73c86ed9270a72d41346f1d39cac624c716fc99a3ff02e61",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-ham/js/Demo.vue",
									"sha256": "4f2f6a750c25ff3f85494afd921a29e46dd91655d1f0aaa8bbbd4426997faf61",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHamDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "07845d6d97d4b6f73675dcea272b4da47e16e6eabbc83e0d9dd42542acc63b24",
									"notice": {
										"id": "d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86",
										"url": "/licenses/source-notices/d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt",
										"licenseFilename": "LICENSE-d65dc450836fda1012f8e3e90885b36c0e982965551e14c9207b0f5f83612d86.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-ham.vue",
											"sourceSha256": "1fc5442859d12aeb73c86ed9270a72d41346f1d39cac624c716fc99a3ff02e61",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-hamf",
					"title": "页头、侧栏、主内容与页脚",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-hamf/ts/Demo.vue",
									"sha256": "c9fd6c51a6afaf9d89cdf4e9244e7b26bf70017b40235ce7591c174c83fca597",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t\t<AsamContainer>\n\t\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t\t\t<AsamFooter>底部</AsamFooter>\n\t\t\t\t</AsamContainer>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHamfDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "9ad110c2932baa27ea3c3ee1d90c1b35f8288ec5deb7f45fa15a6555c4f60070",
									"notice": {
										"id": "795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720",
										"url": "/licenses/source-notices/795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt",
										"licenseFilename": "LICENSE-795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-hamf.vue",
											"sourceSha256": "dbaf5ea170b9ad02d5687a9c793f3475f8e563cda316d95a80c5eb4f4d219aa6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-hamf/js/Demo.vue",
									"sha256": "7848e7383106e49e877dbce3959a9ec1b471ba9e65bb03cb18838bb840536072",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t\t<AsamContainer>\n\t\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t\t\t<AsamFooter>底部</AsamFooter>\n\t\t\t\t</AsamContainer>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutHamfDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "dff7df0ae4be48ca7c088da85ebbfd08760771d3cd73c073f0f78aaecb32a84e",
									"notice": {
										"id": "795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720",
										"url": "/licenses/source-notices/795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt",
										"licenseFilename": "LICENSE-795df4c1c11fc67e558a14bf078e077a6a0a2306e279420a9fff68381c42e720.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-hamf.vue",
											"sourceSha256": "dbaf5ea170b9ad02d5687a9c793f3475f8e563cda316d95a80c5eb4f4d219aa6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-ahm",
					"title": "侧栏、页头与主内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-ahm/ts/Demo.vue",
									"sha256": "62e73395ca2612d73911f50b0085df9cfa16599bab91ba48f87cdbcee3183032",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutAhmDemo' });\nimport { AsamContainer, AsamAside, AsamHeader, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "70bff5590d6c8dd4103aa3c9af32ee963b8d125070587392619e4ed8b9fb2b3f",
									"notice": {
										"id": "e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb",
										"url": "/licenses/source-notices/e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt",
										"licenseFilename": "LICENSE-e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-ahm.vue",
											"sourceSha256": "7a07cda3fc757077e2e243684dd10c21c97848e9c55179838e49ef12ac1eebba",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-ahm/js/Demo.vue",
									"sha256": "3df7169322e79ee30275b93410877bbd2e080a0a2cd933242e30de29ca42487f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutAhmDemo' });\nimport { AsamContainer, AsamAside, AsamHeader, AsamMain } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "e5f8f68c188275290448175bfa35c29fdb999ec2f20777d8e813a0be60409e38",
									"notice": {
										"id": "e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb",
										"url": "/licenses/source-notices/e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt",
										"licenseFilename": "LICENSE-e8d2fdbf851388c1ddc8fe74003a5d06b098d0210a31dc6b51daae7389f415bb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-ahm.vue",
											"sourceSha256": "7a07cda3fc757077e2e243684dd10c21c97848e9c55179838e49ef12ac1eebba",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-layout-ahmf",
					"title": "侧栏、页头、主内容与页脚",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-ahmf/ts/Demo.vue",
									"sha256": "a911621c01a733d72c77efd6dcbb513c8b76720cd8ba4f3aa4b7915169b578f6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t\t<AsamFooter>底部</AsamFooter>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapLayoutAhmfDemo' });\nimport { AsamContainer, AsamAside, AsamHeader, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "5ad62fa5f8e289110aa8de987f0cc4fe735a2b571ed11e7aa335c94c75b2443e",
									"notice": {
										"id": "6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab",
										"url": "/licenses/source-notices/6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt",
										"licenseFilename": "LICENSE-6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-ahmf.vue",
											"sourceSha256": "b4db513546aae2889f20c03c0607aadb23e83a958326141841f084ed848f2033",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-layout-ahmf/js/Demo.vue",
									"sha256": "752d1679654e6a5e0107a8adc4f9cebddca6b4f85bf11ac14a9fa2ab2a3a67ca",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt\n-->\n<template>\n\t<div class=\"common-layout\">\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"200px\">侧栏</AsamAside>\n\t\t\t<AsamContainer>\n\t\t\t\t<AsamHeader>头部</AsamHeader>\n\t\t\t\t<AsamMain>主体</AsamMain>\n\t\t\t\t<AsamFooter>底部</AsamFooter>\n\t\t\t</AsamContainer>\n\t\t</AsamContainer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapLayoutAhmfDemo' });\nimport { AsamContainer, AsamAside, AsamHeader, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Derived from the fixed container/common-layout.scss; scoped and resolved locally. */\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC implements :deep. */\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer),\n.common-layout :deep(.el-main),\n.common-layout :deep(.el-aside) {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--asam-color-text-primary);\n\ttext-align: center;\n}\n\n.common-layout :deep(.el-header),\n.common-layout :deep(.el-footer) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 30%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-aside) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 20%, var(--asam-color-surface));\n}\n\n.common-layout :deep(.el-main) {\n\tbackground-color: color-mix(in srgb, var(--asam-color-primary) 10%, var(--asam-color-surface));\n\theight: 150px;\n}\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "69502cafbadc936d907123c72f7d61e7b1daefb1974ee2187c2a6b7e48d6adf4",
									"notice": {
										"id": "6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab",
										"url": "/licenses/source-notices/6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt",
										"licenseFilename": "LICENSE-6f79c8d2a365d11810fa1bb47dd40c97a55f2e8df37c92a474104f0ea7feb0ab.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/layout-ahmf.vue",
											"sourceSha256": "b4db513546aae2889f20c03c0607aadb23e83a958326141841f084ed848f2033",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-example",
					"title": "例子",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-example/ts/Demo.vue",
									"sha256": "da6ef9d27f0e605c4c57ddcb4771c81180d47d0613df26eb1004c3a17669e7c1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt\n-->\n<template>\n\t<AsamContainer class=\"layout-container-demo\" style=\"height: 500px\">\n\t\t<AsamAside width=\"200px\">\n\t\t\t<AsamScrollbar>\n\t\t\t\t<AsamMenu :default-openeds=\"['1', '3']\">\n\t\t\t\t\t<AsamSubMenu index=\"1\">\n\t\t\t\t\t\t<template #title>\n\t\t\t\t\t\t\t<AsamIcon><message /></AsamIcon>导航一\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<AsamMenuItemGroup>\n\t\t\t\t\t\t\t<template #title>组 1</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-1\">选项 1</AsamMenuItem>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-2\">选项 2</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamMenuItemGroup title=\"组 2\">\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-3\">选项 3</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t\t\t\t<template #title>选项 4</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-4-1\">选项 4-1</AsamMenuItem>\n\t\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t<AsamSubMenu index=\"2\">\n\t\t\t\t\t\t<template #title>\n\t\t\t\t\t\t\t<AsamIcon><icon-menu /></AsamIcon>导航二\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<AsamMenuItemGroup>\n\t\t\t\t\t\t\t<template #title>组 1</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-1\">选项 1</AsamMenuItem>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-2\">选项 2</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamMenuItemGroup title=\"组 2\">\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-3\">选项 3</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t\t\t\t<template #title>选项 4</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-4-1\">选项 4-1</AsamMenuItem>\n\t\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t<AsamSubMenu index=\"3\">\n\t\t\t\t\t\t<template #title>\n\t\t\t\t\t\t\t<AsamIcon><setting /></AsamIcon>导航三\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<AsamMenuItemGroup>\n\t\t\t\t\t\t\t<template #title>组 1</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-1\">选项 1</AsamMenuItem>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-2\">选项 2</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamMenuItemGroup title=\"组 2\">\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-3\">选项 3</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamSubMenu index=\"3-4\">\n\t\t\t\t\t\t\t<template #title>选项 4</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-4-1\">选项 4-1</AsamMenuItem>\n\t\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t</AsamMenu>\n\t\t\t</AsamScrollbar>\n\t\t</AsamAside>\n\n\t\t<AsamContainer>\n\t\t\t<AsamHeader style=\"text-align: right; font-size: 12px\">\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t<AsamDropdown>\n\t\t\t\t\t\t<AsamIcon style=\"margin-right: 8px; margin-top: 1px\">\n\t\t\t\t\t\t\t<setting />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t<template #dropdown>\n\t\t\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t\t\t<AsamDropdownItem>查看</AsamDropdownItem>\n\t\t\t\t\t\t\t\t<AsamDropdownItem>添加</AsamDropdownItem>\n\t\t\t\t\t\t\t\t<AsamDropdownItem>删除</AsamDropdownItem>\n\t\t\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</AsamDropdown>\n\t\t\t\t\t<span>汤姆</span>\n\t\t\t\t</div>\n\t\t\t</AsamHeader>\n\n\t\t\t<AsamMain>\n\t\t\t\t<AsamScrollbar>\n\t\t\t\t\t<AsamTable :data=\"tableData\">\n\t\t\t\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"140\" />\n\t\t\t\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t\t\t\t</AsamTable>\n\t\t\t\t</AsamScrollbar>\n\t\t\t</AsamMain>\n\t\t</AsamContainer>\n\t</AsamContainer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamContainerCapExampleDemo' });\nimport {\n\tAsamContainer,\n\tAsamAside,\n\tAsamScrollbar,\n\tAsamMenu,\n\tAsamSubMenu,\n\tAsamIcon,\n\tAsamMenuItemGroup,\n\tAsamMenuItem,\n\tAsamHeader,\n\tAsamDropdown,\n\tAsamDropdownMenu,\n\tAsamDropdownItem,\n\tAsamMain,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { Menu as IconMenu, Message, Setting } from '@asam-ui/icons-vue';\n\nconst item = {\n\tdate: '2016-05-02',\n\tname: '汤姆',\n\taddress: '洛杉矶格罗夫街 189 号'\n};\nconst tableData = ref(Array.from({ length: 20 }, () => ({ ...item })));\n</script>\n\n<style scoped>\n.layout-container-demo .el-header {\n\tposition: relative;\n\tbackground-color: var(--el-color-primary-light-7);\n\tcolor: var(--el-text-color-primary);\n}\n\n.layout-container-demo .el-aside {\n\tcolor: var(--el-text-color-primary);\n\tbackground: var(--el-color-primary-light-8);\n}\n\n.layout-container-demo .el-menu {\n\tborder-right: none;\n}\n\n.layout-container-demo .el-main {\n\tpadding: 0;\n}\n\n.layout-container-demo .toolbar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\tright: 20px;\n}\n</style>\n",
									"originalSourceSha256": "f890a4de01f61b739a9107fa573fe601672c36028b0817caee248536fa51d71b",
									"notice": {
										"id": "72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9",
										"url": "/licenses/source-notices/72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt",
										"licenseFilename": "LICENSE-72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/example.vue",
											"sourceSha256": "91a592b44faf14d607de9d36af39a0a0da6f1084df07432fa2733d5e36d1978e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamContainer/cap-example/js/Demo.vue",
									"sha256": "b9e4e774f27b27a6fee820f1e502bb229a5cff6dfad2ac6e99dfd9a49bbd36fd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt\n-->\n<template>\n\t<AsamContainer class=\"layout-container-demo\" style=\"height: 500px\">\n\t\t<AsamAside width=\"200px\">\n\t\t\t<AsamScrollbar>\n\t\t\t\t<AsamMenu :default-openeds=\"['1', '3']\">\n\t\t\t\t\t<AsamSubMenu index=\"1\">\n\t\t\t\t\t\t<template #title>\n\t\t\t\t\t\t\t<AsamIcon><message /></AsamIcon>导航一\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<AsamMenuItemGroup>\n\t\t\t\t\t\t\t<template #title>组 1</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-1\">选项 1</AsamMenuItem>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-2\">选项 2</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamMenuItemGroup title=\"组 2\">\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-3\">选项 3</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t\t\t\t<template #title>选项 4</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"1-4-1\">选项 4-1</AsamMenuItem>\n\t\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t<AsamSubMenu index=\"2\">\n\t\t\t\t\t\t<template #title>\n\t\t\t\t\t\t\t<AsamIcon><icon-menu /></AsamIcon>导航二\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<AsamMenuItemGroup>\n\t\t\t\t\t\t\t<template #title>组 1</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-1\">选项 1</AsamMenuItem>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-2\">选项 2</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamMenuItemGroup title=\"组 2\">\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-3\">选项 3</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t\t\t\t<template #title>选项 4</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"2-4-1\">选项 4-1</AsamMenuItem>\n\t\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t<AsamSubMenu index=\"3\">\n\t\t\t\t\t\t<template #title>\n\t\t\t\t\t\t\t<AsamIcon><setting /></AsamIcon>导航三\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<AsamMenuItemGroup>\n\t\t\t\t\t\t\t<template #title>组 1</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-1\">选项 1</AsamMenuItem>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-2\">选项 2</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamMenuItemGroup title=\"组 2\">\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-3\">选项 3</AsamMenuItem>\n\t\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t\t<AsamSubMenu index=\"3-4\">\n\t\t\t\t\t\t\t<template #title>选项 4</template>\n\t\t\t\t\t\t\t<AsamMenuItem index=\"3-4-1\">选项 4-1</AsamMenuItem>\n\t\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t</AsamMenu>\n\t\t\t</AsamScrollbar>\n\t\t</AsamAside>\n\n\t\t<AsamContainer>\n\t\t\t<AsamHeader style=\"text-align: right; font-size: 12px\">\n\t\t\t\t<div class=\"toolbar\">\n\t\t\t\t\t<AsamDropdown>\n\t\t\t\t\t\t<AsamIcon style=\"margin-right: 8px; margin-top: 1px\">\n\t\t\t\t\t\t\t<setting />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t<template #dropdown>\n\t\t\t\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t\t\t\t<AsamDropdownItem>查看</AsamDropdownItem>\n\t\t\t\t\t\t\t\t<AsamDropdownItem>添加</AsamDropdownItem>\n\t\t\t\t\t\t\t\t<AsamDropdownItem>删除</AsamDropdownItem>\n\t\t\t\t\t\t\t</AsamDropdownMenu>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</AsamDropdown>\n\t\t\t\t\t<span>汤姆</span>\n\t\t\t\t</div>\n\t\t\t</AsamHeader>\n\n\t\t\t<AsamMain>\n\t\t\t\t<AsamScrollbar>\n\t\t\t\t\t<AsamTable :data=\"tableData\">\n\t\t\t\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"140\" />\n\t\t\t\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"120\" />\n\t\t\t\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t\t\t\t</AsamTable>\n\t\t\t\t</AsamScrollbar>\n\t\t\t</AsamMain>\n\t\t</AsamContainer>\n\t</AsamContainer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamContainerCapExampleDemo' });\nimport {\n\tAsamContainer,\n\tAsamAside,\n\tAsamScrollbar,\n\tAsamMenu,\n\tAsamSubMenu,\n\tAsamIcon,\n\tAsamMenuItemGroup,\n\tAsamMenuItem,\n\tAsamHeader,\n\tAsamDropdown,\n\tAsamDropdownMenu,\n\tAsamDropdownItem,\n\tAsamMain,\n\tAsamTable,\n\tAsamTableColumn\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { Menu as IconMenu, Message, Setting } from '@asam-ui/icons-vue';\nconst item = {\n\tdate: '2016-05-02',\n\tname: '汤姆',\n\taddress: '洛杉矶格罗夫街 189 号'\n};\nconst tableData = ref(Array.from({ length: 20 }, () => ({ ...item })));\n</script>\n\n<style scoped>\n.layout-container-demo .el-header {\n\tposition: relative;\n\tbackground-color: var(--el-color-primary-light-7);\n\tcolor: var(--el-text-color-primary);\n}\n\n.layout-container-demo .el-aside {\n\tcolor: var(--el-text-color-primary);\n\tbackground: var(--el-color-primary-light-8);\n}\n\n.layout-container-demo .el-menu {\n\tborder-right: none;\n}\n\n.layout-container-demo .el-main {\n\tpadding: 0;\n}\n\n.layout-container-demo .toolbar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\tright: 20px;\n}\n</style>\n",
									"originalSourceSha256": "ad67245adef48c1c7dadccc127bf876cf9f5941c892388f2bdb7a84391d295c6",
									"notice": {
										"id": "72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9",
										"url": "/licenses/source-notices/72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt",
										"licenseFilename": "LICENSE-72117dd7742d0b18a790f150412060a4f546409e93a31dcc223c543011ec55f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/container/example.vue",
											"sourceSha256": "91a592b44faf14d607de9d36af39a0a0da6f1084df07432fa2733d5e36d1978e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCountdown",
			"documentation": "/component-AsamCountdown.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCountdown/basic/ts/Demo.vue",
									"sha256": "edf10487cd17ad297dfd914ae07f0a63a61be90244b9102bac7fd16eea2b4442",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restart\">重新倒计时</AsamButton>\n\t\t<AsamCountdown :value=\"target\" title=\"本地倒计时\" @finish=\"finished = true\" />\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ finished ? '已结束' : '进行中' }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCountdownBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCountdown } from '@asam-ui/ui';\nconst target = ref(Date.now() + 90000);\nconst finished = ref(false);\nconst restart = () => {\n\ttarget.value = Date.now() + 90000;\n\tfinished.value = false;\n};\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCountdown/basic/js/Demo.vue",
									"sha256": "d2cccc8645c0b533575611e1804afb5be97c8d4903f5a5cc3588a317aec2ed21",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restart\">重新倒计时</AsamButton>\n\t\t<AsamCountdown :value=\"target\" title=\"本地倒计时\" @finish=\"finished = true\" />\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ finished ? '已结束' : '进行中' }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCountdownBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCountdown } from '@asam-ui/ui';\nconst target = ref(Date.now() + 90000);\nconst finished = ref(false);\nconst restart = () => {\n\ttarget.value = Date.now() + 90000;\n\tfinished.value = false;\n};\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dayjs-value",
					"title": "Dayjs 目标时刻",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCountdown/dayjs-value/ts/Demo.vue",
									"sha256": "c17ff2270888486347804244bd59b12dfd5fae99e9a0826f1ac185b9e2585f50",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restart\"\n\t\t\t>重置 Dayjs 目标</AsamButton\n\t\t>\n\t\t<AsamCountdown\n\t\t\t:value=\"target\"\n\t\t\ttitle=\"Dayjs 倒计时\"\n\t\t\tformat=\"mm:ss\"\n\t\t\t@change=\"remaining = $event\"\n\t\t\t@finish=\"finished = true\"\n\t\t/>\n\t\t<p class=\"example-paragraph\" v-bind=\"domDataAttrs('data-target')\">{{ target.format('YYYY-MM-DD HH:mm:ss') }}</p>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t{{ finished ? '已结束' : '进行中' }}；剩余 {{ Math.ceil(remaining / 1000) }}秒\n\t\t</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport { ref } from 'vue';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\nimport { AsamButton, AsamCountdown } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamCountdownDayjsValueDemo' });\nconst target = ref<Dayjs>(dayjs().add(30, 'second'));\nconst remaining = ref(0);\nconst finished = ref(false);\nconst restart = () => {\n\ttarget.value = dayjs().add(60, 'second');\n\tfinished.value = false;\n};\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCountdown/dayjs-value/js/Demo.vue",
									"sha256": "ff84dbc4ef1273d2949f51842e0174bf0966143dc08c8eb5f25b369f77c380f7",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restart\"\n\t\t\t>重置 Dayjs 目标</AsamButton\n\t\t>\n\t\t<AsamCountdown\n\t\t\t:value=\"target\"\n\t\t\ttitle=\"Dayjs 倒计时\"\n\t\t\tformat=\"mm:ss\"\n\t\t\t@change=\"remaining = $event\"\n\t\t\t@finish=\"finished = true\"\n\t\t/>\n\t\t<p class=\"example-paragraph\" v-bind=\"domDataAttrs('data-target')\">{{ target.format('YYYY-MM-DD HH:mm:ss') }}</p>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t{{ finished ? '已结束' : '进行中' }}；剩余 {{ Math.ceil(remaining / 1000) }}秒\n\t\t</p>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport dayjs from 'dayjs';\nimport { AsamButton, AsamCountdown } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamCountdownDayjsValueDemo' });\nconst target = ref(dayjs().add(30, 'second'));\nconst remaining = ref(0);\nconst finished = ref(false);\nconst restart = () => {\n\ttarget.value = dayjs().add(60, 'second');\n\tfinished.value = false;\n};\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDescriptions",
			"documentation": "/component-AsamDescriptions.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/basic/ts/Demo.vue",
									"sha256": "a423b55739569c98447e9c710b3cb7d12ccee7c747e975505c495a98c2459493",
									"source": "<template>\n\t<div class=\"descriptions-examples\">\n\t\t<AsamDescriptions\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ title: size + ' 说明', size, column: 2, border: true }\"\n\t\t>\n\t\t\t<AsamDescriptionsItem label=\"名称\">本地草稿</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"状态\">待编辑</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"备注\" :span=\"2\">\n\t\t\t\t<span>用名称和值描述内容。</span>\n\t\t\t</AsamDescriptionsItem>\n\t\t</AsamDescriptions>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsBasicDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.descriptions-examples {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/basic/js/Demo.vue",
									"sha256": "043db4f0252a9ca9d592a9d000e4d4c7764c2179f487e607d57b60ffd6ccaf87",
									"source": "<template>\n\t<div class=\"descriptions-examples\">\n\t\t<AsamDescriptions\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ title: size + ' 说明', size, column: 2, border: true }\"\n\t\t>\n\t\t\t<AsamDescriptionsItem label=\"名称\">本地草稿</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"状态\">待编辑</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"备注\" :span=\"2\">\n\t\t\t\t<span>用名称和值描述内容。</span>\n\t\t\t</AsamDescriptionsItem>\n\t\t</AsamDescriptions>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsBasicDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.descriptions-examples {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-basic-usage/ts/Demo.vue",
									"sha256": "7acbc6de54f9c433c60519b553d0e645aa6be7bb6ac20bc7d7b0a49fa4c64fb4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt\n-->\n<template>\n\t<AsamDescriptions title=\"用户信息\">\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsCapBasicUsageDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem, AsamTag } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "36b79c1fb78bb8304ab275a799fad4a9d99fae23bcde0dc001cd55b95aef5fe1",
									"notice": {
										"id": "1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff",
										"url": "/licenses/source-notices/1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt",
										"licenseFilename": "LICENSE-1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/basic-usage.vue",
											"sourceSha256": "abd6c797f51aca9921ef83d65b576db9d88f622dbb631fd71ad89bf9fe33d87c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-basic-usage/js/Demo.vue",
									"sha256": "f888fa00dcaa79e37b60536162833df97c5161a484d009570a272d6be30d87e0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt\n-->\n<template>\n\t<AsamDescriptions title=\"用户信息\">\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsCapBasicUsageDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem, AsamTag } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "252120cbb6da12af66281364d6729002d028ff792f15d7c87f5aa46594368dae",
									"notice": {
										"id": "1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff",
										"url": "/licenses/source-notices/1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt",
										"licenseFilename": "LICENSE-1032a4d4fde5f19573539f8e65d3a033368ce18b4e036819ae3f1abfd05943ff.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/basic-usage.vue",
											"sourceSha256": "abd6c797f51aca9921ef83d65b576db9d88f622dbb631fd71ad89bf9fe33d87c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-sizes",
					"title": "尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-sizes/ts/Demo.vue",
									"sha256": "e084227a4fa4c139472afef4b2b9c30cc9c86cc446ab3c61b3a7aee9c5f4fbe2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"size\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (\n\t\t\t\t\tvalue === 'small' ||\n\t\t\t\t\tvalue === 'default' ||\n\t\t\t\t\tvalue === 'big' ||\n\t\t\t\t\tvalue === 'large'\n\t\t\t\t)\n\t\t\t\t\tsize = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioItem value=\"large\">大尺寸</AsamRadioItem>\n\t\t<AsamRadioItem value=\"default\">默认</AsamRadioItem>\n\t\t<AsamRadioItem value=\"small\">小尺寸</AsamRadioItem>\n\t</AsamRadioGroup>\n\n\t<!-- prettier-ignore -->\n\t<AsamDescriptions\n\t\tclass=\"margin-top\"\n\t\ttitle=\"带边框\"\n\t\t:column=\"3\"\n\t\t:size=\"size\"\n\t\tborder\n\t>\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\">操作</AsamButton>\n\t\t</template>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<user />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t用户名\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\tkooriookami\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<iphone />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t电话\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t18100000000\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<location />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t地点\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t苏州\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<tickets />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t备注\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<office-building />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t地址\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n\n\t<AsamDescriptions\n\t\tclass=\"margin-top\"\n\t\ttitle=\"无边框\"\n\t\t:column=\"3\"\n\t\t:size=\"size\"\n\t\t:style=\"blockMargin\"\n\t>\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\">操作</AsamButton>\n\t\t</template>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsCapSizesDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioItem,\n\tAsamDescriptions,\n\tAsamButton,\n\tAsamDescriptionsItem,\n\tAsamIcon,\n\tAsamTag\n} from '@asam-ui/ui';\n\nimport { computed, ref } from 'vue';\nimport { Iphone, Location, OfficeBuilding, Tickets, User } from '@asam-ui/icons-vue';\n\nimport type { AsamControlSize } from '@asam-ui/ui';\n\nconst size = ref<AsamControlSize>('default');\n\nconst iconStyle = computed(() => {\n\tconst marginMap = {\n\t\tlarge: '8px',\n\t\tdefault: '6px',\n\t\tbig: '4px',\n\t\tsmall: '4px'\n\t};\n\treturn {\n\t\tmarginRight: marginMap[size.value] || marginMap.default\n\t};\n});\nconst blockMargin = computed(() => {\n\tconst marginMap = {\n\t\tlarge: '32px',\n\t\tdefault: '28px',\n\t\tbig: '24px',\n\t\tsmall: '24px'\n\t};\n\treturn {\n\t\tmarginTop: marginMap[size.value] || marginMap.default\n\t};\n});\n</script>\n\n<style scoped>\n.el-descriptions {\n\tmargin-top: 20px;\n}\n\n.cell-item {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.margin-top {\n\tmargin-top: 20px;\n}\n</style>\n",
									"originalSourceSha256": "cf487ad5cd2aceb984ad75a6e1dea03ae6fd2f42d33db8ba2cbf8008f8a4444b",
									"notice": {
										"id": "9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd",
										"url": "/licenses/source-notices/9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt",
										"licenseFilename": "LICENSE-9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/sizes.vue",
											"sourceSha256": "611cb72232bea93c9f16ed651ca6b6fdea2b58dcc2e2beab5b3775d8e83b9b0e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-sizes/js/Demo.vue",
									"sha256": "a7ab17a2b2dac9da5bc802783d61f6975d72cc139e6ad2ae63667df3895218e2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"size\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (\n\t\t\t\t\tvalue === 'small' ||\n\t\t\t\t\tvalue === 'default' ||\n\t\t\t\t\tvalue === 'big' ||\n\t\t\t\t\tvalue === 'large'\n\t\t\t\t)\n\t\t\t\t\tsize = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioItem value=\"large\">大尺寸</AsamRadioItem>\n\t\t<AsamRadioItem value=\"default\">默认</AsamRadioItem>\n\t\t<AsamRadioItem value=\"small\">小尺寸</AsamRadioItem>\n\t</AsamRadioGroup>\n\n\t<!-- prettier-ignore -->\n\t<AsamDescriptions\n\t\tclass=\"margin-top\"\n\t\ttitle=\"带边框\"\n\t\t:column=\"3\"\n\t\t:size=\"size\"\n\t\tborder\n\t>\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\">操作</AsamButton>\n\t\t</template>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<user />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t用户名\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\tkooriookami\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<iphone />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t电话\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t18100000000\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<location />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t地点\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t苏州\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<tickets />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t备注\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem>\n\t\t\t<template #label>\n\t\t\t\t<div class=\"cell-item\">\n\t\t\t\t\t<AsamIcon :style=\"iconStyle\">\n\t\t\t\t\t\t<office-building />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t地址\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n\n\t<AsamDescriptions\n\t\tclass=\"margin-top\"\n\t\ttitle=\"无边框\"\n\t\t:column=\"3\"\n\t\t:size=\"size\"\n\t\t:style=\"blockMargin\"\n\t>\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\">操作</AsamButton>\n\t\t</template>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsCapSizesDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioItem,\n\tAsamDescriptions,\n\tAsamButton,\n\tAsamDescriptionsItem,\n\tAsamIcon,\n\tAsamTag\n} from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nimport { Iphone, Location, OfficeBuilding, Tickets, User } from '@asam-ui/icons-vue';\nconst size = ref('default');\nconst iconStyle = computed(() => {\n\tconst marginMap = {\n\t\tlarge: '8px',\n\t\tdefault: '6px',\n\t\tbig: '4px',\n\t\tsmall: '4px'\n\t};\n\treturn {\n\t\tmarginRight: marginMap[size.value] || marginMap.default\n\t};\n});\nconst blockMargin = computed(() => {\n\tconst marginMap = {\n\t\tlarge: '32px',\n\t\tdefault: '28px',\n\t\tbig: '24px',\n\t\tsmall: '24px'\n\t};\n\treturn {\n\t\tmarginTop: marginMap[size.value] || marginMap.default\n\t};\n});\n</script>\n\n<style scoped>\n.el-descriptions {\n\tmargin-top: 20px;\n}\n\n.cell-item {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.margin-top {\n\tmargin-top: 20px;\n}\n</style>\n",
									"originalSourceSha256": "eecf47d23ae4c12b9098f65154aacc7bafff2a9754193e624c944a138d1a3bd9",
									"notice": {
										"id": "9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd",
										"url": "/licenses/source-notices/9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt",
										"licenseFilename": "LICENSE-9c23b9f2ce5f295e46458e26e3c7efdf21c1d65d7197288102547cd3724813cd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/sizes.vue",
											"sourceSha256": "611cb72232bea93c9f16ed651ca6b6fdea2b58dcc2e2beab5b3775d8e83b9b0e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical-list",
					"title": "垂直列表",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-vertical-list/ts/Demo.vue",
									"sha256": "21a4a6225e858dfd9b3e57d9a04205b7cd1e81bc984b1aeef36e9b04fdd15eea",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"size\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (\n\t\t\t\t\tvalue === 'small' ||\n\t\t\t\t\tvalue === 'default' ||\n\t\t\t\t\tvalue === 'big' ||\n\t\t\t\t\tvalue === 'large'\n\t\t\t\t)\n\t\t\t\t\tsize = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioItem value=\"large\">大尺寸</AsamRadioItem>\n\t\t<AsamRadioItem value=\"default\">默认</AsamRadioItem>\n\t\t<AsamRadioItem value=\"small\">小尺寸</AsamRadioItem>\n\t</AsamRadioGroup>\n\n\t<AsamDescriptions title=\"带边框的垂直列表\" direction=\"vertical\" :column=\"4\" :size=\"size\" border>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\" :span=\"2\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n\n\t<AsamDescriptions\n\t\ttitle=\"不带边框的垂直列表\"\n\t\t:column=\"4\"\n\t\t:size=\"size\"\n\t\tdirection=\"vertical\"\n\t\t:style=\"blockMargin\"\n\t>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\" :span=\"2\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsCapVerticalListDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioItem,\n\tAsamDescriptions,\n\tAsamDescriptionsItem,\n\tAsamTag\n} from '@asam-ui/ui';\n\nimport { computed, ref } from 'vue';\n\nimport type { AsamControlSize } from '@asam-ui/ui';\n\nconst size = ref<AsamControlSize>('default');\n\nconst blockMargin = computed(() => {\n\tconst marginMap = {\n\t\tlarge: '32px',\n\t\tdefault: '28px',\n\t\tbig: '24px',\n\t\tsmall: '24px'\n\t};\n\treturn {\n\t\tmarginTop: marginMap[size.value] || marginMap.default\n\t};\n});\n</script>\n\n<style scoped>\n.el-descriptions {\n\tmargin-top: 20px;\n}\n</style>\n",
									"originalSourceSha256": "e53f2673cb060967e300d15105b5eb83ddccf87a0d8919202d991c8179d7659b",
									"notice": {
										"id": "31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f",
										"url": "/licenses/source-notices/31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt",
										"licenseFilename": "LICENSE-31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/vertical-list.vue",
											"sourceSha256": "fa143a2e9ae522a61db40ab868478352671c7eecbf2f0473231d64dab8f0a634",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-vertical-list/js/Demo.vue",
									"sha256": "54cef18d8489c3988e83ce9eaefb2fdd33f54e94cc487b28a2ba151b10951209",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"size\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (\n\t\t\t\t\tvalue === 'small' ||\n\t\t\t\t\tvalue === 'default' ||\n\t\t\t\t\tvalue === 'big' ||\n\t\t\t\t\tvalue === 'large'\n\t\t\t\t)\n\t\t\t\t\tsize = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioItem value=\"large\">大尺寸</AsamRadioItem>\n\t\t<AsamRadioItem value=\"default\">默认</AsamRadioItem>\n\t\t<AsamRadioItem value=\"small\">小尺寸</AsamRadioItem>\n\t</AsamRadioGroup>\n\n\t<AsamDescriptions title=\"带边框的垂直列表\" direction=\"vertical\" :column=\"4\" :size=\"size\" border>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\" :span=\"2\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n\n\t<AsamDescriptions\n\t\ttitle=\"不带边框的垂直列表\"\n\t\t:column=\"4\"\n\t\t:size=\"size\"\n\t\tdirection=\"vertical\"\n\t\t:style=\"blockMargin\"\n\t>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\" :span=\"2\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsCapVerticalListDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioItem,\n\tAsamDescriptions,\n\tAsamDescriptionsItem,\n\tAsamTag\n} from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nconst size = ref('default');\nconst blockMargin = computed(() => {\n\tconst marginMap = {\n\t\tlarge: '32px',\n\t\tdefault: '28px',\n\t\tbig: '24px',\n\t\tsmall: '24px'\n\t};\n\treturn {\n\t\tmarginTop: marginMap[size.value] || marginMap.default\n\t};\n});\n</script>\n\n<style scoped>\n.el-descriptions {\n\tmargin-top: 20px;\n}\n</style>\n",
									"originalSourceSha256": "9337700708fc1aedba7fc62f5ac6b950cbd1dd03b9ed65f438db223eef02d597",
									"notice": {
										"id": "31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f",
										"url": "/licenses/source-notices/31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt",
										"licenseFilename": "LICENSE-31fdac89d3c69275938f5923bd5fe3e3045d162c84b4a16ac24a0036c114038f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/vertical-list.vue",
											"sourceSha256": "fa143a2e9ae522a61db40ab868478352671c7eecbf2f0473231d64dab8f0a634",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-rowspan",
					"title": "单元格跨行 2.8.1",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-rowspan/ts/Demo.vue",
									"sha256": "16fe1e470ab9fee7c4d566db22a4126c4661a573074a6f983f21599005357470",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt\n-->\n<template>\n\t<AsamDescriptions title=\"横向列表宽度\" border>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDescriptionsItem\n\t\t\t:rowspan=\"2\"\n\t\t\t:width=\"140\"\n\t\t\tlabel=\"照片\"\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n\n\t<AsamDescriptions title=\"纵向列表宽度\" direction=\"vertical\" border style=\"margin-top: 20px\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDescriptionsItem\n\t\t\t:rowspan=\"2\"\n\t\t\t:width=\"140\"\n\t\t\tlabel=\"照片\"\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsCapRowspanDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem, AsamImage, AsamTag } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "4380cc243e6a2a6e231ae591e9b2ec107ba6090c83a44b48ca5cc5a9c40beb4a",
									"notice": {
										"id": "541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb",
										"url": "/licenses/source-notices/541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt",
										"licenseFilename": "LICENSE-541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/rowspan.vue",
											"sourceSha256": "45bd4b8f041928ae04734b26bfa05a70d3d10e8416d235b44845bbdf57d9f15c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-rowspan/js/Demo.vue",
									"sha256": "93a5c4425859c8cb4ba5f1702a2b6341ab96b54ef0356dbbd9ac746e78cd2a80",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt\n-->\n<template>\n\t<AsamDescriptions title=\"横向列表宽度\" border>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDescriptionsItem\n\t\t\t:rowspan=\"2\"\n\t\t\t:width=\"140\"\n\t\t\tlabel=\"照片\"\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n\n\t<AsamDescriptions title=\"纵向列表宽度\" direction=\"vertical\" border style=\"margin-top: 20px\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDescriptionsItem\n\t\t\t:rowspan=\"2\"\n\t\t\t:width=\"140\"\n\t\t\tlabel=\"照片\"\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"用户名\">kooriookami</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\">18100000000</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsCapRowspanDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem, AsamImage, AsamTag } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "714c30fdaa980b7ca36c550b61d6210a8adcadb18b9793c1c687d6a1d1eded24",
									"notice": {
										"id": "541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb",
										"url": "/licenses/source-notices/541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt",
										"licenseFilename": "LICENSE-541708efd3f983a1550db2fc40adcf798cdd60d9ebbfea6e742e521719ab6bbb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/rowspan.vue",
											"sourceSha256": "45bd4b8f041928ae04734b26bfa05a70d3d10e8416d235b44845bbdf57d9f15c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-style",
					"title": "自定义样式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-customized-style/ts/Demo.vue",
									"sha256": "23634b58ba73716edebce63f4fdbd30483b1a292f2f61338a4f2774f225b1449",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt\n-->\n<template>\n\t<AsamDescriptions title=\"自定义样式列表\" :column=\"3\" border>\n\t\t<AsamDescriptionsItem\n\t\t\tlabel=\"用户名\"\n\t\t\tlabel-align=\"right\"\n\t\t\talign=\"center\"\n\t\t\tlabel-class-name=\"my-label\"\n\t\t\tclass-name=\"my-content\"\n\t\t\twidth=\"150px\"\n\t\t>\n\t\t\tkooriookami\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\" label-align=\"right\" align=\"center\">\n\t\t\t18100000000\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\" label-align=\"right\" align=\"center\">\n\t\t\t苏州\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\" label-align=\"right\" align=\"center\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\" label-align=\"right\" align=\"center\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsCapCustomizedStyleDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem, AsamTag } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC compiler implements :deep and :global selectors. */\n\n:deep(.my-label) {\n\tbackground: var(--el-color-success-light-9) !important;\n}\n\n:deep(.my-content) {\n\tbackground: var(--el-color-danger-light-9);\n}\n\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "cf5e875255848bf26227f97177b8b0036683c29b4b823977f558b1c822cb1866",
									"notice": {
										"id": "3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf",
										"url": "/licenses/source-notices/3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt",
										"licenseFilename": "LICENSE-3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/customized-style.vue",
											"sourceSha256": "fc5f4d62383755cc10dd7477224c71601760c88eb82d592170ddd9c6e86339e4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptions/cap-customized-style/js/Demo.vue",
									"sha256": "e76116ea285212bb52b96d036fe7e8934683e0cd02b3810d1fd02c7734691eb6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt\n-->\n<template>\n\t<AsamDescriptions title=\"自定义样式列表\" :column=\"3\" border>\n\t\t<AsamDescriptionsItem\n\t\t\tlabel=\"用户名\"\n\t\t\tlabel-align=\"right\"\n\t\t\talign=\"center\"\n\t\t\tlabel-class-name=\"my-label\"\n\t\t\tclass-name=\"my-content\"\n\t\t\twidth=\"150px\"\n\t\t>\n\t\t\tkooriookami\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"电话\" label-align=\"right\" align=\"center\">\n\t\t\t18100000000\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地点\" label-align=\"right\" align=\"center\">\n\t\t\t苏州\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"备注\" label-align=\"right\" align=\"center\">\n\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t</AsamDescriptionsItem>\n\t\t<AsamDescriptionsItem label=\"地址\" label-align=\"right\" align=\"center\">\n\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t</AsamDescriptionsItem>\n\t</AsamDescriptions>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsCapCustomizedStyleDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem, AsamTag } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC compiler implements :deep and :global selectors. */\n\n:deep(.my-label) {\n\tbackground: var(--el-color-success-light-9) !important;\n}\n\n:deep(.my-content) {\n\tbackground: var(--el-color-danger-light-9);\n}\n\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n",
									"originalSourceSha256": "408c4723c780ef471780ac97368948e3c80072bc08b7de71b431606b4ac0c203",
									"notice": {
										"id": "3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf",
										"url": "/licenses/source-notices/3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt",
										"licenseFilename": "LICENSE-3f28d7b9dbd298d9b503c47e00d9b12d85e70f9a5531a5f154622c6a5285c2bf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/descriptions/customized-style.vue",
											"sourceSha256": "fc5f4d62383755cc10dd7477224c71601760c88eb82d592170ddd9c6e86339e4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDescriptionsItem",
			"documentation": "/component-AsamDescriptionsItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptionsItem/basic/ts/Demo.vue",
									"sha256": "3a031b56b6657dec0d97b0682959e835092fed5e0a9614ffedac28ff48468d6f",
									"source": "<template>\n\t<div class=\"descriptions-examples\">\n\t\t<AsamDescriptions\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ title: size + ' 说明', size, column: 2, border: true }\"\n\t\t>\n\t\t\t<AsamDescriptionsItem label=\"名称\">本地草稿</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"状态\">待编辑</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"备注\" :span=\"2\">\n\t\t\t\t<span>用名称和值描述内容。</span>\n\t\t\t</AsamDescriptionsItem>\n\t\t</AsamDescriptions>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDescriptionsItemBasicDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.descriptions-examples {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDescriptionsItem/basic/js/Demo.vue",
									"sha256": "dfb24777d9653995d82aec12d16f619d317f75448b05c994ce40015e8edff051",
									"source": "<template>\n\t<div class=\"descriptions-examples\">\n\t\t<AsamDescriptions\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ title: size + ' 说明', size, column: 2, border: true }\"\n\t\t>\n\t\t\t<AsamDescriptionsItem label=\"名称\">本地草稿</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"状态\">待编辑</AsamDescriptionsItem>\n\t\t\t<AsamDescriptionsItem label=\"备注\" :span=\"2\">\n\t\t\t\t<span>用名称和值描述内容。</span>\n\t\t\t</AsamDescriptionsItem>\n\t\t</AsamDescriptions>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDescriptionsItemBasicDemo' });\nimport { AsamDescriptions, AsamDescriptionsItem } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.descriptions-examples {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDivider",
			"documentation": "/component-AsamDivider.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/basic/ts/Demo.vue",
									"sha256": "c586ecdc84ff5ea8a76cfdb02f428b56a26146cbf12c63b12b9522c250c91e34",
									"source": "<template>\n\t<p class=\"example-paragraph\">第一部分</p>\n\t<AsamDivider content-position=\"left\">补充信息</AsamDivider>\n\t<p class=\"example-paragraph\">第二部分</p>\n\t<span>操作一</span>\n\t<AsamDivider direction=\"vertical\" />\n\t<span>操作二</span>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDividerBasicDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/basic/js/Demo.vue",
									"sha256": "ada3930614b4df51a9f0916ac11292c1dbbc58677abff23452cfa6763f88cf3a",
									"source": "<template>\n\t<p class=\"example-paragraph\">第一部分</p>\n\t<AsamDivider content-position=\"left\">补充信息</AsamDivider>\n\t<p class=\"example-paragraph\">第二部分</p>\n\t<span>操作一</span>\n\t<AsamDivider direction=\"vertical\" />\n\t<span>操作二</span>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDividerBasicDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-basic-usage/ts/Demo.vue",
									"sha256": "3946f9e3368383a22b17215bb41c1be41cf7071fa4afd0d60ed6a9fbce7fa42c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt\n-->\n<template>\n\t<div>\n\t\t<span> 清晨坐在窗前，世界如过客般短暂停留，点头后离去。 </span>\n\t\t<AsamDivider />\n\t\t<span> 细小的思绪如树叶沙沙作响，在心中低语着喜悦。 </span>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDividerCapBasicUsageDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "820f1df1d589c01c274928add6f66e2df8e9304f1409f1ceb8cd4941064d22a3",
									"notice": {
										"id": "7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a",
										"url": "/licenses/source-notices/7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt",
										"licenseFilename": "LICENSE-7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/basic-usage.vue",
											"sourceSha256": "16d9f0e5e55fee1a1f7a4b493415bc21ed08dc5d75f46c46aa10372d60536a72",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-basic-usage/js/Demo.vue",
									"sha256": "0d5b4ec5c2d73b49691b93e17c1bfdee3b024fbb32fd12b2febedc64580f98a2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt\n-->\n<template>\n\t<div>\n\t\t<span> 清晨坐在窗前，世界如过客般短暂停留，点头后离去。 </span>\n\t\t<AsamDivider />\n\t\t<span> 细小的思绪如树叶沙沙作响，在心中低语着喜悦。 </span>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDividerCapBasicUsageDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "b3320647e813603d00fc41484405bda2756394d6484137d77da959ca5b8c3c6e",
									"notice": {
										"id": "7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a",
										"url": "/licenses/source-notices/7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt",
										"licenseFilename": "LICENSE-7a40e64f1c27555b8279a9677192a1b7e892c77aa0fd7b43bdd4cfefa60b268a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/basic-usage.vue",
											"sourceSha256": "16d9f0e5e55fee1a1f7a4b493415bc21ed08dc5d75f46c46aa10372d60536a72",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-content",
					"title": "设置文案",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-custom-content/ts/Demo.vue",
									"sha256": "70544113ba2bc3828dd62a0cea7b3c2d1e26ee667f910b1e34a7ac54d9d6fa66",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt\n-->\n<template>\n\t<div>\n\t\t<span>你看不见真实的自己，看到的只是影子。 </span>\n\t\t<AsamDivider content-position=\"left\">泰戈尔</AsamDivider>\n\t\t<span> 我的愿望喧闹地打断你的歌声，请让我静静聆听。 </span>\n\t\t<AsamDivider>\n\t\t\t<AsamIcon><star-filled /></AsamIcon>\n\t\t</AsamDivider>\n\t\t<span>我无法选择最好的，最好的选择了我。</span>\n\t\t<AsamDivider content-position=\"right\">泰戈尔</AsamDivider>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDividerCapCustomContentDemo' });\nimport { AsamDivider, AsamIcon } from '@asam-ui/ui';\n\nimport { StarFilled } from '@asam-ui/icons-vue';\n</script>\n",
									"originalSourceSha256": "faa4d9c28dd0aa64d42b479d02bc15a361c911c9cd3607ea53524a20e50bcc52",
									"notice": {
										"id": "4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d",
										"url": "/licenses/source-notices/4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt",
										"licenseFilename": "LICENSE-4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/custom-content.vue",
											"sourceSha256": "50df78475cc74aac14211ff757dedff38a92582e7bd054ebc648ac3cba2a2a40",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-custom-content/js/Demo.vue",
									"sha256": "37a33a350c0d81eeed1d518945af29ecbea8edba33085294eae85723ba8255cd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt\n-->\n<template>\n\t<div>\n\t\t<span>你看不见真实的自己，看到的只是影子。 </span>\n\t\t<AsamDivider content-position=\"left\">泰戈尔</AsamDivider>\n\t\t<span> 我的愿望喧闹地打断你的歌声，请让我静静聆听。 </span>\n\t\t<AsamDivider>\n\t\t\t<AsamIcon><star-filled /></AsamIcon>\n\t\t</AsamDivider>\n\t\t<span>我无法选择最好的，最好的选择了我。</span>\n\t\t<AsamDivider content-position=\"right\">泰戈尔</AsamDivider>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDividerCapCustomContentDemo' });\nimport { AsamDivider, AsamIcon } from '@asam-ui/ui';\nimport { StarFilled } from '@asam-ui/icons-vue';\n</script>\n",
									"originalSourceSha256": "56fd5631a976f8f1ce4533e5893b835a778f4efb42ba647d529149fb74f3ad1f",
									"notice": {
										"id": "4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d",
										"url": "/licenses/source-notices/4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt",
										"licenseFilename": "LICENSE-4736700fad27526acb49e7152ebaf3ee625ff6b3e94536d560e612be8f65d24d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/custom-content.vue",
											"sourceSha256": "50df78475cc74aac14211ff757dedff38a92582e7bd054ebc648ac3cba2a2a40",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-line-dashed",
					"title": "虚线",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-line-dashed/ts/Demo.vue",
									"sha256": "dfc9975d6e82f512ed97edc66d141b71f5f56fa7c70fed05d8fe9e8c88a18ceb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt\n-->\n<template>\n\t<div>\n\t\t<span>大海，你用怎样的语言？</span>\n\t\t<AsamDivider border-style=\"dashed\" />\n\t\t<span>那是永恒的提问。</span>\n\t</div>\n\t<AsamDivider border-style=\"dotted\" />\n\t<span>天空，你用怎样的语言回答？</span>\n\t<AsamDivider border-style=\"double\" />\n\t<span>那是永恒的沉默。</span>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDividerCapLineDashedDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "6176b2b7cf4501c79b80b27786bd2a664dc603b7edd3de3b96c9540bb59cb138",
									"notice": {
										"id": "91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d",
										"url": "/licenses/source-notices/91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt",
										"licenseFilename": "LICENSE-91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/line-dashed.vue",
											"sourceSha256": "98e4408f3a7b1f2c4d0c6327abe1416247ec8e0dcdbebfaf5b2c98a534af7a20",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-line-dashed/js/Demo.vue",
									"sha256": "2fe5e6eaacc4be0f48c02398cee77496e89315a1340951c6223aff5732d7d543",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt\n-->\n<template>\n\t<div>\n\t\t<span>大海，你用怎样的语言？</span>\n\t\t<AsamDivider border-style=\"dashed\" />\n\t\t<span>那是永恒的提问。</span>\n\t</div>\n\t<AsamDivider border-style=\"dotted\" />\n\t<span>天空，你用怎样的语言回答？</span>\n\t<AsamDivider border-style=\"double\" />\n\t<span>那是永恒的沉默。</span>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDividerCapLineDashedDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "42ed856919a2e4cee8307862e57c194cdda48ead407ebc05566de451a10a4cae",
									"notice": {
										"id": "91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d",
										"url": "/licenses/source-notices/91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt",
										"licenseFilename": "LICENSE-91d0a54a7429f8cecf82ddc6e72f3d9d9c853826a6d1300a2f0eb4bb15c2771d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/line-dashed.vue",
											"sourceSha256": "98e4408f3a7b1f2c4d0c6327abe1416247ec8e0dcdbebfaf5b2c98a534af7a20",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical-divider",
					"title": "垂直分隔线",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-vertical-divider/ts/Demo.vue",
									"sha256": "8148109015b31cc2206849d49f92107af1ffa16865d281abf5d4f7367fe5a141",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt\n-->\n<template>\n\t<div>\n\t\t<span>雨天</span>\n\t\t<AsamDivider direction=\"vertical\" />\n\t\t<span>首页</span>\n\t\t<AsamDivider direction=\"vertical\" border-style=\"dashed\" />\n\t\t<span>草地</span>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDividerCapVerticalDividerDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "e6ca5325468161675bd6f32a43b13f4c0ab536c598c368fbdee58d010069fa24",
									"notice": {
										"id": "619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e",
										"url": "/licenses/source-notices/619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt",
										"licenseFilename": "LICENSE-619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/vertical-divider.vue",
											"sourceSha256": "eab2fc18f319ef86733e4c5c0f565c2bee5c4247d971034307186aaa3ad8bee8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDivider/cap-vertical-divider/js/Demo.vue",
									"sha256": "01b2a0c117f9626ca56d0fb92a97d1057489845d44c011e0aead34061703986c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt\n-->\n<template>\n\t<div>\n\t\t<span>雨天</span>\n\t\t<AsamDivider direction=\"vertical\" />\n\t\t<span>首页</span>\n\t\t<AsamDivider direction=\"vertical\" border-style=\"dashed\" />\n\t\t<span>草地</span>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDividerCapVerticalDividerDemo' });\nimport { AsamDivider } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "563c58e16c327213fd1316b064a4071c801b31646b293b3ae44520f82a32e300",
									"notice": {
										"id": "619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e",
										"url": "/licenses/source-notices/619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt",
										"licenseFilename": "LICENSE-619c34987a2746cd48a00572a623ba1d037c1ca4508a5cd3e3914cf9e43e265e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/divider/vertical-divider.vue",
											"sourceSha256": "eab2fc18f319ef86733e4c5c0f565c2bee5c4247d971034307186aaa3ad8bee8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamEmpty",
			"documentation": "/component-AsamEmpty.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/basic/ts/Demo.vue",
									"sha256": "ff53a0339ecd48ccb84b0db4faaf665ee6a597b408d57a5c896af3b1663e7169",
									"source": "<template>\n\t<AsamEmpty v-if=\"empty\" description=\"当前没有本地记录\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"empty = false\"\n\t\t\t>添加本地示例</AsamButton\n\t\t>\n\t</AsamEmpty>\n\t<p class=\"example-paragraph\" v-else>\n\t\t已添加一条本地记录。<AsamButton type=\"default\" native-type=\"button\" @click=\"empty = true\"\n\t\t\t>清空本例</AsamButton\n\t\t>\n\t</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEmptyBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamEmpty } from '@asam-ui/ui';\nconst empty = ref(true);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/basic/js/Demo.vue",
									"sha256": "61dc8b816d0743cd852103256664e4d7e7e9d032a7ee4f350f38e1f90f7b74af",
									"source": "<template>\n\t<AsamEmpty v-if=\"empty\" description=\"当前没有本地记录\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"empty = false\"\n\t\t\t>添加本地示例</AsamButton\n\t\t>\n\t</AsamEmpty>\n\t<p class=\"example-paragraph\" v-else>\n\t\t已添加一条本地记录。<AsamButton type=\"default\" native-type=\"button\" @click=\"empty = true\"\n\t\t\t>清空本例</AsamButton\n\t\t>\n\t</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEmptyBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamEmpty } from '@asam-ui/ui';\nconst empty = ref(true);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-basic-usage/ts/Demo.vue",
									"sha256": "d88289cdfa986f0a1faa670f3b81fcd19f1f8be09328aeacab0946844f75a32b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt\n-->\n<template>\n\t<AsamEmpty description=\"说明\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEmptyCapBasicUsageDemo' });\nimport { AsamEmpty } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "b4485dae072f8e08e346e4f437cce9dc9dd9936015ade56a95296ad284d363d8",
									"notice": {
										"id": "6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7",
										"url": "/licenses/source-notices/6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt",
										"licenseFilename": "LICENSE-6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/basic-usage.vue",
											"sourceSha256": "4862bf76721ed3b67dd9ec52dc12d81d2ec27c024e8bb1e13f5b34c8caa717a8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-basic-usage/js/Demo.vue",
									"sha256": "71ce537f729ceca06c3279dd209420345c230872c650fe835ade24641a765ba9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt\n-->\n<template>\n\t<AsamEmpty description=\"说明\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEmptyCapBasicUsageDemo' });\nimport { AsamEmpty } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "9a5c752eeba406955c794239a9d133005e2be1a2580f90918d81d96956c067fe",
									"notice": {
										"id": "6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7",
										"url": "/licenses/source-notices/6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt",
										"licenseFilename": "LICENSE-6b546cb61b735659838a3293671503ac784afec3d34d262536f1428d75b8b6e7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/basic-usage.vue",
											"sourceSha256": "4862bf76721ed3b67dd9ec52dc12d81d2ec27c024e8bb1e13f5b34c8caa717a8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-image",
					"title": "自定义图片",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-custom-image/ts/Demo.vue",
									"sha256": "3f0d0b132871e9e23cf576e0370a1970496f8d200582e03c321ead2021b0b941",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt\n-->\n<template>\n\t<AsamEmpty\n\t\timage=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEmptyCapCustomImageDemo' });\nimport { AsamEmpty } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "89584cdc840f4dd398868e00358b74a14bbb217cc4e7e519aac8e971961ec39b",
									"notice": {
										"id": "dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5",
										"url": "/licenses/source-notices/dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt",
										"licenseFilename": "LICENSE-dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/custom-image.vue",
											"sourceSha256": "56405d8b5f43902db132bd5059aa3a811b3e9cce2636e09519555e72553f4604",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-custom-image/js/Demo.vue",
									"sha256": "a0ee4e8f7551e665442ca390b2326d95c811f82488d0e397acde06d6fdb7cfc0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt\n-->\n<template>\n\t<AsamEmpty\n\t\timage=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t/>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEmptyCapCustomImageDemo' });\nimport { AsamEmpty } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "492f5a31a1038168aef51e0bf78c4562145f90fbba13ffdac7b139411ba9526d",
									"notice": {
										"id": "dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5",
										"url": "/licenses/source-notices/dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt",
										"licenseFilename": "LICENSE-dfc003ab8076e0225ea0532790070b2248cb84f23536ce67f1ca895a4a182ca5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/custom-image.vue",
											"sourceSha256": "56405d8b5f43902db132bd5059aa3a811b3e9cce2636e09519555e72553f4604",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-image-size",
					"title": "图片尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-image-size/ts/Demo.vue",
									"sha256": "41fa817430081eab6d7028ff372e365c2295209f8104ca9a4a2bfc7591b2918a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt\n-->\n<template>\n\t<AsamEmpty :image-size=\"200\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEmptyCapImageSizeDemo' });\nimport { AsamEmpty } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "1a4f360b6836ab34d2e79bf1ce1e6f1b8308f2ef2da32d02f594b73a7bde3843",
									"notice": {
										"id": "2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e",
										"url": "/licenses/source-notices/2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt",
										"licenseFilename": "LICENSE-2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/image-size.vue",
											"sourceSha256": "97fccdf3280b880c85ad0597186055831250d6f6441e9d118b712b2429f82e8b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-image-size/js/Demo.vue",
									"sha256": "e18a34b834d5f5bfeff50801ce58ea484df089a8109fb26e9e10d032d8e525d8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt\n-->\n<template>\n\t<AsamEmpty :image-size=\"200\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEmptyCapImageSizeDemo' });\nimport { AsamEmpty } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "4c04713559743e8613d7e9521f8162c54eed95e149e1123e693d0dea938e59bc",
									"notice": {
										"id": "2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e",
										"url": "/licenses/source-notices/2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt",
										"licenseFilename": "LICENSE-2e4234187f2befe29abd06313feddd260673632ac4a7dafc3b7bc0cb6bdf0b8e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/image-size.vue",
											"sourceSha256": "97fccdf3280b880c85ad0597186055831250d6f6441e9d118b712b2429f82e8b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-bottom-content",
					"title": "底部内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-bottom-content/ts/Demo.vue",
									"sha256": "16251ae8cd5c5f5f0b329adf9d419a89b4a5ed328d41b1d6a489f049c3f31892",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt\n-->\n<template>\n\t<AsamEmpty>\n\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t</AsamEmpty>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamEmptyCapBottomContentDemo' });\nimport { AsamEmpty, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "b694e66326e31ae2c05c0411a0996b694e5313efda30d74d86f23ea099c8e09a",
									"notice": {
										"id": "78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f",
										"url": "/licenses/source-notices/78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt",
										"licenseFilename": "LICENSE-78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/bottom-content.vue",
											"sourceSha256": "6b0be86b5e824cfa26c61d5ee6ccf2e4c93a2586512d87370dae943d9f9cd0e2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-bottom-content/js/Demo.vue",
									"sha256": "b10bd97b847454bd19aa5e7b7b59f0112f0fdc71b8692df14c114d8bbdf552a4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt\n-->\n<template>\n\t<AsamEmpty>\n\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t</AsamEmpty>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamEmptyCapBottomContentDemo' });\nimport { AsamEmpty, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "9c06d948f92db5f96d85f6007c59d211bf7b0b2d4fc393105b913315c33515c0",
									"notice": {
										"id": "78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f",
										"url": "/licenses/source-notices/78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt",
										"licenseFilename": "LICENSE-78bcd0e8b08f543c5c9056ad202d5c8c2364ba0f4e6bfa1830b45e181fbc425f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/empty/bottom-content.vue",
											"sourceSha256": "6b0be86b5e824cfa26c61d5ee6ccf2e4c93a2586512d87370dae943d9f9cd0e2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-fill-colors",
					"title": "填色变量与自定义图形",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-fill-colors/ts/Demo.vue",
									"sha256": "bf4954a7fd6d8966875793852bfa1b9d1c1f44ce7feb99a85a777fbf0cf545d8",
									"source": "<template>\n\t<div class=\"empty-colors demo-layout-1\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"applyPalette\">应用配色</AsamButton>\n\t\t<div class=\"color-inputs\">\n\t\t\t<label v-for=\"(_color, index) in colors\" :key=\"index\">\n\t\t\t\t填色 {{ index }}\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamColorPicker v-model=\"colors[index]\" />\n\t\t\t</label>\n\t\t</div>\n\t\t<AsamEmpty class=\"default-palette\" :style=\"imageStyle\" description=\"默认图形使用填色 1–9\" />\n\t\t<AsamEmpty\n\t\t\tclass=\"custom-zero\"\n\t\t\t:style=\"imageStyle\"\n\t\t\tdescription=\"自定义 image 插槽使用填色 0\"\n\t\t>\n\t\t\t<template #image>\n\t\t\t\t<svg viewBox=\"0 0 100 100\" aria-label=\"自定义填色 0 图形\">\n\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx=\"50\"\n\t\t\t\t\t\tcy=\"50\"\n\t\t\t\t\t\tr=\"40\"\n\t\t\t\t\t\tfill=\"var(--el-empty-fill-color-0)\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</template>\n\t\t</AsamEmpty>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport type { CSSProperties } from 'vue';\nimport { AsamColorPicker, AsamButton, AsamEmpty } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamEmptyFillColorsDemo' });\nconst colors = ref([\n\t'#ffffff',\n\t'#fcfcfd',\n\t'#f8f9fb',\n\t'#f7f8fc',\n\t'#eeeff3',\n\t'#edeef2',\n\t'#e9ebef',\n\t'#e5e7e9',\n\t'#e0e3e9',\n\t'#d5d7de'\n]);\nconst imageStyle = computed<CSSProperties>(() =>\n\tObject.fromEntries(\n\t\tcolors.value.map((color, index) => [`--el-empty-fill-color-${index}`, color])\n\t)\n);\nfunction applyPalette() {\n\tcolors.value = [\n\t\t'#e74c3c',\n\t\t'#3498db',\n\t\t'#2ecc71',\n\t\t'#9b59b6',\n\t\t'#f1c40f',\n\t\t'#e67e22',\n\t\t'#1abc9c',\n\t\t'#34495e',\n\t\t'#d35400',\n\t\t'#8e44ad'\n\t];\n}\n</script>\n\n<style scoped>\n.color-inputs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 12px;\n}\n\n.color-inputs label {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n}\n\n.empty-colors button {\n\tmargin-bottom: 12px;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamEmpty/cap-fill-colors/js/Demo.vue",
									"sha256": "ce0ba4e6ca5732ec689475297d555bac7b5c9f53e216260c4bd9ead9c1a3aced",
									"source": "<template>\n\t<div class=\"empty-colors demo-layout-1\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"applyPalette\">应用配色</AsamButton>\n\t\t<div class=\"color-inputs\">\n\t\t\t<label v-for=\"(_color, index) in colors\" :key=\"index\">\n\t\t\t\t填色 {{ index }}\n\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t<AsamColorPicker v-model=\"colors[index]\" />\n\t\t\t</label>\n\t\t</div>\n\t\t<AsamEmpty class=\"default-palette\" :style=\"imageStyle\" description=\"默认图形使用填色 1–9\" />\n\t\t<AsamEmpty\n\t\t\tclass=\"custom-zero\"\n\t\t\t:style=\"imageStyle\"\n\t\t\tdescription=\"自定义 image 插槽使用填色 0\"\n\t\t>\n\t\t\t<template #image>\n\t\t\t\t<svg viewBox=\"0 0 100 100\" aria-label=\"自定义填色 0 图形\">\n\t\t\t\t\t<!-- prettier-ignore -->\n\t\t\t\t\t<circle\n\t\t\t\t\t\tcx=\"50\"\n\t\t\t\t\t\tcy=\"50\"\n\t\t\t\t\t\tr=\"40\"\n\t\t\t\t\t\tfill=\"var(--el-empty-fill-color-0)\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t</template>\n\t\t</AsamEmpty>\n\t</div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamColorPicker, AsamButton, AsamEmpty } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamEmptyFillColorsDemo' });\nconst colors = ref([\n\t'#ffffff',\n\t'#fcfcfd',\n\t'#f8f9fb',\n\t'#f7f8fc',\n\t'#eeeff3',\n\t'#edeef2',\n\t'#e9ebef',\n\t'#e5e7e9',\n\t'#e0e3e9',\n\t'#d5d7de'\n]);\nconst imageStyle = computed(() =>\n\tObject.fromEntries(\n\t\tcolors.value.map((color, index) => [`--el-empty-fill-color-${index}`, color])\n\t)\n);\nfunction applyPalette() {\n\tcolors.value = [\n\t\t'#e74c3c',\n\t\t'#3498db',\n\t\t'#2ecc71',\n\t\t'#9b59b6',\n\t\t'#f1c40f',\n\t\t'#e67e22',\n\t\t'#1abc9c',\n\t\t'#34495e',\n\t\t'#d35400',\n\t\t'#8e44ad'\n\t];\n}\n</script>\n\n<style scoped>\n.color-inputs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 12px;\n}\n\n.color-inputs label {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n}\n\n.empty-colors button {\n\tmargin-bottom: 12px;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFooter",
			"documentation": "/component-AsamFooter.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFooter/basic/ts/Demo.vue",
									"sha256": "788281ce1231e8b32c3f0531dcb65a465dc20c60cf435a8fcc94116e4d901bda",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFooterBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFooter/basic/js/Demo.vue",
									"sha256": "caedf11bcd6e83bd3146be520f97867ee82244babb7878c0b219dbcf263a48d2",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFooterBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamHeader",
			"documentation": "/component-AsamHeader.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamHeader/basic/ts/Demo.vue",
									"sha256": "67906c426e4783fc161bbfc0a1d9d134ddfa9106f518213282cbfbeddcaf124b",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamHeaderBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamHeader/basic/js/Demo.vue",
									"sha256": "676305963e98943774bab2ca63e219b116761f07fbad0f311b806a97b18d9261",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamHeaderBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamIcon",
			"documentation": "/component-AsamIcon.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/basic/ts/Demo.vue",
									"sha256": "475dde4fd5eb4b9abdc9259f244692bf50adc6cd2aee142070aa8b4842d02676",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamIcon :size=\"24\" color=\"var(--asam-color-text-primary)\">\n\t\t\t<InfoFilled />\n\t\t</AsamIcon>\n\t\t<AsamIcon :size=\"32\">\n\t\t\t<Edit />\n\t\t</AsamIcon>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamIconBasicDemo' });\nimport { AsamIcon } from '@asam-ui/ui';\nimport { InfoFilled, Edit } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/basic/js/Demo.vue",
									"sha256": "077a787ed037fd940fc32477b513378015e8f444548122884dfa43311052ba3e",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamIcon :size=\"24\" color=\"var(--asam-color-text-primary)\">\n\t\t\t<InfoFilled />\n\t\t</AsamIcon>\n\t\t<AsamIcon :size=\"32\">\n\t\t\t<Edit />\n\t\t</AsamIcon>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamIconBasicDemo' });\nimport { AsamIcon } from '@asam-ui/ui';\nimport { InfoFilled, Edit } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-simple-usage",
					"title": "容器与直接图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/cap-simple-usage/ts/Demo.vue",
									"sha256": "e5f5c0c8020a1580e697062b5671f3dbcfba9c7c3795b9c68b756ec2a3fbf74b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt\n-->\n<template>\n\t<div>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"size = size === 30 ? 40 : 30\"\n\t\t\t>切换容器尺寸</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t\ttype=\"default\"\n\t\t\t@click=\"\n\t\t\t\tcolor =\n\t\t\t\t\tcolor === 'var(--asam-color-primary)'\n\t\t\t\t\t\t? 'var(--asam-color-danger)'\n\t\t\t\t\t\t: 'var(--asam-color-primary)'\n\t\t\t\"\n\t\t>\n\t\t\t切换容器颜色\n\t\t</AsamButton>\n\t\t<div class=\"icon-row\">\n\t\t\t<AsamIcon :size=\"size\" :color=\"color\" v-bind=\"domDataAttrs('data-example', 'wrapped')\">\n\t\t\t\t<Edit />\n\t\t\t</AsamIcon>\n\t\t\t<Edit v-bind=\"domDataAttrs('data-example', 'direct')\" />\n\t\t\t<MenuIcon v-bind=\"domDataAttrs('data-example', 'menu-alias')\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamIconCapSimpleUsageDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamIcon } from '@asam-ui/ui';\nimport { Edit, Menu as MenuIcon } from '@asam-ui/icons-vue';\n\nconst size = ref(30);\nconst color = ref('var(--asam-color-primary)');\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n\n<style scoped>\n.icon-row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n\tfont-size: 20px;\n}\n</style>\n",
									"originalSourceSha256": "0f80103dc6cdd1474f96d7c836d4a49be91560d84b9b55c772d1de5003f05526",
									"notice": {
										"id": "802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08",
										"url": "/licenses/source-notices/802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt",
										"licenseFilename": "LICENSE-802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/en-US/component/icon.md",
											"sourceSha256": "e1632666b64600072a1ed02e6b0f6c6975d5dfefc8b5c22899a6e70e7c64ee34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc",
											"sourceGitBlob": "741c116e7be233d377524832c87262b5768d9bd7",
											"inlineCodeSha256": "90fde68bb1b4bdda1db8fd0aa97509ecdb7ee75bee2188a75dd8edfca288b3d2",
											"inlineStartLine": 101,
											"inlineEndLine": 110
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/cap-simple-usage/js/Demo.vue",
									"sha256": "150a58532f96039ef1b499f985b92c17e066f6605ffadfc36639fcfd640fa12f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt\n-->\n<template>\n\t<div>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"size = size === 30 ? 40 : 30\"\n\t\t\t>切换容器尺寸</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t\ttype=\"default\"\n\t\t\t@click=\"\n\t\t\t\tcolor =\n\t\t\t\t\tcolor === 'var(--asam-color-primary)'\n\t\t\t\t\t\t? 'var(--asam-color-danger)'\n\t\t\t\t\t\t: 'var(--asam-color-primary)'\n\t\t\t\"\n\t\t>\n\t\t\t切换容器颜色\n\t\t</AsamButton>\n\t\t<div class=\"icon-row\">\n\t\t\t<AsamIcon :size=\"size\" :color=\"color\" v-bind=\"domDataAttrs('data-example', 'wrapped')\">\n\t\t\t\t<Edit />\n\t\t\t</AsamIcon>\n\t\t\t<Edit v-bind=\"domDataAttrs('data-example', 'direct')\" />\n\t\t\t<MenuIcon v-bind=\"domDataAttrs('data-example', 'menu-alias')\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamIconCapSimpleUsageDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamIcon } from '@asam-ui/ui';\nimport { Edit, Menu as MenuIcon } from '@asam-ui/icons-vue';\n\nconst size = ref(30);\nconst color = ref('var(--asam-color-primary)');\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n\n<style scoped>\n.icon-row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n\tfont-size: 20px;\n}\n</style>\n",
									"originalSourceSha256": "af3eb714d510b04111a07af343a69d553980a125e322833f6794541e68866fdd",
									"notice": {
										"id": "802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08",
										"url": "/licenses/source-notices/802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt",
										"licenseFilename": "LICENSE-802d3a5e985611c207ff9bad7a52a565bb860247f1e9b23fa9db1cc2d394bc08.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/en-US/component/icon.md",
											"sourceSha256": "e1632666b64600072a1ed02e6b0f6c6975d5dfefc8b5c22899a6e70e7c64ee34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc",
											"sourceGitBlob": "741c116e7be233d377524832c87262b5768d9bd7",
											"inlineCodeSha256": "90fde68bb1b4bdda1db8fd0aa97509ecdb7ee75bee2188a75dd8edfca288b3d2",
											"inlineStartLine": 101,
											"inlineEndLine": 110
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-container-classes",
					"title": "容器样式与旋转",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/cap-container-classes/ts/Demo.vue",
									"sha256": "dcd6a3a1d3410bdea324367696a1ab65b2127bf54c169197c224d055dfa61ddd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt\n-->\n<template>\n\t<div class=\"demo-spacing-1\">\n\t\t<p class=\"example-paragraph\">is-loading 让图标每两秒旋转一圈，可用局部样式覆盖动画。</p>\n\t\t<div class=\"icon-row\">\n\t\t\t<AsamIcon :size=\"20\" v-bind=\"domDataAttrs('data-example', 'sized')\"><Edit /></AsamIcon>\n\t\t\t<AsamIcon color=\"var(--asam-color-primary)\" class=\"no-inherit\"><Share /></AsamIcon>\n\t\t\t<AsamIcon v-bind=\"domDataAttrs('data-example', 'inherited')\"><Delete /></AsamIcon>\n\t\t\t<AsamIcon class=\"is-loading\" v-bind=\"domDataAttrs('data-example', 'loading')\">\n\t\t\t\t<Loading />\n\t\t\t</AsamIcon>\n\t\t\t<AsamButton type=\"default\">\n\t\t\t\t<AsamIcon style=\"vertical-align: middle\"><Search /></AsamIcon>\n\t\t\t\t<span style=\"vertical-align: middle\">搜索</span>\n\t\t\t</AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamIconCapContainerClassesDemo' });\nimport { AsamIcon, AsamButton } from '@asam-ui/ui';\nimport { Edit, Share, Delete, Loading, Search } from '@asam-ui/icons-vue';\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n\n<style scoped>\n.icon-row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n\tfont-size: 24px;\n\tcolor: var(--asam-color-danger);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "784e502afccb5c7edcd84cb0094ca5220cdfeaf362a19c0542ff74a4517b553e",
									"notice": {
										"id": "40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a",
										"url": "/licenses/source-notices/40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt",
										"licenseFilename": "LICENSE-40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/en-US/component/icon.md",
											"sourceSha256": "e1632666b64600072a1ed02e6b0f6c6975d5dfefc8b5c22899a6e70e7c64ee34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc",
											"sourceGitBlob": "741c116e7be233d377524832c87262b5768d9bd7",
											"inlineCodeSha256": "1e13db0733b11d0d19f9d803fa409aa2aa3df9d9767c7314deb2f94a55fb6209",
											"inlineStartLine": 131,
											"inlineEndLine": 154
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/cap-container-classes/js/Demo.vue",
									"sha256": "e5fe2f4f1de1e337ba63f5029d452b97dca7f95a34fdcb55d2511a57e33401eb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt\n-->\n<template>\n\t<div class=\"demo-spacing-1\">\n\t\t<p class=\"example-paragraph\">is-loading 让图标每两秒旋转一圈，可用局部样式覆盖动画。</p>\n\t\t<div class=\"icon-row\">\n\t\t\t<AsamIcon :size=\"20\" v-bind=\"domDataAttrs('data-example', 'sized')\"><Edit /></AsamIcon>\n\t\t\t<AsamIcon color=\"var(--asam-color-primary)\" class=\"no-inherit\"><Share /></AsamIcon>\n\t\t\t<AsamIcon v-bind=\"domDataAttrs('data-example', 'inherited')\"><Delete /></AsamIcon>\n\t\t\t<AsamIcon class=\"is-loading\" v-bind=\"domDataAttrs('data-example', 'loading')\">\n\t\t\t\t<Loading />\n\t\t\t</AsamIcon>\n\t\t\t<AsamButton type=\"default\">\n\t\t\t\t<AsamIcon style=\"vertical-align: middle\"><Search /></AsamIcon>\n\t\t\t\t<span style=\"vertical-align: middle\">搜索</span>\n\t\t\t</AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamIconCapContainerClassesDemo' });\nimport { AsamIcon, AsamButton } from '@asam-ui/ui';\nimport { Edit, Share, Delete, Loading, Search } from '@asam-ui/icons-vue';\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n\n<style scoped>\n.icon-row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n\tfont-size: 24px;\n\tcolor: var(--asam-color-danger);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "c26b8bbc61fed6e5403d343d97b409fa1c72bf09bedf3e39418d4edbcf5e1402",
									"notice": {
										"id": "40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a",
										"url": "/licenses/source-notices/40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt",
										"licenseFilename": "LICENSE-40dcafb4f884791ecda6902f0969404af763e058e8609998a9105c82488ab44a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/en-US/component/icon.md",
											"sourceSha256": "e1632666b64600072a1ed02e6b0f6c6975d5dfefc8b5c22899a6e70e7c64ee34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc",
											"sourceGitBlob": "741c116e7be233d377524832c87262b5768d9bd7",
											"inlineCodeSha256": "1e13db0733b11d0d19f9d803fa409aa2aa3df9d9767c7314deb2f94a55fb6209",
											"inlineStartLine": 131,
											"inlineEndLine": 154
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-direct-svg",
					"title": "直接设置 SVG 尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/cap-direct-svg/ts/Demo.vue",
									"sha256": "b7dc9e8556c36ee59f2b9eeb23a81c5b9fb7c753f4986cb207e037ee1b7540ea",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt\n-->\n<template>\n\t<div\n\t\tstyle=\"font-size: 20px; color: var(--asam-color-primary)\"\n\t\tv-bind=\"domDataAttrs('data-example', 'direct-svg-row')\"\n\t>\n\t\t<Edit style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t\t<Share style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t\t<Delete style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t\t<Search style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamIconCapDirectSvgDemo' });\nimport { Edit, Share, Delete, Search } from '@asam-ui/icons-vue';\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n",
									"originalSourceSha256": "c7c07a7fdcd55e82a7c60f73850ea4d5a13641f2110cc97bc4d0a1bf1f970e9b",
									"notice": {
										"id": "dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9",
										"url": "/licenses/source-notices/dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt",
										"licenseFilename": "LICENSE-dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/en-US/component/icon.md",
											"sourceSha256": "e1632666b64600072a1ed02e6b0f6c6975d5dfefc8b5c22899a6e70e7c64ee34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc",
											"sourceGitBlob": "741c116e7be233d377524832c87262b5768d9bd7",
											"inlineCodeSha256": "a8d20787b55111e0b951ce4f116fa44555cd60082f22c5dc14708484605378f7",
											"inlineStartLine": 187,
											"inlineEndLine": 196
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamIcon/cap-direct-svg/js/Demo.vue",
									"sha256": "13c5e9a0564f3711293b834b3ae8da94b4dfa83a53239471eef40239d85da868",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt\n-->\n<template>\n\t<div\n\t\tstyle=\"font-size: 20px; color: var(--asam-color-primary)\"\n\t\tv-bind=\"domDataAttrs('data-example', 'direct-svg-row')\"\n\t>\n\t\t<Edit style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t\t<Share style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t\t<Delete style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t\t<Search style=\"width: 1em; height: 1em; margin-right: 8px\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamIconCapDirectSvgDemo' });\nimport { Edit, Share, Delete, Search } from '@asam-ui/icons-vue';\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n",
									"originalSourceSha256": "4fb88202f8f4c31c9b99f5a4b93ff26d2057eee860ba8d339927f383f01f33c8",
									"notice": {
										"id": "dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9",
										"url": "/licenses/source-notices/dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt",
										"licenseFilename": "LICENSE-dac168938a80c56887848ab72232f35e6ddf95ca5263ed9b693df58a5be1d8f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/en-US/component/icon.md",
											"sourceSha256": "e1632666b64600072a1ed02e6b0f6c6975d5dfefc8b5c22899a6e70e7c64ee34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc",
											"sourceGitBlob": "741c116e7be233d377524832c87262b5768d9bd7",
											"inlineCodeSha256": "a8d20787b55111e0b951ce4f116fa44555cd60082f22c5dc14708484605378f7",
											"inlineStartLine": 187,
											"inlineEndLine": 196
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamImage",
			"documentation": "/component-AsamImage.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/basic/ts/Demo.vue",
									"sha256": "9862093d4358ea3c5230a638271622696a3ab5c722d9023b27dbc0345a88d2e2",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamImage\n\t\t\t:src=\"preview\"\n\t\t\t:preview-src-list=\"[preview]\"\n\t\t\tfit=\"contain\"\n\t\t\tclass=\"preview-image\"\n\t\t\tpreview-teleported\n\t\t>\n\t\t\t<template #placeholder>正在加载示意图</template>\n\t\t\t<template #error>图像不可用</template>\n\t\t</AsamImage>\n\t\t<AsamImage src=\"data:image/png;base64,invalid\" class=\"preview-image\">\n\t\t\t<template #error>本例展示图片失败后备内容</template>\n\t\t</AsamImage>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageBasicDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nimport preview from './preview.svg';\n</script>\n\n<style scoped>\n.preview-image {\n\twidth: 200px;\n\theight: 120px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "preview.svg",
									"sourcePath": "apps/website/examples/AsamImage/basic/ts/preview.svg",
									"sha256": "ad20543b1d5e65a8f59fd2095647c9d10aff9a6b61c21d2878b871c70a331adb",
									"source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"180\" viewBox=\"0 0 320 180\"><rect width=\"320\" height=\"180\" fill=\"#ecf1fc\"/><rect x=\"40\" y=\"40\" width=\"240\" height=\"100\" rx=\"10\" fill=\"#0958d9\"/><text x=\"160\" y=\"98\" text-anchor=\"middle\" fill=\"white\" font-family=\"sans-serif\" font-size=\"24\">ASAM</text></svg>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/basic/js/Demo.vue",
									"sha256": "454948faf690a94a693968c369a37008599fae6f1e7f458753ba4157ea58cd04",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamImage\n\t\t\t:src=\"preview\"\n\t\t\t:preview-src-list=\"[preview]\"\n\t\t\tfit=\"contain\"\n\t\t\tclass=\"preview-image\"\n\t\t\tpreview-teleported\n\t\t>\n\t\t\t<template #placeholder>正在加载示意图</template>\n\t\t\t<template #error>图像不可用</template>\n\t\t</AsamImage>\n\t\t<AsamImage src=\"data:image/png;base64,invalid\" class=\"preview-image\">\n\t\t\t<template #error>本例展示图片失败后备内容</template>\n\t\t</AsamImage>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageBasicDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nimport preview from './preview.svg';\n</script>\n\n<style scoped>\n.preview-image {\n\twidth: 200px;\n\theight: 120px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "preview.svg",
									"sourcePath": "apps/website/examples/AsamImage/basic/js/preview.svg",
									"sha256": "ad20543b1d5e65a8f59fd2095647c9d10aff9a6b61c21d2878b871c70a331adb",
									"source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"180\" viewBox=\"0 0 320 180\"><rect width=\"320\" height=\"180\" fill=\"#ecf1fc\"/><rect x=\"40\" y=\"40\" width=\"240\" height=\"100\" rx=\"10\" fill=\"#0958d9\"/><text x=\"160\" y=\"98\" text-anchor=\"middle\" fill=\"white\" font-family=\"sans-serif\" font-size=\"24\">ASAM</text></svg>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-basic-usage/ts/Demo.vue",
									"sha256": "f506de1064e5824e34016d25b786726c2a628afadaf4f35d276fbf289312417a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt\n-->\n<template>\n\t<div class=\"demo-image\">\n\t\t<div v-for=\"fit in fits\" :key=\"fit\" class=\"block\">\n\t\t\t<span class=\"demonstration\">{{ fit }}</span>\n\t\t\t<AsamImage style=\"width: 100px; height: 100px\" :src=\"url\" :fit=\"fit\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapBasicUsageDemo' });\nimport { AsamImage } from '@asam-ui/ui';\n\nimport type { AsamImageProps } from '@asam-ui/ui';\n\nconst fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as AsamImageProps['fit'][];\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style scoped>\n.demo-image .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tdisplay: inline-block;\n\twidth: 20%;\n\tmin-width: 100px;\n\tbox-sizing: border-box;\n\tvertical-align: top;\n}\n\n.demo-image .block:last-child {\n\tborder-right: none;\n}\n\n.demo-image .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n</style>\n",
									"originalSourceSha256": "c23a119013c0c2f553d05ba2cd20013ba03de86a4b17eeb162d9c4cd5e616749",
									"notice": {
										"id": "e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58",
										"url": "/licenses/source-notices/e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt",
										"licenseFilename": "LICENSE-e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/basic-usage.vue",
											"sourceSha256": "96aae0d77c1072732347926e6453837139f91cdf7dd93b88b43734fc8ac6e2b6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-basic-usage/js/Demo.vue",
									"sha256": "f74217bfd523d037a05b7b8bc88a29a827e34017bce775416d04956303401278",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt\n-->\n<template>\n\t<div class=\"demo-image\">\n\t\t<div v-for=\"fit in fits\" :key=\"fit\" class=\"block\">\n\t\t\t<span class=\"demonstration\">{{ fit }}</span>\n\t\t\t<AsamImage style=\"width: 100px; height: 100px\" :src=\"url\" :fit=\"fit\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapBasicUsageDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nconst fits = ['fill', 'contain', 'cover', 'none', 'scale-down'];\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style scoped>\n.demo-image .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tdisplay: inline-block;\n\twidth: 20%;\n\tmin-width: 100px;\n\tbox-sizing: border-box;\n\tvertical-align: top;\n}\n\n.demo-image .block:last-child {\n\tborder-right: none;\n}\n\n.demo-image .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n</style>\n",
									"originalSourceSha256": "f782e15cdb7819ce950edfce4a99c019d2dbe145721618244acf7300cb14afd7",
									"notice": {
										"id": "e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58",
										"url": "/licenses/source-notices/e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt",
										"licenseFilename": "LICENSE-e784990fb18f646d1cf9e78695f6795a06106d94ae72c14b976de9dcda84ff58.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/basic-usage.vue",
											"sourceSha256": "96aae0d77c1072732347926e6453837139f91cdf7dd93b88b43734fc8ac6e2b6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-placeholder",
					"title": "占位内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-placeholder/ts/Demo.vue",
									"sha256": "65fb07c38c4c3dd57d729fd293269354d9945a668237f9bc1f39efe351895f52",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt\n-->\n<template>\n\t<div class=\"demo-image__placeholder\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamImage :src=\"src\" />\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">自定义</span>\n\t\t\t<AsamImage :src=\"src\">\n\t\t\t\t<template #placeholder>\n\t\t\t\t\t<div class=\"image-slot\">加载中<span class=\"dot\">...</span></div>\n\t\t\t\t</template>\n\t\t\t</AsamImage>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapPlaceholderDemo' });\nimport { AsamImage } from '@asam-ui/ui';\n\nconst src =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__placeholder .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tdisplay: inline-block;\n\twidth: 49%;\n\tbox-sizing: border-box;\n\tvertical-align: top;\n}\n\n.demo-image__placeholder .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n.demo-image__placeholder .el-image {\n\tpadding: 0 5px;\n\tmax-width: 300px;\n\tmax-height: 200px;\n}\n\n.demo-image__placeholder.image-slot {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 100%;\n\theight: 100%;\n\tbackground: var(--el-fill-color-light);\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n}\n\n.demo-image__placeholder .dot {\n\tanimation: dot 2s infinite steps(3, start);\n\toverflow: hidden;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "5007db493df96ebe6adc934c72ecef685cc05d3a8f1ecb5e009a76a722b1fdde",
									"notice": {
										"id": "6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e",
										"url": "/licenses/source-notices/6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt",
										"licenseFilename": "LICENSE-6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/placeholder.vue",
											"sourceSha256": "78a0a490a009c7816e2e5653a5e3b7ca432e520334767b9eaf73c8d04310010a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-placeholder/js/Demo.vue",
									"sha256": "429148f59e34ea2c208f8929cc05ae28601070422b3f299fe408d27b1580839c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt\n-->\n<template>\n\t<div class=\"demo-image__placeholder\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamImage :src=\"src\" />\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">自定义</span>\n\t\t\t<AsamImage :src=\"src\">\n\t\t\t\t<template #placeholder>\n\t\t\t\t\t<div class=\"image-slot\">加载中<span class=\"dot\">...</span></div>\n\t\t\t\t</template>\n\t\t\t</AsamImage>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapPlaceholderDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nconst src =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__placeholder .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tdisplay: inline-block;\n\twidth: 49%;\n\tbox-sizing: border-box;\n\tvertical-align: top;\n}\n\n.demo-image__placeholder .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n.demo-image__placeholder .el-image {\n\tpadding: 0 5px;\n\tmax-width: 300px;\n\tmax-height: 200px;\n}\n\n.demo-image__placeholder.image-slot {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\twidth: 100%;\n\theight: 100%;\n\tbackground: var(--el-fill-color-light);\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n}\n\n.demo-image__placeholder .dot {\n\tanimation: dot 2s infinite steps(3, start);\n\toverflow: hidden;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "d698809c949d793ded507a21610dc1e246073f2080f785a7d2e84f4c80b97501",
									"notice": {
										"id": "6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e",
										"url": "/licenses/source-notices/6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt",
										"licenseFilename": "LICENSE-6425093dbb5ccb25dcdfff881c419e419c055d749f3b1d47b62370e35e0bea9e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/placeholder.vue",
											"sourceSha256": "78a0a490a009c7816e2e5653a5e3b7ca432e520334767b9eaf73c8d04310010a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-load-failed",
					"title": "加载失败",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-load-failed/ts/Demo.vue",
									"sha256": "24e468db3a0170fb8044629b243ab75b29fa31a071a6ee77be728ca924985584",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt\n-->\n<template>\n\t<div class=\"demo-image__error ui032-flex ui032-gap-2\">\n\t\t<AsamImage />\n\t\t<AsamImage>\n\t\t\t<template #error>\n\t\t\t\t<div class=\"image-viewer-slot image-slot\">\n\t\t\t\t\t<AsamIcon><icon-picture /></AsamIcon>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImage>\n\t\t<AsamImage :src=\"url\" :preview-src-list=\"srcList\" show-progress>\n\t\t\t<template #viewer-error=\"{ activeIndex, src }\">\n\t\t\t\t<div class=\"image-slot viewer-error\">\n\t\t\t\t\t<AsamIcon><icon-picture /></AsamIcon>\n\t\t\t\t\t<span>\n\t\t\t\t\t\tviewer-error 插槽，当前索引： {{ activeIndex }}，来源：\n\t\t\t\t\t\t{{ src }}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImage>\n\t\t<AsamButton type=\"default\" @click=\"showPreview = true\"> 受控预览 </AsamButton>\n\n\t\t<AsamImageViewer\n\t\t\tv-if=\"showPreview\"\n\t\t\tshow-progress\n\t\t\t:url-list=\"srcList\"\n\t\t\t@close=\"showPreview = false\"\n\t\t>\n\t\t\t<template #viewer-error=\"{ activeIndex, src }\">\n\t\t\t\t<div class=\"image-slot viewer-error\">\n\t\t\t\t\t<AsamIcon><icon-picture /></AsamIcon>\n\t\t\t\t\t<span>\n\t\t\t\t\t\tviewer-error 插槽，当前索引： {{ activeIndex }}，来源：\n\t\t\t\t\t\t{{ src }}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImageViewer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapLoadFailedDemo' });\nimport { AsamImage, AsamIcon, AsamButton, AsamImageViewer } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { Picture as IconPicture } from '@asam-ui/icons-vue';\n\nconst showPreview = ref(false);\n\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/png;base64,AA=='\n];\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__error .el-image {\n\tmax-width: 300px;\n\tmax-height: 200px;\n\twidth: 100%;\n}\n\n.demo-image__error .image-slot {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tflex-direction: column;\n\tfont-size: 30px;\n\theight: 200px;\n\tbackground: #fff;\n}\n\n.demo-image__error .image-slot .el-icon {\n\tfont-size: 30px;\n}\n\n.image-viewer-slot {\n\tbackground: var(--el-fill-color-light);\n}\n\n.viewer-error {\n\tcolor: #000;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-flex {\n\tdisplay: flex;\n}\n\n.ui032-gap-2 {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "8ae0da8fbbc98de50a8ded1de308fd5280f6eb926ce9c2ebb09e54284e49a09a",
									"notice": {
										"id": "bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788",
										"url": "/licenses/source-notices/bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt",
										"licenseFilename": "LICENSE-bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/load-failed.vue",
											"sourceSha256": "f5dc7a96415e5ce20f0800463552209cb2a40c1dd9a93bda7016c61d1048e9f4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-load-failed/js/Demo.vue",
									"sha256": "36c1524602ad9188bbcc0ade9755944fbfa2ba33e677c109f1f30ca20ecc760e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt\n-->\n<template>\n\t<div class=\"demo-image__error ui032-flex ui032-gap-2\">\n\t\t<AsamImage />\n\t\t<AsamImage>\n\t\t\t<template #error>\n\t\t\t\t<div class=\"image-viewer-slot image-slot\">\n\t\t\t\t\t<AsamIcon><icon-picture /></AsamIcon>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImage>\n\t\t<AsamImage :src=\"url\" :preview-src-list=\"srcList\" show-progress>\n\t\t\t<template #viewer-error=\"{ activeIndex, src }\">\n\t\t\t\t<div class=\"image-slot viewer-error\">\n\t\t\t\t\t<AsamIcon><icon-picture /></AsamIcon>\n\t\t\t\t\t<span>\n\t\t\t\t\t\tviewer-error 插槽，当前索引： {{ activeIndex }}，来源：\n\t\t\t\t\t\t{{ src }}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImage>\n\t\t<AsamButton type=\"default\" @click=\"showPreview = true\"> 受控预览 </AsamButton>\n\n\t\t<AsamImageViewer\n\t\t\tv-if=\"showPreview\"\n\t\t\tshow-progress\n\t\t\t:url-list=\"srcList\"\n\t\t\t@close=\"showPreview = false\"\n\t\t>\n\t\t\t<template #viewer-error=\"{ activeIndex, src }\">\n\t\t\t\t<div class=\"image-slot viewer-error\">\n\t\t\t\t\t<AsamIcon><icon-picture /></AsamIcon>\n\t\t\t\t\t<span>\n\t\t\t\t\t\tviewer-error 插槽，当前索引： {{ activeIndex }}，来源：\n\t\t\t\t\t\t{{ src }}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImageViewer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapLoadFailedDemo' });\nimport { AsamImage, AsamIcon, AsamButton, AsamImageViewer } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { Picture as IconPicture } from '@asam-ui/icons-vue';\nconst showPreview = ref(false);\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/png;base64,AA=='\n];\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__error .el-image {\n\tmax-width: 300px;\n\tmax-height: 200px;\n\twidth: 100%;\n}\n\n.demo-image__error .image-slot {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tflex-direction: column;\n\tfont-size: 30px;\n\theight: 200px;\n\tbackground: #fff;\n}\n\n.demo-image__error .image-slot .el-icon {\n\tfont-size: 30px;\n}\n\n.image-viewer-slot {\n\tbackground: var(--el-fill-color-light);\n}\n\n.viewer-error {\n\tcolor: #000;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.ui032-flex {\n\tdisplay: flex;\n}\n\n.ui032-gap-2 {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "0822887070d2578eb67a7ca129e267802a63cbebbfca68377684f1f57e3190cd",
									"notice": {
										"id": "bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788",
										"url": "/licenses/source-notices/bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt",
										"licenseFilename": "LICENSE-bf5a3f0aa10550033a92ae7fa3159780e9efbfe4f521321ec5b8f8c6d7301788.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/load-failed.vue",
											"sourceSha256": "f5dc7a96415e5ce20f0800463552209cb2a40c1dd9a93bda7016c61d1048e9f4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-lazy-load",
					"title": "懒加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-lazy-load/ts/Demo.vue",
									"sha256": "3bfb111cbcf670924b16edad9f4f0494a6320b2313c6fb8fb8cdf69358e63358",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt\n-->\n<template>\n\t<div class=\"demo-image__lazy\">\n\t\t<AsamImage v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapLazyLoadDemo' });\nimport { AsamImage } from '@asam-ui/ui';\n\nconst urls = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__lazy {\n\theight: 400px;\n\toverflow-y: auto;\n}\n\n.demo-image__lazy .el-image {\n\tdisplay: block;\n\tmin-height: 200px;\n\tmargin-bottom: 10px;\n}\n\n.demo-image__lazy .el-image:last-child {\n\tmargin-bottom: 0;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "490780d6d2f9a461c42ba59590b8a00dcbd19cfc3230f04911bac95377256324",
									"notice": {
										"id": "521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c",
										"url": "/licenses/source-notices/521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt",
										"licenseFilename": "LICENSE-521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/lazy-load.vue",
											"sourceSha256": "7a15f70d6ac57532e926f06e6b151b32f971ee294db2f48e475ae6bb61262642",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-lazy-load/js/Demo.vue",
									"sha256": "1fd9852469e20627d2c62100ae051b11dba924ac3eef928248dbd24467ddf1ae",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt\n-->\n<template>\n\t<div class=\"demo-image__lazy\">\n\t\t<AsamImage v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapLazyLoadDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nconst urls = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__lazy {\n\theight: 400px;\n\toverflow-y: auto;\n}\n\n.demo-image__lazy .el-image {\n\tdisplay: block;\n\tmin-height: 200px;\n\tmargin-bottom: 10px;\n}\n\n.demo-image__lazy .el-image:last-child {\n\tmargin-bottom: 0;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "d65928a6ce02b1713eb08f602a6e5b762dfeaf84b07266ac11b6be325353d23d",
									"notice": {
										"id": "521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c",
										"url": "/licenses/source-notices/521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt",
										"licenseFilename": "LICENSE-521fee223e42a4c52b27d40ed44f35a8a923f093d5de6aa44caa586f1b00c83c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/lazy-load.vue",
											"sourceSha256": "7a15f70d6ac57532e926f06e6b151b32f971ee294db2f48e475ae6bb61262642",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-image-preview",
					"title": "图片预览",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-image-preview/ts/Demo.vue",
									"sha256": "4902e93b57951d19a3d2c6be352c770b6e7f6a29882311c93995355dee2d43f7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt\n-->\n<template>\n\t<div class=\"demo-image__preview\">\n\t\t<AsamImage\n\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t:src=\"url\"\n\t\t\t:zoom-rate=\"1.2\"\n\t\t\t:max-scale=\"7\"\n\t\t\t:min-scale=\"0.2\"\n\t\t\t:preview-src-list=\"srcList\"\n\t\t\tshow-progress\n\t\t\t:initial-index=\"4\"\n\t\t\tfit=\"cover\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapImagePreviewDemo' });\nimport { AsamImage } from '@asam-ui/ui';\n\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__error .image-slot {\n\tfont-size: 30px;\n}\n\n.demo-image__error .image-slot .el-icon {\n\tfont-size: 30px;\n}\n\n.demo-image__error .el-image {\n\twidth: 100%;\n\theight: 200px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "f2a77696e6af15bd28addfe3404badec69011f5701816ca36b1747e6b787fdff",
									"notice": {
										"id": "b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3",
										"url": "/licenses/source-notices/b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt",
										"licenseFilename": "LICENSE-b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/image-preview.vue",
											"sourceSha256": "2e1e193562c1d382cf8f9e239cf41417ecdc338a7661af22f35ebd621e9d4f69",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-image-preview/js/Demo.vue",
									"sha256": "ce52b89a2ab9c58957f611595ffbd68964d5dfe77840542aa21183c3b123457c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt\n-->\n<template>\n\t<div class=\"demo-image__preview\">\n\t\t<AsamImage\n\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t:src=\"url\"\n\t\t\t:zoom-rate=\"1.2\"\n\t\t\t:max-scale=\"7\"\n\t\t\t:min-scale=\"0.2\"\n\t\t\t:preview-src-list=\"srcList\"\n\t\t\tshow-progress\n\t\t\t:initial-index=\"4\"\n\t\t\tfit=\"cover\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapImagePreviewDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Existing component and demonstration BEM selectors retain their public names. */\n\n.demo-image__error .image-slot {\n\tfont-size: 30px;\n}\n\n.demo-image__error .image-slot .el-icon {\n\tfont-size: 30px;\n}\n\n.demo-image__error .el-image {\n\twidth: 100%;\n\theight: 200px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "8c8e7c38250bb95379e75e502d46149d7df4b9db48eee76ccdfac0fb01ef484e",
									"notice": {
										"id": "b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3",
										"url": "/licenses/source-notices/b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt",
										"licenseFilename": "LICENSE-b7d9b809929a4c6fa3fb2f5ae2d9b73d85065c3372f73dd1f5acb694ae7c85c3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/image-preview.vue",
											"sourceSha256": "2e1e193562c1d382cf8f9e239cf41417ecdc338a7661af22f35ebd621e9d4f69",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-manually-preview",
					"title": "手动打开预览 2.9.4",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-manually-preview/ts/Demo.vue",
									"sha256": "352454001508d78bd21aaa2b4557e602edd2f82de2e199a77d0d15016e7c760c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt\n-->\n<template>\n\t<div class=\"flex gap-12\">\n\t\t<div class=\"grid gap-3\">\n\t\t\t<AsamButton type=\"default\" @click=\"handleClick\">\n\t\t\t\t通过 showPreview 方法打开预览\n\t\t\t</AsamButton>\n\t\t\t<AsamImage\n\t\t\t\tref=\"imageRef\"\n\t\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t\t:src=\"url\"\n\t\t\t\tshow-progress\n\t\t\t\t:preview-src-list=\"srcList\"\n\t\t\t\tfit=\"cover\"\n\t\t\t/>\n\t\t</div>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"showPreview = true\"> 受控预览 </AsamButton>\n\t\t\t<AsamImageViewer\n\t\t\t\tv-if=\"showPreview\"\n\t\t\t\t:url-list=\"srcList\"\n\t\t\t\tshow-progress\n\t\t\t\t:initial-index=\"4\"\n\t\t\t\t@close=\"showPreview = false\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapManuallyPreviewDemo' });\nimport { AsamButton, AsamImage, AsamImageViewer } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamImageInstance } from '@asam-ui/ui';\n\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n\nconst imageRef = ref<AsamImageInstance>();\nconst showPreview = ref(false);\n\nconst handleClick = () => {\n\timageRef.value!.showPreview();\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-12 {\n\tgap: 3rem;\n}\n\n.grid {\n\tdisplay: grid;\n}\n\n.gap-3 {\n\tgap: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "32dd0a397f8a78114898627d7e2cb19c917a72a4ce20ecff5474e8c4a87dc4b8",
									"notice": {
										"id": "0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f",
										"url": "/licenses/source-notices/0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt",
										"licenseFilename": "LICENSE-0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/manually-preview.vue",
											"sourceSha256": "36915e49acabd1e93c9443942b0f5c94149a88c2f50fd75517f53dcd10b5603f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-manually-preview/js/Demo.vue",
									"sha256": "03b36171a64c7f4bee527c2fd08b75a1a410f4446816ffe1c854857df948c895",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt\n-->\n<template>\n\t<div class=\"flex gap-12\">\n\t\t<div class=\"grid gap-3\">\n\t\t\t<AsamButton type=\"default\" @click=\"handleClick\">\n\t\t\t\t通过 showPreview 方法打开预览\n\t\t\t</AsamButton>\n\t\t\t<AsamImage\n\t\t\t\tref=\"imageRef\"\n\t\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t\t:src=\"url\"\n\t\t\t\tshow-progress\n\t\t\t\t:preview-src-list=\"srcList\"\n\t\t\t\tfit=\"cover\"\n\t\t\t/>\n\t\t</div>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"showPreview = true\"> 受控预览 </AsamButton>\n\t\t\t<AsamImageViewer\n\t\t\t\tv-if=\"showPreview\"\n\t\t\t\t:url-list=\"srcList\"\n\t\t\t\tshow-progress\n\t\t\t\t:initial-index=\"4\"\n\t\t\t\t@close=\"showPreview = false\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapManuallyPreviewDemo' });\nimport { AsamButton, AsamImage, AsamImageViewer } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\nconst imageRef = ref();\nconst showPreview = ref(false);\nconst handleClick = () => {\n\timageRef.value.showPreview();\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-12 {\n\tgap: 3rem;\n}\n\n.grid {\n\tdisplay: grid;\n}\n\n.gap-3 {\n\tgap: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "06cd93cad09db3d3a8bed527151e21445cafaa2fe5d6485fbfd97b5ee179d5c3",
									"notice": {
										"id": "0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f",
										"url": "/licenses/source-notices/0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt",
										"licenseFilename": "LICENSE-0ac236f2a13866e804dd78aea80ffe1ad2c51cafa263dfbd48f95f0c677f945f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/manually-preview.vue",
											"sourceSha256": "36915e49acabd1e93c9443942b0f5c94149a88c2f50fd75517f53dcd10b5603f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-toolbar",
					"title": "自定义工具栏2.9.4",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-custom-toolbar/ts/Demo.vue",
									"sha256": "b0796bb0f3568bde945a8f519d70cd580264de0cc392b9910a9022546023c551",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt\n-->\n<template>\n\t<div class=\"demo-image__custom-toolbar\">\n\t\t<AsamImage\n\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t:src=\"url\"\n\t\t\t:preview-src-list=\"srcList\"\n\t\t\tfit=\"cover\"\n\t\t\tshow-progress\n\t\t>\n\t\t\t<template #toolbar=\"{ actions, prev, next, reset, activeIndex, setActiveItem }\">\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => prev())\"><Back /></AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => next())\"><Right /></AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => setActiveItem(srcList.length - 1))\">\n\t\t\t\t\t<DArrowRight />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => actions('zoomOut'))\"><ZoomOut /></AsamIcon>\n\t\t\t\t<AsamIcon\n\t\t\t\t\tv-bind=\"\n\t\t\t\t\t\tdomClickAttrs(() =>\n\t\t\t\t\t\t\tactions('zoomIn', { enableTransition: false, zoomRate: 2 })\n\t\t\t\t\t\t)\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<ZoomIn />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon\n\t\t\t\t\tv-bind=\"\n\t\t\t\t\t\tdomClickAttrs(() =>\n\t\t\t\t\t\t\tactions('clockwise', { rotateDeg: 180, enableTransition: false })\n\t\t\t\t\t\t)\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<RefreshRight />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => actions('anticlockwise'))\">\n\t\t\t\t\t<RefreshLeft />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => reset())\"><Refresh /></AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => download(activeIndex))\">\n\t\t\t\t\t<Download />\n\t\t\t\t</AsamIcon>\n\t\t\t</template>\n\t\t</AsamImage>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamImageCapCustomToolbarDemo' });\nimport { AsamImage } from '@asam-ui/ui';\n\nimport { AsamIcon } from '@asam-ui/ui';\nimport {\n\tBack,\n\tDArrowRight,\n\tDownload,\n\tRefresh,\n\tRefreshLeft,\n\tRefreshRight,\n\tRight,\n\tZoomIn,\n\tZoomOut\n} from '@asam-ui/icons-vue';\n\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n\nconst download = (index: number) => {\n\tconst url = srcList[index];\n\n\tfetch(url)\n\t\t.then((response) => response.blob())\n\t\t.then((blob) => {\n\t\t\tconst extensions: Record<string, string> = {\n\t\t\t\t'image/svg+xml': 'svg',\n\t\t\t\t'image/png': 'png',\n\t\t\t\t'image/jpeg': 'jpg',\n\t\t\t\t'image/webp': 'webp'\n\t\t\t};\n\t\t\tconst extension = extensions[blob.type.split(';')[0]] ?? 'bin';\n\t\t\tconst filename = `asam-image-${Date.now()}.${extension}`;\n\t\t\tconst blobUrl = URL.createObjectURL(blob);\n\t\t\tconst link = document.createElement('a');\n\t\t\tlink.href = blobUrl;\n\t\t\tlink.download = filename;\n\t\t\tdocument.body.appendChild(link);\n\t\t\tlink.click();\n\t\t\tURL.revokeObjectURL(blobUrl);\n\t\t\tlink.remove();\n\t\t});\n};\n\nconst domClickAttrs = (\n\tonClick: NonNullable<HTMLAttributes['onClick']>\n): Pick<HTMLAttributes, 'class' | 'onClick'> => ({ class: 'ui032-icon-action', onClick });\n</script>\n",
									"originalSourceSha256": "5c490e801e5ac084989ea661176ba4f47cd0e4cb8824c5308c8b2b5e61028a21",
									"notice": {
										"id": "de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da",
										"url": "/licenses/source-notices/de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt",
										"licenseFilename": "LICENSE-de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/custom-toolbar.vue",
											"sourceSha256": "210456d68ea4741a154d49c2db082c547fe6dbec0b0b085db3a0dbe68d0d1850",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-custom-toolbar/js/Demo.vue",
									"sha256": "293a62c287835e4a150fe430450b09f2ec1d8237ca48d707f9fdd9b775f083fb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt\n-->\n<template>\n\t<div class=\"demo-image__custom-toolbar\">\n\t\t<AsamImage\n\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t:src=\"url\"\n\t\t\t:preview-src-list=\"srcList\"\n\t\t\tfit=\"cover\"\n\t\t\tshow-progress\n\t\t>\n\t\t\t<template #toolbar=\"{ actions, prev, next, reset, activeIndex, setActiveItem }\">\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => prev())\"><Back /></AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => next())\"><Right /></AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => setActiveItem(srcList.length - 1))\">\n\t\t\t\t\t<DArrowRight />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => actions('zoomOut'))\"><ZoomOut /></AsamIcon>\n\t\t\t\t<AsamIcon\n\t\t\t\t\tv-bind=\"\n\t\t\t\t\t\tdomClickAttrs(() =>\n\t\t\t\t\t\t\tactions('zoomIn', { enableTransition: false, zoomRate: 2 })\n\t\t\t\t\t\t)\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<ZoomIn />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon\n\t\t\t\t\tv-bind=\"\n\t\t\t\t\t\tdomClickAttrs(() =>\n\t\t\t\t\t\t\tactions('clockwise', { rotateDeg: 180, enableTransition: false })\n\t\t\t\t\t\t)\n\t\t\t\t\t\"\n\t\t\t\t>\n\t\t\t\t\t<RefreshRight />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => actions('anticlockwise'))\">\n\t\t\t\t\t<RefreshLeft />\n\t\t\t\t</AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => reset())\"><Refresh /></AsamIcon>\n\t\t\t\t<AsamIcon v-bind=\"domClickAttrs(() => download(activeIndex))\">\n\t\t\t\t\t<Download />\n\t\t\t\t</AsamIcon>\n\t\t\t</template>\n\t\t</AsamImage>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapCustomToolbarDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nimport { AsamIcon } from '@asam-ui/ui';\nimport {\n\tBack,\n\tDArrowRight,\n\tDownload,\n\tRefresh,\n\tRefreshLeft,\n\tRefreshRight,\n\tRight,\n\tZoomIn,\n\tZoomOut\n} from '@asam-ui/icons-vue';\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\nconst download = (index) => {\n\tconst url = srcList[index];\n\tfetch(url)\n\t\t.then((response) => response.blob())\n\t\t.then((blob) => {\n\t\t\tconst extensions = {\n\t\t\t\t'image/svg+xml': 'svg',\n\t\t\t\t'image/png': 'png',\n\t\t\t\t'image/jpeg': 'jpg',\n\t\t\t\t'image/webp': 'webp'\n\t\t\t};\n\t\t\tconst extension = extensions[blob.type.split(';')[0]] ?? 'bin';\n\t\t\tconst filename = `asam-image-${Date.now()}.${extension}`;\n\t\t\tconst blobUrl = URL.createObjectURL(blob);\n\t\t\tconst link = document.createElement('a');\n\t\t\tlink.href = blobUrl;\n\t\t\tlink.download = filename;\n\t\t\tdocument.body.appendChild(link);\n\t\t\tlink.click();\n\t\t\tURL.revokeObjectURL(blobUrl);\n\t\t\tlink.remove();\n\t\t});\n};\n\nconst domClickAttrs = (onClick) => ({ class: 'ui032-icon-action', onClick });\n</script>\n",
									"originalSourceSha256": "e37687d628df7dcfc1ffe04834b45310cb4de6b0221679fa8c687f3e2221ab78",
									"notice": {
										"id": "de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da",
										"url": "/licenses/source-notices/de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt",
										"licenseFilename": "LICENSE-de71bb59524022e6eeedbe21f6921b9b021763f13c6b2486ea0e8371980f51da.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/custom-toolbar.vue",
											"sourceSha256": "210456d68ea4741a154d49c2db082c547fe6dbec0b0b085db3a0dbe68d0d1850",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-progress",
					"title": "自定义进度条 2.9.4",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-custom-progress/ts/Demo.vue",
									"sha256": "cd9dda6ed679b621af18a7ac4edcaa2b990b8ba15ef9d48ad8592d1e8073c354",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt\n-->\n<template>\n\t<div class=\"demo-image__custom-toolbar\">\n\t\t<AsamImage\n\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t:src=\"url\"\n\t\t\t:preview-src-list=\"srcList\"\n\t\t\tfit=\"cover\"\n\t\t>\n\t\t\t<template #progress=\"{ activeIndex, total }\">\n\t\t\t\t<span>{{ activeIndex + 1 + '-' + total }}</span>\n\t\t\t</template>\n\t\t</AsamImage>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageCapCustomProgressDemo' });\nimport { AsamImage } from '@asam-ui/ui';\n\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n</script>\n",
									"originalSourceSha256": "ad73689944f4438c8a23a069ab98c39f34af6cd99cafddbab8d4729f8a81d851",
									"notice": {
										"id": "e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a",
										"url": "/licenses/source-notices/e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt",
										"licenseFilename": "LICENSE-e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/custom-progress.vue",
											"sourceSha256": "82fa126d946355738e77feceafc8ec275c76bde7465d6ccde349bef6eaaca3e4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImage/cap-custom-progress/js/Demo.vue",
									"sha256": "38676566a28a4b988ffd158a4ab96ab975945c06df13ea3ef30f85d54b74bf37",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt\n-->\n<template>\n\t<div class=\"demo-image__custom-toolbar\">\n\t\t<AsamImage\n\t\t\tstyle=\"width: 100px; height: 100px\"\n\t\t\t:src=\"url\"\n\t\t\t:preview-src-list=\"srcList\"\n\t\t\tfit=\"cover\"\n\t\t>\n\t\t\t<template #progress=\"{ activeIndex, total }\">\n\t\t\t\t<span>{{ activeIndex + 1 + '-' + total }}</span>\n\t\t\t</template>\n\t\t</AsamImage>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageCapCustomProgressDemo' });\nimport { AsamImage } from '@asam-ui/ui';\nconst url =\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E';\nconst srcList = [\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E'\n];\n</script>\n",
									"originalSourceSha256": "8d70f9007b1988a716b6d25284d9ee1b7bd30a3e538d9861e0881d86f73ab2f1",
									"notice": {
										"id": "e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a",
										"url": "/licenses/source-notices/e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt",
										"licenseFilename": "LICENSE-e291287a4160092e959b5900971cc9f2e97e0b5fb197f7f5c96056ef3b51d83a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/image/custom-progress.vue",
											"sourceSha256": "82fa126d946355738e77feceafc8ec275c76bde7465d6ccde349bef6eaaca3e4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamImageViewer",
			"documentation": "/component-AsamImageViewer.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImageViewer/basic/ts/Demo.vue",
									"sha256": "30e29bd699e8950392d38381cfa4ddb85c50618712dbd9e8c7f580ed983a7976",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t>打开独立图片预览</AsamButton\n\t>\n\t<AsamImageViewer\n\t\tv-if=\"open\"\n\t\tv-bind=\"{ urlList: [preview], teleported: true }\"\n\t\t@close=\"open = false\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageViewerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamImageViewer } from '@asam-ui/ui';\nimport preview from './preview.svg';\nconst open = ref(false);\n</script>\n"
								},
								{
									"name": "preview.svg",
									"sourcePath": "apps/website/examples/AsamImageViewer/basic/ts/preview.svg",
									"sha256": "ad20543b1d5e65a8f59fd2095647c9d10aff9a6b61c21d2878b871c70a331adb",
									"source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"180\" viewBox=\"0 0 320 180\"><rect width=\"320\" height=\"180\" fill=\"#ecf1fc\"/><rect x=\"40\" y=\"40\" width=\"240\" height=\"100\" rx=\"10\" fill=\"#0958d9\"/><text x=\"160\" y=\"98\" text-anchor=\"middle\" fill=\"white\" font-family=\"sans-serif\" font-size=\"24\">ASAM</text></svg>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImageViewer/basic/js/Demo.vue",
									"sha256": "906768366ff0a54ebb79db3b73369fa6c30f7326b6f1d11574db3528dd482ae7",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t>打开独立图片预览</AsamButton\n\t>\n\t<AsamImageViewer\n\t\tv-if=\"open\"\n\t\tv-bind=\"{ urlList: [preview], teleported: true }\"\n\t\t@close=\"open = false\"\n\t/>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageViewerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamImageViewer } from '@asam-ui/ui';\nimport preview from './preview.svg';\nconst open = ref(false);\n</script>\n"
								},
								{
									"name": "preview.svg",
									"sourcePath": "apps/website/examples/AsamImageViewer/basic/js/preview.svg",
									"sha256": "ad20543b1d5e65a8f59fd2095647c9d10aff9a6b61c21d2878b871c70a331adb",
									"source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"180\" viewBox=\"0 0 320 180\"><rect width=\"320\" height=\"180\" fill=\"#ecf1fc\"/><rect x=\"40\" y=\"40\" width=\"240\" height=\"100\" rx=\"10\" fill=\"#0958d9\"/><text x=\"160\" y=\"98\" text-anchor=\"middle\" fill=\"white\" font-family=\"sans-serif\" font-size=\"24\">ASAM</text></svg>\n"
								}
							]
						}
					]
				},
				{
					"id": "standalone",
					"title": "公开实例、缩放输入、关闭策略与完整插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImageViewer/standalone/ts/Demo.vue",
									"sha256": "1f7c582caa29739fb35fb2a77b8343e5e8bf19d6a5a245d418f255a9469dbe76",
									"source": "<template>\n\t<div class=\"viewer-demo demo-layout-1\">\n\t\t<fieldset>\n\t\t\t<legend>独立 Viewer 的初始配置</legend>\n\t\t\t<label\n\t\t\t\t>起始索引<AsamInputNumber v-model.number=\"initialIndex\" :min=\"0\" :max=\"2\"\n\t\t\t/></label>\n\t\t\t<label>初始缩放<AsamInputNumber v-model.number=\"scale\" :step=\"0.25\" /></label>\n\t\t\t<label\n\t\t\t\t>缩放步长<AsamInputNumber v-model.number=\"zoomRate\" :min=\"1.1\" :step=\"0.1\"\n\t\t\t/></label>\n\t\t\t<label\n\t\t\t\t>最小缩放<AsamInputNumber v-model.number=\"minScale\" :min=\"0.1\" :step=\"0.1\"\n\t\t\t/></label>\n\t\t\t<label\n\t\t\t\t>最大缩放<AsamInputNumber v-model.number=\"maxScale\" :min=\"1\" :step=\"0.5\"\n\t\t\t/></label>\n\t\t\t<label>层级<AsamInputNumber v-model.number=\"zIndex\" /></label>\n\t\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"infinite\">循环切换</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"closeOnPressEscape\">Esc 关闭</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"hideOnClickModal\">遮罩关闭</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"showProgress\">原生进度</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"customProgress\">progress 插槽</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"customToolbar\">toolbar 插槽</AsamCheckboxItem>\n\t\t</fieldset>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>打开完整独立预览</AsamButton\n\t\t>\n\t\t<output data-test=\"viewer-events\">{{ events.join('；') || '尚无事件' }}</output>\n\t\t<AsamImageViewer\n\t\t\tv-if=\"open\"\n\t\t\tref=\"viewer\"\n\t\t\t:url-list=\"urls\"\n\t\t\t:initial-index=\"initialIndex\"\n\t\t\t:infinite=\"infinite\"\n\t\t\t:scale=\"scale\"\n\t\t\t:zoom-rate=\"zoomRate\"\n\t\t\t:min-scale=\"minScale\"\n\t\t\t:max-scale=\"maxScale\"\n\t\t\t:close-on-press-escape=\"closeOnPressEscape\"\n\t\t\t:hide-on-click-modal=\"hideOnClickModal\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:z-index=\"zIndex\"\n\t\t\t:show-progress=\"showProgress\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\t@close=\"onClose\"\n\t\t\t@error=\"onError\"\n\t\t\t@switch=\"onSwitch\"\n\t\t\t@rotate=\"onRotate\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<div class=\"viewer-demo-panel\" data-test=\"viewer-controls\">\n\t\t\t\t\t<p class=\"example-paragraph\">default 插槽：父级输入与公开 ref</p>\n\t\t\t\t\t<label\n\t\t\t\t\t\t>实时 scale<AsamInputNumber\n\t\t\t\t\t\t\tv-model.number=\"scale\"\n\t\t\t\t\t\t\tdata-test=\"scale\"\n\t\t\t\t\t\t\t:step=\"0.25\"\n\t\t\t\t\t/></label>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"infinite\" data-test=\"infinite\"\n\t\t\t\t\t\t>循环切换</AsamCheckboxItem\n\t\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"closeOnPressEscape\" data-test=\"escape\"\n\t\t\t\t\t\t>Esc 关闭</AsamCheckboxItem\n\t\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"hideOnClickModal\" data-test=\"mask\"\n\t\t\t\t\t\t>遮罩关闭</AsamCheckboxItem\n\t\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"showProgress\">原生进度</AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"customProgress\">progress 插槽</AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"customToolbar\">toolbar 插槽</AsamCheckboxItem>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(0)\"\n\t\t\t\t\t\t>ref：第一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(1)\"\n\t\t\t\t\t\t>ref：第二张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(2)\"\n\t\t\t\t\t\t>ref：失败图片</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t\t>父级卸载 Viewer</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<output data-test=\"viewer-return\">setActiveItem 返回：{{ returnType }}</output>\n\t\t\t\t\t<output>{{ events.join('；') || '尚无事件' }}</output>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"customProgress\" #progress=\"{ activeIndex, total }\">\n\t\t\t\t<span data-test=\"viewer-progress\">第 {{ activeIndex + 1 }} / {{ total }} 张</span>\n\t\t\t</template>\n\t\t\t<template\n\t\t\t\tv-if=\"customToolbar\"\n\t\t\t\t#toolbar=\"{ actions, prev, next, reset, activeIndex, setActiveItem }\"\n\t\t\t>\n\t\t\t\t<div class=\"viewer-demo-toolbar\">\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"prev()\"\n\t\t\t\t\t\t>上一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"next()\"\n\t\t\t\t\t\t>下一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setActiveItem(0)\"\n\t\t\t\t\t\t>slot：第一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"actions('zoomOut', { enableTransition: false })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t缩小\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"actions('zoomIn', { enableTransition: false })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t放大\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"actions('clockwise')\"\n\t\t\t\t\t\t>顺时针旋转</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"actions('anticlockwise')\"\n\t\t\t\t\t\t>逆时针旋转</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset()\"\n\t\t\t\t\t\t>切换原始尺寸/适应</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<span>slot.activeIndex={{ activeIndex }}</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #viewer-error=\"{ activeIndex, src }\">\n\t\t\t\t<div class=\"viewer-demo-error\" data-test=\"viewer-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">第 {{ activeIndex + 1 }} 张加载失败：{{ src }}</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(0)\"\n\t\t\t\t\t\t>通过公开 ref 返回第一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImageViewer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamCheckboxItem, AsamButton, AsamImageViewer } from '@asam-ui/ui';\nimport type { AsamImageViewerInstance } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamImageViewerStandaloneDemo' });\nconst viewer = ref<AsamImageViewerInstance>();\nconst open = ref(false);\nconst initialIndex = ref(0);\nconst infinite = ref(false);\nconst scale = ref(1);\nconst zoomRate = ref(1.5);\nconst minScale = ref(0.5);\nconst maxScale = ref(2);\nconst closeOnPressEscape = ref(true);\nconst hideOnClickModal = ref(false);\nconst teleported = ref(true);\nconst zIndex = ref(2100);\nconst showProgress = ref(true);\nconst customProgress = ref(true);\nconst customToolbar = ref(true);\nconst events = ref<string[]>([]);\nconst returnType = ref('尚未调用');\nconst image = (color: string) =>\n\t'data:image/svg+xml,' +\n\tencodeURIComponent(\n\t\t`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"220\"><rect width=\"320\" height=\"220\" fill=\"${color}\"/></svg>`\n\t);\nconst urls = [image('royalblue'), image('seagreen'), 'data:image/png;base64,broken'];\nfunction goTo(index: number): void {\n\treturnType.value = typeof viewer.value?.setActiveItem(index);\n}\nfunction onClose(): void {\n\tevents.value.push('close');\n\topen.value = false;\n}\nfunction onError(event: Event): void {\n\tevents.value.push(`error:${event.type}`);\n}\nfunction onSwitch(index: number): void {\n\tevents.value.push(`switch:${index}`);\n}\nfunction onRotate(degrees: number): void {\n\tevents.value.push(`rotate:${degrees}`);\n}\n</script>\n\n<style scoped>\n.viewer-demo fieldset,\n.viewer-demo-panel,\n.viewer-demo-toolbar {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.viewer-demo label {\n\tdisplay: inline-flex;\n\tgap: var(--asam-space-xs, 4px);\n\talign-items: center;\n}\n\n.viewer-demo input[type='number'] {\n\twidth: 70px;\n}\n\n.viewer-demo-panel {\n\tposition: absolute;\n\ttop: var(--asam-space-md, 16px);\n\tleft: var(--asam-space-md, 16px);\n\twidth: min(520px, calc(100vw - 100px));\n\tpadding: var(--asam-space-sm, 8px);\n\tbackground: var(--asam-color-surface);\n\tcolor: var(--asam-color-text-primary);\n\tz-index: 1;\n}\n\n.viewer-demo-panel p,\n.viewer-demo-panel output {\n\tflex-basis: 100%;\n\tmargin: 0;\n}\n\n.viewer-demo-error {\n\tposition: relative;\n\tz-index: 1;\n\tcolor: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImageViewer/standalone/js/Demo.vue",
									"sha256": "232fafbefda616ee42cfa1787576ca8692b7e45d61f510105f68e32d4b65393a",
									"source": "<template>\n\t<div class=\"viewer-demo demo-layout-1\">\n\t\t<fieldset>\n\t\t\t<legend>独立 Viewer 的初始配置</legend>\n\t\t\t<label\n\t\t\t\t>起始索引<AsamInputNumber v-model.number=\"initialIndex\" :min=\"0\" :max=\"2\"\n\t\t\t/></label>\n\t\t\t<label>初始缩放<AsamInputNumber v-model.number=\"scale\" :step=\"0.25\" /></label>\n\t\t\t<label\n\t\t\t\t>缩放步长<AsamInputNumber v-model.number=\"zoomRate\" :min=\"1.1\" :step=\"0.1\"\n\t\t\t/></label>\n\t\t\t<label\n\t\t\t\t>最小缩放<AsamInputNumber v-model.number=\"minScale\" :min=\"0.1\" :step=\"0.1\"\n\t\t\t/></label>\n\t\t\t<label\n\t\t\t\t>最大缩放<AsamInputNumber v-model.number=\"maxScale\" :min=\"1\" :step=\"0.5\"\n\t\t\t/></label>\n\t\t\t<label>层级<AsamInputNumber v-model.number=\"zIndex\" /></label>\n\t\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"infinite\">循环切换</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"closeOnPressEscape\">Esc 关闭</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"hideOnClickModal\">遮罩关闭</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"showProgress\">原生进度</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"customProgress\">progress 插槽</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"customToolbar\">toolbar 插槽</AsamCheckboxItem>\n\t\t</fieldset>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>打开完整独立预览</AsamButton\n\t\t>\n\t\t<output data-test=\"viewer-events\">{{ events.join('；') || '尚无事件' }}</output>\n\t\t<AsamImageViewer\n\t\t\tv-if=\"open\"\n\t\t\tref=\"viewer\"\n\t\t\t:url-list=\"urls\"\n\t\t\t:initial-index=\"initialIndex\"\n\t\t\t:infinite=\"infinite\"\n\t\t\t:scale=\"scale\"\n\t\t\t:zoom-rate=\"zoomRate\"\n\t\t\t:min-scale=\"minScale\"\n\t\t\t:max-scale=\"maxScale\"\n\t\t\t:close-on-press-escape=\"closeOnPressEscape\"\n\t\t\t:hide-on-click-modal=\"hideOnClickModal\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:z-index=\"zIndex\"\n\t\t\t:show-progress=\"showProgress\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\t@close=\"onClose\"\n\t\t\t@error=\"onError\"\n\t\t\t@switch=\"onSwitch\"\n\t\t\t@rotate=\"onRotate\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<div class=\"viewer-demo-panel\" data-test=\"viewer-controls\">\n\t\t\t\t\t<p class=\"example-paragraph\">default 插槽：父级输入与公开 ref</p>\n\t\t\t\t\t<label\n\t\t\t\t\t\t>实时 scale<AsamInputNumber\n\t\t\t\t\t\t\tv-model.number=\"scale\"\n\t\t\t\t\t\t\tdata-test=\"scale\"\n\t\t\t\t\t\t\t:step=\"0.25\"\n\t\t\t\t\t/></label>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"infinite\" data-test=\"infinite\"\n\t\t\t\t\t\t>循环切换</AsamCheckboxItem\n\t\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"closeOnPressEscape\" data-test=\"escape\"\n\t\t\t\t\t\t>Esc 关闭</AsamCheckboxItem\n\t\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"hideOnClickModal\" data-test=\"mask\"\n\t\t\t\t\t\t>遮罩关闭</AsamCheckboxItem\n\t\t\t\t\t>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"showProgress\">原生进度</AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"customProgress\">progress 插槽</AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem v-model=\"customToolbar\">toolbar 插槽</AsamCheckboxItem>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(0)\"\n\t\t\t\t\t\t>ref：第一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(1)\"\n\t\t\t\t\t\t>ref：第二张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(2)\"\n\t\t\t\t\t\t>ref：失败图片</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t\t>父级卸载 Viewer</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<output data-test=\"viewer-return\">setActiveItem 返回：{{ returnType }}</output>\n\t\t\t\t\t<output>{{ events.join('；') || '尚无事件' }}</output>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"customProgress\" #progress=\"{ activeIndex, total }\">\n\t\t\t\t<span data-test=\"viewer-progress\">第 {{ activeIndex + 1 }} / {{ total }} 张</span>\n\t\t\t</template>\n\t\t\t<template\n\t\t\t\tv-if=\"customToolbar\"\n\t\t\t\t#toolbar=\"{ actions, prev, next, reset, activeIndex, setActiveItem }\"\n\t\t\t>\n\t\t\t\t<div class=\"viewer-demo-toolbar\">\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"prev()\"\n\t\t\t\t\t\t>上一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"next()\"\n\t\t\t\t\t\t>下一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setActiveItem(0)\"\n\t\t\t\t\t\t>slot：第一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"actions('zoomOut', { enableTransition: false })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t缩小\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"actions('zoomIn', { enableTransition: false })\"\n\t\t\t\t\t>\n\t\t\t\t\t\t放大\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"actions('clockwise')\"\n\t\t\t\t\t\t>顺时针旋转</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t@click=\"actions('anticlockwise')\"\n\t\t\t\t\t\t>逆时针旋转</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset()\"\n\t\t\t\t\t\t>切换原始尺寸/适应</AsamButton\n\t\t\t\t\t>\n\t\t\t\t\t<span>slot.activeIndex={{ activeIndex }}</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #viewer-error=\"{ activeIndex, src }\">\n\t\t\t\t<div class=\"viewer-demo-error\" data-test=\"viewer-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">第 {{ activeIndex + 1 }} 张加载失败：{{ src }}</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"goTo(0)\"\n\t\t\t\t\t\t>通过公开 ref 返回第一张</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamImageViewer>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamInputNumber, AsamCheckboxItem, AsamButton, AsamImageViewer } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamImageViewerStandaloneDemo' });\nconst viewer = ref();\nconst open = ref(false);\nconst initialIndex = ref(0);\nconst infinite = ref(false);\nconst scale = ref(1);\nconst zoomRate = ref(1.5);\nconst minScale = ref(0.5);\nconst maxScale = ref(2);\nconst closeOnPressEscape = ref(true);\nconst hideOnClickModal = ref(false);\nconst teleported = ref(true);\nconst zIndex = ref(2100);\nconst showProgress = ref(true);\nconst customProgress = ref(true);\nconst customToolbar = ref(true);\nconst events = ref([]);\nconst returnType = ref('尚未调用');\nconst image = (color) =>\n\t'data:image/svg+xml,' +\n\tencodeURIComponent(\n\t\t`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"220\"><rect width=\"320\" height=\"220\" fill=\"${color}\"/></svg>`\n\t);\nconst urls = [image('royalblue'), image('seagreen'), 'data:image/png;base64,broken'];\nfunction goTo(index) {\n\treturnType.value = typeof viewer.value?.setActiveItem(index);\n}\nfunction onClose() {\n\tevents.value.push('close');\n\topen.value = false;\n}\nfunction onError(event) {\n\tevents.value.push(`error:${event.type}`);\n}\nfunction onSwitch(index) {\n\tevents.value.push(`switch:${index}`);\n}\nfunction onRotate(degrees) {\n\tevents.value.push(`rotate:${degrees}`);\n}\n</script>\n\n<style scoped>\n.viewer-demo fieldset,\n.viewer-demo-panel,\n.viewer-demo-toolbar {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.viewer-demo label {\n\tdisplay: inline-flex;\n\tgap: var(--asam-space-xs, 4px);\n\talign-items: center;\n}\n\n.viewer-demo input[type='number'] {\n\twidth: 70px;\n}\n\n.viewer-demo-panel {\n\tposition: absolute;\n\ttop: var(--asam-space-md, 16px);\n\tleft: var(--asam-space-md, 16px);\n\twidth: min(520px, calc(100vw - 100px));\n\tpadding: var(--asam-space-sm, 8px);\n\tbackground: var(--asam-color-surface);\n\tcolor: var(--asam-color-text-primary);\n\tz-index: 1;\n}\n\n.viewer-demo-panel p,\n.viewer-demo-panel output {\n\tflex-basis: 100%;\n\tmargin: 0;\n}\n\n.viewer-demo-error {\n\tposition: relative;\n\tz-index: 1;\n\tcolor: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImageViewer/popup-container/ts/Demo.vue",
									"sha256": "f4616d2f69c95255fcc3ba54f9653c578885e7a65bc81c7ec6dbf42fd12a28cd",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>打开独立图片预览</AsamButton\n\t\t>\n\t\t<AsamImageViewer\n\t\t\tv-if=\"open\"\n\t\t\tv-bind=\"{ urlList: [preview], teleported: true }\"\n\t\t\t@close=\"open = false\"\n\t\t\t:teleported=\"globalPopup\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamImageViewerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamImageViewer } from '@asam-ui/ui';\nimport preview from './preview.svg';\nconst open = ref(false);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.popup-stage.local :deep(.el-image-viewer__wrapper) {\n\tposition: absolute;\n}\n</style>\n"
								},
								{
									"name": "preview.svg",
									"sourcePath": "apps/website/examples/AsamImageViewer/popup-container/ts/preview.svg",
									"sha256": "ad20543b1d5e65a8f59fd2095647c9d10aff9a6b61c21d2878b871c70a331adb",
									"source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"180\" viewBox=\"0 0 320 180\"><rect width=\"320\" height=\"180\" fill=\"#ecf1fc\"/><rect x=\"40\" y=\"40\" width=\"240\" height=\"100\" rx=\"10\" fill=\"#0958d9\"/><text x=\"160\" y=\"98\" text-anchor=\"middle\" fill=\"white\" font-family=\"sans-serif\" font-size=\"24\">ASAM</text></svg>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamImageViewer/popup-container/js/Demo.vue",
									"sha256": "1471710ef821d5e254d3f8512cf6e01e47e3465d89d6a3329bef7ec49e3e907d",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>打开独立图片预览</AsamButton\n\t\t>\n\t\t<AsamImageViewer\n\t\t\tv-if=\"open\"\n\t\t\tv-bind=\"{ urlList: [preview], teleported: true }\"\n\t\t\t@close=\"open = false\"\n\t\t\t:teleported=\"globalPopup\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamImageViewerBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamImageViewer } from '@asam-ui/ui';\nimport preview from './preview.svg';\nconst open = ref(false);\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n\n.popup-stage.local :deep(.el-image-viewer__wrapper) {\n\tposition: absolute;\n}\n</style>\n"
								},
								{
									"name": "preview.svg",
									"sourcePath": "apps/website/examples/AsamImageViewer/popup-container/js/preview.svg",
									"sha256": "ad20543b1d5e65a8f59fd2095647c9d10aff9a6b61c21d2878b871c70a331adb",
									"source": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"320\" height=\"180\" viewBox=\"0 0 320 180\"><rect width=\"320\" height=\"180\" fill=\"#ecf1fc\"/><rect x=\"40\" y=\"40\" width=\"240\" height=\"100\" rx=\"10\" fill=\"#0958d9\"/><text x=\"160\" y=\"98\" text-anchor=\"middle\" fill=\"white\" font-family=\"sans-serif\" font-size=\"24\">ASAM</text></svg>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamLink",
			"documentation": "/component-AsamLink.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/basic/ts/Demo.vue",
									"sha256": "9307847d99442ff7bed9c3eb74a602b8dbc3d33a2ee8cf943e6f8353598d27f9",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamLink\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ size, href: '#doc010-link-target', type: 'primary' }\"\n\t\t>\n\t\t\t<span>{{ size }} 链接</span>\n\t\t</AsamLink>\n\t\t<AsamLink disabled href=\"#doc010-link-target\">禁用链接</AsamLink>\n\t</div>\n\t<p class=\"example-paragraph\" id=\"doc010-link-target\">本页链接目标</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLinkBasicDemo' });\nimport { AsamLink } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/basic/js/Demo.vue",
									"sha256": "ad827080f80776b0a41cb9c40b98430c79c03f782772a332dd005493cc1d2d34",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamLink\n\t\t\tv-for=\"size in sizes\"\n\t\t\t:key=\"size\"\n\t\t\tv-bind=\"{ size, href: '#doc010-link-target', type: 'primary' }\"\n\t\t>\n\t\t\t<span>{{ size }} 链接</span>\n\t\t</AsamLink>\n\t\t<AsamLink disabled href=\"#doc010-link-target\">禁用链接</AsamLink>\n\t</div>\n\t<p class=\"example-paragraph\" id=\"doc010-link-target\">本页链接目标</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLinkBasicDemo' });\nimport { AsamLink } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-basic/ts/Demo.vue",
									"sha256": "b79701ed594271d7f0a71710b79d1d35205dd52dbe50e18b4cde10a75b23bde8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink href=\"https://example.com\" target=\"_blank\">default</AsamLink>\n\t\t<AsamLink type=\"primary\">primary</AsamLink>\n\t\t<AsamLink type=\"success\">success</AsamLink>\n\t\t<AsamLink type=\"warning\">warning</AsamLink>\n\t\t<AsamLink type=\"danger\">danger</AsamLink>\n\t\t<AsamLink type=\"info\">info</AsamLink>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLinkCapBasicDemo' });\nimport { AsamLink } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "086da9c7e49218460e650971676cb47de63a9e4a0b7d1f86b3dae234253c97d5",
									"notice": {
										"id": "45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd",
										"url": "/licenses/source-notices/45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt",
										"licenseFilename": "LICENSE-45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/basic.vue",
											"sourceSha256": "2ec2cc903c28c61a9c7c4beb960bf932dff993077a8ad0f39fb801c42d28c14a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-basic/js/Demo.vue",
									"sha256": "ef9a62d82322406329f45f237d60bf1d4c3fd0308ffa821a57c51f26f72af7d4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink href=\"https://example.com\" target=\"_blank\">default</AsamLink>\n\t\t<AsamLink type=\"primary\">primary</AsamLink>\n\t\t<AsamLink type=\"success\">success</AsamLink>\n\t\t<AsamLink type=\"warning\">warning</AsamLink>\n\t\t<AsamLink type=\"danger\">danger</AsamLink>\n\t\t<AsamLink type=\"info\">info</AsamLink>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLinkCapBasicDemo' });\nimport { AsamLink } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "0c0aaa4acac8c47a140cefbacbd32729733d7035ef62fde0e0be7ed2b7dba367",
									"notice": {
										"id": "45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd",
										"url": "/licenses/source-notices/45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt",
										"licenseFilename": "LICENSE-45538b93eb34f7c8353ef834d09fb9078308acf069a09d261536a540d22bd0bd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/basic.vue",
											"sourceSha256": "2ec2cc903c28c61a9c7c4beb960bf932dff993077a8ad0f39fb801c42d28c14a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-disabled",
					"title": "禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-disabled/ts/Demo.vue",
									"sha256": "90dc676fbedf4a7a2b6a42ef02b5326e37729bd4e2a17d8714e09fd75c18b34c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink disabled>default</AsamLink>\n\t\t<AsamLink type=\"primary\" disabled>primary</AsamLink>\n\t\t<AsamLink type=\"success\" disabled>success</AsamLink>\n\t\t<AsamLink type=\"warning\" disabled>warning</AsamLink>\n\t\t<AsamLink type=\"danger\" disabled>danger</AsamLink>\n\t\t<AsamLink type=\"info\" disabled>info</AsamLink>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLinkCapDisabledDemo' });\nimport { AsamLink } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "70b73cf26bd91c08f6f6f52b43c1371bcd8d5237f7327eaf203c64cf6a411fa1",
									"notice": {
										"id": "3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7",
										"url": "/licenses/source-notices/3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt",
										"licenseFilename": "LICENSE-3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/disabled.vue",
											"sourceSha256": "ef773d0559b0658c238324e8702b1038d1eb04784b45908207d04af8495c792e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-disabled/js/Demo.vue",
									"sha256": "f66b2a07330d47e803cd33da97d1edd8e0684a884625da99ca22f98485d69294",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink disabled>default</AsamLink>\n\t\t<AsamLink type=\"primary\" disabled>primary</AsamLink>\n\t\t<AsamLink type=\"success\" disabled>success</AsamLink>\n\t\t<AsamLink type=\"warning\" disabled>warning</AsamLink>\n\t\t<AsamLink type=\"danger\" disabled>danger</AsamLink>\n\t\t<AsamLink type=\"info\" disabled>info</AsamLink>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLinkCapDisabledDemo' });\nimport { AsamLink } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "1f1ad10d16ffeef7b4a23125b43aa0bfa135434d563bbbe3a9a9bee80ecbc9ae",
									"notice": {
										"id": "3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7",
										"url": "/licenses/source-notices/3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt",
										"licenseFilename": "LICENSE-3be55307a9b4de165554344165c03f371e20ad7690e8f193f15b6cf2690b1dc7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/disabled.vue",
											"sourceSha256": "ef773d0559b0658c238324e8702b1038d1eb04784b45908207d04af8495c792e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-underline",
					"title": "下划线",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-underline/ts/Demo.vue",
									"sha256": "7744a81fc96d65438726f6cb531a75ec92ae8478017721aec595a64ca175baa8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink>default</AsamLink>\n\t\t<AsamLink underline=\"always\">always</AsamLink>\n\t\t<AsamLink underline=\"hover\">hover</AsamLink>\n\t\t<AsamLink underline=\"never\">never</AsamLink>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLinkCapUnderlineDemo' });\nimport { AsamLink } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "b0b5b6586a44448011f9c1786fba5a91e3e6e8ddc81a6b15e5bc99e315c6a104",
									"notice": {
										"id": "b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c",
										"url": "/licenses/source-notices/b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt",
										"licenseFilename": "LICENSE-b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/underline.vue",
											"sourceSha256": "c86dbd278cdfc1293201c592f0c0292d0dd769a37b63187a2c4edebc723626b2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-underline/js/Demo.vue",
									"sha256": "2b4c2ce291d4154a4e0811bcb2bf3ec932d71ba226c9d2dab172387a6c9c1a14",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink>default</AsamLink>\n\t\t<AsamLink underline=\"always\">always</AsamLink>\n\t\t<AsamLink underline=\"hover\">hover</AsamLink>\n\t\t<AsamLink underline=\"never\">never</AsamLink>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLinkCapUnderlineDemo' });\nimport { AsamLink } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "dbbadddd4b14e028c8cce218b9d2691efb3c39f66cd64ffb96ea056ca4d1be9f",
									"notice": {
										"id": "b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c",
										"url": "/licenses/source-notices/b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt",
										"licenseFilename": "LICENSE-b04113875cea0856e48110af4c2a07b6f74f012465081f914941c99db39e929c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/underline.vue",
											"sourceSha256": "c86dbd278cdfc1293201c592f0c0292d0dd769a37b63187a2c4edebc723626b2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-with-icon",
					"title": "使用图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-with-icon/ts/Demo.vue",
									"sha256": "8d81a557d2901ca848ede051758a2ea408e01e8b41cd2253aac03353ee49c29a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink :icon=\"Edit\">编辑</AsamLink>\n\t\t<AsamLink>\n\t\t\t检查<AsamIcon class=\"el-icon--right\"><icon-view /></AsamIcon>\n\t\t</AsamLink>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLinkCapWithIconDemo' });\nimport { AsamLink, AsamIcon } from '@asam-ui/ui';\n\nimport { Edit, View as IconView } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "7dcb2014fbdf04d6dc5bd4bbd1666199e14d1cf4cdf90486940afbe368f351ab",
									"notice": {
										"id": "e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d",
										"url": "/licenses/source-notices/e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt",
										"licenseFilename": "LICENSE-e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/with-icon.vue",
											"sourceSha256": "4a0ba824f2524d824f0cfc45a9ad8d887f31694472908da6872dc7defc809f3d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLink/cap-with-icon/js/Demo.vue",
									"sha256": "985608ca66054f885270956500ee360037a97171f1cf88aa64f9473ef6fa5c5b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt\n-->\n<template>\n\t<div>\n\t\t<AsamLink :icon=\"Edit\">编辑</AsamLink>\n\t\t<AsamLink>\n\t\t\t检查<AsamIcon class=\"el-icon--right\"><icon-view /></AsamIcon>\n\t\t</AsamLink>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLinkCapWithIconDemo' });\nimport { AsamLink, AsamIcon } from '@asam-ui/ui';\nimport { Edit, View as IconView } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.el-link {\n\tmargin-right: 8px;\n}\n</style>\n",
									"originalSourceSha256": "f361eeda927caae7ad62f14aff81c5ef3e45a28934e60ef16861c864e9f160ee",
									"notice": {
										"id": "e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d",
										"url": "/licenses/source-notices/e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt",
										"licenseFilename": "LICENSE-e881889a995bfd8181a06e49e12da3a7a0b8ff9ae7708939fb7bfcf8e2043f6d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/link/with-icon.vue",
											"sourceSha256": "4a0ba824f2524d824f0cfc45a9ad8d887f31694472908da6872dc7defc809f3d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMain",
			"documentation": "/component-AsamMain.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMain/basic/ts/Demo.vue",
									"sha256": "2db801428e459da46e4703cc1fe624ed27b4d3879a1024a5552364a8d266b993",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMainBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMain/basic/js/Demo.vue",
									"sha256": "b812128f28209f5bbdb503650e64e6ed7a591d9c16da9c57e81b5f25892e5800",
									"source": "<template>\n\t<AsamContainer class=\"layout\">\n\t\t<AsamHeader class=\"panel\">页头</AsamHeader>\n\t\t<AsamContainer>\n\t\t\t<AsamAside width=\"120px\" class=\"panel\">侧栏</AsamAside>\n\t\t\t<AsamMain class=\"panel\">主内容</AsamMain>\n\t\t</AsamContainer>\n\t\t<AsamFooter class=\"panel\">页脚</AsamFooter>\n\t</AsamContainer>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMainBasicDemo' });\nimport { AsamContainer, AsamHeader, AsamAside, AsamMain, AsamFooter } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.layout {\n\tmin-height: 240px;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMenu",
			"documentation": "/component-AsamMenu.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/basic/ts/Demo.vue",
									"sha256": "bc00fb53d4244756387c8d3c63a8b6034952e9cbf0f235709813f306bf4cf663",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/basic/js/Demo.vue",
									"sha256": "db6dd3bdb76988e3b930b52291b87b10f97dcfcabdf3ef7983b33cf7d3b2304f",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-basic/ts/Demo.vue",
									"sha256": "68d6e41222d8fdd223bdbaa3756399ec4ec5ea819294450ddd4fba43eca03a78",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt\n-->\n<template>\n\t<AsamMenu\n\t\t:default-active=\"activeIndex\"\n\t\tclass=\"el-menu-demo\"\n\t\tmode=\"horizontal\"\n\t\t@select=\"handleSelect\"\n\t>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"3\" disabled>信息</AsamMenuItem>\n\t\t<AsamMenuItem index=\"4\">订单</AsamMenuItem>\n\t</AsamMenu>\n\t<div class=\"h-6\" />\n\t<AsamMenu\n\t\t:default-active=\"activeIndex2\"\n\t\tclass=\"el-menu-demo\"\n\t\tmode=\"horizontal\"\n\t\tbackground-color=\"#545c64\"\n\t\ttext-color=\"#fff\"\n\t\tactive-text-color=\"#ffd04b\"\n\t\t@select=\"handleSelect\"\n\t>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"3\" disabled>信息</AsamMenuItem>\n\t\t<AsamMenuItem index=\"4\">订单</AsamMenuItem>\n\t</AsamMenu>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuCapBasicDemo' });\nimport { AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst activeIndex = ref('1');\nconst activeIndex2 = ref('1');\nconst handleSelect = (key: string, keyPath: string[]) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.h-6 {\n\theight: 1.5rem;\n}\n</style>\n",
									"originalSourceSha256": "afa1d180c0ca2c6e747c23405791afcc069a365824748de8e4651ac96052de16",
									"notice": {
										"id": "68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a",
										"url": "/licenses/source-notices/68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt",
										"licenseFilename": "LICENSE-68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/basic.vue",
											"sourceSha256": "dcb8fe974e560fab5bef525da1d8da39afe207178df6353325f0a0c89ea054bb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-basic/js/Demo.vue",
									"sha256": "b507bae3f47b25628c1d25da44ec0c94dc86edaccebb7a629b45ed92dff9f920",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt\n-->\n<template>\n\t<AsamMenu\n\t\t:default-active=\"activeIndex\"\n\t\tclass=\"el-menu-demo\"\n\t\tmode=\"horizontal\"\n\t\t@select=\"handleSelect\"\n\t>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"3\" disabled>信息</AsamMenuItem>\n\t\t<AsamMenuItem index=\"4\">订单</AsamMenuItem>\n\t</AsamMenu>\n\t<div class=\"h-6\" />\n\t<AsamMenu\n\t\t:default-active=\"activeIndex2\"\n\t\tclass=\"el-menu-demo\"\n\t\tmode=\"horizontal\"\n\t\tbackground-color=\"#545c64\"\n\t\ttext-color=\"#fff\"\n\t\tactive-text-color=\"#ffd04b\"\n\t\t@select=\"handleSelect\"\n\t>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"3\" disabled>信息</AsamMenuItem>\n\t\t<AsamMenuItem index=\"4\">订单</AsamMenuItem>\n\t</AsamMenu>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuCapBasicDemo' });\nimport { AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activeIndex = ref('1');\nconst activeIndex2 = ref('1');\nconst handleSelect = (key, keyPath) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.h-6 {\n\theight: 1.5rem;\n}\n</style>\n",
									"originalSourceSha256": "2a063789c9332a1555f480942390334a49f139c4fd709e6986db0347692dedd4",
									"notice": {
										"id": "68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a",
										"url": "/licenses/source-notices/68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt",
										"licenseFilename": "LICENSE-68b115f6f05dbd792854ee6426961abc1609d8242ca4c6c0e1f558334905599a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/basic.vue",
											"sourceSha256": "dcb8fe974e560fab5bef525da1d8da39afe207178df6353325f0a0c89ea054bb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-left-and-right",
					"title": "左右",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-left-and-right/ts/Demo.vue",
									"sha256": "ccca06c0bb48ed4432d3be92dcdc5b276afded885fdaae04041564515cbfe720",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt\n-->\n<template>\n\t<AsamMenu\n\t\t:default-active=\"activeIndex\"\n\t\tclass=\"el-menu-demo\"\n\t\tmode=\"horizontal\"\n\t\t:ellipsis=\"false\"\n\t\t@select=\"handleSelect\"\n\t>\n\t\t<AsamMenuItem index=\"0\">\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 100px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\talt=\"组件标志\"\n\t\t\t/>\n\t\t</AsamMenuItem>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuCapLeftAndRightDemo' });\nimport { AsamImage, AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst activeIndex = ref('1');\nconst handleSelect = (key: string, keyPath: string[]) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-menu--horizontal > .el-menu-item:nth-child(1) {\n\tmargin-right: auto;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "bd205971e7aa09900b88345ec336fcd10daf660eaf9710e08e56896101f63a87",
									"notice": {
										"id": "a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19",
										"url": "/licenses/source-notices/a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt",
										"licenseFilename": "LICENSE-a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/left-and-right.vue",
											"sourceSha256": "77c6d8492b272c7f1e12ae8614c8fc48f7b6fdb53b309b6ef0060361dff5bccb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-left-and-right/js/Demo.vue",
									"sha256": "cd8c16590725768017211acabc9cadc7156d95d15a120726f7fac16c6409df42",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt\n-->\n<template>\n\t<AsamMenu\n\t\t:default-active=\"activeIndex\"\n\t\tclass=\"el-menu-demo\"\n\t\tmode=\"horizontal\"\n\t\t:ellipsis=\"false\"\n\t\t@select=\"handleSelect\"\n\t>\n\t\t<AsamMenuItem index=\"0\">\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 100px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\talt=\"组件标志\"\n\t\t\t/>\n\t\t</AsamMenuItem>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuCapLeftAndRightDemo' });\nimport { AsamImage, AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activeIndex = ref('1');\nconst handleSelect = (key, keyPath) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-menu--horizontal > .el-menu-item:nth-child(1) {\n\tmargin-right: auto;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "03189a07e6791dbf906362bd263945d77a566903a906ca3ae78bf8383c31fb23",
									"notice": {
										"id": "a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19",
										"url": "/licenses/source-notices/a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt",
										"licenseFilename": "LICENSE-a28608aa854ddc80953c9a8ec5ba245dc5e31655a803441a0e15dfd079614e19.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/left-and-right.vue",
											"sourceSha256": "77c6d8492b272c7f1e12ae8614c8fc48f7b6fdb53b309b6ef0060361dff5bccb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical",
					"title": "垂直布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-vertical/ts/Demo.vue",
									"sha256": "237032b746ead928b324be9f1f7e99877100a138a1fdee1a3198aaca12034164",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt\n-->\n<template>\n\t<AsamRow class=\"tac\">\n\t\t<AsamCol :span=\"12\">\n\t\t\t<h5 class=\"mb-2\">默认配色</h5>\n\t\t\t<AsamMenu\n\t\t\t\tdefault-active=\"2\"\n\t\t\t\tclass=\"el-menu-vertical-demo\"\n\t\t\t\t@open=\"handleOpen\"\n\t\t\t\t@close=\"handleClose\"\n\t\t\t>\n\t\t\t\t<AsamSubMenu index=\"1\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<AsamIcon><location /></AsamIcon>\n\t\t\t\t\t\t<span>导航一</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第一组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-1\">第一项</AsamMenuItem>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-2\">第二项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第二组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-3\">第三项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t\t\t<template #title>第四项</template>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-4-1\">第一项</AsamMenuItem>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t</AsamSubMenu>\n\t\t\t\t<AsamMenuItem index=\"2\">\n\t\t\t\t\t<AsamIcon><icon-menu /></AsamIcon>\n\t\t\t\t\t<span>导航二</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3\" disabled>\n\t\t\t\t\t<AsamIcon><document /></AsamIcon>\n\t\t\t\t\t<span>导航三</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"4\">\n\t\t\t\t\t<AsamIcon><setting /></AsamIcon>\n\t\t\t\t\t<span>导航四</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t</AsamMenu>\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"12\">\n\t\t\t<h5 class=\"mb-2\">自定义配色</h5>\n\t\t\t<AsamMenu\n\t\t\t\tactive-text-color=\"#ffd04b\"\n\t\t\t\tbackground-color=\"#545c64\"\n\t\t\t\tclass=\"el-menu-vertical-demo\"\n\t\t\t\tdefault-active=\"2\"\n\t\t\t\ttext-color=\"#fff\"\n\t\t\t\t@open=\"handleOpen\"\n\t\t\t\t@close=\"handleClose\"\n\t\t\t>\n\t\t\t\t<AsamSubMenu index=\"1\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<AsamIcon><location /></AsamIcon>\n\t\t\t\t\t\t<span>导航一</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第一组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-1\">第一项</AsamMenuItem>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-2\">第二项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第二组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-3\">第三项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t\t\t<template #title>第四项</template>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-4-1\">第一项</AsamMenuItem>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t</AsamSubMenu>\n\t\t\t\t<AsamMenuItem index=\"2\">\n\t\t\t\t\t<AsamIcon><icon-menu /></AsamIcon>\n\t\t\t\t\t<span>导航二</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3\" disabled>\n\t\t\t\t\t<AsamIcon><document /></AsamIcon>\n\t\t\t\t\t<span>导航三</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"4\">\n\t\t\t\t\t<AsamIcon><setting /></AsamIcon>\n\t\t\t\t\t<span>导航四</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t</AsamMenu>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuCapVerticalDemo' });\nimport {\n\tAsamRow,\n\tAsamCol,\n\tAsamMenu,\n\tAsamSubMenu,\n\tAsamIcon,\n\tAsamMenuItemGroup,\n\tAsamMenuItem\n} from '@asam-ui/ui';\n\nimport { Document, Menu as IconMenu, Location, Setting } from '@asam-ui/icons-vue';\n\nconst handleOpen = (key: string, keyPath: string[]) => {\n\tconsole.log(key, keyPath);\n};\nconst handleClose = (key: string, keyPath: string[]) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-2 {\n\tmargin-bottom: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "9bb09472ce607d1bf96255964d91a5982da2cad7382a168e1d977c840d642779",
									"notice": {
										"id": "d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c",
										"url": "/licenses/source-notices/d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt",
										"licenseFilename": "LICENSE-d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/vertical.vue",
											"sourceSha256": "fd595893001de5b3570dbea4a63c2c712817299615362d0100c65e4a4febb711",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-vertical/js/Demo.vue",
									"sha256": "2b289004138960d40707f3b15ff57020e8eeaab5e10c4dfacec5063670e4b457",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt\n-->\n<template>\n\t<AsamRow class=\"tac\">\n\t\t<AsamCol :span=\"12\">\n\t\t\t<h5 class=\"mb-2\">默认配色</h5>\n\t\t\t<AsamMenu\n\t\t\t\tdefault-active=\"2\"\n\t\t\t\tclass=\"el-menu-vertical-demo\"\n\t\t\t\t@open=\"handleOpen\"\n\t\t\t\t@close=\"handleClose\"\n\t\t\t>\n\t\t\t\t<AsamSubMenu index=\"1\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<AsamIcon><location /></AsamIcon>\n\t\t\t\t\t\t<span>导航一</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第一组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-1\">第一项</AsamMenuItem>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-2\">第二项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第二组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-3\">第三项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t\t\t<template #title>第四项</template>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-4-1\">第一项</AsamMenuItem>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t</AsamSubMenu>\n\t\t\t\t<AsamMenuItem index=\"2\">\n\t\t\t\t\t<AsamIcon><icon-menu /></AsamIcon>\n\t\t\t\t\t<span>导航二</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3\" disabled>\n\t\t\t\t\t<AsamIcon><document /></AsamIcon>\n\t\t\t\t\t<span>导航三</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"4\">\n\t\t\t\t\t<AsamIcon><setting /></AsamIcon>\n\t\t\t\t\t<span>导航四</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t</AsamMenu>\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"12\">\n\t\t\t<h5 class=\"mb-2\">自定义配色</h5>\n\t\t\t<AsamMenu\n\t\t\t\tactive-text-color=\"#ffd04b\"\n\t\t\t\tbackground-color=\"#545c64\"\n\t\t\t\tclass=\"el-menu-vertical-demo\"\n\t\t\t\tdefault-active=\"2\"\n\t\t\t\ttext-color=\"#fff\"\n\t\t\t\t@open=\"handleOpen\"\n\t\t\t\t@close=\"handleClose\"\n\t\t\t>\n\t\t\t\t<AsamSubMenu index=\"1\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<AsamIcon><location /></AsamIcon>\n\t\t\t\t\t\t<span>导航一</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第一组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-1\">第一项</AsamMenuItem>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-2\">第二项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamMenuItemGroup title=\"第二组\">\n\t\t\t\t\t\t<AsamMenuItem index=\"1-3\">第三项</AsamMenuItem>\n\t\t\t\t\t</AsamMenuItemGroup>\n\t\t\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t\t\t<template #title>第四项</template>\n\t\t\t\t\t\t<AsamMenuItem index=\"1-4-1\">第一项</AsamMenuItem>\n\t\t\t\t\t</AsamSubMenu>\n\t\t\t\t</AsamSubMenu>\n\t\t\t\t<AsamMenuItem index=\"2\">\n\t\t\t\t\t<AsamIcon><icon-menu /></AsamIcon>\n\t\t\t\t\t<span>导航二</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3\" disabled>\n\t\t\t\t\t<AsamIcon><document /></AsamIcon>\n\t\t\t\t\t<span>导航三</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"4\">\n\t\t\t\t\t<AsamIcon><setting /></AsamIcon>\n\t\t\t\t\t<span>导航四</span>\n\t\t\t\t</AsamMenuItem>\n\t\t\t</AsamMenu>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuCapVerticalDemo' });\nimport {\n\tAsamRow,\n\tAsamCol,\n\tAsamMenu,\n\tAsamSubMenu,\n\tAsamIcon,\n\tAsamMenuItemGroup,\n\tAsamMenuItem\n} from '@asam-ui/ui';\nimport { Document, Menu as IconMenu, Location, Setting } from '@asam-ui/icons-vue';\nconst handleOpen = (key, keyPath) => {\n\tconsole.log(key, keyPath);\n};\nconst handleClose = (key, keyPath) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-2 {\n\tmargin-bottom: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "3e9802da56bb2e5e1eed335d3b9aaba16cdf936f27d4e18106ec3c77255989e1",
									"notice": {
										"id": "d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c",
										"url": "/licenses/source-notices/d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt",
										"licenseFilename": "LICENSE-d30588da13a3d589814a7a7cb421f8600c57a1a31e2469efc13b2b8bb1005f5c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/vertical.vue",
											"sourceSha256": "fd595893001de5b3570dbea4a63c2c712817299615362d0100c65e4a4febb711",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-collapse",
					"title": "Collapse 折叠面板",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-collapse/ts/Demo.vue",
									"sha256": "67b018a54aba7cd5d44fa3468a4f1c6266672c099048a70a4ba2a9921fb65f1d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"isCollapse\"\n\t\tstyle=\"margin-bottom: 20px\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'boolean') isCollapse = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioButton :value=\"false\">expand</AsamRadioButton>\n\t\t<AsamRadioButton :value=\"true\">collapse</AsamRadioButton>\n\t</AsamRadioGroup>\n\t<AsamMenu\n\t\tdefault-active=\"2\"\n\t\tclass=\"el-menu-vertical-demo\"\n\t\t:collapse=\"isCollapse\"\n\t\t@open=\"handleOpen\"\n\t\t@close=\"handleClose\"\n\t>\n\t\t<AsamSubMenu index=\"1\">\n\t\t\t<template #title>\n\t\t\t\t<AsamIcon><location /></AsamIcon>\n\t\t\t\t<span>导航一</span>\n\t\t\t</template>\n\t\t\t<AsamMenuItemGroup>\n\t\t\t\t<template #title><span>第一组</span></template>\n\t\t\t\t<AsamMenuItem index=\"1-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"1-2\">第二项</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t\t<AsamMenuItemGroup title=\"第二组\">\n\t\t\t\t<AsamMenuItem index=\"1-3\">第三项</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t<template #title><span>第四项</span></template>\n\t\t\t\t<AsamMenuItem index=\"1-4-1\">第一项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"2\">\n\t\t\t<AsamIcon><icon-menu /></AsamIcon>\n\t\t\t<template #title>导航二</template>\n\t\t</AsamMenuItem>\n\t\t<AsamMenuItem index=\"3\" disabled>\n\t\t\t<AsamIcon><document /></AsamIcon>\n\t\t\t<template #title>导航三</template>\n\t\t</AsamMenuItem>\n\t\t<AsamMenuItem index=\"4\">\n\t\t\t<AsamIcon><setting /></AsamIcon>\n\t\t\t<template #title>导航四</template>\n\t\t</AsamMenuItem>\n\t</AsamMenu>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuCapCollapseDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioButton,\n\tAsamMenu,\n\tAsamSubMenu,\n\tAsamIcon,\n\tAsamMenuItemGroup,\n\tAsamMenuItem\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { Document, Menu as IconMenu, Location, Setting } from '@asam-ui/icons-vue';\n\nconst isCollapse = ref(true);\nconst handleOpen = (key: string, keyPath: string[]) => {\n\tconsole.log(key, keyPath);\n};\nconst handleClose = (key: string, keyPath: string[]) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-menu-vertical-demo:not(.el-menu--collapse) {\n\twidth: 200px;\n\tmin-height: 400px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "19071a4bc68680e900797931d25142123bc52345cb762d42015f35da18c929f8",
									"notice": {
										"id": "26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879",
										"url": "/licenses/source-notices/26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt",
										"licenseFilename": "LICENSE-26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/collapse.vue",
											"sourceSha256": "967bd563043c5b6d26062c9334e76c4ebb347bed71739c9f2f666fa149e836f6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-collapse/js/Demo.vue",
									"sha256": "48c249cc355c35c1fdd533035eb2bd2b59cdefef348b15c708e42e81ab8317d6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"isCollapse\"\n\t\tstyle=\"margin-bottom: 20px\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'boolean') isCollapse = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioButton :value=\"false\">expand</AsamRadioButton>\n\t\t<AsamRadioButton :value=\"true\">collapse</AsamRadioButton>\n\t</AsamRadioGroup>\n\t<AsamMenu\n\t\tdefault-active=\"2\"\n\t\tclass=\"el-menu-vertical-demo\"\n\t\t:collapse=\"isCollapse\"\n\t\t@open=\"handleOpen\"\n\t\t@close=\"handleClose\"\n\t>\n\t\t<AsamSubMenu index=\"1\">\n\t\t\t<template #title>\n\t\t\t\t<AsamIcon><location /></AsamIcon>\n\t\t\t\t<span>导航一</span>\n\t\t\t</template>\n\t\t\t<AsamMenuItemGroup>\n\t\t\t\t<template #title><span>第一组</span></template>\n\t\t\t\t<AsamMenuItem index=\"1-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"1-2\">第二项</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t\t<AsamMenuItemGroup title=\"第二组\">\n\t\t\t\t<AsamMenuItem index=\"1-3\">第三项</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t\t<AsamSubMenu index=\"1-4\">\n\t\t\t\t<template #title><span>第四项</span></template>\n\t\t\t\t<AsamMenuItem index=\"1-4-1\">第一项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"2\">\n\t\t\t<AsamIcon><icon-menu /></AsamIcon>\n\t\t\t<template #title>导航二</template>\n\t\t</AsamMenuItem>\n\t\t<AsamMenuItem index=\"3\" disabled>\n\t\t\t<AsamIcon><document /></AsamIcon>\n\t\t\t<template #title>导航三</template>\n\t\t</AsamMenuItem>\n\t\t<AsamMenuItem index=\"4\">\n\t\t\t<AsamIcon><setting /></AsamIcon>\n\t\t\t<template #title>导航四</template>\n\t\t</AsamMenuItem>\n\t</AsamMenu>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuCapCollapseDemo' });\nimport {\n\tAsamRadioGroup,\n\tAsamRadioButton,\n\tAsamMenu,\n\tAsamSubMenu,\n\tAsamIcon,\n\tAsamMenuItemGroup,\n\tAsamMenuItem\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { Document, Menu as IconMenu, Location, Setting } from '@asam-ui/icons-vue';\nconst isCollapse = ref(true);\nconst handleOpen = (key, keyPath) => {\n\tconsole.log(key, keyPath);\n};\nconst handleClose = (key, keyPath) => {\n\tconsole.log(key, keyPath);\n};\n</script>\n\n<style>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.el-menu-vertical-demo:not(.el-menu--collapse) {\n\twidth: 200px;\n\tmin-height: 400px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "dfd6f420bffe20da3ef28213c6f06c07c4ff4aef32b8d1ec16bede58c9da69e3",
									"notice": {
										"id": "26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879",
										"url": "/licenses/source-notices/26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt",
										"licenseFilename": "LICENSE-26264adc5c12d2f61d6407ce474ad0bec2e8b72a61329badf88827a9aff4c879.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/collapse.vue",
											"sourceSha256": "967bd563043c5b6d26062c9334e76c4ebb347bed71739c9f2f666fa149e836f6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-popper-offset",
					"title": "弹出层偏移量 2.4.4",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-popper-offset/ts/Demo.vue",
									"sha256": "890b99a8cce3fa2ccd19b158acdcc6bdfd182544c6b8898ec824366fd7de4e5f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt\n-->\n<template>\n\t<AsamMenu\n\t\tellipsis\n\t\tclass=\"el-menu-popper-demo\"\n\t\tmode=\"horizontal\"\n\t\t:popper-offset=\"16\"\n\t\tstyle=\"max-width: 600px\"\n\t>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamSubMenu index=\"3\" :popper-offset=\"8\">\n\t\t\t<template #title>覆盖浮层偏移量</template>\n\t\t\t<AsamMenuItem index=\"3-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"3-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"3-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"3-4\" :popper-offset=\"20\">\n\t\t\t\t<template #title>覆盖子级配置</template>\n\t\t\t\t<AsamMenuItem index=\"3-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"4\" disabled>信息</AsamMenuItem>\n\t\t<AsamMenuItem index=\"5\">订单</AsamMenuItem>\n\t</AsamMenu>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuCapPopperOffsetDemo' });\nimport { AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "075f3e882a5b4cb329c83eca622e81f5ee98ad00fabcb3a1af5663acc38e209c",
									"notice": {
										"id": "f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92",
										"url": "/licenses/source-notices/f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt",
										"licenseFilename": "LICENSE-f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/popper-offset.vue",
											"sourceSha256": "516dbb18e95af300691c13eca354306a4df0266f351a09d819813bc777c094c4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/cap-popper-offset/js/Demo.vue",
									"sha256": "3cc594a738ffce52d03c1e33cfee5886ac58b574ec467b7a46c5cd1158e824e3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt\n-->\n<template>\n\t<AsamMenu\n\t\tellipsis\n\t\tclass=\"el-menu-popper-demo\"\n\t\tmode=\"horizontal\"\n\t\t:popper-offset=\"16\"\n\t\tstyle=\"max-width: 600px\"\n\t>\n\t\t<AsamMenuItem index=\"1\">处理中心</AsamMenuItem>\n\t\t<AsamSubMenu index=\"2\">\n\t\t\t<template #title>工作区</template>\n\t\t\t<AsamMenuItem index=\"2-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"2-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"2-4\">\n\t\t\t\t<template #title>第四项</template>\n\t\t\t\t<AsamMenuItem index=\"2-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"2-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamSubMenu index=\"3\" :popper-offset=\"8\">\n\t\t\t<template #title>覆盖浮层偏移量</template>\n\t\t\t<AsamMenuItem index=\"3-1\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"3-2\">第二项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"3-3\">第三项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"3-4\" :popper-offset=\"20\">\n\t\t\t\t<template #title>覆盖子级配置</template>\n\t\t\t\t<AsamMenuItem index=\"3-4-1\">第一项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3-4-2\">第二项</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"3-4-3\">第三项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamSubMenu>\n\t\t<AsamMenuItem index=\"4\" disabled>信息</AsamMenuItem>\n\t\t<AsamMenuItem index=\"5\">订单</AsamMenuItem>\n\t</AsamMenu>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuCapPopperOffsetDemo' });\nimport { AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "2abee4fc5ffbc069bbae13fa2c3aab83a3681fe57dcd5de85bcc8e982972a3c1",
									"notice": {
										"id": "f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92",
										"url": "/licenses/source-notices/f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt",
										"licenseFilename": "LICENSE-f543e8d65b1b03036320646c968818d3ce08492a40d9567f9f9384841cb07c92.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/menu/popper-offset.vue",
											"sourceSha256": "516dbb18e95af300691c13eca354306a4df0266f351a09d819813bc777c094c4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "methods",
					"title": "重算布局与更新选中项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/methods/ts/Demo.vue",
									"sha256": "1af12570500120c5b2584b437ff289946f2b07b57554231d6abd60906c620b45",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.updateActiveIndex('two')\"\n\t\t\t>激活第二项</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tmenu?.handleResize();\n\t\t\t\tresult = 'resized';\n\t\t\t\"\n\t\t>\n\t\t\t重算布局\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open('sub')\"\n\t\t\t>展开子菜单</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close('sub')\"\n\t\t\t>关闭子菜单</AsamButton\n\t\t>\n\t\t<AsamMenu ref=\"menu\" default-active=\"one\" @select=\"(index) => (result = index)\">\n\t\t\t<AsamMenuItem index=\"one\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"two\">第二项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"sub\">\n\t\t\t\t<template #title>子菜单</template><AsamMenuItem index=\"child\">子项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamMenu>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuMethodsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\nimport type { AsamMenuExpose } from '@asam-ui/ui';\nconst menu = ref<AsamMenuExpose>();\nconst result = ref('');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenu/methods/js/Demo.vue",
									"sha256": "7ba3b98c84b5c0014995d40362c981b564508ae48da7367fba117e1d2aaf386b",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.updateActiveIndex('two')\"\n\t\t\t>激活第二项</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"\n\t\t\t\tmenu?.handleResize();\n\t\t\t\tresult = 'resized';\n\t\t\t\"\n\t\t>\n\t\t\t重算布局\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open('sub')\"\n\t\t\t>展开子菜单</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close('sub')\"\n\t\t\t>关闭子菜单</AsamButton\n\t\t>\n\t\t<AsamMenu ref=\"menu\" default-active=\"one\" @select=\"(index) => (result = index)\">\n\t\t\t<AsamMenuItem index=\"one\">第一项</AsamMenuItem>\n\t\t\t<AsamMenuItem index=\"two\">第二项</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"sub\">\n\t\t\t\t<template #title>子菜单</template><AsamMenuItem index=\"child\">子项</AsamMenuItem>\n\t\t\t</AsamSubMenu>\n\t\t</AsamMenu>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamMenuMethodsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamMenu, AsamMenuItem, AsamSubMenu } from '@asam-ui/ui';\nconst menu = ref();\nconst result = ref('');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMenuItem",
			"documentation": "/component-AsamMenuItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenuItem/basic/ts/Demo.vue",
									"sha256": "e5c6ba44b5212cb6ebc84f768ca8433c7a163a3c2342153190d89b49e2a98546",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenuItem/basic/js/Demo.vue",
									"sha256": "c80945b5addcb49350af8aad84f41899f6ee2a3c09714c8eeb8a9b4e7324c004",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMenuItemGroup",
			"documentation": "/component-AsamMenuItemGroup.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenuItemGroup/basic/ts/Demo.vue",
									"sha256": "f8e59b412d90dfe8b7ac505379cef6c5cf8fb1a03d662d17bc5ae9003073b081",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMenuItemGroupBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMenuItemGroup/basic/js/Demo.vue",
									"sha256": "8c7ab67660d3463f71017e96969d47ff8267840f261ed2f5044e529781524d24",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMenuItemGroupBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPageHeader",
			"documentation": "/component-AsamPageHeader.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/basic/ts/Demo.vue",
									"sha256": "66346b38a52f033c9c6f285382cd691ca629a0f5b922805fd2594aa390c8f2a2",
									"source": "<template>\n\t<AsamPageHeader title=\"返回\" content=\"本地说明\" @back=\"count++\">\n\t\t<template #extra>\n\t\t\t<span>草稿</span>\n\t\t</template>\n\t</AsamPageHeader>\n\t<p class=\"example-paragraph\" role=\"status\">返回意图：{{ count }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamPageHeader } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/basic/js/Demo.vue",
									"sha256": "6b859b5f757827fa32dcb781ccfd3606d2366abc03000c9d1814645c2e1a1fee",
									"source": "<template>\n\t<AsamPageHeader title=\"返回\" content=\"本地说明\" @back=\"count++\">\n\t\t<template #extra>\n\t\t\t<span>草稿</span>\n\t\t</template>\n\t</AsamPageHeader>\n\t<p class=\"example-paragraph\" role=\"status\">返回意图：{{ count }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamPageHeader } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-complete",
					"title": "完整示例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-complete/ts/Demo.vue",
									"sha256": "850b4921fbe7e2556bf79147f31d8f373e3b475245bfdfe22f1b0c936fe60757",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt\n-->\n<template>\n\t<div aria-label=\"完整页头示例\">\n\t\t<AsamPageHeader @back=\"onBack\">\n\t\t\t<template #breadcrumb>\n\t\t\t\t<AsamBreadcrumb separator=\"/\">\n\t\t\t\t\t<AsamBreadcrumbItem :to=\"{ path: './page-header.html' }\">\n\t\t\t\t\t\t首页\n\t\t\t\t\t</AsamBreadcrumbItem>\n\t\t\t\t\t<AsamBreadcrumbItem>\n\t\t\t\t\t\t<AsamLink href=\"/component-AsamPageHeader.html\">路由一</AsamLink>\n\t\t\t\t\t</AsamBreadcrumbItem>\n\t\t\t\t\t<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>\n\t\t\t\t</AsamBreadcrumb>\n\t\t\t</template>\n\t\t\t<template #content>\n\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t<AsamAvatar\n\t\t\t\t\t\tclass=\"mr-3\"\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t\t\t\t<span class=\"text-sm mr-2\" style=\"color: var(--el-text-color-regular)\">\n\t\t\t\t\t\t副标题\n\t\t\t\t\t</span>\n\t\t\t\t\t<AsamTag>默认</AsamTag>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #extra>\n\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t<AsamButton type=\"default\">打印</AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"ml-2\">编辑</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<AsamDescriptions :column=\"3\" size=\"small\" class=\"mt-4\">\n\t\t\t\t<AsamDescriptionsItem label=\"用户名\"> kooriookami </AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"电话\"> 18100000000 </AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t\t\t</AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t\t\t</AsamDescriptionsItem>\n\t\t\t</AsamDescriptions>\n\t\t\t<p class=\"mt-4 text-sm example-paragraph\">\n\t\t\t\t说明文本示例：通常按周发布；关键问题采用紧急修复，实际发布次数可能调整。\n\t\t\t</p>\n\t\t</AsamPageHeader>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapCompleteDemo' });\nimport {\n\tAsamLink,\n\tAsamPageHeader,\n\tAsamBreadcrumb,\n\tAsamBreadcrumbItem,\n\tAsamAvatar,\n\tAsamTag,\n\tAsamButton,\n\tAsamDescriptions,\n\tAsamDescriptionsItem\n} from '@asam-ui/ui';\n\nimport { AsamNotification as notify } from '@asam-ui/ui';\n\nconst onBack = () => {\n\tnotify('Back');\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.text-sm {\n\tfont-size: var(--el-font-size-small);\n}\n\n.mr-2 {\n\tmargin-right: 0.5rem;\n}\n\n.ml-2 {\n\tmargin-left: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "bb3518d56593eeae7e4dd6d58cde6a4d518d0987efa5d6bf0e602bab7e74901f",
									"notice": {
										"id": "cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5",
										"url": "/licenses/source-notices/cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt",
										"licenseFilename": "LICENSE-cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/complete.vue",
											"sourceSha256": "9922fb191abee0578f37efda7a368bb0a917e035eaa7a57065edc17a35c95f16",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-complete/js/Demo.vue",
									"sha256": "e7a1ce413beef3e37fa07a9a6315286fb447711510ee9797f897a6cbbc30971d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt\n-->\n<template>\n\t<div aria-label=\"完整页头示例\">\n\t\t<AsamPageHeader @back=\"onBack\">\n\t\t\t<template #breadcrumb>\n\t\t\t\t<AsamBreadcrumb separator=\"/\">\n\t\t\t\t\t<AsamBreadcrumbItem :to=\"{ path: './page-header.html' }\">\n\t\t\t\t\t\t首页\n\t\t\t\t\t</AsamBreadcrumbItem>\n\t\t\t\t\t<AsamBreadcrumbItem>\n\t\t\t\t\t\t<AsamLink href=\"/component-AsamPageHeader.html\">路由一</AsamLink>\n\t\t\t\t\t</AsamBreadcrumbItem>\n\t\t\t\t\t<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>\n\t\t\t\t</AsamBreadcrumb>\n\t\t\t</template>\n\t\t\t<template #content>\n\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t<AsamAvatar\n\t\t\t\t\t\tclass=\"mr-3\"\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t\t\t\t<span class=\"text-sm mr-2\" style=\"color: var(--el-text-color-regular)\">\n\t\t\t\t\t\t副标题\n\t\t\t\t\t</span>\n\t\t\t\t\t<AsamTag>默认</AsamTag>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #extra>\n\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t<AsamButton type=\"default\">打印</AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"ml-2\">编辑</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<AsamDescriptions :column=\"3\" size=\"small\" class=\"mt-4\">\n\t\t\t\t<AsamDescriptionsItem label=\"用户名\"> kooriookami </AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"电话\"> 18100000000 </AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"地点\">苏州</AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"备注\">\n\t\t\t\t\t<AsamTag size=\"small\">学校</AsamTag>\n\t\t\t\t</AsamDescriptionsItem>\n\t\t\t\t<AsamDescriptionsItem label=\"地址\">\n\t\t\t\t\t江苏省苏州市吴中区吴中大道 1188 号\n\t\t\t\t</AsamDescriptionsItem>\n\t\t\t</AsamDescriptions>\n\t\t\t<p class=\"mt-4 text-sm example-paragraph\">\n\t\t\t\t说明文本示例：通常按周发布；关键问题采用紧急修复，实际发布次数可能调整。\n\t\t\t</p>\n\t\t</AsamPageHeader>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapCompleteDemo' });\nimport {\n\tAsamLink,\n\tAsamPageHeader,\n\tAsamBreadcrumb,\n\tAsamBreadcrumbItem,\n\tAsamAvatar,\n\tAsamTag,\n\tAsamButton,\n\tAsamDescriptions,\n\tAsamDescriptionsItem\n} from '@asam-ui/ui';\nimport { AsamNotification as notify } from '@asam-ui/ui';\nconst onBack = () => {\n\tnotify('Back');\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.text-sm {\n\tfont-size: var(--el-font-size-small);\n}\n\n.mr-2 {\n\tmargin-right: 0.5rem;\n}\n\n.ml-2 {\n\tmargin-left: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "2df5673d5dab560bb77dc15663385defad8e5b320582b5156bc7c99edea9434e",
									"notice": {
										"id": "cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5",
										"url": "/licenses/source-notices/cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt",
										"licenseFilename": "LICENSE-cc218c56cbae37d52284e1c809c9f1fa1ec7b700ec117ac86a31086fcc2e8df5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/complete.vue",
											"sourceSha256": "9922fb191abee0578f37efda7a368bb0a917e035eaa7a57065edc17a35c95f16",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-basic/ts/Demo.vue",
									"sha256": "53710e23ca770482371cbd3cf7fdf775a1dd5e65ac21f3a05496d35a130a4ae0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt\n-->\n<template>\n\t<AsamPageHeader @back=\"goBack\">\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapBasicDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\n\nconst goBack = () => {\n\tconsole.log('go back');\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "c33df4212934cb07f877e4109a3dcecc6e0ae1b0f3e2f2f49f7e8080ae4ff0af",
									"notice": {
										"id": "eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335",
										"url": "/licenses/source-notices/eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt",
										"licenseFilename": "LICENSE-eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/basic.vue",
											"sourceSha256": "37aeba21d5eba8e02e6e2e8b453e2b1797b865cd3bb7d086d944aac65b6fc998",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-basic/js/Demo.vue",
									"sha256": "812fe61037e44d76d76a3eee6cb6056c3c189b037b1dcc506188a5925bbcc556",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt\n-->\n<template>\n\t<AsamPageHeader @back=\"goBack\">\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapBasicDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\nconst goBack = () => {\n\tconsole.log('go back');\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "fd9d2b00fecf3e2dd26536f1809eacc2093439f1980fb6cffd79eb55ddfcae5e",
									"notice": {
										"id": "eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335",
										"url": "/licenses/source-notices/eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt",
										"licenseFilename": "LICENSE-eb46e0e0a12d0871d98a7be2146834cae22a898a46c96283a6c01c03e32f7335.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/basic.vue",
											"sourceSha256": "37aeba21d5eba8e02e6e2e8b453e2b1797b865cd3bb7d086d944aac65b6fc998",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-icon",
					"title": "自定义图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-custom-icon/ts/Demo.vue",
									"sha256": "80271d9b8128fc37919e0eaf65fbb5c554a98ca0ab94b2323e3dd026ca1eb518",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt\n-->\n<template>\n\t<AsamPageHeader :icon=\"ArrowLeft\">\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapCustomIconDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\n\nimport { ArrowLeft } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "a2e72e52b0098535bd33398368e365175f295d9e6e5a3d5747c03b47fd1a1d54",
									"notice": {
										"id": "babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6",
										"url": "/licenses/source-notices/babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt",
										"licenseFilename": "LICENSE-babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/custom-icon.vue",
											"sourceSha256": "db0310b03c70b39403c86924669344d8b594b43e74fd3ac14553a1a173d19698",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-custom-icon/js/Demo.vue",
									"sha256": "04721880e848cc221e9f68644e993e089e7af506cb4eebff879da08ff51a2817",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt\n-->\n<template>\n\t<AsamPageHeader :icon=\"ArrowLeft\">\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapCustomIconDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\nimport { ArrowLeft } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "987cd5955a1b30f8c434baf665e03f0a6a46b37be766451fae1fbedeb30292ef",
									"notice": {
										"id": "babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6",
										"url": "/licenses/source-notices/babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt",
										"licenseFilename": "LICENSE-babe5a77e540c97bced640fa4c7b876bab83a23bc8efc776c3fea1991afcade6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/custom-icon.vue",
											"sourceSha256": "db0310b03c70b39403c86924669344d8b594b43e74fd3ac14553a1a173d19698",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-no-icon",
					"title": "无图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-no-icon/ts/Demo.vue",
									"sha256": "356a681d81290c34062d5ebb08040358289c3f33cb4655d351881ea26afd002a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt\n-->\n<template>\n\t<AsamPageHeader icon=\"\">\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapNoIconDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "af1d57445d16f62f6b95b112b5f2ca92faa1098f9b413d01e4ac9911ceb5ee46",
									"notice": {
										"id": "233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea",
										"url": "/licenses/source-notices/233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt",
										"licenseFilename": "LICENSE-233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/no-icon.vue",
											"sourceSha256": "ef3cf64e97349ea7ae84130eb75a15c7989d10b1bc48d4d43377d3956767727e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-no-icon/js/Demo.vue",
									"sha256": "f9a3f335588e45cdfa4f19dfda10744a8f68206bab4882fb87c163a5f1ffb56e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt\n-->\n<template>\n\t<AsamPageHeader icon=\"\">\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapNoIconDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "a2a54584630b3be02141eccc935d085ea79ec5502aa51b7026f7289de83e1f50",
									"notice": {
										"id": "233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea",
										"url": "/licenses/source-notices/233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt",
										"licenseFilename": "LICENSE-233b85c4ebc97a0c45c57b1faa1ef0c2ebbc6c5df05cf59b2074baa01b5ca0ea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/no-icon.vue",
											"sourceSha256": "ef3cf64e97349ea7ae84130eb75a15c7989d10b1bc48d4d43377d3956767727e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-breadcrumb",
					"title": "面包屑导航",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-breadcrumb/ts/Demo.vue",
									"sha256": "fd6429fb01238c2b92614f82e5888ac216154620532f95b352a4a85225cfadac",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt\n-->\n<template>\n\t<AsamPageHeader>\n\t\t<template #breadcrumb>\n\t\t\t<AsamBreadcrumb separator=\"/\">\n\t\t\t\t<AsamBreadcrumbItem :to=\"{ path: './page-header.html' }\"> 首页 </AsamBreadcrumbItem>\n\t\t\t\t<AsamBreadcrumbItem\n\t\t\t\t\t><AsamLink href=\"/component-AsamPageHeader.html\"\n\t\t\t\t\t\t>路由一</AsamLink\n\t\t\t\t\t></AsamBreadcrumbItem\n\t\t\t\t>\n\t\t\t\t<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>\n\t\t\t</AsamBreadcrumb>\n\t\t</template>\n\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapBreadcrumbDemo' });\nimport { AsamLink, AsamPageHeader, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "ffbecab5afb0fe22c792da2c2543604fa24e005396bcae8905fbbd68bce60a98",
									"notice": {
										"id": "d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d",
										"url": "/licenses/source-notices/d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt",
										"licenseFilename": "LICENSE-d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/breadcrumb.vue",
											"sourceSha256": "931ab1cad8d4c32029ba3421d3869e17e26cddaa04a0845d66ad616c2908e670",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-breadcrumb/js/Demo.vue",
									"sha256": "4d46f3615dada9a93f6d9faffeb9683e15613a9a5885aa86b144e764a2985bf4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt\n-->\n<template>\n\t<AsamPageHeader>\n\t\t<template #breadcrumb>\n\t\t\t<AsamBreadcrumb separator=\"/\">\n\t\t\t\t<AsamBreadcrumbItem :to=\"{ path: './page-header.html' }\"> 首页 </AsamBreadcrumbItem>\n\t\t\t\t<AsamBreadcrumbItem\n\t\t\t\t\t><AsamLink href=\"/component-AsamPageHeader.html\"\n\t\t\t\t\t\t>路由一</AsamLink\n\t\t\t\t\t></AsamBreadcrumbItem\n\t\t\t\t>\n\t\t\t\t<AsamBreadcrumbItem>路由二</AsamBreadcrumbItem>\n\t\t\t</AsamBreadcrumb>\n\t\t</template>\n\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapBreadcrumbDemo' });\nimport { AsamLink, AsamPageHeader, AsamBreadcrumb, AsamBreadcrumbItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n</style>\n",
									"originalSourceSha256": "4905a5482582037f016f6747b605c60b5a461dc70c28465be67b5d2c75bdcfd8",
									"notice": {
										"id": "d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d",
										"url": "/licenses/source-notices/d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt",
										"licenseFilename": "LICENSE-d4bf4560d1f1c4be0b95c566e933f8e0f18952f9d9832da15c6fc58949978e8d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/breadcrumb.vue",
											"sourceSha256": "931ab1cad8d4c32029ba3421d3869e17e26cddaa04a0845d66ad616c2908e670",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-additional-sections",
					"title": "额外操作部分",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-additional-sections/ts/Demo.vue",
									"sha256": "812a9b39ec1e774b700881061bd4fc4f20aba036b8bfc2fc35371bcce1590929",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt\n-->\n<template>\n\t<AsamPageHeader icon=\"\">\n\t\t<template #content>\n\t\t\t<div class=\"flex items-center\">\n\t\t\t\t<AsamAvatar\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\tclass=\"mr-3\"\n\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t/>\n\t\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t\t\t<span class=\"text-sm mr-2\" style=\"color: var(--el-text-color-regular)\">\n\t\t\t\t\t副标题\n\t\t\t\t</span>\n\t\t\t\t<AsamTag>默认</AsamTag>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #extra>\n\t\t\t<div class=\"flex items-center\">\n\t\t\t\t<AsamButton type=\"default\">打印</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" class=\"ml-2\">编辑</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapAdditionalSectionsDemo' });\nimport { AsamPageHeader, AsamAvatar, AsamTag, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.text-sm {\n\tfont-size: var(--el-font-size-small);\n}\n\n.mr-2 {\n\tmargin-right: 0.5rem;\n}\n\n.ml-2 {\n\tmargin-left: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "1f86599c9d4891379e099b27f5f8438191ac3dc1880cfbf3c8181906e356eac5",
									"notice": {
										"id": "60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3",
										"url": "/licenses/source-notices/60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt",
										"licenseFilename": "LICENSE-60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/additional-sections.vue",
											"sourceSha256": "39cfa43e72df5594d9067d17ee84f8e600a7f514fb8e1b343eb8d9246a9e5bdc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-additional-sections/js/Demo.vue",
									"sha256": "180be49a57cdfdffa90685aba381b51ee4a73a1c88830ef358766333902a66e8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt\n-->\n<template>\n\t<AsamPageHeader icon=\"\">\n\t\t<template #content>\n\t\t\t<div class=\"flex items-center\">\n\t\t\t\t<AsamAvatar\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\tclass=\"mr-3\"\n\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t/>\n\t\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t\t\t<span class=\"text-sm mr-2\" style=\"color: var(--el-text-color-regular)\">\n\t\t\t\t\t副标题\n\t\t\t\t</span>\n\t\t\t\t<AsamTag>默认</AsamTag>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #extra>\n\t\t\t<div class=\"flex items-center\">\n\t\t\t\t<AsamButton type=\"default\">打印</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" class=\"ml-2\">编辑</AsamButton>\n\t\t\t</div>\n\t\t</template>\n\t</AsamPageHeader>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapAdditionalSectionsDemo' });\nimport { AsamPageHeader, AsamAvatar, AsamTag, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.items-center {\n\talign-items: center;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.text-sm {\n\tfont-size: var(--el-font-size-small);\n}\n\n.mr-2 {\n\tmargin-right: 0.5rem;\n}\n\n.ml-2 {\n\tmargin-left: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "7e41751dd52fffeca23ea6de247463e5fedf3fae87f6cbe76e3a0f5514781c7d",
									"notice": {
										"id": "60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3",
										"url": "/licenses/source-notices/60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt",
										"licenseFilename": "LICENSE-60417256f6fda7474ab1187a7db5432a31c62656b93c7f0d5e99db282b177ec3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/additional-sections.vue",
											"sourceSha256": "39cfa43e72df5594d9067d17ee84f8e600a7f514fb8e1b343eb8d9246a9e5bdc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-main-content",
					"title": "主要内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-main-content/ts/Demo.vue",
									"sha256": "e9ab4ef072a906a569d99172ed290964790f68ddc93e8707469870b181d2784f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt\n-->\n<template>\n\t<AsamPageHeader>\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\n\t\t<div class=\"mt-4 text-sm font-bold\">通过 default 插槽添加内容，可按实际需要扩展。</div>\n\t</AsamPageHeader>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPageHeaderCapMainContentDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n\n.text-sm {\n\tfont-size: var(--el-font-size-small);\n}\n\n.font-bold {\n\tfont-weight: 700;\n}\n</style>\n",
									"originalSourceSha256": "52d2d6225ec5472f93fdfd7dbca34638440838c84036593a438bbc0af958750c",
									"notice": {
										"id": "fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac",
										"url": "/licenses/source-notices/fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt",
										"licenseFilename": "LICENSE-fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/main-content.vue",
											"sourceSha256": "b37b9c3e5d42df44c11a8eb0b65e80f40bdfda16d1c6d0d09cd4c8d865ab7ae0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPageHeader/cap-main-content/js/Demo.vue",
									"sha256": "7f59a411b9c32e890510b8f3961beafd7fa7711a856dd9e71e8edf3b8f6fe230",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt\n-->\n<template>\n\t<AsamPageHeader>\n\t\t<template #content>\n\t\t\t<span class=\"text-large font-600 mr-3\"> 标题 </span>\n\t\t</template>\n\n\t\t<div class=\"mt-4 text-sm font-bold\">通过 default 插槽添加内容，可按实际需要扩展。</div>\n\t</AsamPageHeader>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPageHeaderCapMainContentDemo' });\nimport { AsamPageHeader } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-large {\n\tfont-size: var(--el-font-size-large);\n}\n\n.font-600 {\n\tfont-weight: 600;\n}\n\n.mr-3 {\n\tmargin-right: 0.75rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n\n.text-sm {\n\tfont-size: var(--el-font-size-small);\n}\n\n.font-bold {\n\tfont-weight: 700;\n}\n</style>\n",
									"originalSourceSha256": "c58568630adece66829cc9d5f7e614a90fb789a59fa92065e6b743b67b2b12ca",
									"notice": {
										"id": "fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac",
										"url": "/licenses/source-notices/fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt",
										"licenseFilename": "LICENSE-fef9b66edd231df25dd2f709f634243fc300f3ce9b368fde0ebe9f003ef796ac.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/page-header/main-content.vue",
											"sourceSha256": "b37b9c3e5d42df44c11a8eb0b65e80f40bdfda16d1c6d0d09cd4c8d865ab7ae0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamProgress",
			"documentation": "/component-AsamProgress.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/basic/ts/Demo.vue",
									"sha256": "0b88f53dfcbc530424336f422a2a1b35b157e0d6c12a6590fbac810a3fe435ec",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = (value + 10) % 110\"\n\t\t\t>更新本地进度</AsamButton\n\t\t>\n\t\t<AsamProgress :percentage=\"value\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"value\" :width=\"100\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamProgress } from '@asam-ui/ui';\nconst value = ref(40);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/basic/js/Demo.vue",
									"sha256": "43c09631aaac0ea6265773a77c62662667d16eec778baf76ba3e5d22462da046",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = (value + 10) % 110\"\n\t\t\t>更新本地进度</AsamButton\n\t\t>\n\t\t<AsamProgress :percentage=\"value\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"value\" :width=\"100\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamProgress } from '@asam-ui/ui';\nconst value = ref(40);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-linear-progress-bar",
					"title": "直线进度条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-linear-progress-bar/ts/Demo.vue",
									"sha256": "771f50a8798e9fd366354ef7c3ca17ab83b57750845dd44e95ef4e986651683f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\" />\n\t\t<AsamProgress :percentage=\"100\" :format=\"format\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"success\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"warning\" />\n\t\t<AsamProgress :percentage=\"50\" status=\"exception\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapLinearProgressBarDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\n\nconst format = (percentage: number) => (percentage === 100 ? '完整进度' : `${percentage}%`);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "b4db1e48d8846cbb606521ac7c27b65d447742a77425a2cde7cb7f9df7eb3a63",
									"notice": {
										"id": "f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04",
										"url": "/licenses/source-notices/f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt",
										"licenseFilename": "LICENSE-f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/linear-progress-bar.vue",
											"sourceSha256": "e91553448775c806efc70689f5cbb358b0026651487e9f4c49e346b44a7d5341",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-linear-progress-bar/js/Demo.vue",
									"sha256": "bea698a77508cc5cf661f7c2399c1c0df691e8e55665d287afa4e703a14e50b0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\" />\n\t\t<AsamProgress :percentage=\"100\" :format=\"format\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"success\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"warning\" />\n\t\t<AsamProgress :percentage=\"50\" status=\"exception\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapLinearProgressBarDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\nconst format = (percentage) => (percentage === 100 ? '完整进度' : `${percentage}%`);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "143c2df816c91c47a1186fbefd5a196a078597b2b17edaa72b1da818bb83c417",
									"notice": {
										"id": "f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04",
										"url": "/licenses/source-notices/f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt",
										"licenseFilename": "LICENSE-f73ca26514349f807ef044d6c1644408b43ad98e3f4dbfd997c0bb448ed1ef04.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/linear-progress-bar.vue",
											"sourceSha256": "e91553448775c806efc70689f5cbb358b0026651487e9f4c49e346b44a7d5341",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-internal-percentage",
					"title": "进度条内显示百分比标识",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-internal-percentage/ts/Demo.vue",
									"sha256": "5a8b66fe4d287de7ff4308fb5bff363ecb9b7db7a58f12e157cd1503c6d5e87e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"26\" :percentage=\"70\" />\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"24\" :percentage=\"100\" status=\"success\" />\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"22\" :percentage=\"80\" status=\"warning\" />\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapInternalPercentageDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "69bea5c6275f2406cfd0f737ed859aa0614b7bf2629a4362c6049f272093d00e",
									"notice": {
										"id": "0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c",
										"url": "/licenses/source-notices/0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt",
										"licenseFilename": "LICENSE-0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/internal-percentage.vue",
											"sourceSha256": "2c7c27f7a60693c9509531e93ce14bd9d2941e23e11364394c49d2db697fa55b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-internal-percentage/js/Demo.vue",
									"sha256": "1d01cd1344df5660ecd4dbefbb9a2b18fcda50f731204684008589664805ddc4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"26\" :percentage=\"70\" />\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"24\" :percentage=\"100\" status=\"success\" />\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"22\" :percentage=\"80\" status=\"warning\" />\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapInternalPercentageDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "ef42045f6909c5fac97a3c4efca3b134a54b3f4547369bcb3e194997a16fe342",
									"notice": {
										"id": "0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c",
										"url": "/licenses/source-notices/0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt",
										"licenseFilename": "LICENSE-0e5cc3c25fd1943c9f566a5a7052dac338f184e5f17192f00edf254bbfba049c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/internal-percentage.vue",
											"sourceSha256": "2c7c27f7a60693c9509531e93ce14bd9d2941e23e11364394c49d2db697fa55b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-color",
					"title": "自定义进度条的颜色",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-custom-color/ts/Demo.vue",
									"sha256": "f0c4e3b6ac9ddc9e001ef0231f95ce8d4ae526f7489c245ae0b9853475c9563d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColor\" />\n\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColorMethod\" />\n\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColors\" />\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColors\" />\n\t\t<div>\n\t\t\t<AsamButtonGroup>\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Minus\" @click=\"decrease\" />\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Plus\" @click=\"increase\" />\n\t\t\t</AsamButtonGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapCustomColorDemo' });\nimport { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { Minus, Plus } from '@asam-ui/icons-vue';\n\nconst percentage = ref(20);\nconst customColor = ref('#409eff');\n\nconst customColors = [\n\t{ color: '#f56c6c', percentage: 20 },\n\t{ color: '#e6a23c', percentage: 40 },\n\t{ color: '#5cb87a', percentage: 60 },\n\t{ color: '#1989fa', percentage: 80 },\n\t{ color: '#6f7ad3', percentage: 100 }\n];\n\nconst customColorMethod = (percentage: number) => {\n\tif (percentage < 30) {\n\t\treturn '#909399';\n\t}\n\tif (percentage < 70) {\n\t\treturn '#e6a23c';\n\t}\n\treturn '#67c23a';\n};\nconst increase = () => {\n\tpercentage.value += 10;\n\tif (percentage.value > 100) {\n\t\tpercentage.value = 100;\n\t}\n};\nconst decrease = () => {\n\tpercentage.value -= 10;\n\tif (percentage.value < 0) {\n\t\tpercentage.value = 0;\n\t}\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "8348109aa1f120640cef91224201404a4d960ca50ed242b58cb5afec34b046bd",
									"notice": {
										"id": "e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd",
										"url": "/licenses/source-notices/e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt",
										"licenseFilename": "LICENSE-e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/custom-color.vue",
											"sourceSha256": "0bd4b295863a759ec23918db61a20c1a7af33962322d5906f116b75d9d29c8e0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-custom-color/js/Demo.vue",
									"sha256": "d2d5efe668ae773c2fdaf828a1310abd6c29af19185df95337eb537417721076",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColor\" />\n\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColorMethod\" />\n\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColors\" />\n\t\t<AsamProgress :percentage=\"percentage\" :color=\"customColors\" />\n\t\t<div>\n\t\t\t<AsamButtonGroup>\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Minus\" @click=\"decrease\" />\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Plus\" @click=\"increase\" />\n\t\t\t</AsamButtonGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapCustomColorDemo' });\nimport { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { Minus, Plus } from '@asam-ui/icons-vue';\nconst percentage = ref(20);\nconst customColor = ref('#409eff');\nconst customColors = [\n\t{ color: '#f56c6c', percentage: 20 },\n\t{ color: '#e6a23c', percentage: 40 },\n\t{ color: '#5cb87a', percentage: 60 },\n\t{ color: '#1989fa', percentage: 80 },\n\t{ color: '#6f7ad3', percentage: 100 }\n];\nconst customColorMethod = (percentage) => {\n\tif (percentage < 30) {\n\t\treturn '#909399';\n\t}\n\tif (percentage < 70) {\n\t\treturn '#e6a23c';\n\t}\n\treturn '#67c23a';\n};\nconst increase = () => {\n\tpercentage.value += 10;\n\tif (percentage.value > 100) {\n\t\tpercentage.value = 100;\n\t}\n};\nconst decrease = () => {\n\tpercentage.value -= 10;\n\tif (percentage.value < 0) {\n\t\tpercentage.value = 0;\n\t}\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "e419bedbd5f059b1f6275dfc1a83aee747126e7e76a7f7ae1a88ece1dd5d2161",
									"notice": {
										"id": "e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd",
										"url": "/licenses/source-notices/e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt",
										"licenseFilename": "LICENSE-e5398633d6f23196b46cc87d05a484615f101761c49faac9559bec7f09048bdd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/custom-color.vue",
											"sourceSha256": "0bd4b295863a759ec23918db61a20c1a7af33962322d5906f116b75d9d29c8e0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-circular-progress-bar",
					"title": "环形进度条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-circular-progress-bar/ts/Demo.vue",
									"sha256": "5d519071b332adcfaa86e1664bd4f3813430f86e9f195c5473bc78d589246c84",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress type=\"circle\" :percentage=\"0\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"25\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"100\" status=\"success\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"70\" status=\"warning\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"50\" status=\"exception\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapCircularProgressBarDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--circle {\n\tmargin-right: 15px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "4f68f9ae6d5dd77ed87ac7b7c5cf167f2cd81cfcb2b695c3e1de3103708ce91a",
									"notice": {
										"id": "8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3",
										"url": "/licenses/source-notices/8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt",
										"licenseFilename": "LICENSE-8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/circular-progress-bar.vue",
											"sourceSha256": "3a4de132869f3db34d1abb0103a0ff4d316e8de9a8c15df020cd4f9cbdfea0db",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-circular-progress-bar/js/Demo.vue",
									"sha256": "ac62137f81fdffdcf88ffe621a946180a06c225593d1bcf50e20234504001b58",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress type=\"circle\" :percentage=\"0\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"25\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"100\" status=\"success\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"70\" status=\"warning\" />\n\t\t<AsamProgress type=\"circle\" :percentage=\"50\" status=\"exception\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapCircularProgressBarDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--circle {\n\tmargin-right: 15px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "00b223326d67d7b1b9fdeebf529167889504680c12ebfa816eb090b504174e3d",
									"notice": {
										"id": "8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3",
										"url": "/licenses/source-notices/8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt",
										"licenseFilename": "LICENSE-8123971867c21329bdca2ad0ee9dda7272e8657bc052023ce11f2c3fbe4d3cc3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/circular-progress-bar.vue",
											"sourceSha256": "3a4de132869f3db34d1abb0103a0ff4d316e8de9a8c15df020cd4f9cbdfea0db",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-dashboard-progress-bar",
					"title": "仪表盘形进度条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-dashboard-progress-bar/ts/Demo.vue",
									"sha256": "ab2e2feee374081e48fcbdf909ecdb1d86214a71074dee120aeebdc46519c845",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt\n-->\n<template>\n\t<div class=\"demo-progress demo-layout-1\">\n\t\t<AsamProgress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\" />\n\t\t<AsamProgress type=\"dashboard\" :percentage=\"percentage2\" :color=\"colors\" />\n\t\t<div>\n\t\t\t<AsamButtonGroup>\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Minus\" @click=\"decrease\" />\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Plus\" @click=\"increase\" />\n\t\t\t</AsamButtonGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapDashboardProgressBarDemo' });\nimport { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\n\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nimport { Minus, Plus } from '@asam-ui/icons-vue';\n\nconst percentage = ref(10);\nconst percentage2 = ref(0);\n\nconst colors = [\n\t{ color: '#f56c6c', percentage: 20 },\n\t{ color: '#e6a23c', percentage: 40 },\n\t{ color: '#5cb87a', percentage: 60 },\n\t{ color: '#1989fa', percentage: 80 },\n\t{ color: '#6f7ad3', percentage: 100 }\n];\n\nconst increase = () => {\n\tpercentage.value += 10;\n\tif (percentage.value > 100) {\n\t\tpercentage.value = 100;\n\t}\n};\nconst decrease = () => {\n\tpercentage.value -= 10;\n\tif (percentage.value < 0) {\n\t\tpercentage.value = 0;\n\t}\n};\nlet interval: ReturnType<typeof setInterval> | undefined;\nonMounted(() => {\n\tinterval = setInterval(() => {\n\t\tpercentage2.value = (percentage2.value % 100) + 10;\n\t}, 500);\n});\nonBeforeUnmount(() => {\n\tif (interval !== undefined) clearInterval(interval);\n});\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n.demo-progress .el-progress--circle {\n\tmargin-right: 15px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "26c66fbe80d7ad9fddf76e1b00addfa771fe220c0078b521b0bd195e2402d6b7",
									"notice": {
										"id": "31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b",
										"url": "/licenses/source-notices/31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt",
										"licenseFilename": "LICENSE-31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/dashboard-progress-bar.vue",
											"sourceSha256": "0a0ea228ec0b9797eec80275452d0694b5aec5d5b64ea851655ae837614c1b9e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-dashboard-progress-bar/js/Demo.vue",
									"sha256": "15e1cd23a6bfbfb28b1a67726f4514759ecc991502bf90a47e7242ef53d305ab",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt\n-->\n<template>\n\t<div class=\"demo-progress demo-layout-1\">\n\t\t<AsamProgress type=\"dashboard\" :percentage=\"percentage\" :color=\"colors\" />\n\t\t<AsamProgress type=\"dashboard\" :percentage=\"percentage2\" :color=\"colors\" />\n\t\t<div>\n\t\t\t<AsamButtonGroup>\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Minus\" @click=\"decrease\" />\n\t\t\t\t<AsamButton type=\"default\" :icon=\"Plus\" @click=\"increase\" />\n\t\t\t</AsamButtonGroup>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapDashboardProgressBarDemo' });\nimport { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\nimport { onBeforeUnmount, onMounted, ref } from 'vue';\nimport { Minus, Plus } from '@asam-ui/icons-vue';\nconst percentage = ref(10);\nconst percentage2 = ref(0);\nconst colors = [\n\t{ color: '#f56c6c', percentage: 20 },\n\t{ color: '#e6a23c', percentage: 40 },\n\t{ color: '#5cb87a', percentage: 60 },\n\t{ color: '#1989fa', percentage: 80 },\n\t{ color: '#6f7ad3', percentage: 100 }\n];\nconst increase = () => {\n\tpercentage.value += 10;\n\tif (percentage.value > 100) {\n\t\tpercentage.value = 100;\n\t}\n};\nconst decrease = () => {\n\tpercentage.value -= 10;\n\tif (percentage.value < 0) {\n\t\tpercentage.value = 0;\n\t}\n};\nlet interval;\nonMounted(() => {\n\tinterval = setInterval(() => {\n\t\tpercentage2.value = (percentage2.value % 100) + 10;\n\t}, 500);\n});\nonBeforeUnmount(() => {\n\tif (interval !== undefined) clearInterval(interval);\n});\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n.demo-progress .el-progress--circle {\n\tmargin-right: 15px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "565ebd4f42608d2abb116a5776a0b1d4d16e6e6ac7225e64a71785051c6e0eb7",
									"notice": {
										"id": "31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b",
										"url": "/licenses/source-notices/31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt",
										"licenseFilename": "LICENSE-31c64be87f9c041e3fa9c7f0949579aa13ea6d6ee6b6fefb48867ee6ac0bb82b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/dashboard-progress-bar.vue",
											"sourceSha256": "0a0ea228ec0b9797eec80275452d0694b5aec5d5b64ea851655ae837614c1b9e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-content",
					"title": "自定义内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-customized-content/ts/Demo.vue",
									"sha256": "1dddc3a235eab54e7aa0743d3ae765b285c8671f4e6f554b2b6e55367fcb27bb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\">\n\t\t\t<AsamButton type=\"default\" text>内容</AsamButton>\n\t\t</AsamProgress>\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\">\n\t\t\t<span>内容</span>\n\t\t</AsamProgress>\n\t\t<AsamProgress type=\"circle\" :percentage=\"100\" status=\"success\">\n\t\t\t<AsamButton type=\"default\" :icon=\"Check\" circle />\n\t\t</AsamProgress>\n\t\t<AsamProgress type=\"dashboard\" :percentage=\"80\">\n\t\t\t<template #default=\"{ percentage }\">\n\t\t\t\t<span class=\"percentage-value\">{{ percentage }}%</span>\n\t\t\t\t<span class=\"percentage-label\">进行中</span>\n\t\t\t</template>\n\t\t</AsamProgress>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapCustomizedContentDemo' });\nimport { AsamProgress, AsamButton } from '@asam-ui/ui';\n\nimport { Check } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.percentage-value {\n\tdisplay: block;\n\tmargin-top: 10px;\n\tfont-size: 28px;\n}\n\n.percentage-label {\n\tdisplay: block;\n\tmargin-top: 10px;\n\tfont-size: 12px;\n}\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n.demo-progress .el-progress--circle {\n\tmargin-right: 15px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "757d7fdcd947095a7d1b863f5b1a75992a1c1466e91e5574bffc28ce3a5625e6",
									"notice": {
										"id": "c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af",
										"url": "/licenses/source-notices/c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt",
										"licenseFilename": "LICENSE-c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/customized-content.vue",
											"sourceSha256": "f2d6103345aca6ec155697db1cda6ef857446f79d658d5dfee98771a30f46e62",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-customized-content/js/Demo.vue",
									"sha256": "d30a7a53be2d9993a80dbc01f949878a4f36ccedc7fda45fd64f6f2ba4c9b414",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\">\n\t\t\t<AsamButton type=\"default\" text>内容</AsamButton>\n\t\t</AsamProgress>\n\t\t<AsamProgress :text-inside=\"true\" :stroke-width=\"20\" :percentage=\"50\" status=\"exception\">\n\t\t\t<span>内容</span>\n\t\t</AsamProgress>\n\t\t<AsamProgress type=\"circle\" :percentage=\"100\" status=\"success\">\n\t\t\t<AsamButton type=\"default\" :icon=\"Check\" circle />\n\t\t</AsamProgress>\n\t\t<AsamProgress type=\"dashboard\" :percentage=\"80\">\n\t\t\t<template #default=\"{ percentage }\">\n\t\t\t\t<span class=\"percentage-value\">{{ percentage }}%</span>\n\t\t\t\t<span class=\"percentage-label\">进行中</span>\n\t\t\t</template>\n\t\t</AsamProgress>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapCustomizedContentDemo' });\nimport { AsamProgress, AsamButton } from '@asam-ui/ui';\nimport { Check } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.percentage-value {\n\tdisplay: block;\n\tmargin-top: 10px;\n\tfont-size: 28px;\n}\n\n.percentage-label {\n\tdisplay: block;\n\tmargin-top: 10px;\n\tfont-size: 12px;\n}\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n.demo-progress .el-progress--circle {\n\tmargin-right: 15px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "551ea60459be924ccfc6e4e6e7e5ddf0001150c1444cec0eb4a3326cf2f0c48f",
									"notice": {
										"id": "c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af",
										"url": "/licenses/source-notices/c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt",
										"licenseFilename": "LICENSE-c1435533bc6f4c2c1a4376bd193ff1154ada7c3032d006e2fb20163e2c9592af.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/customized-content.vue",
											"sourceSha256": "f2d6103345aca6ec155697db1cda6ef857446f79d658d5dfee98771a30f46e62",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-indeterminate-progress",
					"title": "动画进度条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-indeterminate-progress/ts/Demo.vue",
									"sha256": "e1238da69be5f116526f5ac6f61b6a13fd431c87c773e3f5275d0c65a7dfb866",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\" :indeterminate=\"true\" />\n\t\t<AsamProgress :percentage=\"100\" :format=\"format\" :indeterminate=\"true\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"success\" :indeterminate=\"true\" :duration=\"5\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"warning\" :indeterminate=\"true\" :duration=\"1\" />\n\t\t<AsamProgress :percentage=\"50\" status=\"exception\" :indeterminate=\"true\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapIndeterminateProgressDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\n\nconst format = (percentage: number) => (percentage === 100 ? '完整进度' : `${percentage}%`);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "4679bab3020c08765ce1af9d5eda5fa14091f1132303f6b7c834cda09f18b8b1",
									"notice": {
										"id": "cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78",
										"url": "/licenses/source-notices/cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt",
										"licenseFilename": "LICENSE-cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/indeterminate-progress.vue",
											"sourceSha256": "89dcc2b19eed29d7b0733048b842ab4a9bd67e41bacef328a1a3b93ca9540be6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-indeterminate-progress/js/Demo.vue",
									"sha256": "c590ffbe9b3bfb106ac84e8c27301116c376ee5ba062ac7e4fcb126e7d614d32",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\" :indeterminate=\"true\" />\n\t\t<AsamProgress :percentage=\"100\" :format=\"format\" :indeterminate=\"true\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"success\" :indeterminate=\"true\" :duration=\"5\" />\n\t\t<AsamProgress :percentage=\"100\" status=\"warning\" :indeterminate=\"true\" :duration=\"1\" />\n\t\t<AsamProgress :percentage=\"50\" status=\"exception\" :indeterminate=\"true\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapIndeterminateProgressDemo' });\nimport { AsamProgress } from '@asam-ui/ui';\nconst format = (percentage) => (percentage === 100 ? '完整进度' : `${percentage}%`);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "2c16a1d637de49968c1d8ff3d664f2a546bfff886ae6030c1554aa22545156b2",
									"notice": {
										"id": "cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78",
										"url": "/licenses/source-notices/cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt",
										"licenseFilename": "LICENSE-cb1d983fa9e60d2c6f01d3cfbabeb2fa29f1c8863c611d19fa6743381a32ab78.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/indeterminate-progress.vue",
											"sourceSha256": "89dcc2b19eed29d7b0733048b842ab4a9bd67e41bacef328a1a3b93ca9540be6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-striped-progress",
					"title": "条纹进度条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-striped-progress/ts/Demo.vue",
									"sha256": "63c65a0865495d531c2ebeb809e2b09e575170496d33d01edc80a786cc64015a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\" :stroke-width=\"15\" striped />\n\t\t<AsamProgress :percentage=\"30\" :stroke-width=\"15\" status=\"warning\" striped striped-flow />\n\t\t<AsamProgress\n\t\t\t:percentage=\"100\"\n\t\t\t:stroke-width=\"15\"\n\t\t\tstatus=\"success\"\n\t\t\tstriped\n\t\t\tstriped-flow\n\t\t\t:duration=\"10\"\n\t\t/>\n\t\t<AsamProgress\n\t\t\t:percentage=\"percentage\"\n\t\t\t:stroke-width=\"15\"\n\t\t\tstatus=\"exception\"\n\t\t\tstriped\n\t\t\tstriped-flow\n\t\t\t:duration=\"duration\"\n\t\t/>\n\t\t<AsamButtonGroup>\n\t\t\t<AsamButton type=\"default\" :icon=\"Minus\" @click=\"decrease\" />\n\t\t\t<AsamButton type=\"default\" :icon=\"Plus\" @click=\"increase\" />\n\t\t</AsamButtonGroup>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamProgressCapStripedProgressDemo' });\nimport { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\n\nimport { computed, ref } from 'vue';\nimport { Minus, Plus } from '@asam-ui/icons-vue';\n\nconst percentage = ref<number>(70);\nconst duration = computed(() => Math.floor(percentage.value / 10));\n\nconst increase = () => {\n\tpercentage.value += 10;\n\tif (percentage.value > 100) {\n\t\tpercentage.value = 100;\n\t}\n};\nconst decrease = () => {\n\tpercentage.value -= 10;\n\tif (percentage.value < 0) {\n\t\tpercentage.value = 0;\n\t}\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "57ecb8ae1d23f6b95763640c4dbbefefe3d85a01e428af9e2044a9aab6b0ba13",
									"notice": {
										"id": "652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb",
										"url": "/licenses/source-notices/652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt",
										"licenseFilename": "LICENSE-652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/striped-progress.vue",
											"sourceSha256": "300169e85f2c9b4d83c53784943aeb1fcb09b665a3c83ca3a352d33b86047daa",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamProgress/cap-striped-progress/js/Demo.vue",
									"sha256": "612d33b0528fbc86b2d614af7a2f7307ebd452c367412848438486469538c6b6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt\n-->\n<template>\n\t<div class=\"demo-progress\">\n\t\t<AsamProgress :percentage=\"50\" :stroke-width=\"15\" striped />\n\t\t<AsamProgress :percentage=\"30\" :stroke-width=\"15\" status=\"warning\" striped striped-flow />\n\t\t<AsamProgress\n\t\t\t:percentage=\"100\"\n\t\t\t:stroke-width=\"15\"\n\t\t\tstatus=\"success\"\n\t\t\tstriped\n\t\t\tstriped-flow\n\t\t\t:duration=\"10\"\n\t\t/>\n\t\t<AsamProgress\n\t\t\t:percentage=\"percentage\"\n\t\t\t:stroke-width=\"15\"\n\t\t\tstatus=\"exception\"\n\t\t\tstriped\n\t\t\tstriped-flow\n\t\t\t:duration=\"duration\"\n\t\t/>\n\t\t<AsamButtonGroup>\n\t\t\t<AsamButton type=\"default\" :icon=\"Minus\" @click=\"decrease\" />\n\t\t\t<AsamButton type=\"default\" :icon=\"Plus\" @click=\"increase\" />\n\t\t</AsamButtonGroup>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamProgressCapStripedProgressDemo' });\nimport { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';\nimport { computed, ref } from 'vue';\nimport { Minus, Plus } from '@asam-ui/icons-vue';\nconst percentage = ref(70);\nconst duration = computed(() => Math.floor(percentage.value / 10));\nconst increase = () => {\n\tpercentage.value += 10;\n\tif (percentage.value > 100) {\n\t\tpercentage.value = 100;\n\t}\n};\nconst decrease = () => {\n\tpercentage.value -= 10;\n\tif (percentage.value < 0) {\n\t\tpercentage.value = 0;\n\t}\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */\n\n.demo-progress .el-progress--line {\n\tmargin-bottom: 15px;\n\tmax-width: 600px;\n}\n\n/* stylelint-enable selector-class-pattern */\n</style>\n",
									"originalSourceSha256": "3d559da049af07a5434a11d47cc2b594b5b2fe2dbf1a6f059cee2cc8cea601a7",
									"notice": {
										"id": "652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb",
										"url": "/licenses/source-notices/652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt",
										"licenseFilename": "LICENSE-652d1a7bdf17b49e34bdcfa9a1bb6840cdfb5216be4aad2f7517bbff7fe829cb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/progress/striped-progress.vue",
											"sourceSha256": "300169e85f2c9b4d83c53784943aeb1fcb09b665a3c83ca3a352d33b86047daa",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamResult",
			"documentation": "/component-AsamResult.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamResult/basic/ts/Demo.vue",
									"sha256": "e64e49fa516d30f3ac810d7df0628e54453abf051dc981de1605e62163eefb2f",
									"source": "<template>\n\t<AsamResult icon=\"success\" title=\"本地示例已完成\" sub-title=\"此结果仅用于演示\">\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\">查看下一步</AsamButton>\n\t\t</template>\n\t</AsamResult>\n\t<p class=\"example-paragraph\" role=\"status\">下一步意图：{{ count }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamResultBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamResult } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamResult/basic/js/Demo.vue",
									"sha256": "f548735ecc654a000ad34d4782b967023206b64e10f972ece7c35e95de039c4f",
									"source": "<template>\n\t<AsamResult icon=\"success\" title=\"本地示例已完成\" sub-title=\"此结果仅用于演示\">\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count++\">查看下一步</AsamButton>\n\t\t</template>\n\t</AsamResult>\n\t<p class=\"example-paragraph\" role=\"status\">下一步意图：{{ count }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamResultBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamResult } from '@asam-ui/ui';\nconst count = ref(0);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamResult/cap-basic-usage/ts/Demo.vue",
									"sha256": "3b4aa0a845c6551b93baba3e3a404cf41190d5281c68cc8240abfc1c48de5bcf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt\n-->\n<template>\n\t<AsamRow>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"primary\" title=\"主要提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"success\" title=\"成功提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"warning\" title=\"警告提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"error\" title=\"错误提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"info\" title=\"信息提示\">\n\t\t\t\t<template #sub-title>\n\t\t\t\t\t<p class=\"example-paragraph\">通过插槽提供副标题</p>\n\t\t\t\t</template>\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamResultCapBasicUsageDemo' });\nimport { AsamRow, AsamCol, AsamResult, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "7f57b17ac37b55548fd51b264059c1f5b8f460cc9823af66c3b4c1e18df916ae",
									"notice": {
										"id": "ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3",
										"url": "/licenses/source-notices/ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt",
										"licenseFilename": "LICENSE-ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/result/basic-usage.vue",
											"sourceSha256": "8c657b1a17ce7bdb7d8b11c69c52a98044513c9d84b6d967c334138fdb715207",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamResult/cap-basic-usage/js/Demo.vue",
									"sha256": "a5d3740e8356677dd8ed1950ffef2739cbb4754a4d1ec832b51582c423140e88",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt\n-->\n<template>\n\t<AsamRow>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"primary\" title=\"主要提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"success\" title=\"成功提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"warning\" title=\"警告提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"error\" title=\"错误提示\" sub-title=\"请按照提示操作\">\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t\t<AsamCol :sm=\"12\" :lg=\"6\" :xl=\"4\">\n\t\t\t<AsamResult icon=\"info\" title=\"信息提示\">\n\t\t\t\t<template #sub-title>\n\t\t\t\t\t<p class=\"example-paragraph\">通过插槽提供副标题</p>\n\t\t\t\t</template>\n\t\t\t\t<template #extra>\n\t\t\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamResult>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamResultCapBasicUsageDemo' });\nimport { AsamRow, AsamCol, AsamResult, AsamButton } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "ce77b3ae5ca35fc5f86c6356420c11228d15630b3dea72531281b19c4f10eea5",
									"notice": {
										"id": "ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3",
										"url": "/licenses/source-notices/ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt",
										"licenseFilename": "LICENSE-ec4ce9db82c6ab1fa0e72f855af2c030149b88e1b23508d51d9ba83e359b4ed3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/result/basic-usage.vue",
											"sourceSha256": "8c657b1a17ce7bdb7d8b11c69c52a98044513c9d84b6d967c334138fdb715207",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-content",
					"title": "自定义内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamResult/cap-customized-content/ts/Demo.vue",
									"sha256": "e0a214bb6c6a20f789c239a9fba6420f06d24f957a49ade3bfb28c6e80a74f8c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt\n-->\n<template>\n\t<AsamResult title=\"404\" sub-title=\"抱歉，请求失败\">\n\t\t<template #icon>\n\t\t\t<AsamImage\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</template>\n\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t</template>\n\t</AsamResult>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamResultCapCustomizedContentDemo' });\nimport { AsamResult, AsamImage, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "8a90d7d867fda45cf007cab781f2e9f7f4d841ed12896cf459255f1469b7382a",
									"notice": {
										"id": "0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734",
										"url": "/licenses/source-notices/0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt",
										"licenseFilename": "LICENSE-0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/result/customized-content.vue",
											"sourceSha256": "75d1ad568a7ac97ff9cfe2b3bb8d1b2ffdab7733d3180b3978626183a919d35c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamResult/cap-customized-content/js/Demo.vue",
									"sha256": "ec6521cbeecbeef1e3c20072afe383c0fdf090f3fa13f219e7060c1189d79dfd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt\n-->\n<template>\n\t<AsamResult title=\"404\" sub-title=\"抱歉，请求失败\">\n\t\t<template #icon>\n\t\t\t<AsamImage\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t/>\n\t\t</template>\n\n\t\t<template #extra>\n\t\t\t<AsamButton type=\"default\">返回</AsamButton>\n\t\t</template>\n\t</AsamResult>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamResultCapCustomizedContentDemo' });\nimport { AsamResult, AsamImage, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "c0451719ec97b87df0a4ceb03eeace8c2d1c6eb2a9f703f0a23862dece086275",
									"notice": {
										"id": "0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734",
										"url": "/licenses/source-notices/0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt",
										"licenseFilename": "LICENSE-0f1b348beaf318e56eb1a0dcf3a3c70112b094b0376b30fde175a3623288f734.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/result/customized-content.vue",
											"sourceSha256": "75d1ad568a7ac97ff9cfe2b3bb8d1b2ffdab7733d3180b3978626183a919d35c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRow",
			"documentation": "/component-AsamRow.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRow/basic/ts/Demo.vue",
									"sha256": "5a817295edb4f2d4a3d54b0f0850b1cc9073942efd577d790b6019bce5cfcb2d",
									"source": "<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">窄屏整行，宽屏半行</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">响应式第二列</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRowBasicDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRow/basic/js/Demo.vue",
									"sha256": "62122376ed15c87a023e0e8422b57a2b5ff862333fe8c67ef36584670e714e3d",
									"source": "<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">窄屏整行，宽屏半行</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\">\n\t\t\t<div class=\"panel\">响应式第二列</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRowBasicDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "responsive",
					"title": "响应式栅格与隐藏断点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRow/responsive/ts/Demo.vue",
									"sha256": "dde767b49aa595fcbd756ec00956d5f060266669dd7d5f737a5cfd35b88720da",
									"source": "<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCol\n\t\t\t:xs=\"24\"\n\t\t\t:sm=\"12\"\n\t\t\t:md=\"8\"\n\t\t\tv-bind=\"domDataAttrs('data-col', 'responsive')\"\n\t\t>\n\t\t\t响应式列\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"12\" class=\"hidden-xs-only\" v-bind=\"domDataAttrs('data-col', 'hidden')\">\n\t\t\t窄屏隐藏\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamRowResponsiveDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRow/responsive/js/Demo.vue",
									"sha256": "4aa7eba8fcfac386a20f1d268b340d35b7268cbb593058de2a7d660d8a23e8a7",
									"source": "<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCol\n\t\t\t:xs=\"24\"\n\t\t\t:sm=\"12\"\n\t\t\t:md=\"8\"\n\t\t\tv-bind=\"domDataAttrs('data-col', 'responsive')\"\n\t\t>\n\t\t\t响应式列\n\t\t</AsamCol>\n\t\t<AsamCol :span=\"12\" class=\"hidden-xs-only\" v-bind=\"domDataAttrs('data-col', 'hidden')\">\n\t\t\t窄屏隐藏\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRowResponsiveDemo' });\nimport { AsamRow, AsamCol } from '@asam-ui/ui';\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamScrollbar",
			"documentation": "/component-AsamScrollbar.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamScrollbar/basic/ts/Demo.vue",
									"sha256": "326fff65a4ec27f158f4e3019874730675ace60290cbe86b87929203c0b4247d",
									"source": "<template>\n\t<AsamScrollbar height=\"180px\" @scroll=\"top = Math.round($event.scrollTop)\">\n\t\t<p v-for=\"line in 20\" :key=\"line\" class=\"panel example-paragraph\">记录 {{ line }}</p>\n\t</AsamScrollbar>\n\t<p class=\"example-paragraph\" role=\"status\">滚动位置：{{ top }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamScrollbarBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamScrollbar } from '@asam-ui/ui';\nconst top = ref(0);\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamScrollbar/basic/js/Demo.vue",
									"sha256": "9d2a88864c8ef5788e38d7aaf17b952749d80d146032dc1984b435b98c56661d",
									"source": "<template>\n\t<AsamScrollbar height=\"180px\" @scroll=\"top = Math.round($event.scrollTop)\">\n\t\t<p v-for=\"line in 20\" :key=\"line\" class=\"panel example-paragraph\">记录 {{ line }}</p>\n\t</AsamScrollbar>\n\t<p class=\"example-paragraph\" role=\"status\">滚动位置：{{ top }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamScrollbarBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamScrollbar } from '@asam-ui/ui';\nconst top = ref(0);\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "controls",
					"title": "双向滚动、实例控制与末端事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamScrollbar/controls/ts/Demo.vue",
									"sha256": "6f137965da5ac3ab3a2bdeb2387e43b12f2835e97fc40c084ee3e8fd8dfdaa4b",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"bar?.scrollTo({ top: 1000, left: 500 })\"\n\t\t\t>滚动到底部右侧</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tbar?.setScrollTop(0);\n\t\t\t\tbar?.setScrollLeft(0);\n\t\t\t\"\n\t\t>\n\t\t\t返回原点\n\t\t</AsamButton>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"append\">追加内容并更新</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"native\">原生滚动</AsamCheckboxItem>\n\t\t<AsamScrollbar\n\t\t\tref=\"bar\"\n\t\t\tstyle=\"width: 360px; max-width: 100%\"\n\t\t\t:max-height=\"220\"\n\t\t\t:always=\"always\"\n\t\t\t:native=\"native\"\n\t\t\t:distance=\"20\"\n\t\t\t@scroll=\"position = `${$event.scrollTop}:${$event.scrollLeft}`\"\n\t\t\t@end-reached=\"end = $event\"\n\t\t>\n\t\t\t<div style=\"width: 760px\">\n\t\t\t\t<p v-for=\"id in count\" :key=\"id\" class=\"line example-paragraph\">记录 {{ id }}</p>\n\t\t\t</div>\n\t\t</AsamScrollbar>\n\t\t<p class=\"example-paragraph\" role=\"status\">位置 {{ position }}；触底方向 {{ end }}；记录 {{ count }}</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamScrollbarControlsDemo' });\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamScrollbar } from '@asam-ui/ui';\nimport type { AsamScrollbarExpose } from '@asam-ui/ui';\nconst bar = ref<AsamScrollbarExpose>();\nconst count = ref(20);\nconst always = ref(true);\nconst native = ref(false);\nconst position = ref('0:0');\nconst end = ref('');\nasync function append(): Promise<void> {\n\tcount.value += 5;\n\tawait nextTick();\n\tbar.value?.update();\n}\n</script>\n<style scoped>\n.line {\n\tpadding: var(--asam-space-sm);\n\tmargin: 0;\n\tborder-bottom: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamScrollbar/controls/js/Demo.vue",
									"sha256": "6906cd46b48be5215b9ca53488d201377cf4f85e5da856cec2e58dcfdd9d56b8",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"bar?.scrollTo({ top: 1000, left: 500 })\"\n\t\t\t>滚动到底部右侧</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tbar?.setScrollTop(0);\n\t\t\t\tbar?.setScrollLeft(0);\n\t\t\t\"\n\t\t>\n\t\t\t返回原点\n\t\t</AsamButton>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"append\">追加内容并更新</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"native\">原生滚动</AsamCheckboxItem>\n\t\t<AsamScrollbar\n\t\t\tref=\"bar\"\n\t\t\tstyle=\"width: 360px; max-width: 100%\"\n\t\t\t:max-height=\"220\"\n\t\t\t:always=\"always\"\n\t\t\t:native=\"native\"\n\t\t\t:distance=\"20\"\n\t\t\t@scroll=\"position = `${$event.scrollTop}:${$event.scrollLeft}`\"\n\t\t\t@end-reached=\"end = $event\"\n\t\t>\n\t\t\t<div style=\"width: 760px\">\n\t\t\t\t<p v-for=\"id in count\" :key=\"id\" class=\"line example-paragraph\">记录 {{ id }}</p>\n\t\t\t</div>\n\t\t</AsamScrollbar>\n\t\t<p class=\"example-paragraph\" role=\"status\">位置 {{ position }}；触底方向 {{ end }}；记录 {{ count }}</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamScrollbarControlsDemo' });\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamScrollbar } from '@asam-ui/ui';\nconst bar = ref();\nconst count = ref(20);\nconst always = ref(true);\nconst native = ref(false);\nconst position = ref('0:0');\nconst end = ref('');\nasync function append() {\n\tcount.value += 5;\n\tawait nextTick();\n\tbar.value?.update();\n}\n</script>\n<style scoped>\n.line {\n\tpadding: var(--asam-space-sm);\n\tmargin: 0;\n\tborder-bottom: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "infinite",
					"title": "底部自动追加与非底部方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamScrollbar/infinite/ts/Demo.vue",
									"sha256": "7d52af5b85a55a6812b1cb020c4a080bfdf9be4b85b9516226f09cab4d1293bc",
									"source": "<template>\n\t<AsamScrollbar ref=\"scrollbar\" height=\"240px\" style=\"width: 360px\" @end-reached=\"loadMore\">\n\t\t<div class=\"scroll-content\">\n\t\t\t<p v-for=\"item in count\" :key=\"item\" class=\"scroll-row example-paragraph\">记录 {{ item }}</p>\n\t\t</div>\n\t</AsamScrollbar>\n\t<p class=\"example-paragraph\" data-testid=\"scrollbar-infinite-state\">\n\t\t{{ count }} 条；最近方向 {{ lastDirection }}；追加 {{ batches }} 次\n\t</p>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"scrollbar?.setScrollTop(0)\"\n\t\t>返回顶部</AsamButton\n\t>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamScrollbarInfiniteDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamScrollbar } from '@asam-ui/ui';\nimport type { AsamScrollbarDirection, AsamScrollbarExpose } from '@asam-ui/ui';\nconst scrollbar = ref<AsamScrollbarExpose>();\nconst count = ref(20);\nconst batches = ref(0);\nconst lastDirection = ref<AsamScrollbarDirection>();\nfunction loadMore(direction: AsamScrollbarDirection): void {\n\tlastDirection.value = direction;\n\tif (direction !== 'bottom') return;\n\tcount.value += 5;\n\tbatches.value++;\n}\n</script>\n<style scoped>\n.scroll-content {\n\tmin-width: 640px;\n}\n\n.scroll-row {\n\tbox-sizing: border-box;\n\tmin-height: 40px;\n\tmargin: 0;\n\tpadding: var(--asam-space-sm);\n\tborder-bottom: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamScrollbar/infinite/js/Demo.vue",
									"sha256": "6a73eaf4f75169ee51976e56696227808fd6604b70967a27374fa825305f08b0",
									"source": "<template>\n\t<AsamScrollbar ref=\"scrollbar\" height=\"240px\" style=\"width: 360px\" @end-reached=\"loadMore\">\n\t\t<div class=\"scroll-content\">\n\t\t\t<p v-for=\"item in count\" :key=\"item\" class=\"scroll-row example-paragraph\">记录 {{ item }}</p>\n\t\t</div>\n\t</AsamScrollbar>\n\t<p class=\"example-paragraph\" data-testid=\"scrollbar-infinite-state\">\n\t\t{{ count }} 条；最近方向 {{ lastDirection }}；追加 {{ batches }} 次\n\t</p>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"scrollbar?.setScrollTop(0)\"\n\t\t>返回顶部</AsamButton\n\t>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamScrollbarInfiniteDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamScrollbar } from '@asam-ui/ui';\nconst scrollbar = ref();\nconst count = ref(20);\nconst batches = ref(0);\nconst lastDirection = ref();\nfunction loadMore(direction) {\n\tlastDirection.value = direction;\n\tif (direction !== 'bottom') return;\n\tcount.value += 5;\n\tbatches.value++;\n}\n</script>\n<style scoped>\n.scroll-content {\n\tmin-width: 640px;\n}\n\n.scroll-row {\n\tbox-sizing: border-box;\n\tmin-height: 40px;\n\tmargin: 0;\n\tpadding: var(--asam-space-sm);\n\tborder-bottom: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSkeleton",
			"documentation": "/component-AsamSkeleton.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/basic/ts/Demo.vue",
									"sha256": "e40cc7c9fc964c175605c70fe3f9c6c4be49c1aff82c6c757bf2f9b70b431588",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载状态</AsamButton\n\t\t>\n\t\t<AsamSkeleton :loading=\"loading\" animated>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" class=\"skeleton-image\" />\n\t\t\t\t<AsamSkeletonItem variant=\"p\" />\n\t\t\t\t<AsamSkeletonItem variant=\"text\" />\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<p class=\"example-paragraph\">加载完成后的本地内容。</p>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\nconst loading = ref(true);\n</script>\n\n<style scoped>\n.skeleton-image {\n\twidth: 180px;\n\theight: 100px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/basic/js/Demo.vue",
									"sha256": "38c8c410d05c6faa285b56f055935376f0594fde4b2d7b3acf6ccd736e919734",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载状态</AsamButton\n\t\t>\n\t\t<AsamSkeleton :loading=\"loading\" animated>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" class=\"skeleton-image\" />\n\t\t\t\t<AsamSkeletonItem variant=\"p\" />\n\t\t\t\t<AsamSkeletonItem variant=\"text\" />\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<p class=\"example-paragraph\">加载完成后的本地内容。</p>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\nconst loading = ref(true);\n</script>\n\n<style scoped>\n.skeleton-image {\n\twidth: 180px;\n\theight: 100px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic-usage",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-basic-usage/ts/Demo.vue",
									"sha256": "b04a824a9ba65847824c4b4c30c18b9463362908d59b47d25567594c9e4c8551",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt\n-->\n<template>\n\t<AsamSkeleton />\n\t<br />\n\t<AsamSkeleton :style=\"{ '--el-skeleton-circle-size': '100px' }\">\n\t\t<template #template>\n\t\t\t<AsamSkeletonItem variant=\"circle\" />\n\t\t</template>\n\t</AsamSkeleton>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapBasicUsageDemo' });\nimport { AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "22879ad5b6798cef7d38ee4f8a62c7e24f4ccd7570c19050239f510125d14530",
									"notice": {
										"id": "637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199",
										"url": "/licenses/source-notices/637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt",
										"licenseFilename": "LICENSE-637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/basic-usage.vue",
											"sourceSha256": "c896cd20856d9b32a27d2f920333b50fbcd4792b826b7d5333a4035b39cd47af",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-basic-usage/js/Demo.vue",
									"sha256": "94fe7dece3ec0b2f72801f10be270003802b5e9bf775da81f7a8021db0da75bf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt\n-->\n<template>\n\t<AsamSkeleton />\n\t<br />\n\t<AsamSkeleton :style=\"{ '--el-skeleton-circle-size': '100px' }\">\n\t\t<template #template>\n\t\t\t<AsamSkeletonItem variant=\"circle\" />\n\t\t</template>\n\t</AsamSkeleton>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapBasicUsageDemo' });\nimport { AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "ff2f6eab57ed8a1d5bf30d340bc258229f0f695a38104af2828cd0fea72087d0",
									"notice": {
										"id": "637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199",
										"url": "/licenses/source-notices/637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt",
										"licenseFilename": "LICENSE-637846642a0cf9a509e242abdb678c45dbce942a75f0fd595a6dd7a2cdeab199.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/basic-usage.vue",
											"sourceSha256": "c896cd20856d9b32a27d2f920333b50fbcd4792b826b7d5333a4035b39cd47af",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-configurable-rows",
					"title": "更多参数",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-configurable-rows/ts/Demo.vue",
									"sha256": "e2abbc80cfcd59308db7a05865b9a7192aff8d37f6cc02b3242232fcec94413c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt\n-->\n<template>\n\t<AsamSkeleton :rows=\"5\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapConfigurableRowsDemo' });\nimport { AsamSkeleton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "78458ccb857c12e01a816f7cb503754d9b4eeb189bd7b1705a162752f70d1dc3",
									"notice": {
										"id": "1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed",
										"url": "/licenses/source-notices/1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt",
										"licenseFilename": "LICENSE-1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/configurable-rows.vue",
											"sourceSha256": "6712bbf83d0ab39c97e87c3b99e3d21ef7668ed5e297ea72e681452c013f7982",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-configurable-rows/js/Demo.vue",
									"sha256": "db14bf23eb95107f1667dc2e12f2844511e0cb24f4dc8da00e3dd1852a4f30ac",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt\n-->\n<template>\n\t<AsamSkeleton :rows=\"5\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapConfigurableRowsDemo' });\nimport { AsamSkeleton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "da587dce12b53c1a9233e41e625d1ab3ffb017670b03f8580dd811b52fbacc32",
									"notice": {
										"id": "1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed",
										"url": "/licenses/source-notices/1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt",
										"licenseFilename": "LICENSE-1b03f50d493449a8ee3b04eb8f2cbd7d87e7b1ba03c92719dbe3aec637f6c4ed.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/configurable-rows.vue",
											"sourceSha256": "6712bbf83d0ab39c97e87c3b99e3d21ef7668ed5e297ea72e681452c013f7982",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-animation",
					"title": "动画效果",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-animation/ts/Demo.vue",
									"sha256": "7cc3748f0d4e8760690277916f21776e190218170f7799c5c1574ad2873e5186",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt\n-->\n<template>\n\t<AsamSkeleton :rows=\"5\" animated />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapAnimationDemo' });\nimport { AsamSkeleton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "673463ada0a0d27679a64257a42120e2e6c8074bddf844bdaea7e105056f5652",
									"notice": {
										"id": "2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89",
										"url": "/licenses/source-notices/2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt",
										"licenseFilename": "LICENSE-2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/animation.vue",
											"sourceSha256": "d30362d0e79359a390fcc7475091db424f0b9b699e27ab6db3db0a97a84bd01e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-animation/js/Demo.vue",
									"sha256": "3af5f07fb0895260722901acc75fc6dc60359764ddea90fa1381dfeffad19e27",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt\n-->\n<template>\n\t<AsamSkeleton :rows=\"5\" animated />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapAnimationDemo' });\nimport { AsamSkeleton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "31caac8cf7126a56c3d2ecae18c3d049738d8bd23e4c9858f87d4ad5ad11ba2e",
									"notice": {
										"id": "2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89",
										"url": "/licenses/source-notices/2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt",
										"licenseFilename": "LICENSE-2e40cdcbc6c86711eb23dc4327ec7b23db6a2550cd4b343aab53c32271ea7a89.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/animation.vue",
											"sourceSha256": "d30362d0e79359a390fcc7475091db424f0b9b699e27ab6db3db0a97a84bd01e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-template",
					"title": "自定义样式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-customized-template/ts/Demo.vue",
									"sha256": "5ae5ca2dd55e4047bd6acd648faa58ce405e6d7d1f8f9bc7449440ab0240e6c9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt\n-->\n<template>\n\t<AsamSkeleton style=\"width: 240px\">\n\t\t<template #template>\n\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 240px\" />\n\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t<AsamSkeletonItem variant=\"p\" style=\"width: 50%\" />\n\t\t\t\t<div style=\"display: flex; align-items: center; justify-content: space-between\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</AsamSkeleton>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapCustomizedTemplateDemo' });\nimport { AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "c06ba119128379af5f00e7ead9645c2cb0f64a0207acf57f82f13207aae306cb",
									"notice": {
										"id": "054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409",
										"url": "/licenses/source-notices/054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt",
										"licenseFilename": "LICENSE-054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/customized-template.vue",
											"sourceSha256": "14273e5be500f2f82f3ae931d1e10709edbb8b8ef6d763a7a172489f4675d150",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-customized-template/js/Demo.vue",
									"sha256": "70b4112369d7c89dbe90bb84c7fddf2fa02f5992f8bbfc6bb8295dd4f2da4e63",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt\n-->\n<template>\n\t<AsamSkeleton style=\"width: 240px\">\n\t\t<template #template>\n\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 240px\" />\n\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t<AsamSkeletonItem variant=\"p\" style=\"width: 50%\" />\n\t\t\t\t<div style=\"display: flex; align-items: center; justify-content: space-between\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</AsamSkeleton>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapCustomizedTemplateDemo' });\nimport { AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "1c3b0d7cb8fd1da4c55ea082be2658684aa103a87bead8308112f7d95d72768f",
									"notice": {
										"id": "054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409",
										"url": "/licenses/source-notices/054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt",
										"licenseFilename": "LICENSE-054971c1ec898d583df2416db08cfab4c40917d85062f802f1d7119c62ad5409.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/customized-template.vue",
											"sourceSha256": "14273e5be500f2f82f3ae931d1e10709edbb8b8ef6d763a7a172489f4675d150",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-loading-state",
					"title": "加载状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-loading-state/ts/Demo.vue",
									"sha256": "5eb3f094a6c938091cef60d5dceaa34c5f2e8636af64d983cbb38133f7326042",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSkeleton style=\"width: 240px\" :loading=\"loading\" animated>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 240px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapLoadingStateDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst loading = ref(true);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "5f3e038081aa7bd198545923736eff5d758817c73e7440a9909e10fb22d540bf",
									"notice": {
										"id": "df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72",
										"url": "/licenses/source-notices/df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt",
										"licenseFilename": "LICENSE-df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/loading-state.vue",
											"sourceSha256": "46d6ffa1cd2ba9543d9ad23f464b73ea36acd24e520f9bf08f7842f8708a7e88",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-loading-state/js/Demo.vue",
									"sha256": "4cf42202d3deaccc0b4d41537fefeee4bcc49bfa87142b478a410dc95e97cc49",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSkeleton style=\"width: 240px\" :loading=\"loading\" animated>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 240px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapLoadingStateDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst loading = ref(true);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "989696c63a0d24025f6825aaa76e693e2535da623e75a087553e3b1a212d93c8",
									"notice": {
										"id": "df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72",
										"url": "/licenses/source-notices/df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt",
										"licenseFilename": "LICENSE-df191ba806c6c5db6ae6331d3ba4f8274e2c3a37755e20c85c561c158c72cc72.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/loading-state.vue",
											"sourceSha256": "46d6ffa1cd2ba9543d9ad23f464b73ea36acd24e520f9bf08f7842f8708a7e88",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-rendering-with-data",
					"title": "渲染多条数据",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-rendering-with-data/ts/Demo.vue",
									"sha256": "bce33e7478e6333457f2f0b5c409cbea63d178fa709f13abce97f1d197580e67",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt\n-->\n<template>\n\t<AsamSpace style=\"width: 100%\" fill>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"setLoading\">点击重新加载</AsamButton>\n\t\t</div>\n\t\t<AsamSkeleton style=\"display: flex; gap: 8px\" :loading=\"loading\" animated :count=\"3\">\n\t\t\t<template #template>\n\t\t\t\t<div style=\"flex: 1\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"height: 240px\" />\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard\n\t\t\t\t\tv-for=\"item in lists\"\n\t\t\t\t\t:key=\"item.name\"\n\t\t\t\t\t:body-style=\"{ padding: '0px', marginBottom: '1px' }\"\n\t\t\t\t>\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\t:src=\"item.imgUrl\"\n\t\t\t\t\t\tclass=\"image multi-content\"\n\t\t\t\t\t\tstyle=\"max-width: 100%\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>{{ item.name }}</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapRenderingWithDataDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamButton,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard\n} from '@asam-ui/ui';\n\nimport { onMounted, ref } from 'vue';\n\ninterface ListItem {\n\timgUrl: string;\n\tname: string;\n}\n\nconst loading = ref(true);\nconst lists = ref<ListItem[]>([]);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n\nconst setLoading = () => {\n\tloading.value = true;\n\tsetTimeout(() => {\n\t\tloading.value = false;\n\t}, 2000);\n};\n\nonMounted(() => {\n\tloading.value = false;\n\tlists.value = [\n\t\t{\n\t\t\timgUrl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t\t\tname: '鹿'\n\t\t},\n\t\t{\n\t\t\timgUrl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t\t\tname: '马'\n\t\t},\n\t\t{\n\t\t\timgUrl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t\t\tname: '山狮'\n\t\t}\n\t];\n});\n</script>\n",
									"originalSourceSha256": "e17c5930c3365e4ec257d7a2ce3fb65319a074475542093b21afa0aa509be8a3",
									"notice": {
										"id": "3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2",
										"url": "/licenses/source-notices/3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt",
										"licenseFilename": "LICENSE-3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/rendering-with-data.vue",
											"sourceSha256": "cb2fa72044e583df567fd5dac4aee370a30f8fdbe9713dd8751fa025daa2f09f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-rendering-with-data/js/Demo.vue",
									"sha256": "28529741442871e47c447868ed8b80f6aeca5eed8f115703aa15789b9697e45c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt\n-->\n<template>\n\t<AsamSpace style=\"width: 100%\" fill>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"setLoading\">点击重新加载</AsamButton>\n\t\t</div>\n\t\t<AsamSkeleton style=\"display: flex; gap: 8px\" :loading=\"loading\" animated :count=\"3\">\n\t\t\t<template #template>\n\t\t\t\t<div style=\"flex: 1\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"height: 240px\" />\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard\n\t\t\t\t\tv-for=\"item in lists\"\n\t\t\t\t\t:key=\"item.name\"\n\t\t\t\t\t:body-style=\"{ padding: '0px', marginBottom: '1px' }\"\n\t\t\t\t>\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\t:src=\"item.imgUrl\"\n\t\t\t\t\t\tclass=\"image multi-content\"\n\t\t\t\t\t\tstyle=\"max-width: 100%\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>{{ item.name }}</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapRenderingWithDataDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamButton,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard\n} from '@asam-ui/ui';\nimport { onMounted, ref } from 'vue';\nconst loading = ref(true);\nconst lists = ref([]);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\nconst setLoading = () => {\n\tloading.value = true;\n\tsetTimeout(() => {\n\t\tloading.value = false;\n\t}, 2000);\n};\nonMounted(() => {\n\tloading.value = false;\n\tlists.value = [\n\t\t{\n\t\t\timgUrl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t\t\tname: '鹿'\n\t\t},\n\t\t{\n\t\t\timgUrl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t\t\tname: '马'\n\t\t},\n\t\t{\n\t\t\timgUrl: 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E',\n\t\t\tname: '山狮'\n\t\t}\n\t];\n});\n</script>\n",
									"originalSourceSha256": "359bce9254d7f8f1203211057169631f006f0ed5a4a1ef58d28eca88f172bf32",
									"notice": {
										"id": "3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2",
										"url": "/licenses/source-notices/3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt",
										"licenseFilename": "LICENSE-3ae45b3c0f8c8fb56fbd8abb45644a72c7c2db8a0114d3c3d73073a08299d7d2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/rendering-with-data.vue",
											"sourceSha256": "cb2fa72044e583df567fd5dac4aee370a30f8fdbe9713dd8751fa025daa2f09f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-avoiding-rendering-bouncing",
					"title": "防止渲染抖动",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-avoiding-rendering-bouncing/ts/Demo.vue",
									"sha256": "9184c37273a4c7a44d7e825eda8e1afecef8239c71a20ffac6ee9d232a92f812",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamSkeleton\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:loading=\"loading\"\n\t\t\tanimated\n\t\t\t:throttle=\"500\"\n\t\t>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 265px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t />\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapAvoidingRenderingBouncingDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst loading = ref(false);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "5d12cfab26a8a4d6db62e89c84cc81f4325c75e655d2efd3f5bf7e43d8d387c2",
									"notice": {
										"id": "d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6",
										"url": "/licenses/source-notices/d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt",
										"licenseFilename": "LICENSE-d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/avoiding-rendering-bouncing.vue",
											"sourceSha256": "9a56c4cd23ab6b4c5e9d2090f5d2ea21bf8bfa1f0ef8ac28eb3f2dff7d0d5c10",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-avoiding-rendering-bouncing/js/Demo.vue",
									"sha256": "eee8d103b120219f5dccc94f55db0e5e0f05fc8b791cd613f5316622f76d98da",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamSkeleton\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:loading=\"loading\"\n\t\t\tanimated\n\t\t\t:throttle=\"500\"\n\t\t>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 265px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t />\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapAvoidingRenderingBouncingDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst loading = ref(false);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "4a0b14f1f942ba7c81e67bbcd3c050348ba09c21f5be33ff9f90cbea9285ec5b",
									"notice": {
										"id": "d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6",
										"url": "/licenses/source-notices/d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt",
										"licenseFilename": "LICENSE-d23d188df540fb6b65744bd500e411bed7982bfa48dfbf2e28b951c4faf4afa6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/avoiding-rendering-bouncing.vue",
											"sourceSha256": "9a56c4cd23ab6b4c5e9d2090f5d2ea21bf8bfa1f0ef8ac28eb3f2dff7d0d5c10",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-initial-rendering-loading",
					"title": "初始渲染加载 2.8.8",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-initial-rendering-loading/ts/Demo.vue",
									"sha256": "5d6310b4bb016dfbe0d8c830d355cf106ca6fc846688cba0ba35b41b9a513fdb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSkeleton\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:loading=\"loading\"\n\t\t\tanimated\n\t\t\t:throttle=\"{ leading: 500, initVal: true }\"\n\t\t>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 265px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapInitialRenderingLoadingDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst loading = ref(true);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "4003ce64e8eddc403f8767a646f655eff9df1ea5bd735cdce718ef81436ad743",
									"notice": {
										"id": "3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f",
										"url": "/licenses/source-notices/3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt",
										"licenseFilename": "LICENSE-3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/initial-rendering-loading.vue",
											"sourceSha256": "753cddf19a3c8704de28f16b0b89019ba547ee79d52662839d0130e69f578094",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-initial-rendering-loading/js/Demo.vue",
									"sha256": "ead26c85159bf8519c703844c4c6330245a499a38252beac53f828bfb0cc1cf7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSkeleton\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:loading=\"loading\"\n\t\t\tanimated\n\t\t\t:throttle=\"{ leading: 500, initVal: true }\"\n\t\t>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 265px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapInitialRenderingLoadingDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst loading = ref(true);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "afcd065678519054c07969a351f3c6bebb02cf9215d0892f10be96231f47d00f",
									"notice": {
										"id": "3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f",
										"url": "/licenses/source-notices/3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt",
										"licenseFilename": "LICENSE-3734a518fdc0a0351cdec7ba564cd52a554a491761e6ae656bf6417b7a7cab0f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/initial-rendering-loading.vue",
											"sourceSha256": "753cddf19a3c8704de28f16b0b89019ba547ee79d52662839d0130e69f578094",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-leading-trailing-without-bouncing",
					"title": "切换显示/隐藏时避免渲染抖动 2.8.8",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-leading-trailing-without-bouncing/ts/Demo.vue",
									"sha256": "43f2746fa3ba302e9a3cf01233ff8dd2935081466ebbc927d172071d786528e0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSkeleton\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:loading=\"loading\"\n\t\t\tanimated\n\t\t\t:throttle=\"{ leading: 500, trailing: 500, initVal: true }\"\n\t\t>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 265px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonCapLeadingTrailingWithoutBouncingDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst loading = ref(false);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "563682e0ff1f0ea5368f65d25dbb5c8d5ef5538b5ba0a201a7d3dd7a7a967365",
									"notice": {
										"id": "4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5",
										"url": "/licenses/source-notices/4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt",
										"licenseFilename": "LICENSE-4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/leading-trailing-without-bouncing.vue",
											"sourceSha256": "426be872d0d948d590ccb22ef0e5e0c8ca714a40739dfbe702d16e56cf7b2212",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeleton/cap-leading-trailing-without-bouncing/js/Demo.vue",
									"sha256": "5c4c9bf7e21254bd4ddcd4ba123e16de7e8f50f47d65c03a82d72af212c817d9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"flex-start\">\n\t\t<div>\n\t\t\t<label style=\"margin-right: 16px\">切换加载状态</label>\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"loading\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') loading = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSkeleton\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:loading=\"loading\"\n\t\t\tanimated\n\t\t\t:throttle=\"{ leading: 500, trailing: 500, initVal: true }\"\n\t\t>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" style=\"width: 240px; height: 265px\" />\n\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t<AsamSkeletonItem variant=\"h3\" style=\"width: 50%\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\t\t\tmargin-top: 16px;\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"margin-right: 16px\" />\n\t\t\t\t\t\t<AsamSkeletonItem variant=\"text\" style=\"width: 30%\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamCard :body-style=\"{ padding: '0px', marginBottom: '1px' }\">\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ctext%20x%3D%2224%22%20y%3D%2290%22%20fill%3D%22white%22%3EASAM%20local%20sample%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\tclass=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div style=\"padding: 14px\">\n\t\t\t\t\t\t<span>美味汉堡</span>\n\t\t\t\t\t\t<div class=\"bottom card-header\">\n\t\t\t\t\t\t\t<div class=\"time\">{{ currentDate }}</div>\n\t\t\t\t\t\t\t<AsamButton type=\"default\" text class=\"button\">操作按钮</AsamButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</AsamCard>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonCapLeadingTrailingWithoutBouncingDemo' });\nimport {\n\tAsamImage,\n\tAsamSpace,\n\tAsamSwitch,\n\tAsamSkeleton,\n\tAsamSkeletonItem,\n\tAsamCard,\n\tAsamButton\n} from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst loading = ref(false);\nconst currentDate = new Date().toLocaleDateString('zh-CN');\n</script>\n",
									"originalSourceSha256": "7c797913454eac1b7b192a1eb1b594af5daba33b4733e3b8ebe65752f5520f95",
									"notice": {
										"id": "4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5",
										"url": "/licenses/source-notices/4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt",
										"licenseFilename": "LICENSE-4063faeed6afbcdb5b52d0f262e9bc03ef14aed876316ae48cb937ac00b863e5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/skeleton/leading-trailing-without-bouncing.vue",
											"sourceSha256": "426be872d0d948d590ccb22ef0e5e0c8ca714a40739dfbe702d16e56cf7b2212",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSkeletonItem",
			"documentation": "/component-AsamSkeletonItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeletonItem/basic/ts/Demo.vue",
									"sha256": "44e4d144005b8b5defd923d469648d6e846e5970c1ec7d269d031a95cb490521",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载状态</AsamButton\n\t\t>\n\t\t<AsamSkeleton :loading=\"loading\" animated>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" class=\"skeleton-image\" />\n\t\t\t\t<AsamSkeletonItem variant=\"p\" />\n\t\t\t\t<AsamSkeletonItem variant=\"text\" />\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<p class=\"example-paragraph\">加载完成后的本地内容。</p>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSkeletonItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\nconst loading = ref(true);\n</script>\n\n<style scoped>\n.skeleton-image {\n\twidth: 180px;\n\theight: 100px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSkeletonItem/basic/js/Demo.vue",
									"sha256": "d3b1aeda1622d601fe49ef74921537a1d48e565819225322ae123e05a5ea3ce4",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载状态</AsamButton\n\t\t>\n\t\t<AsamSkeleton :loading=\"loading\" animated>\n\t\t\t<template #template>\n\t\t\t\t<AsamSkeletonItem variant=\"image\" class=\"skeleton-image\" />\n\t\t\t\t<AsamSkeletonItem variant=\"p\" />\n\t\t\t\t<AsamSkeletonItem variant=\"text\" />\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<p class=\"example-paragraph\">加载完成后的本地内容。</p>\n\t\t\t</template>\n\t\t</AsamSkeleton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSkeletonItemBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSkeleton, AsamSkeletonItem } from '@asam-ui/ui';\nconst loading = ref(true);\n</script>\n\n<style scoped>\n.skeleton-image {\n\twidth: 180px;\n\theight: 100px;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSpace",
			"documentation": "/component-AsamSpace.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/basic/ts/Demo.vue",
									"sha256": "22c9e8ae502a0c046df79ccef03981eb4b3652a3eddbbb098e1ec434c3f12591",
									"source": "<template>\n\t<AsamSpace :size=\"[16, 8]\" wrap>\n\t\t<AsamButton type=\"default\" native-type=\"button\">操作一</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">操作二</AsamButton>\n\t\t<span>相邻说明</span>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceBasicDemo' });\nimport { AsamButton, AsamSpace } from '@asam-ui/ui';\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/basic/js/Demo.vue",
									"sha256": "cfeb393d2d2f4d6320bc4214316f230086ce780e7a42007698e6dae858f7d43e",
									"source": "<template>\n\t<AsamSpace :size=\"[16, 8]\" wrap>\n\t\t<AsamButton type=\"default\" native-type=\"button\">操作一</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\">操作二</AsamButton>\n\t\t<span>相邻说明</span>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceBasicDemo' });\nimport { AsamButton, AsamSpace } from '@asam-ui/ui';\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-basic/ts/Demo.vue",
									"sha256": "6c679f508f8a57f051ea11d4e1a5d98e590d81288dd6911a03cca8b4f9a6f3ba",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt\n-->\n<template>\n\t<AsamSpace wrap>\n\t\t<AsamCard v-for=\"i in 3\" :key=\"i\" class=\"box-card\" style=\"width: 250px\">\n\t\t\t<template #header>\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t{{ '列表项 ' + o }}\n\t\t\t</div>\n\t\t</AsamCard>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapBasicDemo' });\nimport { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "78b6a317a6b8c87c3a4feb5cfc4ba90986ff9b9e93864ed7b742c3831c51f41e",
									"notice": {
										"id": "54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841",
										"url": "/licenses/source-notices/54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt",
										"licenseFilename": "LICENSE-54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/basic.vue",
											"sourceSha256": "6e5d9e52f7417c9d21abdd45957ac329480ee86c8c4333bc433a813ef4e4afcc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-basic/js/Demo.vue",
									"sha256": "59bb777b7bb851f239b4fb0f9dd582318f7446d38e07ac8712aac01bcc4555f9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt\n-->\n<template>\n\t<AsamSpace wrap>\n\t\t<AsamCard v-for=\"i in 3\" :key=\"i\" class=\"box-card\" style=\"width: 250px\">\n\t\t\t<template #header>\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t{{ '列表项 ' + o }}\n\t\t\t</div>\n\t\t</AsamCard>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapBasicDemo' });\nimport { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "ba56c312025ce70fe171d0187e0fbc91b4af6cf4ad785db87f6d1437d99b146b",
									"notice": {
										"id": "54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841",
										"url": "/licenses/source-notices/54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt",
										"licenseFilename": "LICENSE-54f4ed712563348ae44787c6446c60b98ba57c05b0c6d53cb742a6f90150e841.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/basic.vue",
											"sourceSha256": "6e5d9e52f7417c9d21abdd45957ac329480ee86c8c4333bc433a813ef4e4afcc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical-layout",
					"title": "垂直布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-vertical-layout/ts/Demo.vue",
									"sha256": "18b0ea0600b06efeb97f8ed6860a1645df9fc0135b0f72e4993143abf9cdb03f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\">\n\t\t<AsamCard v-for=\"i in 2\" :key=\"i\" class=\"box-card\" style=\"width: 250px\">\n\t\t\t<template #header>\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t{{ '列表项 ' + o }}\n\t\t\t</div>\n\t\t</AsamCard>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapVerticalLayoutDemo' });\nimport { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "244764ba2f18e52468674a9936344653e231e6550e6cf12f8d1ecaf89c96f96b",
									"notice": {
										"id": "5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d",
										"url": "/licenses/source-notices/5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt",
										"licenseFilename": "LICENSE-5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/vertical-layout.vue",
											"sourceSha256": "029b71cc0f65eadfbcbd14114834604d8307a63e1ddeac1d88e90bff4417e135",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-vertical-layout/js/Demo.vue",
									"sha256": "c21cf42de975811d2a41ce0714b2de26a4974f3bbe0a0ca638fb585ab7eb4876",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\">\n\t\t<AsamCard v-for=\"i in 2\" :key=\"i\" class=\"box-card\" style=\"width: 250px\">\n\t\t\t<template #header>\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\n\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t{{ '列表项 ' + o }}\n\t\t\t</div>\n\t\t</AsamCard>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapVerticalLayoutDemo' });\nimport { AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "7cd51f6ce6579084c2e5cdd5fc86635243ca4034cb98d200837f88e5c290dcc3",
									"notice": {
										"id": "5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d",
										"url": "/licenses/source-notices/5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt",
										"licenseFilename": "LICENSE-5363a1c347471a77e3d9736c65a85e978279384b8cb7adc61c3562ab1764f55d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/vertical-layout.vue",
											"sourceSha256": "029b71cc0f65eadfbcbd14114834604d8307a63e1ddeac1d88e90bff4417e135",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-control-size",
					"title": "控制间距的大小",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-control-size/ts/Demo.vue",
									"sha256": "928144acfc0784681b714bde1a87eeea794d4790b1d6c809e4bea6c17674312a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"start\" :size=\"30\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (value === 'small' || value === 'default' || value === 'large') size = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamRadioItem value=\"large\">大尺寸</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"default\">默认</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"small\">小尺寸</AsamRadioItem>\n\t\t</AsamRadioGroup>\n\n\t\t<AsamSpace wrap :size=\"size\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCard\n\t\t\t\tv-for=\"i in 3\"\n\t\t\t\t:key=\"i\"\n\t\t\t\tclass=\"box-card\"\n\t\t\t\tstyle=\"width: 250px\"\n\t\t\t>\n\t\t\t\t<template #header>\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t\t{{ \"列表项 \" + o }}\n\t\t\t\t</div>\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapControlSizeDemo' });\nimport { AsamSpace, AsamRadioGroup, AsamRadioItem, AsamCard, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamControlSize } from '@asam-ui/ui';\n\nconst size = ref<Exclude<AsamControlSize, 'big'>>('default');\n</script>\n",
									"originalSourceSha256": "66873aefae1a571aef879d6b53f07911440baa4fab25ddf7f8a4cfa3a8be2586",
									"notice": {
										"id": "902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f",
										"url": "/licenses/source-notices/902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt",
										"licenseFilename": "LICENSE-902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/control-size.vue",
											"sourceSha256": "46d7c514b54178bcd599205199383bd482a2fe23bd9faa68a682d1eac112cbee",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-control-size/js/Demo.vue",
									"sha256": "d1b55fd02e6ba49908ff7af81305867733b10b8e63886c9b8ff65705fd0da81c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\" alignment=\"start\" :size=\"30\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (value === 'small' || value === 'default' || value === 'large') size = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<AsamRadioItem value=\"large\">大尺寸</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"default\">默认</AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"small\">小尺寸</AsamRadioItem>\n\t\t</AsamRadioGroup>\n\n\t\t<AsamSpace wrap :size=\"size\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCard\n\t\t\t\tv-for=\"i in 3\"\n\t\t\t\t:key=\"i\"\n\t\t\t\tclass=\"box-card\"\n\t\t\t\tstyle=\"width: 250px\"\n\t\t\t>\n\t\t\t\t<template #header>\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t\t{{ \"列表项 \" + o }}\n\t\t\t\t</div>\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapControlSizeDemo' });\nimport { AsamSpace, AsamRadioGroup, AsamRadioItem, AsamCard, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst size = ref('default');\n</script>\n",
									"originalSourceSha256": "583cda9222bd9b1068d3d0b3a15954061f79a9ce60b973b7d9573d0bf15f46c8",
									"notice": {
										"id": "902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f",
										"url": "/licenses/source-notices/902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt",
										"licenseFilename": "LICENSE-902d5a90080fa40f208f1e0f8d500034072a5de1524d993c29acd643df96503f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/control-size.vue",
											"sourceSha256": "46d7c514b54178bcd599205199383bd482a2fe23bd9faa68a682d1eac112cbee",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-customized-size",
					"title": "自定义 Size",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-customized-size/ts/Demo.vue",
									"sha256": "a196e64bef1393323143a89a3c05b706f9a82aa016a51ee0ffc880d34f935734",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSlider\n\t\t\t:model-value=\"size\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'number') size = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t\t<AsamSpace wrap :size=\"size\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCard\n\t\t\tv-for=\"i in 2\"\n\t\t\t:key=\"i\"\n\t\t\tclass=\"box-card\"\n\t\t\tstyle=\"width: 250px\"\n\t\t>\n\t\t\t<template #header>\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t{{ \"列表项 \" + o }}\n\t\t\t</div>\n\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapCustomizedSizeDemo' });\nimport { AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst size = ref(20);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "27d7840407627fe8e40f34295000cdad6c3635860c20d149b9069314103bd2f5",
									"notice": {
										"id": "e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146",
										"url": "/licenses/source-notices/e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt",
										"licenseFilename": "LICENSE-e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/customized-size.vue",
											"sourceSha256": "907054c2aad6743525ce14c587f511ee58e392b13e7d4741b505795072677ed4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-customized-size/js/Demo.vue",
									"sha256": "bcd243d4b6b9c48f8c02945b28c62a5d615e5aa968493bc30775202bbc82531b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSlider\n\t\t\t:model-value=\"size\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'number') size = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t/>\n\t\t<AsamSpace wrap :size=\"size\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCard\n\t\t\tv-for=\"i in 2\"\n\t\t\t:key=\"i\"\n\t\t\tclass=\"box-card\"\n\t\t\tstyle=\"width: 250px\"\n\t\t>\n\t\t\t<template #header>\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t{{ \"列表项 \" + o }}\n\t\t\t</div>\n\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapCustomizedSizeDemo' });\nimport { AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst size = ref(20);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "af00c64117b4c8b6045821e5a211f774dfec7fc02b691c8a08acdf8c12d09183",
									"notice": {
										"id": "e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146",
										"url": "/licenses/source-notices/e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt",
										"licenseFilename": "LICENSE-e87bbb7dbdd66a8bf292b71b55ce13a314c8b46306846e336d932691a3a37146.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/customized-size.vue",
											"sourceSha256": "907054c2aad6743525ce14c587f511ee58e392b13e7d4741b505795072677ed4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-auto-wrapping",
					"title": "自动换行",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-auto-wrapping/ts/Demo.vue",
									"sha256": "36e2e5e31d06055ca86bf355e4321838d341494e2a6dd19dd3a364d2a3d38055",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt\n-->\n<template>\n\t<AsamSpace wrap>\n\t\t<div v-for=\"i in 20\" :key=\"i\">\n\t\t\t<AsamButton type=\"default\" text> 文字按钮 </AsamButton>\n\t\t</div>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapAutoWrappingDemo' });\nimport { AsamSpace, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "7c657d7f080cca0f61821c0131094b55e1d9eb2fe0796c6ee5e5019f142d8c5a",
									"notice": {
										"id": "00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807",
										"url": "/licenses/source-notices/00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt",
										"licenseFilename": "LICENSE-00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/auto-wrapping.vue",
											"sourceSha256": "4b5f7076614dab5ba7b3cbdf8aff8a62ec2d85c19adbe1963e8bfe916a268895",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-auto-wrapping/js/Demo.vue",
									"sha256": "983e3a11f112b9806c7c59f0d7262bdfc6c32d1bb02ac65032c6cdc83fe05a86",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt\n-->\n<template>\n\t<AsamSpace wrap>\n\t\t<div v-for=\"i in 20\" :key=\"i\">\n\t\t\t<AsamButton type=\"default\" text> 文字按钮 </AsamButton>\n\t\t</div>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapAutoWrappingDemo' });\nimport { AsamSpace, AsamButton } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "093ff2e0085697a1677500a849fcbc939694b6a205cdc14d7752d170e075c391",
									"notice": {
										"id": "00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807",
										"url": "/licenses/source-notices/00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt",
										"licenseFilename": "LICENSE-00b9302ea8ba337ce5bb9e217b3aa68c0fd1c5ef44e3eec33d0c98f8a50e9807.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/auto-wrapping.vue",
											"sourceSha256": "4b5f7076614dab5ba7b3cbdf8aff8a62ec2d85c19adbe1963e8bfe916a268895",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-literal-type-spacer",
					"title": "字母数字类型分隔符",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-literal-type-spacer/ts/Demo.vue",
									"sha256": "cdf8d26a3b171b3d79249d8a169a4ac2d35c35f110c4a67f03c36630583c738d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt\n-->\n<template>\n\t<AsamSpace :size=\"size\" spacer=\"|\">\n\t\t<div v-for=\"i in 2\" :key=\"i\">\n\t\t\t<AsamButton type=\"default\"> 按钮 {{ i }} </AsamButton>\n\t\t</div>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapLiteralTypeSpacerDemo' });\nimport { AsamSpace, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst size = ref(10);\n</script>\n",
									"originalSourceSha256": "d765402b8e08fd5c3daba350e09bb50c94e1036c4f27099fdf9c11bd6bec463f",
									"notice": {
										"id": "976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba",
										"url": "/licenses/source-notices/976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt",
										"licenseFilename": "LICENSE-976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/literal-type-spacer.vue",
											"sourceSha256": "dcbb75466dbac173851bca048f9b37519e70472bcfad92da6887681a2f3f3313",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-literal-type-spacer/js/Demo.vue",
									"sha256": "782a26289caf3f2a46101e6c6f42085d40ab2041e6803ee53d5789eef84826df",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt\n-->\n<template>\n\t<AsamSpace :size=\"size\" spacer=\"|\">\n\t\t<div v-for=\"i in 2\" :key=\"i\">\n\t\t\t<AsamButton type=\"default\"> 按钮 {{ i }} </AsamButton>\n\t\t</div>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapLiteralTypeSpacerDemo' });\nimport { AsamSpace, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst size = ref(10);\n</script>\n",
									"originalSourceSha256": "0ec8f4f7a919ecdcbbd18177bad128b64f373c3141206644bdaefc6d78168be3",
									"notice": {
										"id": "976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba",
										"url": "/licenses/source-notices/976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt",
										"licenseFilename": "LICENSE-976e928556794712e6471c4641bab1260119e2a0ab2dd3281f632627418b9cba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/literal-type-spacer.vue",
											"sourceSha256": "dcbb75466dbac173851bca048f9b37519e70472bcfad92da6887681a2f3f3313",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vnode-type-spacer",
					"title": "分隔符还可以是 VNode 类型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-vnode-type-spacer/ts/Demo.vue",
									"sha256": "d916c70849b8550f7d69a7d6979bde55599b8799b160c076e5ac199bf73505e4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt\n-->\n<template>\n\t<AsamSpace :size=\"size\" :spacer=\"spacer\">\n\t\t<div v-for=\"i in 2\" :key=\"i\">\n\t\t\t<AsamButton type=\"default\"> 按钮 {{ i }} </AsamButton>\n\t\t</div>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapVnodeTypeSpacerDemo' });\nimport { AsamSpace, AsamButton } from '@asam-ui/ui';\n\nimport { h, ref } from 'vue';\nimport { AsamDivider } from '@asam-ui/ui';\n\nconst size = ref(10);\nconst spacer = h(AsamDivider, { direction: 'vertical' });\n</script>\n",
									"originalSourceSha256": "a8f22dd5202aa1cd56216a532d65569ed4695f25142a16837a55da1e146fd6eb",
									"notice": {
										"id": "080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8",
										"url": "/licenses/source-notices/080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt",
										"licenseFilename": "LICENSE-080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/vnode-type-spacer.vue",
											"sourceSha256": "8ff0343e486421631eac96b6d9ba7bd38e972ad638a0a36467c8dcce6bb28230",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-vnode-type-spacer/js/Demo.vue",
									"sha256": "d58fb04345595ecb3028dc610b7b0bc3326e501be9a70c914a50688e2b50be44",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt\n-->\n<template>\n\t<AsamSpace :size=\"size\" :spacer=\"spacer\">\n\t\t<div v-for=\"i in 2\" :key=\"i\">\n\t\t\t<AsamButton type=\"default\"> 按钮 {{ i }} </AsamButton>\n\t\t</div>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapVnodeTypeSpacerDemo' });\nimport { AsamSpace, AsamButton } from '@asam-ui/ui';\nimport { h, ref } from 'vue';\nimport { AsamDivider } from '@asam-ui/ui';\nconst size = ref(10);\nconst spacer = h(AsamDivider, { direction: 'vertical' });\n</script>\n",
									"originalSourceSha256": "d53e2bb96b5450a65e67d5d689c876847e9199a1d467f197a7166a94ea6199e5",
									"notice": {
										"id": "080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8",
										"url": "/licenses/source-notices/080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt",
										"licenseFilename": "LICENSE-080bd9640d52b5d2578dd49998855bc9e08682467fd7c7fd945cbdc9b15d2be8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/vnode-type-spacer.vue",
											"sourceSha256": "8ff0343e486421631eac96b6d9ba7bd38e972ad638a0a36467c8dcce6bb28230",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-alignment",
					"title": "对齐方式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-alignment/ts/Demo.vue",
									"sha256": "73c81005c92a744465b186e8a734b858eb8c0e7652fddeb3cbb13deb272683f6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt\n-->\n<template>\n\t<div class=\"alignment-container\">\n\t\t<AsamSpace>\n\t\t\tstring\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t\t<AsamCard>\n\t\t\t\t<template #header> header </template>\n\n\t\t\t\tbody\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n\t<div class=\"alignment-container\">\n\t\t<AsamSpace alignment=\"flex-start\">\n\t\t\tstring\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t\t<AsamCard>\n\t\t\t\t<template #header> header </template>\n\t\t\t\tbody\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n\t<div class=\"alignment-container\">\n\t\t<AsamSpace alignment=\"flex-end\">\n\t\t\tstring\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t\t<AsamCard>\n\t\t\t\t<template #header> header </template>\n\t\t\t\tbody\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapAlignmentDemo' });\nimport { AsamSpace, AsamButton, AsamCard } from '@asam-ui/ui';\n</script>\n\n<style>\n.alignment-container {\n\twidth: 240px;\n\tmargin-bottom: 20px;\n\tpadding: 8px;\n\tborder: 1px solid var(--el-border-color);\n}\n</style>\n",
									"originalSourceSha256": "383dbff23406ff8f20bfe4ad40c3d7694f2298fa0831a910c4f1f2e14bf599bb",
									"notice": {
										"id": "db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618",
										"url": "/licenses/source-notices/db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt",
										"licenseFilename": "LICENSE-db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/alignment.vue",
											"sourceSha256": "c96d1e0507b030e59b9c64e702c71f8676669bcee001e45244150e0771c463ed",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-alignment/js/Demo.vue",
									"sha256": "51a81b4134bafebe2589f96aff21ea3674b98653b6645d1a04a056c7d65b6964",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt\n-->\n<template>\n\t<div class=\"alignment-container\">\n\t\t<AsamSpace>\n\t\t\tstring\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t\t<AsamCard>\n\t\t\t\t<template #header> header </template>\n\n\t\t\t\tbody\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n\t<div class=\"alignment-container\">\n\t\t<AsamSpace alignment=\"flex-start\">\n\t\t\tstring\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t\t<AsamCard>\n\t\t\t\t<template #header> header </template>\n\t\t\t\tbody\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n\t<div class=\"alignment-container\">\n\t\t<AsamSpace alignment=\"flex-end\">\n\t\t\tstring\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t\t<AsamCard>\n\t\t\t\t<template #header> header </template>\n\t\t\t\tbody\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapAlignmentDemo' });\nimport { AsamSpace, AsamButton, AsamCard } from '@asam-ui/ui';\n</script>\n\n<style>\n.alignment-container {\n\twidth: 240px;\n\tmargin-bottom: 20px;\n\tpadding: 8px;\n\tborder: 1px solid var(--el-border-color);\n}\n</style>\n",
									"originalSourceSha256": "7aaabdbd914413c5db4700387c3934f02b33f6e99dc6a9ea1cdfc30b3152a57f",
									"notice": {
										"id": "db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618",
										"url": "/licenses/source-notices/db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt",
										"licenseFilename": "LICENSE-db62b803a66106853c116a03f98401a7e25fe1488a9418ff043ec63d6b4b0618.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/alignment.vue",
											"sourceSha256": "c96d1e0507b030e59b9c64e702c71f8676669bcee001e45244150e0771c463ed",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-fill",
					"title": "填充容器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-fill/ts/Demo.vue",
									"sha256": "6fafb09c5cfd5eb18b0e6670712e1cf4a3a22b5a3fef04c5ea76e2c8613c1973",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt\n-->\n<template>\n\t<div>\n\t\t<div style=\"margin-bottom: 15px\">\n\t\t\t填充：\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"fill\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') fill = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSpace :fill=\"fill\" wrap>\n\t\t\t<AsamCard v-for=\"i in 3\" :key=\"i\" class=\"box-card\">\n\t\t\t\t<template #header>\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t\t{{ '列表项 ' + o }}\n\t\t\t\t</div>\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapFillDemo' });\nimport { AsamSwitch, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst fill = ref(true);\n</script>\n",
									"originalSourceSha256": "8b4f2e9a83371c1d12b63b076364060b1c79a94c6ebf9a35e9131572658a2f06",
									"notice": {
										"id": "0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f",
										"url": "/licenses/source-notices/0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt",
										"licenseFilename": "LICENSE-0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/fill.vue",
											"sourceSha256": "6d251ea3534e6ba6c8258f6e15d15830336e66b22854de5becd93600d138fe5c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-fill/js/Demo.vue",
									"sha256": "9954207607b2ce5954cc4827a05e4bdbadd2ae678c46c55a79689820ba982580",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt\n-->\n<template>\n\t<div>\n\t\t<div style=\"margin-bottom: 15px\">\n\t\t\t填充：\n\t\t\t<AsamSwitch\n\t\t\t\t:model-value=\"fill\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'boolean') fill = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamSpace :fill=\"fill\" wrap>\n\t\t\t<AsamCard v-for=\"i in 3\" :key=\"i\" class=\"box-card\">\n\t\t\t\t<template #header>\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t\t{{ '列表项 ' + o }}\n\t\t\t\t</div>\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapFillDemo' });\nimport { AsamSwitch, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst fill = ref(true);\n</script>\n",
									"originalSourceSha256": "37a468e7bb854f3313536f0ed45259fc1b76a678956e517d88228c5421a3c4c8",
									"notice": {
										"id": "0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f",
										"url": "/licenses/source-notices/0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt",
										"licenseFilename": "LICENSE-0c2a4b922c59b97be15d998c47e374b13002dda2da94c436e5c654301f2f9a5f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/fill.vue",
											"sourceSha256": "6d251ea3534e6ba6c8258f6e15d15830336e66b22854de5becd93600d138fe5c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-fill-ratio",
					"title": "自定义填充比例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-fill-ratio/ts/Demo.vue",
									"sha256": "557d4e2329844fc3e214585dc54dc6da8a0379652f2ed87406568df2c4a1a0b2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt\n-->\n<template>\n\t<div>\n\t\t<div style=\"margin-bottom: 15px\">\n\t\t\t方向：\n\t\t\t<AsamRadioItem\n\t\t\t\t:model-value=\"direction\"\n\t\t\t\tvalue=\"horizontal\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'horizontal' || value === 'vertical') direction = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\thorizontal\n\t\t\t</AsamRadioItem>\n\t\t\t<AsamRadioItem\n\t\t\t\t:model-value=\"direction\"\n\t\t\t\tvalue=\"vertical\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'horizontal' || value === 'vertical') direction = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\tvertical\n\t\t\t</AsamRadioItem>\n\t\t</div>\n\t\t<div style=\"margin-bottom: 15px\">\n\t\t\t填充比例：<AsamSlider\n\t\t\t\t:model-value=\"fillRatio\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'number') fillRatio = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamSpace\n\t\t\tfill\n\t\t\twrap\n\t\t\t:fill-ratio=\"fillRatio\"\n\t\t\t:direction=\"direction\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamCard v-for=\"i in 5\" :key=\"i\" class=\"box-card\">\n\t\t\t\t<template #header>\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t\t{{ \"列表项 \" + o }}\n\t\t\t\t</div>\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSpaceCapFillRatioDemo' });\nimport { AsamRadioItem, AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamSpaceInstance } from '@asam-ui/ui';\n\nconst direction = ref<AsamSpaceInstance['direction']>('horizontal');\nconst fillRatio = ref(30);\n</script>\n",
									"originalSourceSha256": "7f00ade62395c04a414ebafa253edd0aa80e4c5360c52f797bab2a2d9cf9b389",
									"notice": {
										"id": "5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d",
										"url": "/licenses/source-notices/5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt",
										"licenseFilename": "LICENSE-5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/fill-ratio.vue",
											"sourceSha256": "2477eb3a10ba579870ee412ec65e3a3284ee0e32bf4d158cb145ac7eefc35bdd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSpace/cap-fill-ratio/js/Demo.vue",
									"sha256": "42ca19abeb9669a47713abbcdf0275229a6918eb718944a194a83803bb2b8bc2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt\n-->\n<template>\n\t<div>\n\t\t<div style=\"margin-bottom: 15px\">\n\t\t\t方向：\n\t\t\t<AsamRadioItem\n\t\t\t\t:model-value=\"direction\"\n\t\t\t\tvalue=\"horizontal\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'horizontal' || value === 'vertical') direction = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\thorizontal\n\t\t\t</AsamRadioItem>\n\t\t\t<AsamRadioItem\n\t\t\t\t:model-value=\"direction\"\n\t\t\t\tvalue=\"vertical\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (value === 'horizontal' || value === 'vertical') direction = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\tvertical\n\t\t\t</AsamRadioItem>\n\t\t</div>\n\t\t<div style=\"margin-bottom: 15px\">\n\t\t\t填充比例：<AsamSlider\n\t\t\t\t:model-value=\"fillRatio\"\n\t\t\t\t@update:model-value=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'number') fillRatio = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t/>\n\t\t</div>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamSpace\n\t\t\tfill\n\t\t\twrap\n\t\t\t:fill-ratio=\"fillRatio\"\n\t\t\t:direction=\"direction\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamCard v-for=\"i in 5\" :key=\"i\" class=\"box-card\">\n\t\t\t\t<template #header>\n\t\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t\t<span>卡片名称</span>\n\t\t\t\t\t\t<AsamButton type=\"default\" class=\"button\" text>操作按钮</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div v-for=\"o in 4\" :key=\"o\" class=\"text item\">\n\t\t\t\t\t{{ \"列表项 \" + o }}\n\t\t\t\t</div>\n\t\t\t</AsamCard>\n\t\t</AsamSpace>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSpaceCapFillRatioDemo' });\nimport { AsamRadioItem, AsamSlider, AsamSpace, AsamCard, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst direction = ref('horizontal');\nconst fillRatio = ref(30);\n</script>\n",
									"originalSourceSha256": "bbb30b6a52e3e5da566f8ed9fc746efe6f9a420ebfc90a7abdec633d49846772",
									"notice": {
										"id": "5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d",
										"url": "/licenses/source-notices/5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt",
										"licenseFilename": "LICENSE-5b24a7bfba13272577ce39493bd24b10f312cc7ba29fbdcd0215cfd7c8dc3c7d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/space/fill-ratio.vue",
											"sourceSha256": "2477eb3a10ba579870ee412ec65e3a3284ee0e32bf4d158cb145ac7eefc35bdd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSplitter",
			"documentation": "/component-AsamSplitter.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/basic/ts/Demo.vue",
									"sha256": "a5832f6c2f48b399fcdc00a685cc6031d91e5718b525fb86829d321982c15f91",
									"source": "<template>\n\t<AsamSplitter class=\"split\">\n\t\t<AsamSplitterPanel\n\t\t\t:size=\"first\"\n\t\t\t:min=\"80\"\n\t\t\tcollapsible\n\t\t\t@update:size=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'number') first = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<div class=\"panel\">拖动分隔条调整左侧</div>\n\t\t</AsamSplitterPanel>\n\t\t<AsamSplitterPanel :min=\"80\">\n\t\t\t<div class=\"panel\">另一面板</div>\n\t\t</AsamSplitterPanel>\n\t</AsamSplitter>\n\t<p class=\"example-paragraph\" role=\"status\">左侧尺寸：{{ first }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst first = ref(160);\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.split {\n\theight: 220px;\n\twidth: 100%;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/basic/js/Demo.vue",
									"sha256": "e8313ed41a7e3a532ae525e016ba60adf222555a63a02b8cdcb7c245069eff57",
									"source": "<template>\n\t<AsamSplitter class=\"split\">\n\t\t<AsamSplitterPanel\n\t\t\t:size=\"first\"\n\t\t\t:min=\"80\"\n\t\t\tcollapsible\n\t\t\t@update:size=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'number') first = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<div class=\"panel\">拖动分隔条调整左侧</div>\n\t\t</AsamSplitterPanel>\n\t\t<AsamSplitterPanel :min=\"80\">\n\t\t\t<div class=\"panel\">另一面板</div>\n\t\t</AsamSplitterPanel>\n\t</AsamSplitter>\n\t<p class=\"example-paragraph\" role=\"status\">左侧尺寸：{{ first }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst first = ref(160);\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.split {\n\theight: 220px;\n\twidth: 100%;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-basic/ts/Demo.vue",
									"sha256": "632edb55fb59a6b9fcd3caf0d997f864f673e644f92f9e2c127df4c8ebdd0f4d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel size=\"30%\">\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel :min=\"200\">\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterCapBasicDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "a8de36d8094c80a2ef57026700d8919c31535db38b6d1f45646242a65ad7e50a",
									"notice": {
										"id": "d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e",
										"url": "/licenses/source-notices/d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt",
										"licenseFilename": "LICENSE-d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/basic.vue",
											"sourceSha256": "ba5b940fc5eb9afb279e7fb521b02512ae4c8fa49262f5d286b12c0767b89e34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-basic/js/Demo.vue",
									"sha256": "078eba3450f6cb82ccb88b699d24fb4ca2def54e06e256430744f6c820315b80",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel size=\"30%\">\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel :min=\"200\">\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterCapBasicDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "67cde7ba5831c84bf51623d6a972f768b32dea53658b2d01b33f08ffae6f4beb",
									"notice": {
										"id": "d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e",
										"url": "/licenses/source-notices/d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt",
										"licenseFilename": "LICENSE-d5a93174ba260a27fc0e15086e8371d579f6438184e421f5196847d83602455e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/basic.vue",
											"sourceSha256": "ba5b940fc5eb9afb279e7fb521b02512ae4c8fa49262f5d286b12c0767b89e34",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical",
					"title": "垂直布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-vertical/ts/Demo.vue",
									"sha256": "1355e1111ac68c5ed132cfb7e1993cb4fef33593dcbad9bffc856980016a4129",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter layout=\"vertical\">\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterCapVerticalDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "73755d561bd7cd1801d7e4f525bafcc4af8447426a148678d0ebc155bd2227bf",
									"notice": {
										"id": "a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879",
										"url": "/licenses/source-notices/a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt",
										"licenseFilename": "LICENSE-a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/vertical.vue",
											"sourceSha256": "cd2ef5e552fcd4b1a70a9559ccc19b8b3db670d17f568cbeb6a3c8a440ce2d8f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-vertical/js/Demo.vue",
									"sha256": "812d1199c0463cee0c756d2057d5f4d4649471d54066356605975391d9dfd05c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter layout=\"vertical\">\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterCapVerticalDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "e2f9e06c88abb5dfdf3ae118496416262a9bb07252b5ea3f90de56915fa25ed3",
									"notice": {
										"id": "a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879",
										"url": "/licenses/source-notices/a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt",
										"licenseFilename": "LICENSE-a30b9a42a8370f653375f01100012e4813235db77e07453bea20baca5314c879.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/vertical.vue",
											"sourceSha256": "cd2ef5e552fcd4b1a70a9559ccc19b8b3db670d17f568cbeb6a3c8a440ce2d8f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-collapsible",
					"title": "可折叠",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-collapsible/ts/Demo.vue",
									"sha256": "185add909d11c8f5b74c101c24b9059be890d7000b68a445e9f5a745b616d43e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt\n-->\n<template>\n\t<AsamSwitch\n\t\t:model-value=\"isCollapsible\"\n\t\tactive-text=\"enable\"\n\t\tinactive-text=\"disable\"\n\t\tinline-prompt\n\t\tclass=\"mb-2\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'boolean') isCollapsible = value;\n\t\t\t}\n\t\t\"\n\t/>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\" min=\"50\">\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">3</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t<AsamSplitter layout=\"vertical\">\n\t\t\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t\t\t<div class=\"demo-panel\">4</div>\n\t\t\t\t\t</AsamSplitterPanel>\n\t\t\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t\t\t<div class=\"demo-panel\">5</div>\n\t\t\t\t\t</AsamSplitterPanel>\n\t\t\t\t</AsamSplitter>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterCapCollapsibleDemo' });\nimport { AsamSwitch, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst isCollapsible = ref(true);\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-2 {\n\tmargin-bottom: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "83118adbe445fa0544e37cbb23f2735bbf0c31c93d8d7f19d7b9834540685e16",
									"notice": {
										"id": "29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385",
										"url": "/licenses/source-notices/29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt",
										"licenseFilename": "LICENSE-29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/collapsible.vue",
											"sourceSha256": "807aeb96f0a2052d2ae27b7a24d1fda7127e9f5e84976ba7f57165cdae7ca0e1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-collapsible/js/Demo.vue",
									"sha256": "803d07adcd5f9b85ac75497693edc83891879a767fca951a7a213edf852fc867",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt\n-->\n<template>\n\t<AsamSwitch\n\t\t:model-value=\"isCollapsible\"\n\t\tactive-text=\"enable\"\n\t\tinactive-text=\"disable\"\n\t\tinline-prompt\n\t\tclass=\"mb-2\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'boolean') isCollapsible = value;\n\t\t\t}\n\t\t\"\n\t/>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\" min=\"50\">\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">3</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t<AsamSplitter layout=\"vertical\">\n\t\t\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t\t\t<div class=\"demo-panel\">4</div>\n\t\t\t\t\t</AsamSplitterPanel>\n\t\t\t\t\t<AsamSplitterPanel :collapsible=\"isCollapsible\">\n\t\t\t\t\t\t<div class=\"demo-panel\">5</div>\n\t\t\t\t\t</AsamSplitterPanel>\n\t\t\t\t</AsamSplitter>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterCapCollapsibleDemo' });\nimport { AsamSwitch, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst isCollapsible = ref(true);\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-2 {\n\tmargin-bottom: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "22f005cd04815715c5f7799b96d3f13abde531d4bb1c6a92746291c57e893e19",
									"notice": {
										"id": "29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385",
										"url": "/licenses/source-notices/29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt",
										"licenseFilename": "LICENSE-29ef93790c17a02320743bab1510a59195a41d1035a4c22afdc8fb217913d385.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/collapsible.vue",
											"sourceSha256": "807aeb96f0a2052d2ae27b7a24d1fda7127e9f5e84976ba7f57165cdae7ca0e1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-disable-drag",
					"title": "禁用拖动",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-disable-drag/ts/Demo.vue",
									"sha256": "216e9ec72b75db782c59f437ac5b51b336650a76434da7175318b1f899d12249",
									"source": "<template>\n\t<AsamCheckboxItem v-model=\"resizable\">允许调整第一面板</AsamCheckboxItem>\n\t<div style=\"height: 200px; width: 100%\">\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel :resizable=\"resizable\" :size=\"'40%'\">第一面板</AsamSplitterPanel\n\t\t\t><AsamSplitterPanel>第二面板</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterCapDisableDragDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst resizable = ref(false);\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-disable-drag/js/Demo.vue",
									"sha256": "37f565b262bba4e6bf70c16ee06579bf3547d97d4eaec8a7f292b82f5bf779b4",
									"source": "<template>\n\t<AsamCheckboxItem v-model=\"resizable\">允许调整第一面板</AsamCheckboxItem>\n\t<div style=\"height: 200px; width: 100%\">\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel :resizable=\"resizable\" :size=\"'40%'\">第一面板</AsamSplitterPanel\n\t\t\t><AsamSplitterPanel>第二面板</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamSplitterCapDisableDragDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst resizable = ref(false);\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-size",
					"title": "面板大小",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-size/ts/Demo.vue",
									"sha256": "84857e52a00d3b90636ecc9e9ffc5ace3ce29bddd8de896812efee6abdd9f1d1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter\n\t\t\t@resize-start=\"handleResizeStart\"\n\t\t\t@resize-end=\"handleResizeEnd\"\n\t\t\t@resize=\"handleResize\"\n\t\t>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel\n\t\t\t\t:size=\"size\"\n\t\t\t\t:max=\"200\"\n\t\t\t\t:min=\"50\"\n\t\t\t\t@update:size=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'number') size = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t<div class=\"demo-panel\">{{ size }}px</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">3</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterCapSizeDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst size = ref(100);\n\nconst handleResizeStart = (index: number, sizes: number[]) => {\n\tconsole.log('resizeStart', index, sizes);\n};\n\nconst handleResize = (index: number, sizes: number[]) => {\n\tconsole.log('resize', index, sizes);\n};\n\nconst handleResizeEnd = (index: number, sizes: number[]) => {\n\tconsole.log('resizeEnd', index, sizes);\n};\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "f2a5912ae9034921987ccd3a71931bc9ea4ef72687eb8f3f9bc3c7dd30f4683b",
									"notice": {
										"id": "be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94",
										"url": "/licenses/source-notices/be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt",
										"licenseFilename": "LICENSE-be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/size.vue",
											"sourceSha256": "84aabe5bb33f6087b6548bade4ecd9e380fdfd275770f77b2ee0d5c4a1e80997",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-size/js/Demo.vue",
									"sha256": "8162271ef5b7d322060fd47684c94defd81bbae3c26c4393c1f329111b9c007c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter\n\t\t\t@resize-start=\"handleResizeStart\"\n\t\t\t@resize-end=\"handleResizeEnd\"\n\t\t\t@resize=\"handleResize\"\n\t\t>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel\n\t\t\t\t:size=\"size\"\n\t\t\t\t:max=\"200\"\n\t\t\t\t:min=\"50\"\n\t\t\t\t@update:size=\"\n\t\t\t\t\t(value) => {\n\t\t\t\t\t\tif (typeof value === 'number') size = value;\n\t\t\t\t\t}\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t<div class=\"demo-panel\">{{ size }}px</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel>\n\t\t\t\t<div class=\"demo-panel\">3</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterCapSizeDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst size = ref(100);\nconst handleResizeStart = (index, sizes) => {\n\tconsole.log('resizeStart', index, sizes);\n};\nconst handleResize = (index, sizes) => {\n\tconsole.log('resize', index, sizes);\n};\nconst handleResizeEnd = (index, sizes) => {\n\tconsole.log('resizeEnd', index, sizes);\n};\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "1f11392d4de9331bd783fd8d3e32e555c743f04331683e17a85de73301d643ad",
									"notice": {
										"id": "be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94",
										"url": "/licenses/source-notices/be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt",
										"licenseFilename": "LICENSE-be35b1faf54f2d565208ac9ac08d1b63a8d7af0ad284bffbfa3d59ce43c9be94.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/size.vue",
											"sourceSha256": "84aabe5bb33f6087b6548bade4ecd9e380fdfd275770f77b2ee0d5c4a1e80997",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-lazy",
					"title": "延迟2.11.0",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-lazy/ts/Demo.vue",
									"sha256": "57b7ffee0549e4c811299f8580b1d2b304eecf6c4fbf38f74e7629bdc8a8bf29",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter lazy>\n\t\t\t<AsamSplitterPanel collapsible min=\"50\">\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel collapsible>\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel collapsible>\n\t\t\t\t<div class=\"demo-panel\">3</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterCapLazyDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "19be75158e53f031cd34ad7b3b24bd361d2e23d7e21c29d8f273f606a59af07b",
									"notice": {
										"id": "b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf",
										"url": "/licenses/source-notices/b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt",
										"licenseFilename": "LICENSE-b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/lazy.vue",
											"sourceSha256": "557cf9068fc773802212796ce8f3a4b99b67a5ed1fa0234101da77c0fc460ea5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/cap-lazy/js/Demo.vue",
									"sha256": "e533fd0328c30e4088d3978086d12dc6373c1f411f8678f52f437cb68626c339",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt\n-->\n<template>\n\t<div style=\"height: 250px; box-shadow: var(--el-border-color-light) 0 0 10px\">\n\t\t<AsamSplitter lazy>\n\t\t\t<AsamSplitterPanel collapsible min=\"50\">\n\t\t\t\t<div class=\"demo-panel\">1</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel collapsible>\n\t\t\t\t<div class=\"demo-panel\">2</div>\n\t\t\t</AsamSplitterPanel>\n\t\t\t<AsamSplitterPanel collapsible>\n\t\t\t\t<div class=\"demo-panel\">3</div>\n\t\t\t</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterCapLazyDemo' });\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.demo-panel {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n}\n</style>\n",
									"originalSourceSha256": "70d0f33dd8c276e2408a9987970563df7e479ae913d9665fa2eca69c216e6515",
									"notice": {
										"id": "b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf",
										"url": "/licenses/source-notices/b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt",
										"licenseFilename": "LICENSE-b1636cb04865281e161279c59e16cdc498ff6a4d11a13f49f6e8f15942b8d5cf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/splitter/lazy.vue",
											"sourceSha256": "557cf9068fc773802212796ce8f3a4b99b67a5ed1fa0234101da77c0fc460ea5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "zero-size",
					"title": "零尺寸初始化与恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/zero-size/ts/Demo.vue",
									"sha256": "cf052cf26b9b94360dad71278ccba87258be9269b466da19425e41df5e7c9dd2",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t>切换容器尺寸</AsamButton\n\t>\n\t<div\n\t\t:style=\"{\n\t\t\twidth: visible ? '400px' : '0px',\n\t\t\theight: visible ? '200px' : '0px',\n\t\t\toverflow: 'hidden'\n\t\t}\"\n\t\tv-bind=\"domDataAttrs('data-splitter-host')\"\n\t>\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel :size=\"'50%'\" :min=\"'20%'\" collapsible>左侧</AsamSplitterPanel\n\t\t\t><AsamSplitterPanel>右侧</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamSplitterZeroSizeDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst visible = ref(false);\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitter/zero-size/js/Demo.vue",
									"sha256": "696c049771ecfc015bb681451f1f5001e8b8a9f3d180c30d8fb3196b09adeab1",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t>切换容器尺寸</AsamButton\n\t>\n\t<div\n\t\t:style=\"{\n\t\t\twidth: visible ? '400px' : '0px',\n\t\t\theight: visible ? '200px' : '0px',\n\t\t\toverflow: 'hidden'\n\t\t}\"\n\t\tv-bind=\"domDataAttrs('data-splitter-host')\"\n\t>\n\t\t<AsamSplitter>\n\t\t\t<AsamSplitterPanel :size=\"'50%'\" :min=\"'20%'\" collapsible>左侧</AsamSplitterPanel\n\t\t\t><AsamSplitterPanel>右侧</AsamSplitterPanel>\n\t\t</AsamSplitter>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamSplitterZeroSizeDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst visible = ref(false);\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n</script>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSplitterPanel",
			"documentation": "/component-AsamSplitterPanel.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitterPanel/basic/ts/Demo.vue",
									"sha256": "3c00190bf2605123389b0b684a4b029e672c65452854c8acedadf9a24bf662ea",
									"source": "<template>\n\t<AsamSplitter class=\"split\">\n\t\t<AsamSplitterPanel\n\t\t\t:size=\"first\"\n\t\t\t:min=\"80\"\n\t\t\tcollapsible\n\t\t\t@update:size=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'number') first = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<div class=\"panel\">拖动分隔条调整左侧</div>\n\t\t</AsamSplitterPanel>\n\t\t<AsamSplitterPanel :min=\"80\">\n\t\t\t<div class=\"panel\">另一面板</div>\n\t\t</AsamSplitterPanel>\n\t</AsamSplitter>\n\t<p class=\"example-paragraph\" role=\"status\">左侧尺寸：{{ first }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSplitterPanelBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst first = ref(160);\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.split {\n\theight: 220px;\n\twidth: 100%;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSplitterPanel/basic/js/Demo.vue",
									"sha256": "04333615f037b24424fe9d9bf258f45a7fdf8bdc330647c02170825394df99b3",
									"source": "<template>\n\t<AsamSplitter class=\"split\">\n\t\t<AsamSplitterPanel\n\t\t\t:size=\"first\"\n\t\t\t:min=\"80\"\n\t\t\tcollapsible\n\t\t\t@update:size=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'number') first = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t>\n\t\t\t<div class=\"panel\">拖动分隔条调整左侧</div>\n\t\t</AsamSplitterPanel>\n\t\t<AsamSplitterPanel :min=\"80\">\n\t\t\t<div class=\"panel\">另一面板</div>\n\t\t</AsamSplitterPanel>\n\t</AsamSplitter>\n\t<p class=\"example-paragraph\" role=\"status\">左侧尺寸：{{ first }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSplitterPanelBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSplitter, AsamSplitterPanel } from '@asam-ui/ui';\nconst first = ref(160);\n</script>\n\n<style scoped>\n.panel {\n\tpadding: var(--asam-space-md);\n\tbackground: var(--asam-color-surface);\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.split {\n\theight: 220px;\n\twidth: 100%;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamStatistic",
			"documentation": "/component-AsamStatistic.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/basic/ts/Demo.vue",
									"sha256": "231e43ff2d160c8e9953f2fcf860862bd6c9cf2ae48f570ccafd6238f0630711",
									"source": "<template>\n\t<AsamStatistic\n\t\tv-bind=\"{ title: '本地示例数量', value: 12345.67, precision: 2, suffix: '条' }\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStatisticBasicDemo' });\nimport { AsamStatistic } from '@asam-ui/ui';\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/basic/js/Demo.vue",
									"sha256": "e2962edf7f2ee3543fb3206338080bb5fcb2eeb416f2d2336005916eb7b95707",
									"source": "<template>\n\t<AsamStatistic\n\t\tv-bind=\"{ title: '本地示例数量', value: 12345.67, precision: 2, suffix: '条' }\"\n\t/>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStatisticBasicDemo' });\nimport { AsamStatistic } from '@asam-ui/ui';\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/cap-basic/ts/Demo.vue",
									"sha256": "194b5fba1907df19a2cdb688e4468f17d5c4ad203435b2a8c55c588f4101dd30",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt\n-->\n<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic title=\"日活跃用户\" :value=\"268500\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic :value=\"138\">\n\t\t\t\t<template #title>\n\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t男女比例\n\t\t\t\t\t\t<AsamIcon style=\"margin-left: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t<Male />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template #suffix>/100</template>\n\t\t\t</AsamStatistic>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic title=\"交易总数\" :value=\"outputValue\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic title=\"反馈数量\" :value=\"562\">\n\t\t\t\t<template #suffix>\n\t\t\t\t\t<AsamIcon style=\"vertical-align: -0.125em\">\n\t\t\t\t\t\t<ChatLineRound />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamStatistic>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStatisticCapBasicDemo' });\nimport { AsamRow, AsamCol, AsamStatistic, AsamIcon } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { onMounted, onBeforeUnmount } from 'vue';\nimport { ChatLineRound, Male } from '@asam-ui/icons-vue';\n\nconst outputValue = ref(0);\nlet frame = 0;\nonMounted(() => {\n\tconst start = performance.now();\n\tconst animate = (now: number) => {\n\t\tconst progress = Math.min((now - start) / 1500, 1);\n\t\toutputValue.value = Math.round(172000 * progress);\n\t\tif (progress < 1) frame = requestAnimationFrame(animate);\n\t};\n\tframe = requestAnimationFrame(animate);\n});\nonBeforeUnmount(() => cancelAnimationFrame(frame));\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "72578b83887cdedd56418b4e87d7fbd0612e54a21c641a8899c6042fa920b1cf",
									"notice": {
										"id": "5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5",
										"url": "/licenses/source-notices/5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt",
										"licenseFilename": "LICENSE-5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/statistic/basic.vue",
											"sourceSha256": "51abe12db84fd2b1b2a2c22c2325302cb0240d5ccb926e33ff8a7b7ded9060b9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/cap-basic/js/Demo.vue",
									"sha256": "b9f7db4906c2eaf586b1d7e2263cad1562b216ea742b7ea6f45936e8cdb192c4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt\n-->\n<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic title=\"日活跃用户\" :value=\"268500\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic :value=\"138\">\n\t\t\t\t<template #title>\n\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t男女比例\n\t\t\t\t\t\t<AsamIcon style=\"margin-left: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t<Male />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template #suffix>/100</template>\n\t\t\t</AsamStatistic>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic title=\"交易总数\" :value=\"outputValue\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"6\" class=\"text-center mb-4\">\n\t\t\t<AsamStatistic title=\"反馈数量\" :value=\"562\">\n\t\t\t\t<template #suffix>\n\t\t\t\t\t<AsamIcon style=\"vertical-align: -0.125em\">\n\t\t\t\t\t\t<ChatLineRound />\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamStatistic>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStatisticCapBasicDemo' });\nimport { AsamRow, AsamCol, AsamStatistic, AsamIcon } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { onMounted, onBeforeUnmount } from 'vue';\nimport { ChatLineRound, Male } from '@asam-ui/icons-vue';\nconst outputValue = ref(0);\nlet frame = 0;\nonMounted(() => {\n\tconst start = performance.now();\n\tconst animate = (now) => {\n\t\tconst progress = Math.min((now - start) / 1500, 1);\n\t\toutputValue.value = Math.round(172000 * progress);\n\t\tif (progress < 1) frame = requestAnimationFrame(animate);\n\t};\n\tframe = requestAnimationFrame(animate);\n});\nonBeforeUnmount(() => cancelAnimationFrame(frame));\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "5ad9c63833a6b9e826ab25621b72ea9dbf3a276ab1c3119a3e617da91192391d",
									"notice": {
										"id": "5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5",
										"url": "/licenses/source-notices/5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt",
										"licenseFilename": "LICENSE-5a2d0a045fd22a05a3dd92f6b49fb96b9716d60658c9a7b3ddb9eaaf805033c5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/statistic/basic.vue",
											"sourceSha256": "51abe12db84fd2b1b2a2c22c2325302cb0240d5ccb926e33ff8a7b7ded9060b9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-countdown",
					"title": "倒计时",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/cap-countdown/ts/Demo.vue",
									"sha256": "70e47752d09e34f3595e7b705b3bc94cb9ae36099a97f6d5034765a3ed6f6b5e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt\n-->\n<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"text-center mb-4\">\n\t\t\t<AsamCountdown title=\"开始拖拽\" :value=\"value\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"text-center mb-4\">\n\t\t\t<AsamCountdown title=\"会员剩余时间\" format=\"HH:mm:ss\" :value=\"value1\" />\n\t\t\t<AsamButton class=\"countdown-footer\" type=\"default\" @click=\"reset\"> 重置 </AsamButton>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"text-center mb-4\">\n\t\t\t<AsamCountdown format=\"DD [天] HH:mm:ss\" :value=\"value2\">\n\t\t\t\t<template #title>\n\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t<AsamIcon style=\"margin-right: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t<Calendar />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t距离下个月还有\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</AsamCountdown>\n\t\t\t<div class=\"countdown-footer\">{{ value2.format('YYYY-MM-DD') }}</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStatisticCapCountdownDemo' });\nimport { AsamRow, AsamCol, AsamCountdown, AsamButton, AsamIcon } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport dayjs from 'dayjs';\nimport { Calendar } from '@asam-ui/icons-vue';\n\nconst value = ref(Date.now() + 1000 * 60 * 60 * 7);\nconst value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);\nconst value2 = ref(dayjs().add(1, 'month').startOf('month'));\n\nfunction reset() {\n\tvalue1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;\n}\n</script>\n\n<style scoped>\n.countdown-footer {\n\tmargin-top: 8px;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "394885173ae2c3071280260f2211eb514b35f0e07058b186caa1e8f39125946f",
									"notice": {
										"id": "f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06",
										"url": "/licenses/source-notices/f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt",
										"licenseFilename": "LICENSE-f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/statistic/countdown.vue",
											"sourceSha256": "c7c0c8638bd993761c49f64ef5177ad8251b1168f9dbfa11bb425978edcb1104",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/cap-countdown/js/Demo.vue",
									"sha256": "ce1400923c80e183bd1c904241c79c5e1e94fd8dd6fabfbc91b322a5e845fab6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt\n-->\n<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"text-center mb-4\">\n\t\t\t<AsamCountdown title=\"开始拖拽\" :value=\"value\" />\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"text-center mb-4\">\n\t\t\t<AsamCountdown title=\"会员剩余时间\" format=\"HH:mm:ss\" :value=\"value1\" />\n\t\t\t<AsamButton class=\"countdown-footer\" type=\"default\" @click=\"reset\"> 重置 </AsamButton>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"text-center mb-4\">\n\t\t\t<AsamCountdown format=\"DD [天] HH:mm:ss\" :value=\"value2\">\n\t\t\t\t<template #title>\n\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t<AsamIcon style=\"margin-right: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t<Calendar />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t距离下个月还有\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</AsamCountdown>\n\t\t\t<div class=\"countdown-footer\">{{ value2.format('YYYY-MM-DD') }}</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStatisticCapCountdownDemo' });\nimport { AsamRow, AsamCol, AsamCountdown, AsamButton, AsamIcon } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport dayjs from 'dayjs';\nimport { Calendar } from '@asam-ui/icons-vue';\nconst value = ref(Date.now() + 1000 * 60 * 60 * 7);\nconst value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);\nconst value2 = ref(dayjs().add(1, 'month').startOf('month'));\nfunction reset() {\n\tvalue1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;\n}\n</script>\n\n<style scoped>\n.countdown-footer {\n\tmargin-top: 8px;\n}\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.text-center {\n\ttext-align: center;\n}\n\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "827d1844c08844a95ebaa8495b7f8c1dc5faa605317b8f5f032c3b2d0933cee9",
									"notice": {
										"id": "f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06",
										"url": "/licenses/source-notices/f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt",
										"licenseFilename": "LICENSE-f7620ad880e1b8308c6581b94bba471c6e236d661f67db72943410af20b95f06.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/statistic/countdown.vue",
											"sourceSha256": "c7c0c8638bd993761c49f64ef5177ad8251b1168f9dbfa11bb425978edcb1104",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-card",
					"title": "统计卡片",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/cap-card/ts/Demo.vue",
									"sha256": "fe178f082ab8d4f47c8c400cea0df1cf32b84e8f8961bbd4eda0f17092b9deab",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt\n-->\n<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"mb-4\">\n\t\t\t<div class=\"statistic-card\">\n\t\t\t\t<AsamStatistic :value=\"98500\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t\t日活跃用户\n\t\t\t\t\t\t\t<AsamTooltip\n\t\t\t\t\t\t\t\teffect=\"dark\"\n\t\t\t\t\t\t\t\tcontent=\"一天内登录产品的用户数量\"\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<AsamIcon style=\"margin-left: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t\t\t<Warning />\n\t\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t\t</AsamTooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamStatistic>\n\t\t\t\t<div class=\"statistic-footer\">\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<span>相较昨日</span>\n\t\t\t\t\t\t<span class=\"green\">\n\t\t\t\t\t\t\t24%\n\t\t\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t\t\t<CaretTop />\n\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"mb-4\">\n\t\t\t<div class=\"statistic-card\">\n\t\t\t\t<AsamStatistic :value=\"693700\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t\t月活跃用户\n\t\t\t\t\t\t\t<AsamTooltip\n\t\t\t\t\t\t\t\teffect=\"dark\"\n\t\t\t\t\t\t\t\tcontent=\"一个月内登录产品的用户数量\"\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<AsamIcon style=\"margin-left: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t\t\t<Warning />\n\t\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t\t</AsamTooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamStatistic>\n\t\t\t\t<div class=\"statistic-footer\">\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<span>环比</span>\n\t\t\t\t\t\t<span class=\"red\">\n\t\t\t\t\t\t\t12%\n\t\t\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t\t\t<CaretBottom />\n\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"mb-4\">\n\t\t\t<div class=\"statistic-card\">\n\t\t\t\t<AsamStatistic :value=\"72000\" title=\"今日新增交易\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">今日新增交易</div>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamStatistic>\n\t\t\t\t<div class=\"statistic-footer\">\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<span>相较昨日</span>\n\t\t\t\t\t\t<span class=\"green\">\n\t\t\t\t\t\t\t16%\n\t\t\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t\t\t<CaretTop />\n\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<AsamIcon :size=\"14\">\n\t\t\t\t\t\t\t<ArrowRight />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStatisticCapCardDemo' });\nimport { AsamRow, AsamCol, AsamStatistic, AsamTooltip, AsamIcon } from '@asam-ui/ui';\n\nimport { ArrowRight, CaretBottom, CaretTop, Warning } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC compiler implements :deep and :global selectors. */\n\n:global(h2#card-usage ~ .example .example-showcase) {\n\tbackground-color: var(--el-fill-color) !important;\n}\n\n.el-statistic {\n\t--el-statistic-content-font-size: 28px;\n}\n\n.statistic-card {\n\theight: 100%;\n\tpadding: 20px;\n\tborder-radius: 4px;\n\tbackground-color: var(--el-bg-color-overlay);\n}\n\n.statistic-footer {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tfont-size: 12px;\n\tcolor: var(--el-text-color-regular);\n\tmargin-top: 16px;\n}\n\n.statistic-footer .footer-item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.statistic-footer .footer-item span:last-child {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmargin-left: 4px;\n}\n\n.green {\n\tcolor: var(--el-color-success);\n}\n\n.red {\n\tcolor: var(--el-color-error);\n}\n\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "51e111d70bd223154625499ceee2d6eb553cc26c617ef8132f18c0bcc2b09709",
									"notice": {
										"id": "ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87",
										"url": "/licenses/source-notices/ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt",
										"licenseFilename": "LICENSE-ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/statistic/card.vue",
											"sourceSha256": "9ac53fef15ddf3fcbaa7149f2b4e0b7f988c7e74d870c62bf6e6a86a7167640a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStatistic/cap-card/js/Demo.vue",
									"sha256": "23a3900cc6fe923f7817d8c65ccb692cf4fc5391314c10cb521b3b2c490d5074",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt\n-->\n<template>\n\t<AsamRow :gutter=\"16\">\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"mb-4\">\n\t\t\t<div class=\"statistic-card\">\n\t\t\t\t<AsamStatistic :value=\"98500\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t\t日活跃用户\n\t\t\t\t\t\t\t<AsamTooltip\n\t\t\t\t\t\t\t\teffect=\"dark\"\n\t\t\t\t\t\t\t\tcontent=\"一天内登录产品的用户数量\"\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<AsamIcon style=\"margin-left: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t\t\t<Warning />\n\t\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t\t</AsamTooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamStatistic>\n\t\t\t\t<div class=\"statistic-footer\">\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<span>相较昨日</span>\n\t\t\t\t\t\t<span class=\"green\">\n\t\t\t\t\t\t\t24%\n\t\t\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t\t\t<CaretTop />\n\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"mb-4\">\n\t\t\t<div class=\"statistic-card\">\n\t\t\t\t<AsamStatistic :value=\"693700\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">\n\t\t\t\t\t\t\t月活跃用户\n\t\t\t\t\t\t\t<AsamTooltip\n\t\t\t\t\t\t\t\teffect=\"dark\"\n\t\t\t\t\t\t\t\tcontent=\"一个月内登录产品的用户数量\"\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<AsamIcon style=\"margin-left: 4px\" :size=\"12\">\n\t\t\t\t\t\t\t\t\t<Warning />\n\t\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t\t</AsamTooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamStatistic>\n\t\t\t\t<div class=\"statistic-footer\">\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<span>环比</span>\n\t\t\t\t\t\t<span class=\"red\">\n\t\t\t\t\t\t\t12%\n\t\t\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t\t\t<CaretBottom />\n\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t\t<AsamCol :xs=\"24\" :sm=\"12\" :md=\"8\" class=\"mb-4\">\n\t\t\t<div class=\"statistic-card\">\n\t\t\t\t<AsamStatistic :value=\"72000\" title=\"今日新增交易\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<div style=\"display: inline-flex; align-items: center\">今日新增交易</div>\n\t\t\t\t\t</template>\n\t\t\t\t</AsamStatistic>\n\t\t\t\t<div class=\"statistic-footer\">\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<span>相较昨日</span>\n\t\t\t\t\t\t<span class=\"green\">\n\t\t\t\t\t\t\t16%\n\t\t\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t\t\t<CaretTop />\n\t\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"footer-item\">\n\t\t\t\t\t\t<AsamIcon :size=\"14\">\n\t\t\t\t\t\t\t<ArrowRight />\n\t\t\t\t\t\t</AsamIcon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</AsamCol>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStatisticCapCardDemo' });\nimport { AsamRow, AsamCol, AsamStatistic, AsamTooltip, AsamIcon } from '@asam-ui/ui';\nimport { ArrowRight, CaretBottom, CaretTop, Warning } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown -- Vue SFC compiler implements :deep and :global selectors. */\n\n:global(h2#card-usage ~ .example .example-showcase) {\n\tbackground-color: var(--el-fill-color) !important;\n}\n\n.el-statistic {\n\t--el-statistic-content-font-size: 28px;\n}\n\n.statistic-card {\n\theight: 100%;\n\tpadding: 20px;\n\tborder-radius: 4px;\n\tbackground-color: var(--el-bg-color-overlay);\n}\n\n.statistic-footer {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tfont-size: 12px;\n\tcolor: var(--el-text-color-regular);\n\tmargin-top: 16px;\n}\n\n.statistic-footer .footer-item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.statistic-footer .footer-item span:last-child {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmargin-left: 4px;\n}\n\n.green {\n\tcolor: var(--el-color-success);\n}\n\n.red {\n\tcolor: var(--el-color-error);\n}\n\n/* stylelint-enable selector-pseudo-class-no-unknown */\n</style>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "d5ba8aabf31950d66cf5d1fc97e957fbb548307dc5cd29c0a069ad90a4273e40",
									"notice": {
										"id": "ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87",
										"url": "/licenses/source-notices/ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt",
										"licenseFilename": "LICENSE-ffa0730822219a7699b924be4d84089f009fe4257457ca301564fed6201e5b87.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/statistic/card.vue",
											"sourceSha256": "9ac53fef15ddf3fcbaa7149f2b4e0b7f988c7e74d870c62bf6e6a86a7167640a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamStep",
			"documentation": "/component-AsamStep.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStep/basic/ts/Demo.vue",
									"sha256": "4acb63f4d4879bd059939937c4c88ae0faed34405c0c420c6187fe2a5a28619c",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSteps :active=\"active\" finish-status=\"success\">\n\t\t\t<AsamStep title=\"准备\" description=\"检查本地内容\" />\n\t\t\t<AsamStep title=\"编辑\" description=\"完成本地修改\" />\n\t\t\t<AsamStep title=\"完成\" description=\"查看结果\" />\n\t\t</AsamSteps>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"active = (active + 1) % 4\"\n\t\t\t>下一状态</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSteps, AsamStep } from '@asam-ui/ui';\nconst active = ref(0);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamStep/basic/js/Demo.vue",
									"sha256": "f5cde7d6c2565bfc4903b7dc109868854404125db09870d769581f295172e3a4",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSteps :active=\"active\" finish-status=\"success\">\n\t\t\t<AsamStep title=\"准备\" description=\"检查本地内容\" />\n\t\t\t<AsamStep title=\"编辑\" description=\"完成本地修改\" />\n\t\t\t<AsamStep title=\"完成\" description=\"查看结果\" />\n\t\t</AsamSteps>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"active = (active + 1) % 4\"\n\t\t\t>下一状态</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSteps, AsamStep } from '@asam-ui/ui';\nconst active = ref(0);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSteps",
			"documentation": "/component-AsamSteps.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/basic/ts/Demo.vue",
									"sha256": "9ae5439bdc70c50306985728bd72dd5153e61b03a00e27573613e99f27102e70",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSteps :active=\"active\" finish-status=\"success\">\n\t\t\t<AsamStep title=\"准备\" description=\"检查本地内容\" />\n\t\t\t<AsamStep title=\"编辑\" description=\"完成本地修改\" />\n\t\t\t<AsamStep title=\"完成\" description=\"查看结果\" />\n\t\t</AsamSteps>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"active = (active + 1) % 4\"\n\t\t\t>下一状态</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSteps, AsamStep } from '@asam-ui/ui';\nconst active = ref(0);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/basic/js/Demo.vue",
									"sha256": "78b6143873837ec72088ff033ceb5928a4e38658e3519d45d4145d0cccb069df",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSteps :active=\"active\" finish-status=\"success\">\n\t\t\t<AsamStep title=\"准备\" description=\"检查本地内容\" />\n\t\t\t<AsamStep title=\"编辑\" description=\"完成本地修改\" />\n\t\t\t<AsamStep title=\"完成\" description=\"查看结果\" />\n\t\t</AsamSteps>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"active = (active + 1) % 4\"\n\t\t\t>下一状态</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamSteps, AsamStep } from '@asam-ui/ui';\nconst active = ref(0);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-basic/ts/Demo.vue",
									"sha256": "fa1a6245d1479d493643854cb281e928905c45de3011d8d98dde8f59851ce1f3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"active\" finish-status=\"success\">\n\t\t<AsamStep title=\"步骤 1\" />\n\t\t<AsamStep title=\"步骤 2\" />\n\t\t<AsamStep title=\"步骤 3\" />\n\t</AsamSteps>\n\n\t<AsamButton type=\"default\" style=\"margin-top: 12px\" @click=\"next\">下一步</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapBasicDemo' });\nimport { AsamSteps, AsamStep, AsamButton } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst active = ref(0);\n\nconst next = () => {\n\tif (active.value++ > 2) active.value = 0;\n};\n</script>\n",
									"originalSourceSha256": "8378a8f05927ed8492528a3231f31c401a41ee2ed38397381af1ca872bb271fd",
									"notice": {
										"id": "ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040",
										"url": "/licenses/source-notices/ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt",
										"licenseFilename": "LICENSE-ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/basic.vue",
											"sourceSha256": "7c2e19dc6449c336c4a287b19696045694f6ec6f917f86a70d72d5d6c395fe59",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-basic/js/Demo.vue",
									"sha256": "a91ec7533ea4e373aa078fa1c7863a8cf9008e16a80ad27bbaab69b36000ca3c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"active\" finish-status=\"success\">\n\t\t<AsamStep title=\"步骤 1\" />\n\t\t<AsamStep title=\"步骤 2\" />\n\t\t<AsamStep title=\"步骤 3\" />\n\t</AsamSteps>\n\n\t<AsamButton type=\"default\" style=\"margin-top: 12px\" @click=\"next\">下一步</AsamButton>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapBasicDemo' });\nimport { AsamSteps, AsamStep, AsamButton } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst active = ref(0);\nconst next = () => {\n\tif (active.value++ > 2) active.value = 0;\n};\n</script>\n",
									"originalSourceSha256": "5d0649b19bc1bdc6f3add6aca980a5580461a011f3ec501e01db549e3f7ae533",
									"notice": {
										"id": "ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040",
										"url": "/licenses/source-notices/ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt",
										"licenseFilename": "LICENSE-ed26bec25af99285dd70e74bc6547cc07f62b18d3d983beffc7644a82c5f1040.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/basic.vue",
											"sourceSha256": "7c2e19dc6449c336c4a287b19696045694f6ec6f917f86a70d72d5d6c395fe59",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-with-status",
					"title": "含状态的步骤条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-with-status/ts/Demo.vue",
									"sha256": "e19e957f3f31d57194f8662e4a8b0b3044002da1f5412d345f5ae736ef27bb57",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :space=\"200\" :active=\"1\" finish-status=\"success\">\n\t\t<AsamStep title=\"完成\" />\n\t\t<AsamStep title=\"处理中\" />\n\t\t<AsamStep title=\"步骤 3\" />\n\t</AsamSteps>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapWithStatusDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "5b86c68a8398ac180d99d4e961b94f8137186fd3a46cbe9058567859630e3d09",
									"notice": {
										"id": "f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439",
										"url": "/licenses/source-notices/f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt",
										"licenseFilename": "LICENSE-f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/with-status.vue",
											"sourceSha256": "30188fe1f7560db4eb05bbc1f2f0abc6340e04a409035e0977ab5b143ff2ab78",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-with-status/js/Demo.vue",
									"sha256": "77c680c7e7f3a1071f0b0c923ec5ddc36369a491f728b76ff00137dc9e0dc05f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :space=\"200\" :active=\"1\" finish-status=\"success\">\n\t\t<AsamStep title=\"完成\" />\n\t\t<AsamStep title=\"处理中\" />\n\t\t<AsamStep title=\"步骤 3\" />\n\t</AsamSteps>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapWithStatusDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "f66ee06d151d95595fd920ad5f9e13fc9522c06a1d95abd8c50a8d334f852ec1",
									"notice": {
										"id": "f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439",
										"url": "/licenses/source-notices/f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt",
										"licenseFilename": "LICENSE-f9817102e1b71083424cc6328e7f9e5d0ede1a855df12ce2bc560fc9bd44d439.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/with-status.vue",
											"sourceSha256": "30188fe1f7560db4eb05bbc1f2f0abc6340e04a409035e0977ab5b143ff2ab78",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-centered",
					"title": "居中的步骤条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-centered/ts/Demo.vue",
									"sha256": "37c07f4fcc6d33d55133b955e8b0c719f0da85632278b246815b55327a73f151",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"2\" align-center>\n\t\t<AsamStep title=\"步骤 1\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 2\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 3\" description=\"示例说明\" />\n\t</AsamSteps>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapCenteredDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "974ad80b95346d4d359b44689e4de7f7d485e31801586c7822cabe34b183a7ee",
									"notice": {
										"id": "c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2",
										"url": "/licenses/source-notices/c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt",
										"licenseFilename": "LICENSE-c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/centered.vue",
											"sourceSha256": "0ca444cef7319a12886ab8b33e8555133ba2f8ad83911551926db010de284527",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-centered/js/Demo.vue",
									"sha256": "3c74303535ab39649ca712e0f277567471d0662ec4cb6e237227baebb1cd977d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"2\" align-center>\n\t\t<AsamStep title=\"步骤 1\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 2\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 3\" description=\"示例说明\" />\n\t</AsamSteps>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapCenteredDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "d03076660121fc65003828744411489bc15b3aceb891fff18e5cd16a48a18cbd",
									"notice": {
										"id": "c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2",
										"url": "/licenses/source-notices/c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt",
										"licenseFilename": "LICENSE-c19a87c9d35f8d8be29dd34ae3b4fa79bc1533401cca0df65db67e54d66264b2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/centered.vue",
											"sourceSha256": "0ca444cef7319a12886ab8b33e8555133ba2f8ad83911551926db010de284527",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-with-description",
					"title": "文字描述",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-with-description/ts/Demo.vue",
									"sha256": "edbfc0ba145abee3911f58ff0f3aa8b270f34f4a37b8884fff2e4ddd73d18ca6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"1\">\n\t\t<AsamStep title=\"步骤 1\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 2\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 3\" description=\"示例说明\" />\n\t</AsamSteps>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapWithDescriptionDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "f977fdca9892494af96c84940145c6d64bbdf432dc53b172d7226eeff306c42c",
									"notice": {
										"id": "245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a",
										"url": "/licenses/source-notices/245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt",
										"licenseFilename": "LICENSE-245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/with-description.vue",
											"sourceSha256": "e2f022bcbe23d0619cf5aa1de82f10b97bbb4c05f10596d5a15b085d932d9ba1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-with-description/js/Demo.vue",
									"sha256": "101a82acb0612382fd31f7338250ce29c0101b48e1b01c1f12f10f031dc18cec",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"1\">\n\t\t<AsamStep title=\"步骤 1\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 2\" description=\"示例说明\" />\n\t\t<AsamStep title=\"步骤 3\" description=\"示例说明\" />\n\t</AsamSteps>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapWithDescriptionDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "dff8da5a7ff71d33c6d6dd6354f0824cd422f7a6f0780dcb9dfb5297d7941074",
									"notice": {
										"id": "245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a",
										"url": "/licenses/source-notices/245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt",
										"licenseFilename": "LICENSE-245bd0b321ae7cf727c575307a8088c00e2343c49ca8b3a601bdb99d2e871f7a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/with-description.vue",
											"sourceSha256": "e2f022bcbe23d0619cf5aa1de82f10b97bbb4c05f10596d5a15b085d932d9ba1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-with-icon",
					"title": "使用图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-with-icon/ts/Demo.vue",
									"sha256": "871f3e7c921da7cd9d56dda2ab11517f1c20edd42a62e9fdb681c4b1531fefbc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"1\">\n\t\t<AsamStep title=\"步骤 1\" :icon=\"Edit\" />\n\t\t<AsamStep title=\"步骤 2\" :icon=\"Upload\" />\n\t\t<AsamStep title=\"步骤 3\" :icon=\"Picture\" />\n\t</AsamSteps>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapWithIconDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n\nimport { Edit, Picture, Upload } from '@asam-ui/icons-vue';\n</script>\n",
									"originalSourceSha256": "4681ff9a7860a5d112bbb3fa3aede49b69aabb10f636a512915c073cee7de86f",
									"notice": {
										"id": "9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687",
										"url": "/licenses/source-notices/9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt",
										"licenseFilename": "LICENSE-9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/with-icon.vue",
											"sourceSha256": "ab134d2b9e5e0ecb3b1b133fe6166fd612b5c6aba2de0e9a905dc5aa3541ea96",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-with-icon/js/Demo.vue",
									"sha256": "512a9965c16fc905c19f2652a0aec126f7fee80deac6759a2bde814381bbdad1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt\n-->\n<template>\n\t<AsamSteps style=\"max-width: 600px\" :active=\"1\">\n\t\t<AsamStep title=\"步骤 1\" :icon=\"Edit\" />\n\t\t<AsamStep title=\"步骤 2\" :icon=\"Upload\" />\n\t\t<AsamStep title=\"步骤 3\" :icon=\"Picture\" />\n\t</AsamSteps>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapWithIconDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\nimport { Edit, Picture, Upload } from '@asam-ui/icons-vue';\n</script>\n",
									"originalSourceSha256": "cb15d01cebcb38cdab30a26a46cf827c87e4f4100de8c2c7c258239287fcdd75",
									"notice": {
										"id": "9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687",
										"url": "/licenses/source-notices/9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt",
										"licenseFilename": "LICENSE-9188d046dbb665094a3662e7cbefdf2a9b288d18534ea94958303c528aace687.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/with-icon.vue",
											"sourceSha256": "ab134d2b9e5e0ecb3b1b133fe6166fd612b5c6aba2de0e9a905dc5aa3541ea96",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-vertical",
					"title": "垂直布局",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-vertical/ts/Demo.vue",
									"sha256": "d92bdd81c1e1dea9fa3580413788a8203332bf84af299611f991aac1e739516c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt\n-->\n<template>\n\t<div style=\"height: 300px; max-width: 600px\">\n\t\t<AsamSteps direction=\"vertical\" :active=\"1\">\n\t\t\t<AsamStep title=\"步骤 1\" />\n\t\t\t<AsamStep title=\"步骤 2\" />\n\t\t\t<AsamStep title=\"步骤 3\" />\n\t\t</AsamSteps>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapVerticalDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "4276b08a144cfb960df3b57dab5abd1ab1df94903da6ea5e1b23600530b575f4",
									"notice": {
										"id": "e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba",
										"url": "/licenses/source-notices/e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt",
										"licenseFilename": "LICENSE-e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/vertical.vue",
											"sourceSha256": "c43ecef7f0647c2f1c73b1eb059c41420c3c631610a60fe102fcd5cc1e422dc2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-vertical/js/Demo.vue",
									"sha256": "0d5b49df6e3dd398916ba666e60771be50860695ccbe137acf0604ec1d54ea1b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt\n-->\n<template>\n\t<div style=\"height: 300px; max-width: 600px\">\n\t\t<AsamSteps direction=\"vertical\" :active=\"1\">\n\t\t\t<AsamStep title=\"步骤 1\" />\n\t\t\t<AsamStep title=\"步骤 2\" />\n\t\t\t<AsamStep title=\"步骤 3\" />\n\t\t</AsamSteps>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapVerticalDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "6c109febd8b89e5a867aa1291b406ed427bc36f01b42077b114e498884eb02ca",
									"notice": {
										"id": "e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba",
										"url": "/licenses/source-notices/e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt",
										"licenseFilename": "LICENSE-e1afb0599071a6397791637d6820a31f9c15eb00644d84284a8c1c4ef96882ba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/vertical.vue",
											"sourceSha256": "c43ecef7f0647c2f1c73b1eb059c41420c3c631610a60fe102fcd5cc1e422dc2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-simple",
					"title": "简洁风格的步骤条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-simple/ts/Demo.vue",
									"sha256": "74c3c4251c110b0d7566706dab5fdcacf0ed6e7441665d8bbd19ed1afc4ee192",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt\n-->\n<template>\n\t<AsamSteps class=\"mb-4\" style=\"max-width: 600px\" :space=\"200\" :active=\"1\" simple>\n\t\t<AsamStep title=\"步骤 1\" :icon=\"Edit\" />\n\t\t<AsamStep title=\"步骤 2\" :icon=\"UploadFilled\" />\n\t\t<AsamStep title=\"步骤 3\" :icon=\"Picture\" />\n\t</AsamSteps>\n\n\t<AsamSteps style=\"max-width: 600px\" :active=\"1\" finish-status=\"success\" simple>\n\t\t<AsamStep title=\"步骤 1\" />\n\t\t<AsamStep title=\"步骤 2\" />\n\t\t<AsamStep title=\"步骤 3\" />\n\t</AsamSteps>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamStepsCapSimpleDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\n\nimport { Edit, Picture, UploadFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "8ba6e8c964e9db9df059ba48813fb12711f5d7ae9d7ff01faf9a3f226b9faa2a",
									"notice": {
										"id": "9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08",
										"url": "/licenses/source-notices/9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt",
										"licenseFilename": "LICENSE-9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/simple.vue",
											"sourceSha256": "6fe136cb418e624ba5c06d735e6b96906aedc6390e3fba43bb1ec5f9b2f59d33",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSteps/cap-simple/js/Demo.vue",
									"sha256": "b8e3c4e42156428a033aa82f1581dccba36fca05c24bce9a5f50dc753898a08c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt\n-->\n<template>\n\t<AsamSteps class=\"mb-4\" style=\"max-width: 600px\" :space=\"200\" :active=\"1\" simple>\n\t\t<AsamStep title=\"步骤 1\" :icon=\"Edit\" />\n\t\t<AsamStep title=\"步骤 2\" :icon=\"UploadFilled\" />\n\t\t<AsamStep title=\"步骤 3\" :icon=\"Picture\" />\n\t</AsamSteps>\n\n\t<AsamSteps style=\"max-width: 600px\" :active=\"1\" finish-status=\"success\" simple>\n\t\t<AsamStep title=\"步骤 1\" />\n\t\t<AsamStep title=\"步骤 2\" />\n\t\t<AsamStep title=\"步骤 3\" />\n\t</AsamSteps>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamStepsCapSimpleDemo' });\nimport { AsamSteps, AsamStep } from '@asam-ui/ui';\nimport { Edit, Picture, UploadFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mb-4 {\n\tmargin-bottom: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "bc4b7147c6f0f4c902e4c6e12a0624d815387efb7313bee2ad65ff44e3581ff1",
									"notice": {
										"id": "9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08",
										"url": "/licenses/source-notices/9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt",
										"licenseFilename": "LICENSE-9c857ee3f3ba3ea93574f58eb8f00f1bfc77aa31eae3081b610ded09405b5b08.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/steps/simple.vue",
											"sourceSha256": "6fe136cb418e624ba5c06d735e6b96906aedc6390e3fba43bb1ec5f9b2f59d33",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSubMenu",
			"documentation": "/component-AsamSubMenu.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSubMenu/basic/ts/Demo.vue",
									"sha256": "23b8a8c9c6919c0b909e7e01acd13573f89bcfd5fe88230bf2424fe94aa41da3",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSubMenuBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSubMenu/basic/js/Demo.vue",
									"sha256": "ebba9141ad5b575e37a14a149c20dd20d4e46bccc081da529a4bfdd65c8050e4",
									"source": "<template>\n\t<AsamMenu default-active=\"overview\" @select=\"selected = $event\">\n\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t<AsamSubMenu index=\"records\">\n\t\t\t<template #title>记录</template>\n\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t</AsamMenuItemGroup>\n\t\t</AsamSubMenu>\n\t</AsamMenu>\n\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSubMenuBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSubMenu/popup-container/ts/Demo.vue",
									"sha256": "d3c8c4adc7588339721e1feb8b3af22bcefe1f0dedc1244331775b5763f8c656",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamMenu mode=\"horizontal\" default-active=\"overview\" @select=\"selected = $event\">\n\t\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"records\" :teleported=\"globalPopup\">\n\t\t\t\t<template #title>记录</template>\n\t\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t\t</AsamMenuItemGroup>\n\t\t\t</AsamSubMenu>\n\t\t</AsamMenu>\n\t\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSubMenuBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSubMenu/popup-container/js/Demo.vue",
									"sha256": "01562b42ac8defebd1a59e58dd5624b26d5b3e8d08214d3d2237d808fd6b8440",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamMenu mode=\"horizontal\" default-active=\"overview\" @select=\"selected = $event\">\n\t\t\t<AsamMenuItem index=\"overview\">概览</AsamMenuItem>\n\t\t\t<AsamSubMenu index=\"records\" :teleported=\"globalPopup\">\n\t\t\t\t<template #title>记录</template>\n\t\t\t\t<AsamMenuItemGroup title=\"本地记录\">\n\t\t\t\t\t<AsamMenuItem index=\"draft\">草稿</AsamMenuItem>\n\t\t\t\t\t<AsamMenuItem index=\"locked\" disabled>锁定记录</AsamMenuItem>\n\t\t\t\t</AsamMenuItemGroup>\n\t\t\t</AsamSubMenu>\n\t\t</AsamMenu>\n\t\t<p class=\"example-paragraph\" role=\"status\">选择：{{ selected }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSubMenuBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMenu, AsamMenuItem, AsamSubMenu, AsamMenuItemGroup } from '@asam-ui/ui';\nconst selected = ref('overview');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTabPane",
			"documentation": "/component-AsamTabPane.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabPane/basic/ts/Demo.vue",
									"sha256": "42ea75e693c50fe37fb1a0f8fc22fa8d8d07d85752e1cddb72f2e702aaa2c5f4",
									"source": "<template>\n\t<AsamTabs\n\t\t:model-value=\"active\"\n\t\t:items=\"items\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') active = value;\n\t\t\t}\n\t\t\"\n\t\t@change=\"changes++\"\n\t>\n\t\t<template #label=\"{ item }\">{{ item.label }}（{{ item.count ?? 0 }}）</template>\n\t</AsamTabs>\n\t<p class=\"example-paragraph\" role=\"status\">当前 {{ active }}；变更 {{ changes }} 次</p>\n\t<AsamTabs\n\t\t:model-value=\"pane\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') pane = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamTabPane label=\"概览\" name=\"overview\">\n\t\t\t<p class=\"example-paragraph\">概览内容</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"明细\" name=\"detail\" lazy>\n\t\t\t<p class=\"example-paragraph\">延迟挂载的明细</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"暂不可用\" name=\"disabled\" disabled />\n\t</AsamTabs>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTabPaneBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nimport type { AsamTabItem } from '@asam-ui/ui';\nconst active = ref('all');\nconst pane = ref('overview');\nconst changes = ref(0);\nconst items: AsamTabItem[] = [\n\t{ label: '全部', value: 'all', count: 3 },\n\t{ label: '草稿', value: 'draft', count: 1 },\n\t{ label: '锁定', value: 'locked', disabled: true }\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTabPane/basic/js/Demo.vue",
									"sha256": "f42023108c3610cf6283f5fe0cbc48ed65fb5638df18f0bad9832bd6a1a84280",
									"source": "<template>\n\t<AsamTabs\n\t\t:model-value=\"active\"\n\t\t:items=\"items\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') active = value;\n\t\t\t}\n\t\t\"\n\t\t@change=\"changes++\"\n\t>\n\t\t<template #label=\"{ item }\">{{ item.label }}（{{ item.count ?? 0 }}）</template>\n\t</AsamTabs>\n\t<p class=\"example-paragraph\" role=\"status\">当前 {{ active }}；变更 {{ changes }} 次</p>\n\t<AsamTabs\n\t\t:model-value=\"pane\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'string') pane = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamTabPane label=\"概览\" name=\"overview\">\n\t\t\t<p class=\"example-paragraph\">概览内容</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"明细\" name=\"detail\" lazy>\n\t\t\t<p class=\"example-paragraph\">延迟挂载的明细</p>\n\t\t</AsamTabPane>\n\t\t<AsamTabPane label=\"暂不可用\" name=\"disabled\" disabled />\n\t</AsamTabs>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTabPaneBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTabs, AsamTabPane } from '@asam-ui/ui';\nconst active = ref('all');\nconst pane = ref('overview');\nconst changes = ref(0);\nconst items = [\n\t{ label: '全部', value: 'all', count: 3 },\n\t{ label: '草稿', value: 'draft', count: 1 },\n\t{ label: '锁定', value: 'locked', disabled: true }\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTableColumn",
			"documentation": "/component-AsamTableColumn.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableColumn/basic/ts/Demo.vue",
									"sha256": "9758d4e6c403424abf1aee0e3864f9758301a03c16ca3e5c5d4ed7a32c20ac17",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<label>\n\t\t\t<span>控件密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换本地加载状态</AsamButton\n\t\t>\n\t\t<AsamTable\n\t\t\tv-bind=\"{ data: rows, rowKey: 'id', selectable: true, loading, size }\"\n\t\t\t@selection-change=\"selection = $event\"\n\t\t>\n\t\t\t<template #toolbar=\"{ selection: current }\">\n\t\t\t\t<span>已选 {{ current.length }} 项</span>\n\t\t\t</template>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" min-width=\"150\">\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span>{{ row.name }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn\n\t\t\t\tv-bind=\"{ prop: 'count', label: '数量', sortable: true, width: 100 }\"\n\t\t\t/>\n\t\t\t<template #empty>没有本地记录</template>\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" role=\"status\">选中键：{{ selection.map((row) => row.id).join(', ') }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableColumnBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\ninterface Row {\n\tid: number;\n\tname: string;\n\tcount: number;\n}\nconst rows: Row[] = [\n\t{ id: 1, name: '本地草稿', count: 3 },\n\t{ id: 2, name: '本地记录', count: 8 }\n];\nconst selection = ref<Row[]>([]);\nconst loading = ref(false);\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst size = ref<AsamControlSize>('default');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableColumn/basic/js/Demo.vue",
									"sha256": "7c6ce7600e1b1deb2b76efa06b0149d9ee17a27530cec687c95e99def9ebe4b6",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<label>\n\t\t\t<span>控件密度</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"value in sizes\" :key=\"value\" :label=\"value\" :value=\"value\">{{\n\t\t\t\t\tvalue\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换本地加载状态</AsamButton\n\t\t>\n\t\t<AsamTable\n\t\t\tv-bind=\"{ data: rows, rowKey: 'id', selectable: true, loading, size }\"\n\t\t\t@selection-change=\"selection = $event\"\n\t\t>\n\t\t\t<template #toolbar=\"{ selection: current }\">\n\t\t\t\t<span>已选 {{ current.length }} 项</span>\n\t\t\t</template>\n\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" min-width=\"150\">\n\t\t\t\t<template #default=\"{ row }\">\n\t\t\t\t\t<span>{{ row.name }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<AsamTableColumn\n\t\t\t\tv-bind=\"{ prop: 'count', label: '数量', sortable: true, width: 100 }\"\n\t\t\t/>\n\t\t\t<template #empty>没有本地记录</template>\n\t\t</AsamTable>\n\t\t<p class=\"example-paragraph\" role=\"status\">选中键：{{ selection.map((row) => row.id).join(', ') }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableColumnBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst rows = [\n\t{ id: 1, name: '本地草稿', count: 3 },\n\t{ id: 2, name: '本地记录', count: 8 }\n];\nconst selection = ref([]);\nconst loading = ref(false);\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('default');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "完整作用域插槽与真实半选行",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableColumn/slots/ts/Demo.vue",
									"sha256": "080d7f868ebc69112b1ff30b6ccadde4776bae77141841c549ea5f34f93b6184",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<p class=\"example-paragraph\" role=\"status\">父筛选值 {{ filtered.join(',') || '空' }}；事件 {{ last }}</p>\n\t\t<AsamTable\n\t\t\tref=\"table\"\n\t\t\t:data=\"rows\"\n\t\t\tselectable\n\t\t\trow-key=\"id\"\n\t\t\t:tree-props=\"{ checkStrictly: false }\"\n\t\t\t@sort-change=\"last = `排序 ${$event.prop ?? '清空'}`\"\n\t\t\t@filter-change=\"last = JSON.stringify($event)\"\n\t\t>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn type=\"expand\" label=\"详情\">\n\t\t\t\t<template #expand=\"{ expanded, expandable }\">\n\t\t\t\t\t<span>{{ expandable ? (expanded ? '收起' : '展开') : '不可展开' }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #default=\"{ row }\">{{ row.name }} 的完整详情</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" sortable>\n\t\t\t\t<template #header=\"{ column, $index }\">{{ $index }} · {{ column.label }}</template>\n\t\t\t\t<template #default=\"{ row, $index }\">{{ $index + 1 }} · {{ row.name }}</template>\n\t\t\t</AsamTableColumn>\n\t\t\t<!-- @vue-generic {Row} -->\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"group\"\n\t\t\t\tlabel=\"分类\"\n\t\t\t\tcolumn-key=\"group\"\n\t\t\t\t:filters=\"[\n\t\t\t\t\t{ text: '甲', value: 'a' },\n\t\t\t\t\t{ text: '乙', value: 'b' }\n\t\t\t\t]\"\n\t\t\t\t:filtered-value=\"filtered\"\n\t\t\t\t:filter-method=\"(value, row) => row.group === value\"\n\t\t\t>\n\t\t\t\t<template #filter-icon=\"{ filterOpened }\">\n\t\t\t\t\t<span>{{ filterOpened ? '收起筛选' : '打开筛选' }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamTable>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"table?.toggleRowSelection(rows[0].children![0], true)\"\n\t\t\t>选择单个子行</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"half = table?.getHalfSelectionRows().map((row) => row.id) ?? []\"\n\t\t>\n\t\t\t读取半选父行\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\ttable?.clearSelection();\n\t\t\t\thalf = [];\n\t\t\t\"\n\t\t>\n\t\t\t清空选择\n\t\t</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">半选父行 {{ half.join(',') }}</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableColumnSlotsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nimport type { AsamTableExpose } from '@asam-ui/ui';\ninterface Row {\n\tid: number;\n\tname: string;\n\tgroup: string;\n\tchildren?: Row[];\n}\nconst rows: Row[] = [\n\t{\n\t\tid: 1,\n\t\tname: '父行',\n\t\tgroup: 'a',\n\t\tchildren: [\n\t\t\t{ id: 2, name: '子行一', group: 'a' },\n\t\t\t{ id: 3, name: '子行二', group: 'b' }\n\t\t]\n\t},\n\t{ id: 4, name: '另一行', group: 'b' }\n];\nconst table = ref<AsamTableExpose<Row>>();\nconst half = ref<number[]>([]);\nconst filtered = ref<string[]>([]);\nconst last = ref('尚未触发');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableColumn/slots/js/Demo.vue",
									"sha256": "4fbe33d01bbe8088fefc34efdcbacc570d2001bb3d8eaff857aa818481b25cfc",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<p class=\"example-paragraph\" role=\"status\">父筛选值 {{ filtered.join(',') || '空' }}；事件 {{ last }}</p>\n\t\t<AsamTable\n\t\t\tref=\"table\"\n\t\t\t:data=\"rows\"\n\t\t\tselectable\n\t\t\trow-key=\"id\"\n\t\t\t:tree-props=\"{ checkStrictly: false }\"\n\t\t\t@sort-change=\"last = `排序 ${$event.prop ?? '清空'}`\"\n\t\t\t@filter-change=\"last = JSON.stringify($event)\"\n\t\t>\n\t\t\t<AsamTableColumn type=\"expand\" label=\"详情\">\n\t\t\t\t<template #expand=\"{ expanded, expandable }\">\n\t\t\t\t\t<span>{{ expandable ? (expanded ? '收起' : '展开') : '不可展开' }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #default=\"{ row }\">{{ row.name }} 的完整详情</template>\n\t\t\t</AsamTableColumn>\n\n\t\t\t<AsamTableColumn prop=\"name\" label=\"名称\" sortable>\n\t\t\t\t<template #header=\"{ column, $index }\">{{ $index }} · {{ column.label }}</template>\n\t\t\t\t<template #default=\"{ row, $index }\">{{ $index + 1 }} · {{ row.name }}</template>\n\t\t\t</AsamTableColumn>\n\n\t\t\t<AsamTableColumn\n\t\t\t\tprop=\"group\"\n\t\t\t\tlabel=\"分类\"\n\t\t\t\tcolumn-key=\"group\"\n\t\t\t\t:filters=\"[\n\t\t\t\t\t{ text: '甲', value: 'a' },\n\t\t\t\t\t{ text: '乙', value: 'b' }\n\t\t\t\t]\"\n\t\t\t\t:filtered-value=\"filtered\"\n\t\t\t\t:filter-method=\"(value, row) => row.group === value\"\n\t\t\t>\n\t\t\t\t<template #filter-icon=\"{ filterOpened }\">\n\t\t\t\t\t<span>{{ filterOpened ? '收起筛选' : '打开筛选' }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamTableColumn>\n\t\t</AsamTable>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"table?.toggleRowSelection(rows[0].children[0], true)\"\n\t\t\t>选择单个子行</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"half = table?.getHalfSelectionRows().map((row) => row.id) ?? []\"\n\t\t>\n\t\t\t读取半选父行\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\ttable?.clearSelection();\n\t\t\t\thalf = [];\n\t\t\t\"\n\t\t>\n\t\t\t清空选择\n\t\t</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">半选父行 {{ half.join(',') }}</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableColumnSlotsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTable, AsamTableColumn } from '@asam-ui/ui';\nconst rows = [\n\t{\n\t\tid: 1,\n\t\tname: '父行',\n\t\tgroup: 'a',\n\t\tchildren: [\n\t\t\t{ id: 2, name: '子行一', group: 'a' },\n\t\t\t{ id: 3, name: '子行二', group: 'b' }\n\t\t]\n\t},\n\t{ id: 4, name: '另一行', group: 'b' }\n];\nconst table = ref();\nconst half = ref([]);\nconst filtered = ref([]);\nconst last = ref('尚未触发');\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTableV2",
			"documentation": "/component-AsamTableV2.html",
			"demos": [
				{
					"id": "density",
					"title": "四档视觉尺寸与原生行高",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/density/ts/Demo.vue",
									"sha256": "b69bbec90957f6ae1c2fd958356601365dfaec1917dfe3a99989dda538517255",
									"source": "<template>\n\t<label>\n\t\tASAM 视觉尺寸\n\t\t<AsamSelect v-model=\"size\">\n\t\t\t<AsamOption v-for=\"item in sizes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\titem\n\t\t\t}}</AsamOption>\n\t\t</AsamSelect>\n\t</label>\n\t<p class=\"example-paragraph\">原生 rowHeight 保持 50；ASAM 四档只改变视觉 tokens。</p>\n\t<AsamTableV2\n\t\taria-label=\"四档视觉尺寸示例\"\n\t\t:size=\"size\"\n\t\t:width=\"360\"\n\t\t:height=\"220\"\n\t\t:columns=\"columns\"\n\t\t:data=\"rows\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2DensityDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamTableV2 } from '@asam-ui/ui';\nimport type { AsamControlSize, AsamTableV2Columns } from '@asam-ui/ui';\n\nconst sizes = ['large', 'big', 'default', 'small'] as const;\nconst size = ref<AsamControlSize>('default');\nconst columns: AsamTableV2Columns<unknown> = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 300 }\n];\nconst rows = Array.from({ length: 20 }, (_, id) => ({ id, name: `记录 ${id + 1}` }));\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/density/js/Demo.vue",
									"sha256": "b8b63037b6a8bda9137318031e2856422d49c5617285983379c1b1a43c7c6feb",
									"source": "<template>\n\t<label>\n\t\tASAM 视觉尺寸\n\t\t<AsamSelect v-model=\"size\">\n\t\t\t<AsamOption v-for=\"item in sizes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\titem\n\t\t\t}}</AsamOption>\n\t\t</AsamSelect>\n\t</label>\n\t<p class=\"example-paragraph\">原生 rowHeight 保持 50；ASAM 四档只改变视觉 tokens。</p>\n\t<AsamTableV2\n\t\taria-label=\"四档视觉尺寸示例\"\n\t\t:size=\"size\"\n\t\t:width=\"360\"\n\t\t:height=\"220\"\n\t\t:columns=\"columns\"\n\t\t:data=\"rows\"\n\t/>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableV2DensityDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamTableV2 } from '@asam-ui/ui';\n\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('default');\nconst columns = [{ key: 'name', dataKey: 'name', title: '名称', width: 300 }];\nconst rows = Array.from({ length: 20 }, (_, id) => ({ id, name: `记录 ${id + 1}` }));\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/basic/ts/Demo.vue",
									"sha256": "635e587dbfb140de94c9cd14720c85d3bbb2c1f5c9d6ca8ac25ac9dad67b8835",
									"source": "<template>\n\t<div class=\"virtual-table-host\">\n\t\t<AsamAutoResizer>\n\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t<AsamTableV2\n\t\t\t\t\tv-bind=\"{ width, height, columns, data: rows, rowKey: 'id', rowHeight: 40 }\"\n\t\t\t\t/>\n\t\t\t</template>\n\t\t</AsamAutoResizer>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2BasicDemo' });\nimport { AsamAutoResizer, AsamTableV2, AsamTableV2Alignment } from '@asam-ui/ui';\nimport type { AsamTableV2Columns } from '@asam-ui/ui';\ninterface Row {\n\tid: number;\n\tname: string;\n\tcount: number;\n}\nconst columns: AsamTableV2Columns<Row> = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 180 },\n\t{ key: 'count', dataKey: 'count', title: '数量', width: 100, align: AsamTableV2Alignment.RIGHT }\n];\nconst rows: Row[] = Array.from({ length: 100 }, (_, index) => ({\n\tid: index,\n\tname: '本地记录 ' + (index + 1),\n\tcount: index + 1\n}));\n</script>\n\n<style scoped>\n.virtual-table-host {\n\theight: 240px;\n\twidth: 100%;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/basic/js/Demo.vue",
									"sha256": "3d1ce88efc34d958f1f0f4b185624a9a9a2ebc9d713a506335c778710ad6b1db",
									"source": "<template>\n\t<div class=\"virtual-table-host\">\n\t\t<AsamAutoResizer>\n\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t<AsamTableV2\n\t\t\t\t\tv-bind=\"{ width, height, columns, data: rows, rowKey: 'id', rowHeight: 40 }\"\n\t\t\t\t/>\n\t\t\t</template>\n\t\t</AsamAutoResizer>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTableV2BasicDemo' });\nimport { AsamAutoResizer, AsamTableV2, AsamTableV2Alignment } from '@asam-ui/ui';\nconst columns = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 180 },\n\t{ key: 'count', dataKey: 'count', title: '数量', width: 100, align: AsamTableV2Alignment.RIGHT }\n];\nconst rows = Array.from({ length: 100 }, (_, index) => ({\n\tid: index,\n\tname: '本地记录 ' + (index + 1),\n\tcount: index + 1\n}));\n</script>\n\n<style scoped>\n.virtual-table-host {\n\theight: 240px;\n\twidth: 100%;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "layout-states",
					"title": "固定与分组、排序过滤和状态组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/layout-states/ts/Demo.vue",
									"sha256": "19f019fdbf305916f9ef1b2513cec53ccf074fb3755d8e7192fd75aa645cae56",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<label>筛选名称 <AsamInput v-model=\"query\" /></label>\n\t\t<AsamCheckboxItem v-model=\"empty\">空数据</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"loading\">显示覆盖层</AsamCheckboxItem>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"compact = !compact\"\n\t\t\t>调整容器宽度</AsamButton\n\t\t>\n\t\t<div :style=\"{ width: compact ? '480px' : '640px', height: '340px', maxWidth: '100%' }\">\n\t\t\t<AsamAutoResizer>\n\t\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t\t<AsamTableV2\n\t\t\t\t\t\t:columns=\"columns\"\n\t\t\t\t\t\t:data=\"empty ? [] : displayed\"\n\t\t\t\t\t\t:fixed-data=\"empty ? [] : [sticky]\"\n\t\t\t\t\t\t:width=\"width\"\n\t\t\t\t\t\t:height=\"height\"\n\t\t\t\t\t\t:header-height=\"[30, 40]\"\n\t\t\t\t\t\t:footer-height=\"36\"\n\t\t\t\t\t\t:sort-state=\"sortState\"\n\t\t\t\t\t\t:row-event-handlers=\"rowEvents\"\n\t\t\t\t\t\t:row-class=\"rowClass\"\n\t\t\t\t\t\trow-key=\"id\"\n\t\t\t\t\t\t@column-sort=\"sort\"\n\t\t\t\t\t\t@scroll=\"scroll = `${$event.scrollTop}:${$event.scrollLeft}`\"\n\t\t\t\t\t\t@end-reached=\"endReached++\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template #header=\"scope\"><GroupHeader v-bind=\"scope\" /></template>\n\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t\t\t\t\t\t共 {{ displayed.length }} 行；滚动 {{ scroll }}；触底\n\t\t\t\t\t\t\t\t{{ endReached }}\n\t\t\t\t\t\t\t\t<span data-testid=\"v2-sort-source\"\n\t\t\t\t\t\t\t\t\t>最近排序请求 {{ lastSortRequest }}</span\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #empty><p class=\"example-paragraph\">没有匹配的记录</p></template>\n\t\t\t\t\t\t<template v-if=\"loading\" #overlay>\n\t\t\t\t\t\t\t<div class=\"ui030-loading-overlay\" role=\"status\">正在加载本地记录</div>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</AsamTableV2>\n\t\t\t\t</template>\n\t\t\t</AsamAutoResizer>\n\t\t</div>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2LayoutStatesDemo' });\nimport { computed, h, ref } from 'vue';\nimport type { FunctionalComponent } from 'vue';\nimport {\n\tAsamInput,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamAutoResizer,\n\tAsamTableV2,\n\tAsamTableV2FixedDir,\n\tAsamTableV2Placeholder,\n\tAsamTableV2SortOrder\n} from '@asam-ui/ui';\nimport type {\n\tAsamTableV2Columns,\n\tAsamTableV2CustomizedHeaderSlotParam,\n\tAsamTableV2ColumnSortParams,\n\tAsamTableV2SortState,\n\tAsamTableV2RowEventHandlers,\n\tAsamTableV2RowClassNameGetter\n} from '@asam-ui/ui';\ninterface Row {\n\tid: number;\n\tname: string;\n\tcount: number;\n\tdetail: string;\n}\nconst rows = ref<Row[]>(\n\tArray.from({ length: 100 }, (_, id) => ({\n\t\tid,\n\t\tname: `记录 ${id + 1}`,\n\t\tcount: 100 - id,\n\t\tdetail: `记录 ${id + 1} 的完整说明`\n\t}))\n);\nconst sticky: Row = { id: -1, name: '固定汇总行', count: 5050, detail: '始终位于表头下方' };\nconst columns: AsamTableV2Columns<unknown> = [\n\t{\n\t\tkey: 'name',\n\t\tdataKey: 'name',\n\t\ttitle: '名称',\n\t\twidth: 180,\n\t\tsortable: true,\n\t\tfixed: AsamTableV2FixedDir.LEFT\n\t},\n\t{ key: 'count', dataKey: 'count', title: '数量', width: 120, sortable: true },\n\t{ key: 'detail', dataKey: 'detail', title: '说明', width: 300 },\n\t{ key: 'id', dataKey: 'id', title: '编号', width: 100, fixed: AsamTableV2FixedDir.RIGHT }\n];\nconst query = ref('');\nconst empty = ref(false);\nconst loading = ref(false);\nconst compact = ref(false);\nconst hovered = ref(-2);\nconst scroll = ref('0:0');\nconst endReached = ref(0);\nconst sortState = ref<AsamTableV2SortState>({});\nconst lastSortRequest = ref('未触发');\nconst displayed = computed(() => rows.value.filter((row) => row.name.includes(query.value)));\nfunction sort({ key, order }: AsamTableV2ColumnSortParams<unknown>): void {\n\tlastSortRequest.value = `${String(key)}:${String(order)}`;\n\t// Native 2.14.7 can emit undefined for a column absent from controlled sortState.\n\tconst nextOrder = order ?? AsamTableV2SortOrder.ASC;\n\tsortState.value = { [key]: nextOrder };\n\trows.value.sort((a, b) => {\n\t\tconst difference =\n\t\t\tkey === 'count'\n\t\t\t\t? a.count - b.count\n\t\t\t\t: a.name.localeCompare(b.name, 'zh-CN', { numeric: true });\n\t\treturn nextOrder === AsamTableV2SortOrder.ASC ? difference : -difference;\n\t});\n}\nconst rowEvents: AsamTableV2RowEventHandlers = {\n\tonMouseenter: ({ rowIndex }) => {\n\t\thovered.value = rowIndex;\n\t},\n\tonMouseleave: () => {\n\t\thovered.value = -2;\n\t}\n};\nconst rowClass: AsamTableV2RowClassNameGetter<unknown> = ({ rowIndex }) =>\n\trowIndex === hovered.value ? 'ui030-hovered' : rowIndex % 2 ? 'ui030-striped' : '';\nconst GroupHeader: FunctionalComponent<AsamTableV2CustomizedHeaderSlotParam> = ({\n\tcells,\n\tcolumns: current,\n\theaderIndex\n}) => {\n\tif (headerIndex === 1) return cells;\n\treturn current.map((column, index) =>\n\t\tcolumn.placeholderSign === AsamTableV2Placeholder\n\t\t\t? cells[index]\n\t\t\t: h(\n\t\t\t\t\t'div',\n\t\t\t\t\t{ class: 'el-table-v2__header-cell', style: { width: `${column.width}px` } },\n\t\t\t\t\tcolumn.fixed ? '固定区' : '记录信息'\n\t\t\t\t)\n\t);\n};\n</script>\n<style>\n.ui030-loading-overlay {\n\theight: 100%;\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--asam-color-surface);\n\topacity: 0.9;\n}\n\n.ui030-hovered {\n\tbackground: var(--asam-color-primary-hover);\n}\n\n.ui030-striped {\n\tbackground: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/layout-states/js/Demo.vue",
									"sha256": "dbfac8a0327039fd85703fc926d43b36af9ae24db631505a2214823655392192",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<label>筛选名称 <AsamInput v-model=\"query\" /></label>\n\t\t<AsamCheckboxItem v-model=\"empty\">空数据</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"loading\">显示覆盖层</AsamCheckboxItem>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"compact = !compact\"\n\t\t\t>调整容器宽度</AsamButton\n\t\t>\n\t\t<div :style=\"{ width: compact ? '480px' : '640px', height: '340px', maxWidth: '100%' }\">\n\t\t\t<AsamAutoResizer>\n\t\t\t\t<template #default=\"{ width, height }\">\n\t\t\t\t\t<AsamTableV2\n\t\t\t\t\t\t:columns=\"columns\"\n\t\t\t\t\t\t:data=\"empty ? [] : displayed\"\n\t\t\t\t\t\t:fixed-data=\"empty ? [] : [sticky]\"\n\t\t\t\t\t\t:width=\"width\"\n\t\t\t\t\t\t:height=\"height\"\n\t\t\t\t\t\t:header-height=\"[30, 40]\"\n\t\t\t\t\t\t:footer-height=\"36\"\n\t\t\t\t\t\t:sort-state=\"sortState\"\n\t\t\t\t\t\t:row-event-handlers=\"rowEvents\"\n\t\t\t\t\t\t:row-class=\"rowClass\"\n\t\t\t\t\t\trow-key=\"id\"\n\t\t\t\t\t\t@column-sort=\"sort\"\n\t\t\t\t\t\t@scroll=\"scroll = `${$event.scrollTop}:${$event.scrollLeft}`\"\n\t\t\t\t\t\t@end-reached=\"endReached++\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<template #header=\"scope\"><GroupHeader v-bind=\"scope\" /></template>\n\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t\t\t\t\t\t共 {{ displayed.length }} 行；滚动 {{ scroll }}；触底\n\t\t\t\t\t\t\t\t{{ endReached }}\n\t\t\t\t\t\t\t\t<span data-testid=\"v2-sort-source\"\n\t\t\t\t\t\t\t\t\t>最近排序请求 {{ lastSortRequest }}</span\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #empty><p class=\"example-paragraph\">没有匹配的记录</p></template>\n\t\t\t\t\t\t<template v-if=\"loading\" #overlay>\n\t\t\t\t\t\t\t<div class=\"ui030-loading-overlay\" role=\"status\">正在加载本地记录</div>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</AsamTableV2>\n\t\t\t\t</template>\n\t\t\t</AsamAutoResizer>\n\t\t</div>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2LayoutStatesDemo' });\nimport { computed, h, ref } from 'vue';\nimport {\n\tAsamInput,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamAutoResizer,\n\tAsamTableV2,\n\tAsamTableV2FixedDir,\n\tAsamTableV2Placeholder,\n\tAsamTableV2SortOrder\n} from '@asam-ui/ui';\nconst rows = ref(\n\tArray.from({ length: 100 }, (_, id) => ({\n\t\tid,\n\t\tname: `记录 ${id + 1}`,\n\t\tcount: 100 - id,\n\t\tdetail: `记录 ${id + 1} 的完整说明`\n\t}))\n);\nconst sticky = { id: -1, name: '固定汇总行', count: 5050, detail: '始终位于表头下方' };\nconst columns = [\n\t{\n\t\tkey: 'name',\n\t\tdataKey: 'name',\n\t\ttitle: '名称',\n\t\twidth: 180,\n\t\tsortable: true,\n\t\tfixed: AsamTableV2FixedDir.LEFT\n\t},\n\t{ key: 'count', dataKey: 'count', title: '数量', width: 120, sortable: true },\n\t{ key: 'detail', dataKey: 'detail', title: '说明', width: 300 },\n\t{ key: 'id', dataKey: 'id', title: '编号', width: 100, fixed: AsamTableV2FixedDir.RIGHT }\n];\nconst query = ref('');\nconst empty = ref(false);\nconst loading = ref(false);\nconst compact = ref(false);\nconst hovered = ref(-2);\nconst scroll = ref('0:0');\nconst endReached = ref(0);\nconst sortState = ref({});\nconst lastSortRequest = ref('未触发');\nconst displayed = computed(() => rows.value.filter((row) => row.name.includes(query.value)));\nfunction sort({ key, order }) {\n\tlastSortRequest.value = `${String(key)}:${String(order)}`;\n\t// Native 2.14.7 can emit undefined for a column absent from controlled sortState.\n\tconst nextOrder = order ?? AsamTableV2SortOrder.ASC;\n\tsortState.value = { [key]: nextOrder };\n\trows.value.sort((a, b) => {\n\t\tconst difference =\n\t\t\tkey === 'count'\n\t\t\t\t? a.count - b.count\n\t\t\t\t: a.name.localeCompare(b.name, 'zh-CN', { numeric: true });\n\t\treturn nextOrder === AsamTableV2SortOrder.ASC ? difference : -difference;\n\t});\n}\nconst rowEvents = {\n\tonMouseenter: ({ rowIndex }) => {\n\t\thovered.value = rowIndex;\n\t},\n\tonMouseleave: () => {\n\t\thovered.value = -2;\n\t}\n};\nconst rowClass = ({ rowIndex }) =>\n\trowIndex === hovered.value ? 'ui030-hovered' : rowIndex % 2 ? 'ui030-striped' : '';\nconst GroupHeader = ({ cells, columns: current, headerIndex }) => {\n\tif (headerIndex === 1) return cells;\n\treturn current.map((column, index) =>\n\t\tcolumn.placeholderSign === AsamTableV2Placeholder\n\t\t\t? cells[index]\n\t\t\t: h(\n\t\t\t\t\t'div',\n\t\t\t\t\t{ class: 'el-table-v2__header-cell', style: { width: `${column.width}px` } },\n\t\t\t\t\tcolumn.fixed ? '固定区' : '记录信息'\n\t\t\t\t)\n\t);\n};\n</script>\n<style>\n.ui030-loading-overlay {\n\theight: 100%;\n\tdisplay: grid;\n\tplace-items: center;\n\tbackground: var(--asam-color-surface);\n\topacity: 0.9;\n}\n\n.ui030-hovered {\n\tbackground: var(--asam-color-primary-hover);\n}\n\n.ui030-striped {\n\tbackground: var(--asam-color-surface);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "renderers",
					"title": "选择与行内编辑（多文件）",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/ts/Demo.vue",
									"sha256": "196812c66c8653d4fa6eacde2d57a73afeaa12705e2fafe6549d9cf89db13843",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t选中 {{ rows.filter((row) => row.checked).length }} 行；首行 {{ rows[0].name }}\n\t\t</p>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"table?.scrollToRow(rows.length - 1, 'end')\"\n\t\t\t>查看最后一行</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"table?.scrollToRow(0, 'start')\"\n\t\t\t>返回首行</AsamButton\n\t\t>\n\t\t<AsamTableV2\n\t\t\tref=\"table\"\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"rows\"\n\t\t\t:width=\"640\"\n\t\t\t:height=\"260\"\n\t\t\trow-key=\"id\"\n\t\t\t:row-height=\"44\"\n\t\t\t:scrollbar-always-on=\"true\"\n\t\t/>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2RenderersDemo' });\nimport { computed, h, ref } from 'vue';\nimport { AsamButton, AsamTableV2, AsamTableV2FixedDir } from '@asam-ui/ui';\nimport type { AsamTableV2Columns, AsamTableV2Expose } from '@asam-ui/ui';\nimport SelectionCell from './SelectionCell.vue';\nimport EditorCell from './EditorCell.vue';\nimport type { Row } from './Row.js';\nconst rows = ref<Row[]>(\n\tArray.from({ length: 200 }, (_, id) => ({\n\t\tid,\n\t\tname: `记录 ${id + 1}`,\n\t\tchecked: false,\n\t\tediting: false\n\t}))\n);\nconst table = ref<AsamTableV2Expose>();\nconst drafts = new Map<number, string>();\nconst columns = computed<AsamTableV2Columns<unknown>>(() => [\n\t{\n\t\tkey: 'selection',\n\t\twidth: 60,\n\t\tfixed: AsamTableV2FixedDir.LEFT,\n\t\theaderCellRenderer: () =>\n\t\t\th(SelectionCell, {\n\t\t\t\tlabel: '选择所有记录',\n\t\t\t\tchecked: rows.value.every((row) => row.checked),\n\t\t\t\tindeterminate:\n\t\t\t\t\trows.value.some((row) => row.checked) &&\n\t\t\t\t\t!rows.value.every((row) => row.checked),\n\t\t\t\tonChange: (checked: boolean) =>\n\t\t\t\t\trows.value.forEach((row) => {\n\t\t\t\t\t\trow.checked = checked;\n\t\t\t\t\t})\n\t\t\t}),\n\t\tcellRenderer: ({ rowData }: { rowData: Row }) =>\n\t\t\th(SelectionCell, {\n\t\t\t\tlabel: `选择记录 ${rowData.id + 1}`,\n\t\t\t\tchecked: rowData.checked,\n\t\t\t\tonChange: (checked: boolean) => {\n\t\t\t\t\trowData.checked = checked;\n\t\t\t\t}\n\t\t\t})\n\t},\n\t{\n\t\tkey: 'name',\n\t\tdataKey: 'name',\n\t\ttitle: '名称（点击编辑）',\n\t\twidth: 360,\n\t\tcellRenderer: ({ rowData }: { rowData: Row }) =>\n\t\t\th(EditorCell, {\n\t\t\t\tlabel: `编辑记录 ${rowData.id + 1}`,\n\t\t\t\tvalue: rowData.name,\n\t\t\t\tediting: rowData.editing,\n\t\t\t\tonStart: () => {\n\t\t\t\t\tdrafts.set(rowData.id, rowData.name);\n\t\t\t\t\trowData.editing = true;\n\t\t\t\t},\n\t\t\t\tonChange: (value: string) => {\n\t\t\t\t\trowData.name = value;\n\t\t\t\t},\n\t\t\t\tonFinish: () => {\n\t\t\t\t\trowData.editing = false;\n\t\t\t\t\tdrafts.delete(rowData.id);\n\t\t\t\t},\n\t\t\t\tonCancel: () => {\n\t\t\t\t\trowData.name = drafts.get(rowData.id) ?? rowData.name;\n\t\t\t\t\trowData.editing = false;\n\t\t\t\t\tdrafts.delete(rowData.id);\n\t\t\t\t}\n\t\t\t})\n\t},\n\t{ key: 'id', dataKey: 'id', title: '稳定行键', width: 140 }\n]);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "EditorCell.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/ts/EditorCell.vue",
									"sha256": "e9a447749118ab680f769fc16912ccbd2f82a887ce9c7b32d4c39806e8ddc0b5",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamInput\n\t\t\tv-if=\"editing\"\n\t\t\tref=\"input\"\n\t\t\t:model-value=\"value\"\n\t\t\t:aria-label=\"label\"\n\t\t\t@input=\"change\"\n\t\t\t@blur=\"emit('finish')\"\n\t\t\t@keydown.enter=\"emit('finish')\"\n\t\t\t@keydown.esc=\"emit('cancel')\"\n\t\t/>\n\t\t<AsamButton type=\"default\" v-else native-type=\"button\" @click=\"emit('start')\">{{\n\t\t\tvalue\n\t\t}}</AsamButton>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamInput, type AsamInputExpose, AsamButton } from '@asam-ui/ui';\n\nimport { nextTick, ref, watch } from 'vue';\nconst props = defineProps<{ value: string; label: string; editing: boolean }>();\nconst emit = defineEmits<{ change: [value: string]; start: []; finish: []; cancel: [] }>();\nconst input = ref<AsamInputExpose>();\nwatch(\n\t() => props.editing,\n\tasync (value) => {\n\t\tif (value) {\n\t\t\tawait nextTick();\n\t\t\tinput.value?.focus();\n\t\t}\n\t}\n);\nfunction change(value: unknown) {\n\tif (typeof value === 'string') emit('change', value);\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "Row.ts",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/ts/Row.ts",
									"sha256": "dbf2c13cc9f37c67628c0c2654cf881fc6f0e6d6dc72f43a5f753ba8fa0944e0",
									"source": "export interface Row {\n\tid: number;\n\tname: string;\n\tchecked: boolean;\n\tediting: boolean;\n}\n"
								},
								{
									"name": "SelectionCell.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/ts/SelectionCell.vue",
									"sha256": "93be7eebffba48ce1102361102abf5eea2973443d28214e32740722923ff07f5",
									"source": "<template>\n\t<AsamCheckboxItem\n\t\t:aria-label=\"label\"\n\t\t:model-value=\"checked\"\n\t\t:indeterminate=\"indeterminate\"\n\t\t@change=\"change\"\n\t/>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamCheckboxItem } from '@asam-ui/ui';\n\ndefineProps<{ checked: boolean; label: string; indeterminate?: boolean }>();\nconst emit = defineEmits<{ change: [checked: boolean] }>();\nfunction change(value: unknown) {\n\tif (typeof value === 'boolean') emit('change', value);\n}\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/js/Demo.vue",
									"sha256": "5e9bf9929a591372d24dfc0c78443452daaa27dacba0f3ee140cd65dd5cce9cc",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t选中 {{ rows.filter((row) => row.checked).length }} 行；首行 {{ rows[0].name }}\n\t\t</p>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"table?.scrollToRow(rows.length - 1, 'end')\"\n\t\t\t>查看最后一行</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"table?.scrollToRow(0, 'start')\"\n\t\t\t>返回首行</AsamButton\n\t\t>\n\t\t<AsamTableV2\n\t\t\tref=\"table\"\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"rows\"\n\t\t\t:width=\"640\"\n\t\t\t:height=\"260\"\n\t\t\trow-key=\"id\"\n\t\t\t:row-height=\"44\"\n\t\t\t:scrollbar-always-on=\"true\"\n\t\t/>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2RenderersDemo' });\nimport { computed, h, ref } from 'vue';\nimport { AsamButton, AsamTableV2, AsamTableV2FixedDir } from '@asam-ui/ui';\nimport SelectionCell from './SelectionCell.vue';\nimport EditorCell from './EditorCell.vue';\nconst rows = ref(\n\tArray.from({ length: 200 }, (_, id) => ({\n\t\tid,\n\t\tname: `记录 ${id + 1}`,\n\t\tchecked: false,\n\t\tediting: false\n\t}))\n);\nconst table = ref();\nconst drafts = new Map();\nconst columns = computed(() => [\n\t{\n\t\tkey: 'selection',\n\t\twidth: 60,\n\t\tfixed: AsamTableV2FixedDir.LEFT,\n\t\theaderCellRenderer: () =>\n\t\t\th(SelectionCell, {\n\t\t\t\tlabel: '选择所有记录',\n\t\t\t\tchecked: rows.value.every((row) => row.checked),\n\t\t\t\tindeterminate:\n\t\t\t\t\trows.value.some((row) => row.checked) &&\n\t\t\t\t\t!rows.value.every((row) => row.checked),\n\t\t\t\tonChange: (checked) =>\n\t\t\t\t\trows.value.forEach((row) => {\n\t\t\t\t\t\trow.checked = checked;\n\t\t\t\t\t})\n\t\t\t}),\n\t\tcellRenderer: ({ rowData }) =>\n\t\t\th(SelectionCell, {\n\t\t\t\tlabel: `选择记录 ${rowData.id + 1}`,\n\t\t\t\tchecked: rowData.checked,\n\t\t\t\tonChange: (checked) => {\n\t\t\t\t\trowData.checked = checked;\n\t\t\t\t}\n\t\t\t})\n\t},\n\t{\n\t\tkey: 'name',\n\t\tdataKey: 'name',\n\t\ttitle: '名称（点击编辑）',\n\t\twidth: 360,\n\t\tcellRenderer: ({ rowData }) =>\n\t\t\th(EditorCell, {\n\t\t\t\tlabel: `编辑记录 ${rowData.id + 1}`,\n\t\t\t\tvalue: rowData.name,\n\t\t\t\tediting: rowData.editing,\n\t\t\t\tonStart: () => {\n\t\t\t\t\tdrafts.set(rowData.id, rowData.name);\n\t\t\t\t\trowData.editing = true;\n\t\t\t\t},\n\t\t\t\tonChange: (value) => {\n\t\t\t\t\trowData.name = value;\n\t\t\t\t},\n\t\t\t\tonFinish: () => {\n\t\t\t\t\trowData.editing = false;\n\t\t\t\t\tdrafts.delete(rowData.id);\n\t\t\t\t},\n\t\t\t\tonCancel: () => {\n\t\t\t\t\trowData.name = drafts.get(rowData.id) ?? rowData.name;\n\t\t\t\t\trowData.editing = false;\n\t\t\t\t\tdrafts.delete(rowData.id);\n\t\t\t\t}\n\t\t\t})\n\t},\n\t{ key: 'id', dataKey: 'id', title: '稳定行键', width: 140 }\n]);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "EditorCell.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/js/EditorCell.vue",
									"sha256": "47ccd2b198cc0f7b9b28c89390e7ddf83bcc6a5c9a50baedab0cf01fde97f84c",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamInput\n\t\t\tv-if=\"editing\"\n\t\t\tref=\"input\"\n\t\t\t:model-value=\"value\"\n\t\t\t:aria-label=\"label\"\n\t\t\t@input=\"change\"\n\t\t\t@blur=\"emit('finish')\"\n\t\t\t@keydown.enter=\"emit('finish')\"\n\t\t\t@keydown.esc=\"emit('cancel')\"\n\t\t/>\n\t\t<AsamButton type=\"default\" v-else native-type=\"button\" @click=\"emit('start')\">{{\n\t\t\tvalue\n\t\t}}</AsamButton>\n\t</div>\n</template>\n<script setup>\nimport { AsamInput, AsamButton } from '@asam-ui/ui';\n\nimport { nextTick, ref, watch } from 'vue';\nconst props = defineProps({\n\tvalue: { type: String, required: true },\n\tlabel: { type: String, required: true },\n\tediting: { type: Boolean, required: true }\n});\nconst emit = defineEmits(['change', 'start', 'finish', 'cancel']);\nconst input = ref();\nwatch(\n\t() => props.editing,\n\tasync (value) => {\n\t\tif (value) {\n\t\t\tawait nextTick();\n\t\t\tinput.value?.focus();\n\t\t}\n\t}\n);\nfunction change(value) {\n\tif (typeof value === 'string') emit('change', value);\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "Row.js",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/js/Row.js",
									"sha256": "8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881",
									"source": "export {};\n"
								},
								{
									"name": "SelectionCell.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/renderers/js/SelectionCell.vue",
									"sha256": "45428fe21064de9ef88a568f2410ba28193688c1c2e0f98246f56d4eaacddf14",
									"source": "<template>\n\t<AsamCheckboxItem\n\t\t:aria-label=\"label\"\n\t\t:model-value=\"checked\"\n\t\t:indeterminate=\"indeterminate\"\n\t\t@change=\"change\"\n\t/>\n</template>\n<script setup>\nimport { AsamCheckboxItem } from '@asam-ui/ui';\n\ndefineProps({\n\tchecked: { type: Boolean, required: true },\n\tlabel: { type: String, required: true },\n\tindeterminate: { type: Boolean, required: false, default: undefined }\n});\nconst emit = defineEmits(['change']);\nfunction change(value) {\n\tif (typeof value === 'boolean') emit('change', value);\n}\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "spans",
					"title": "行列合并（多文件）",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/spans/ts/Demo.vue",
									"sha256": "d49a0bf8370df9cbceb8fb0c49b618fe518885203193fadd847e6ca3e5f62fd2",
									"source": "<template>\n\t<AsamCheckboxItem v-model=\"merge\">合并两行两列</AsamCheckboxItem>\n\t<label\n\t\t>合并方向\n\t\t<AsamSelect v-model=\"mode\">\n\t\t\t<AsamOption value=\"both\" :label=\"'行列同时合并'\">行列同时合并</AsamOption>\n\t\t\t<AsamOption value=\"row\" :label=\"'仅合并行'\">仅合并行</AsamOption>\n\t\t\t<AsamOption value=\"column\" :label=\"'仅合并列'\">仅合并列</AsamOption>\n\t\t</AsamSelect></label\n\t>\n\t<AsamTableV2\n\t\t:columns=\"columns\"\n\t\t:data=\"rows\"\n\t\t:width=\"640\"\n\t\t:height=\"260\"\n\t\t:row-height=\"44\"\n\t\t:cell-props=\"cellProps\"\n\t\trow-key=\"id\"\n\t>\n\t\t<template #row=\"{ cells, rowIndex }\">\n\t\t\t<RowRenderer :cells=\"cells\" :row-index=\"rowIndex\" :merge=\"merge\" :mode=\"mode\" />\n\t\t</template>\n\t</AsamTableV2>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2SpansDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamTableV2 } from '@asam-ui/ui';\nimport type { AsamTableV2Columns, AsamTableV2ExtraCellPropGetter } from '@asam-ui/ui';\nimport RowRenderer from './RowRenderer.vue';\nconst merge = ref(true);\nconst mode = ref<'row' | 'column' | 'both'>('both');\nconst cellProps: AsamTableV2ExtraCellPropGetter<unknown> = ({ rowIndex, columnIndex }) => ({\n\t'data-merged':\n\t\tmerge.value && rowIndex % 2 === 0 && columnIndex === 0\n\t\t\t? mode.value === 'both'\n\t\t\t\t? '2x2'\n\t\t\t\t: mode.value === 'row'\n\t\t\t\t\t? '2x1'\n\t\t\t\t\t: '1x2'\n\t\t\t: undefined\n});\nconst columns: AsamTableV2Columns<unknown> = ['name', 'group', 'count', 'note'].map(\n\t(key, index) => ({\n\t\tkey,\n\t\tdataKey: key,\n\t\ttitle: ['姓名', '分组', '数量', '备注'][index] ?? key,\n\t\twidth: 140\n\t})\n);\nconst rows = Array.from({ length: 100 }, (_, id) => ({\n\tid,\n\tname: `合并记录 ${id + 1}`,\n\tgroup: `分组 ${Math.floor(id / 2)}`,\n\tcount: id,\n\tnote: '独立未合并列'\n}));\n</script>\n"
								},
								{
									"name": "RowRenderer.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/spans/ts/RowRenderer.vue",
									"sha256": "0c5070e665ff132f04630fc8b8143cf143dc4e5fe848bc5bb0eb65c9fa28a5cc",
									"source": "<template><RenderCells /></template>\n<script lang=\"ts\" setup>\nimport { cloneVNode } from 'vue';\nimport type { VNode } from 'vue';\nconst props = defineProps<{\n\tcells: VNode[];\n\trowIndex: number;\n\tmerge: boolean;\n\tmode: 'row' | 'column' | 'both';\n}>();\nconst RenderCells = () => {\n\tconst cells = [...props.cells];\n\tif (!props.merge) return cells;\n\tconst mergeRow = props.mode !== 'column';\n\tconst mergeColumn = props.mode !== 'row';\n\tif (!mergeRow || props.rowIndex % 2 === 0) {\n\t\tcells[0] = cloneVNode(cells[0], {\n\t\t\tstyle: {\n\t\t\t\twidth: mergeColumn ? '280px' : '140px',\n\t\t\t\theight: mergeRow ? '87px' : '44px',\n\t\t\t\talignSelf: 'flex-start',\n\t\t\t\tzIndex: 1,\n\t\t\t\tbackground: 'var(--asam-color-surface)',\n\t\t\t\tborder: '1px solid var(--asam-color-border)'\n\t\t\t},\n\t\t\t'data-merged': '2x2'\n\t\t});\n\t\tif (mergeColumn) cells.splice(1, 1);\n\t} else {\n\t\tcells[0] = cloneVNode(cells[0], { style: { visibility: 'hidden' } });\n\t\tif (mergeColumn) cells[1] = cloneVNode(cells[1], { style: { visibility: 'hidden' } });\n\t}\n\treturn cells;\n};\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/spans/js/Demo.vue",
									"sha256": "4ac6a4f9110762ef69bded4c459f54aa91074a92ed0c7ee015dee501eda99071",
									"source": "<template>\n\t<AsamCheckboxItem v-model=\"merge\">合并两行两列</AsamCheckboxItem>\n\t<label\n\t\t>合并方向\n\t\t<AsamSelect v-model=\"mode\">\n\t\t\t<AsamOption value=\"both\" :label=\"'行列同时合并'\">行列同时合并</AsamOption>\n\t\t\t<AsamOption value=\"row\" :label=\"'仅合并行'\">仅合并行</AsamOption>\n\t\t\t<AsamOption value=\"column\" :label=\"'仅合并列'\">仅合并列</AsamOption>\n\t\t</AsamSelect></label\n\t>\n\t<AsamTableV2\n\t\t:columns=\"columns\"\n\t\t:data=\"rows\"\n\t\t:width=\"640\"\n\t\t:height=\"260\"\n\t\t:row-height=\"44\"\n\t\t:cell-props=\"cellProps\"\n\t\trow-key=\"id\"\n\t>\n\t\t<template #row=\"{ cells, rowIndex }\">\n\t\t\t<RowRenderer :cells=\"cells\" :row-index=\"rowIndex\" :merge=\"merge\" :mode=\"mode\" />\n\t\t</template>\n\t</AsamTableV2>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2SpansDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamTableV2 } from '@asam-ui/ui';\nimport RowRenderer from './RowRenderer.vue';\nconst merge = ref(true);\nconst mode = ref('both');\nconst cellProps = ({ rowIndex, columnIndex }) => ({\n\t'data-merged':\n\t\tmerge.value && rowIndex % 2 === 0 && columnIndex === 0\n\t\t\t? mode.value === 'both'\n\t\t\t\t? '2x2'\n\t\t\t\t: mode.value === 'row'\n\t\t\t\t\t? '2x1'\n\t\t\t\t\t: '1x2'\n\t\t\t: undefined\n});\nconst columns = ['name', 'group', 'count', 'note'].map((key, index) => ({\n\tkey,\n\tdataKey: key,\n\ttitle: ['姓名', '分组', '数量', '备注'][index] ?? key,\n\twidth: 140\n}));\nconst rows = Array.from({ length: 100 }, (_, id) => ({\n\tid,\n\tname: `合并记录 ${id + 1}`,\n\tgroup: `分组 ${Math.floor(id / 2)}`,\n\tcount: id,\n\tnote: '独立未合并列'\n}));\n</script>\n"
								},
								{
									"name": "RowRenderer.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/spans/js/RowRenderer.vue",
									"sha256": "b5ad32261ee6d6169050c0ec0219a957f3ecfcf354087fc8a305a97df342d57e",
									"source": "<template><RenderCells /></template>\n<script setup>\nimport { cloneVNode } from 'vue';\nconst props = defineProps({\n\tcells: { type: Array, required: true },\n\trowIndex: { type: Number, required: true },\n\tmerge: { type: Boolean, required: true },\n\tmode: { type: String, required: true }\n});\nconst RenderCells = () => {\n\tconst cells = [...props.cells];\n\tif (!props.merge) return cells;\n\tconst mergeRow = props.mode !== 'column';\n\tconst mergeColumn = props.mode !== 'row';\n\tif (!mergeRow || props.rowIndex % 2 === 0) {\n\t\tcells[0] = cloneVNode(cells[0], {\n\t\t\tstyle: {\n\t\t\t\twidth: mergeColumn ? '280px' : '140px',\n\t\t\t\theight: mergeRow ? '87px' : '44px',\n\t\t\t\talignSelf: 'flex-start',\n\t\t\t\tzIndex: 1,\n\t\t\t\tbackground: 'var(--asam-color-surface)',\n\t\t\t\tborder: '1px solid var(--asam-color-border)'\n\t\t\t},\n\t\t\t'data-merged': '2x2'\n\t\t});\n\t\tif (mergeColumn) cells.splice(1, 1);\n\t} else {\n\t\tcells[0] = cloneVNode(cells[0], { style: { visibility: 'hidden' } });\n\t\tif (mergeColumn) cells[1] = cloneVNode(cells[1], { style: { visibility: 'hidden' } });\n\t}\n\treturn cells;\n};\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "tree-dynamic",
					"title": "动态树、详情与追加节点（多文件）",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/tree-dynamic/ts/Demo.vue",
									"sha256": "3269be6bf65fc0f5f5c364686c45ce1b210e7ed7f9b93d57dae0652d9777c2b0",
									"source": "<template>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"expanded = expanded.length ? [] : [1]\"\n\t\t>展开或收起父记录</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"changeHeight\"\n\t\t>改变详情行高度</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"appendChild\">追加子记录</AsamButton>\n\t<p class=\"example-paragraph\" role=\"status\">展开键 {{ expanded.join(',') }}；子记录 {{ rows[0].children.length }}</p>\n\t<AsamTableV2\n\t\t:key=\"heightRevision\"\n\t\tv-model:expanded-row-keys=\"expanded\"\n\t\t:default-expanded-row-keys=\"expanded\"\n\t\t:columns=\"columns\"\n\t\t:data=\"rows\"\n\t\t:width=\"640\"\n\t\t:height=\"300\"\n\t\t:estimated-row-height=\"52\"\n\t\texpand-column-key=\"name\"\n\t\trow-key=\"id\"\n\t\t:scrollbar-always-on=\"true\"\n\t>\n\t\t<template #row=\"{ cells, rowData }\">\n\t\t\t<DetailRow :cells=\"cells\" :row-data=\"rowData\" />\n\t\t</template>\n\t</AsamTableV2>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2TreeDynamicDemo' });\nimport { h, ref } from 'vue';\nimport { AsamButton, AsamTableV2 } from '@asam-ui/ui';\nimport type { AsamTableV2Columns } from '@asam-ui/ui';\nimport TreeCell from './TreeCell.vue';\nimport DetailRow from './DetailRow.vue';\ninterface Row {\n\tid: number;\n\tname: string;\n\tdetail?: string;\n\tchildren?: Row[];\n}\nconst rows = ref([\n\t{ id: 1, name: '父记录', children: [{ id: 2, name: '子记录', detail: '短详情。' }] },\n\t...Array.from({ length: 60 }, (_, index) => ({\n\t\tid: index + 10,\n\t\tname: `普通记录 ${index + 1}`,\n\t\tchildren: [] as Row[]\n\t}))\n]);\nconst expanded = ref<number[]>([]);\n// 2.14.7 measures variable rows on mount. Rebuild its height cache after content changes;\n// the host retains both the tree data and controlled expansion keys.\nconst heightRevision = ref(0);\nconst columns: AsamTableV2Columns<unknown> = [\n\t{\n\t\tkey: 'name',\n\t\tdataKey: 'name',\n\t\ttitle: '动态树与详情',\n\t\twidth: 470,\n\t\tcellRenderer: ({ rowData }: { rowData: Row }) =>\n\t\t\th(TreeCell, { name: rowData.name, detail: rowData.detail })\n\t},\n\t{ key: 'id', dataKey: 'id', title: 'ID', width: 100 }\n];\nfunction changeHeight(): void {\n\tconst child = rows.value[0].children[0];\n\tchild.detail = (child.detail?.length ?? 0) > 20 ? '短详情。' : '动态高度详情。'.repeat(30);\n\theightRevision.value += 1;\n}\nfunction appendChild(): void {\n\trows.value[0].children.push({ id: Date.now(), name: '新子记录', detail: '追加后仍保持展开。' });\n\texpanded.value = [1];\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "DetailRow.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/tree-dynamic/ts/DetailRow.vue",
									"sha256": "198c0413bb3fad2c4dee367d133670944e7dcb0c6993316823b6dbaf283a276d",
									"source": "<template>\n\t<div v-if=\"rowData.detail\" class=\"tree-content\">\n\t\t<strong>{{ rowData.name }}</strong>\n\t\t<p class=\"example-paragraph\">{{ rowData.detail }}</p>\n\t</div>\n\t<RenderCells v-else />\n</template>\n<script lang=\"ts\" setup>\nimport type { VNode } from 'vue';\nconst props = defineProps<{ cells: VNode[]; rowData: { name: string; detail?: string } }>();\nconst RenderCells = () => props.cells;\n</script>\n<style scoped>\n.tree-content {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\twhite-space: normal;\n\tpadding: var(--asam-space-sm);\n\tbackground: var(--asam-color-surface);\n}\n\n.tree-content p {\n\tmargin: var(--asam-space-xs) 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "TreeCell.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/tree-dynamic/ts/TreeCell.vue",
									"sha256": "61078b06502b10f44f9659a61c7542d86b17a45cb9152cd42ea0f5d7c95f8593",
									"source": "<template>\n\t<div class=\"tree-content\">\n\t\t<strong>{{ name }}</strong>\n\t\t<p class=\"example-paragraph\" v-if=\"detail\">{{ detail }}</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineProps<{ name: string; detail?: string }>();\n</script>\n<style scoped>\n.tree-content {\n\twhite-space: normal;\n\toverflow-wrap: anywhere;\n\tpadding: var(--asam-space-sm);\n}\n\n.tree-content p {\n\tmargin: var(--asam-space-xs) 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/tree-dynamic/js/Demo.vue",
									"sha256": "f1d9d954dc3a7cb6af4342d4eade7883a5470f1ec756ab79709d5ef44d8afdc4",
									"source": "<template>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"expanded = expanded.length ? [] : [1]\"\n\t\t>展开或收起父记录</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"changeHeight\"\n\t\t>改变详情行高度</AsamButton\n\t>\n\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"appendChild\">追加子记录</AsamButton>\n\t<p class=\"example-paragraph\" role=\"status\">展开键 {{ expanded.join(',') }}；子记录 {{ rows[0].children.length }}</p>\n\t<AsamTableV2\n\t\t:key=\"heightRevision\"\n\t\tv-model:expanded-row-keys=\"expanded\"\n\t\t:default-expanded-row-keys=\"expanded\"\n\t\t:columns=\"columns\"\n\t\t:data=\"rows\"\n\t\t:width=\"640\"\n\t\t:height=\"300\"\n\t\t:estimated-row-height=\"52\"\n\t\texpand-column-key=\"name\"\n\t\trow-key=\"id\"\n\t\t:scrollbar-always-on=\"true\"\n\t>\n\t\t<template #row=\"{ cells, rowData }\">\n\t\t\t<DetailRow :cells=\"cells\" :row-data=\"rowData\" />\n\t\t</template>\n\t</AsamTableV2>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2TreeDynamicDemo' });\nimport { h, ref } from 'vue';\nimport { AsamButton, AsamTableV2 } from '@asam-ui/ui';\nimport TreeCell from './TreeCell.vue';\nimport DetailRow from './DetailRow.vue';\nconst rows = ref([\n\t{ id: 1, name: '父记录', children: [{ id: 2, name: '子记录', detail: '短详情。' }] },\n\t...Array.from({ length: 60 }, (_, index) => ({\n\t\tid: index + 10,\n\t\tname: `普通记录 ${index + 1}`,\n\t\tchildren: []\n\t}))\n]);\nconst expanded = ref([]);\n// 2.14.7 measures variable rows on mount. Rebuild its height cache after content changes;\n// the host retains both the tree data and controlled expansion keys.\nconst heightRevision = ref(0);\nconst columns = [\n\t{\n\t\tkey: 'name',\n\t\tdataKey: 'name',\n\t\ttitle: '动态树与详情',\n\t\twidth: 470,\n\t\tcellRenderer: ({ rowData }) => h(TreeCell, { name: rowData.name, detail: rowData.detail })\n\t},\n\t{ key: 'id', dataKey: 'id', title: 'ID', width: 100 }\n];\nfunction changeHeight() {\n\tconst child = rows.value[0].children[0];\n\tchild.detail = (child.detail?.length ?? 0) > 20 ? '短详情。' : '动态高度详情。'.repeat(30);\n\theightRevision.value += 1;\n}\nfunction appendChild() {\n\trows.value[0].children.push({ id: Date.now(), name: '新子记录', detail: '追加后仍保持展开。' });\n\texpanded.value = [1];\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "DetailRow.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/tree-dynamic/js/DetailRow.vue",
									"sha256": "57d104bce6b82257899449a09ddce22a1a9c838a2235eb00a0e8d68008285a74",
									"source": "<template>\n\t<div v-if=\"rowData.detail\" class=\"tree-content\">\n\t\t<strong>{{ rowData.name }}</strong>\n\t\t<p class=\"example-paragraph\">{{ rowData.detail }}</p>\n\t</div>\n\t<RenderCells v-else />\n</template>\n<script setup>\nconst props = defineProps({\n\tcells: { type: Array, required: true },\n\trowData: { type: Object, required: true }\n});\nconst RenderCells = () => props.cells;\n</script>\n<style scoped>\n.tree-content {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\twhite-space: normal;\n\tpadding: var(--asam-space-sm);\n\tbackground: var(--asam-color-surface);\n}\n\n.tree-content p {\n\tmargin: var(--asam-space-xs) 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "TreeCell.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/tree-dynamic/js/TreeCell.vue",
									"sha256": "19e39a3f841bb7046c554fc1dcaa017a2c216a5f492b9502b4c2fa27f719ffb8",
									"source": "<template>\n\t<div class=\"tree-content\">\n\t\t<strong>{{ name }}</strong>\n\t\t<p class=\"example-paragraph\" v-if=\"detail\">{{ detail }}</p>\n\t</div>\n</template>\n<script setup>\ndefineProps({\n\tname: { type: String, required: true },\n\tdetail: { type: String, required: false, default: undefined }\n});\n</script>\n<style scoped>\n.tree-content {\n\twhite-space: normal;\n\toverflow-wrap: anywhere;\n\tpadding: var(--asam-space-sm);\n}\n\n.tree-content p {\n\tmargin: var(--asam-space-xs) 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cross-hovering",
					"title": "跨行列悬停",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/cross-hovering/ts/Demo.vue",
									"sha256": "afef0f30af33264e48d3209faa0308dc77476b840a1c2ecc9f3e861f054e674a",
									"source": "<template>\n\t<section>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t{{\n\t\t\t\thoveredRow < 0\n\t\t\t\t\t? '未悬停'\n\t\t\t\t\t: `悬停第 ${hoveredRow + 1} 行、第 ${hoveredColumn + 1} 列`\n\t\t\t}}\n\t\t</p>\n\t\t<AsamTableV2\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"rows\"\n\t\t\t:cell-props=\"cellProps\"\n\t\t\t:width=\"600\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t/>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2CrossHoveringDemo' });\nimport { ref } from 'vue';\nimport { AsamTableV2 } from '@asam-ui/ui';\nimport type { AsamTableV2Columns, AsamTableV2ExtraCellPropGetter } from '@asam-ui/ui';\n\nconst columns: AsamTableV2Columns<string> = ['名称', '所属组', '说明'].map((title, index) => ({\n\tkey: `value${index}`,\n\tdataKey: `value${index}`,\n\ttitle,\n\twidth: 200\n}));\nconst rows = Array.from({ length: 60 }, (_, id) => ({\n\tid,\n\tvalue0: `记录 ${id + 1}`,\n\tvalue1: `组 ${Math.floor(id / 5) + 1}`,\n\tvalue2: `说明 ${id + 1}`\n}));\nconst hoveredRow = ref(-1);\nconst hoveredColumn = ref(-1);\nconst cellProps: AsamTableV2ExtraCellPropGetter<string> = ({ columnIndex, rowIndex }) => ({\n\t'data-column': columnIndex,\n\t'data-record': rowIndex,\n\tstyle: {\n\t\tbackgroundColor:\n\t\t\tcolumnIndex === hoveredColumn.value || rowIndex === hoveredRow.value\n\t\t\t\t? 'var(--asam-color-primary-hover)'\n\t\t\t\t: undefined\n\t},\n\tonMouseenter: () => {\n\t\thoveredRow.value = rowIndex;\n\t\thoveredColumn.value = columnIndex;\n\t},\n\tonMouseleave: () => {\n\t\thoveredRow.value = -1;\n\t\thoveredColumn.value = -1;\n\t}\n});\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/cross-hovering/js/Demo.vue",
									"sha256": "52da53e614cd2898e801827980e32a89540fd6c741e553c254e23db41ed07e9f",
									"source": "<template>\n\t<section>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t{{\n\t\t\t\thoveredRow < 0\n\t\t\t\t\t? '未悬停'\n\t\t\t\t\t: `悬停第 ${hoveredRow + 1} 行、第 ${hoveredColumn + 1} 列`\n\t\t\t}}\n\t\t</p>\n\t\t<AsamTableV2\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"rows\"\n\t\t\t:cell-props=\"cellProps\"\n\t\t\t:width=\"600\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t/>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2CrossHoveringJsDemo' });\nimport { ref } from 'vue';\nimport { AsamTableV2 } from '@asam-ui/ui';\nconst columns = ['名称', '所属组', '说明'].map((title, index) => ({\n\tkey: `value${index}`,\n\tdataKey: `value${index}`,\n\ttitle,\n\twidth: 200\n}));\nconst rows = Array.from({ length: 60 }, (_, id) => ({\n\tid,\n\tvalue0: `记录 ${id + 1}`,\n\tvalue1: `组 ${Math.floor(id / 5) + 1}`,\n\tvalue2: `说明 ${id + 1}`\n}));\nconst hoveredRow = ref(-1);\nconst hoveredColumn = ref(-1);\nconst cellProps = ({ columnIndex, rowIndex }) => ({\n\t'data-column': columnIndex,\n\t'data-record': rowIndex,\n\tstyle: {\n\t\tbackgroundColor:\n\t\t\tcolumnIndex === hoveredColumn.value || rowIndex === hoveredRow.value\n\t\t\t\t? 'var(--asam-color-primary-hover)'\n\t\t\t\t: undefined\n\t},\n\tonMouseenter: () => {\n\t\thoveredRow.value = rowIndex;\n\t\thoveredColumn.value = columnIndex;\n\t},\n\tonMouseleave: () => {\n\t\thoveredRow.value = -1;\n\t\thoveredColumn.value = -1;\n\t}\n});\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sort-by",
					"title": "单列 sortBy 受控排序",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/sort-by/ts/Demo.vue",
									"sha256": "791f93faa7cd1cb79e10cfc03532819913df9e5f51bd43a997fd3f7005d04252",
									"source": "<template>\n\t<section>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t单列排序 {{ sortBy.key }}:{{ sortBy.order }}；首行 {{ displayed[0]?.name }}\n\t\t</p>\n\t\t<AsamTableV2\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"displayed\"\n\t\t\t:sort-by=\"sortBy\"\n\t\t\t:width=\"500\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t\t@column-sort=\"sort\"\n\t\t/>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2SortByDemo' });\nimport { computed, ref } from 'vue';\nimport { AsamTableV2, AsamTableV2SortOrder } from '@asam-ui/ui';\nimport type {\n\tAsamTableV2Columns,\n\tAsamTableV2ColumnSortParams,\n\tAsamTableV2SortBy\n} from '@asam-ui/ui';\n\nconst columns: AsamTableV2Columns<unknown> = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 300, sortable: true },\n\t{ key: 'count', dataKey: 'count', title: '数量', width: 200, sortable: true }\n];\nconst rows = Array.from({ length: 12 }, (_, id) => ({\n\tid,\n\tname: `记录 ${id + 1}`,\n\tcount: 12 - id\n}));\nconst sortBy = ref<AsamTableV2SortBy>({ key: 'count', order: AsamTableV2SortOrder.ASC });\nconst displayed = computed(() => {\n\tconst { key, order } = sortBy.value;\n\treturn [...rows].sort((left, right) => {\n\t\tconst difference =\n\t\t\tkey === 'count'\n\t\t\t\t? left.count - right.count\n\t\t\t\t: left.name.localeCompare(right.name, 'zh-CN', { numeric: true });\n\t\treturn order === AsamTableV2SortOrder.ASC ? difference : -difference;\n\t});\n});\nfunction sort({ key, order }: AsamTableV2ColumnSortParams<unknown>): void {\n\t// The host owns both the single-column descriptor and the displayed data.\n\tsortBy.value = { key, order: order ?? AsamTableV2SortOrder.ASC };\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/sort-by/js/Demo.vue",
									"sha256": "bfbcd98fb8d0586d3fc94b0839371376176c9d303a0844c57787fe46c8b8533d",
									"source": "<template>\n\t<section>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t单列排序 {{ sortBy.key }}:{{ sortBy.order }}；首行 {{ displayed[0]?.name }}\n\t\t</p>\n\t\t<AsamTableV2\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"displayed\"\n\t\t\t:sort-by=\"sortBy\"\n\t\t\t:width=\"500\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t\t@column-sort=\"sort\"\n\t\t/>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2SortByJsDemo' });\nimport { computed, ref } from 'vue';\nimport { AsamTableV2, AsamTableV2SortOrder } from '@asam-ui/ui';\nconst columns = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 300, sortable: true },\n\t{ key: 'count', dataKey: 'count', title: '数量', width: 200, sortable: true }\n];\nconst rows = Array.from({ length: 12 }, (_, id) => ({\n\tid,\n\tname: `记录 ${id + 1}`,\n\tcount: 12 - id\n}));\nconst sortBy = ref({ key: 'count', order: AsamTableV2SortOrder.ASC });\nconst displayed = computed(() => {\n\tconst { key, order } = sortBy.value;\n\treturn [...rows].sort((left, right) => {\n\t\tconst difference =\n\t\t\tkey === 'count'\n\t\t\t\t? left.count - right.count\n\t\t\t\t: left.name.localeCompare(right.name, 'zh-CN', { numeric: true });\n\t\treturn order === AsamTableV2SortOrder.ASC ? difference : -difference;\n\t});\n});\nfunction sort({ key, order }) {\n\t// The host owns both the single-column descriptor and the displayed data.\n\tsortBy.value = { key, order: order ?? AsamTableV2SortOrder.ASC };\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sticky-scroll",
					"title": "随滚动切换吸顶组",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/sticky-scroll/ts/Demo.vue",
									"sha256": "95a74d51957d0fe21d687eba45398dc863bbaa289ea7d32fe83ebbab07b7a3ba",
									"source": "<template>\n\t<section class=\"ui037-sticky-scroll\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"table?.scrollToTop(480)\"\n\t\t\t>定位第三组</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"table?.scrollToTop(0)\"\n\t\t\t>返回首组</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前吸顶 {{ fixedData[0]?.name }}；滚动 {{ scrollTop }}</p>\n\t\t<AsamTableV2\n\t\t\tref=\"table\"\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"rows.slice(1)\"\n\t\t\t:fixed-data=\"fixedData\"\n\t\t\t:row-height=\"rowHeight\"\n\t\t\t:row-class=\"rowClass\"\n\t\t\t:width=\"600\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t\t@scroll=\"onScroll\"\n\t\t/>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2StickyScrollDemo' });\nimport { computed, ref, shallowRef } from 'vue';\nimport { AsamButton, AsamTableV2 } from '@asam-ui/ui';\nimport type {\n\tAsamTableV2Columns,\n\tAsamTableV2Expose,\n\tAsamTableV2RowClassNameGetter\n} from '@asam-ui/ui';\n\nconst columns: AsamTableV2Columns<unknown> = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 220 },\n\t{ key: 'detail', dataKey: 'detail', title: '说明', width: 380 }\n];\nconst groupLength = 6;\nconst rowHeight = 40;\nconst rows = Array.from({ length: 120 }, (_, id) => ({\n\tid,\n\tname: id % groupLength === 0 ? `第 ${id / groupLength + 1} 组` : `记录 ${id}`,\n\tdetail: id % groupLength === 0 ? '滚动到下一组时替换此吸顶记录' : '普通记录'\n}));\nconst table = shallowRef<AsamTableV2Expose>();\nconst scrollTop = ref(0);\nconst fixedData = computed(() => {\n\tconst groupIndex = Math.min(\n\t\tMath.floor(scrollTop.value / (rowHeight * groupLength)),\n\t\trows.length / groupLength - 1\n\t);\n\treturn rows.slice(groupIndex * groupLength, groupIndex * groupLength + 1);\n});\nconst rowClass: AsamTableV2RowClassNameGetter<unknown> = ({ rowIndex }) =>\n\trowIndex < 0 ? 'ui037-active-sticky' : '';\nfunction onScroll({ scrollTop: next }: { scrollTop: number }): void {\n\tscrollTop.value = next;\n}\n</script>\n<style>\n.ui037-sticky-scroll .ui037-active-sticky {\n\tbackground: var(--asam-color-primary-hover);\n\tfont-weight: 600;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/sticky-scroll/js/Demo.vue",
									"sha256": "94beb739eabd52970aaa15628b82fde7b4352368b611bc9555102a696a71f50c",
									"source": "<template>\n\t<section class=\"ui037-sticky-scroll\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"table?.scrollToTop(480)\"\n\t\t\t>定位第三组</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"table?.scrollToTop(0)\"\n\t\t\t>返回首组</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前吸顶 {{ fixedData[0]?.name }}；滚动 {{ scrollTop }}</p>\n\t\t<AsamTableV2\n\t\t\tref=\"table\"\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"rows.slice(1)\"\n\t\t\t:fixed-data=\"fixedData\"\n\t\t\t:row-height=\"rowHeight\"\n\t\t\t:row-class=\"rowClass\"\n\t\t\t:width=\"600\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t\t@scroll=\"onScroll\"\n\t\t/>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2StickyScrollJsDemo' });\nimport { computed, ref, shallowRef } from 'vue';\nimport { AsamButton, AsamTableV2 } from '@asam-ui/ui';\nconst columns = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 220 },\n\t{ key: 'detail', dataKey: 'detail', title: '说明', width: 380 }\n];\nconst groupLength = 6;\nconst rowHeight = 40;\nconst rows = Array.from({ length: 120 }, (_, id) => ({\n\tid,\n\tname: id % groupLength === 0 ? `第 ${id / groupLength + 1} 组` : `记录 ${id}`,\n\tdetail: id % groupLength === 0 ? '滚动到下一组时替换此吸顶记录' : '普通记录'\n}));\nconst table = shallowRef();\nconst scrollTop = ref(0);\nconst fixedData = computed(() => {\n\tconst groupIndex = Math.min(\n\t\tMath.floor(scrollTop.value / (rowHeight * groupLength)),\n\t\trows.length / groupLength - 1\n\t);\n\treturn rows.slice(groupIndex * groupLength, groupIndex * groupLength + 1);\n});\nconst rowClass = ({ rowIndex }) => (rowIndex < 0 ? 'ui037-active-sticky' : '');\nfunction onScroll({ scrollTop: next }) {\n\tscrollTop.value = next;\n}\n</script>\n<style>\n.ui037-sticky-scroll .ui037-active-sticky {\n\tbackground: var(--asam-color-primary-hover);\n\tfont-weight: 600;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "header-filter",
					"title": "表头 renderer 筛选（多文件）",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/header-filter/ts/Demo.vue",
									"sha256": "07547e73bf8919f62ca09ffbbf43692ac7819c3a2a5455344c78a99e03c5d9b6",
									"source": "<template>\n\t<section>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t表头筛选 {{ completedOnly ? '已完成' : '全部' }}；共 {{ displayed.length }} 行\n\t\t</p>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamTableV2\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"displayed\"\n\t\t\t:width=\"600\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t/>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTableV2HeaderFilterDemo' });\nimport { computed, h, ref } from 'vue';\nimport { AsamTableV2 } from '@asam-ui/ui';\nimport type { AsamTableV2Columns } from '@asam-ui/ui';\nimport HeaderFilter from './HeaderFilter.vue';\n\nconst completedOnly = ref(false);\nconst rows = Array.from({ length: 100 }, (_, id) => ({\n\tid,\n\tname: `记录 ${id + 1}`,\n\tcompleted: id % 2 === 0,\n\tstate: id % 2 === 0 ? '已完成' : '待处理'\n}));\nconst displayed = computed(() => rows.filter((row) => !completedOnly.value || row.completed));\nconst columns: AsamTableV2Columns<unknown> = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 350 },\n\t{\n\t\tkey: 'state',\n\t\tdataKey: 'state',\n\t\ttitle: '状态',\n\t\twidth: 250,\n\t\theaderCellRenderer: ({ column }) =>\n\t\t\th(HeaderFilter, {\n\t\t\t\ttitle: String(column.title),\n\t\t\t\tenabled: completedOnly.value,\n\t\t\t\tonApply: (enabled: boolean) => {\n\t\t\t\t\tcompletedOnly.value = enabled;\n\t\t\t\t}\n\t\t\t})\n\t}\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "HeaderFilter.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/header-filter/ts/HeaderFilter.vue",
									"sha256": "06be85f63bdebca03fe834aeb1f774fdef5711e297808386bce40082266f44de",
									"source": "<template>\n\t<div>\n\t\t<span>{{ title }}</span>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :aria-label=\"`筛选${title}`\" @click=\"open\"\n\t\t\t>筛选</AsamButton\n\t\t>\n\t\t<AsamDialog\n\t\t\tv-model=\"dialogOpen\"\n\t\t\t:title=\"`${title}筛选条件`\"\n\t\t\t:aria-label=\"`${title}筛选条件`\"\n\t\t>\n\t\t\t<form @submit.prevent=\"apply(draft)\">\n\t\t\t\t<AsamCheckboxItem v-model=\"draft\">仅显示已完成</AsamCheckboxItem>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"submit\">确认筛选</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"apply(false)\"\n\t\t\t\t\t>重置筛选</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dialogOpen = false\"\n\t\t\t\t\t>取消筛选</AsamButton\n\t\t\t\t>\n\t\t\t</form>\n\t\t</AsamDialog>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { AsamDialog, AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamTableV2HeaderFilter' });\nimport { ref } from 'vue';\n\nconst props = defineProps({\n\ttitle: { type: String, required: true },\n\tenabled: { type: Boolean, required: true }\n});\nconst emit = defineEmits({ apply: (enabled: boolean) => typeof enabled === 'boolean' });\nconst dialogOpen = ref(false);\nconst draft = ref(false);\nfunction open(): void {\n\tdraft.value = props.enabled;\n\tdialogOpen.value = true;\n}\nfunction apply(enabled: boolean): void {\n\temit('apply', enabled);\n\tdialogOpen.value = false;\n}\n</script>\n<style scoped>\nform {\n\tdisplay: grid;\n\tgap: 8px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/header-filter/js/Demo.vue",
									"sha256": "d2c1e2d7b145451b59a861a25f7f35af6dfd288059cd82583860675b67eb06da",
									"source": "<template>\n\t<section>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t表头筛选 {{ completedOnly ? '已完成' : '全部' }}；共 {{ displayed.length }} 行\n\t\t</p>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamTableV2\n\t\t\t:columns=\"columns\"\n\t\t\t:data=\"displayed\"\n\t\t\t:width=\"600\"\n\t\t\t:height=\"300\"\n\t\t\trow-key=\"id\"\n\t\t/>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTableV2HeaderFilterJsDemo' });\nimport { computed, h, ref } from 'vue';\nimport { AsamTableV2 } from '@asam-ui/ui';\nimport HeaderFilter from './HeaderFilter.vue';\nconst completedOnly = ref(false);\nconst rows = Array.from({ length: 100 }, (_, id) => ({\n\tid,\n\tname: `记录 ${id + 1}`,\n\tcompleted: id % 2 === 0,\n\tstate: id % 2 === 0 ? '已完成' : '待处理'\n}));\nconst displayed = computed(() => rows.filter((row) => !completedOnly.value || row.completed));\nconst columns = [\n\t{ key: 'name', dataKey: 'name', title: '名称', width: 350 },\n\t{\n\t\tkey: 'state',\n\t\tdataKey: 'state',\n\t\ttitle: '状态',\n\t\twidth: 250,\n\t\theaderCellRenderer: ({ column }) =>\n\t\t\th(HeaderFilter, {\n\t\t\t\ttitle: String(column.title),\n\t\t\t\tenabled: completedOnly.value,\n\t\t\t\tonApply: (enabled) => {\n\t\t\t\t\tcompletedOnly.value = enabled;\n\t\t\t\t}\n\t\t\t})\n\t}\n];\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "HeaderFilter.vue",
									"sourcePath": "apps/website/examples/AsamTableV2/header-filter/js/HeaderFilter.vue",
									"sha256": "ad1a9a52f52d5426a2bfc6a963c36e4cc9aaaeb1dced09cb5527ed3f64af0f96",
									"source": "<template>\n\t<div>\n\t\t<span>{{ title }}</span>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :aria-label=\"`筛选${title}`\" @click=\"open\"\n\t\t\t>筛选</AsamButton\n\t\t>\n\t\t<AsamDialog\n\t\t\tv-model=\"dialogOpen\"\n\t\t\t:title=\"`${title}筛选条件`\"\n\t\t\t:aria-label=\"`${title}筛选条件`\"\n\t\t>\n\t\t\t<form @submit.prevent=\"apply(draft)\">\n\t\t\t\t<AsamCheckboxItem v-model=\"draft\">仅显示已完成</AsamCheckboxItem>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"submit\">确认筛选</AsamButton>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"apply(false)\"\n\t\t\t\t\t>重置筛选</AsamButton\n\t\t\t\t>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"dialogOpen = false\"\n\t\t\t\t\t>取消筛选</AsamButton\n\t\t\t\t>\n\t\t\t</form>\n\t\t</AsamDialog>\n\t</div>\n</template>\n<script setup>\nimport { AsamDialog, AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamTableV2HeaderFilter' });\nimport { ref } from 'vue';\nconst props = defineProps({\n\ttitle: { type: String, required: true },\n\tenabled: { type: Boolean, required: true }\n});\nconst emit = defineEmits({ apply: (enabled) => typeof enabled === 'boolean' });\nconst dialogOpen = ref(false);\nconst draft = ref(false);\nfunction open() {\n\tdraft.value = props.enabled;\n\tdialogOpen.value = true;\n}\nfunction apply(enabled) {\n\temit('apply', enabled);\n\tdialogOpen.value = false;\n}\n</script>\n<style scoped>\nform {\n\tdisplay: grid;\n\tgap: 8px;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTag",
			"documentation": "/component-AsamTag.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/basic/ts/Demo.vue",
									"sha256": "b1336aad2dff4b6a6ccf5176ebf108cbb0c184e575c90c7d5afdd8b728b3fdcb",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamTag v-for=\"size in sizes\" :key=\"size\" v-bind=\"{ size, type: 'success' }\">\n\t\t\t<span>{{ size }} 草稿</span>\n\t\t</AsamTag>\n\t\t<AsamTag v-if=\"visible\" closable @close=\"visible = false\">可移除标签</AsamTag>\n\t\t<AsamButton type=\"default\" v-else native-type=\"button\" @click=\"visible = true\"\n\t\t\t>恢复标签</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTag } from '@asam-ui/ui';\nconst visible = ref(true);\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/basic/js/Demo.vue",
									"sha256": "2cc194bacce4f15b010dff748b4860b6ecf1ce7b441b4f1c2d7f4c3fb1c28180",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamTag v-for=\"size in sizes\" :key=\"size\" v-bind=\"{ size, type: 'success' }\">\n\t\t\t<span>{{ size }} 草稿</span>\n\t\t</AsamTag>\n\t\t<AsamTag v-if=\"visible\" closable @close=\"visible = false\">可移除标签</AsamTag>\n\t\t<AsamButton type=\"default\" v-else native-type=\"button\" @click=\"visible = true\"\n\t\t\t>恢复标签</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTag } from '@asam-ui/ui';\nconst visible = ref(true);\nconst sizes = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-basic/ts/Demo.vue",
									"sha256": "c574eb9cdb84e861466b1b0621ac4b03a862489506924a7dc1d6bb6127bbb960",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag type=\"primary\">标签 1</AsamTag>\n\t\t<AsamTag type=\"success\">标签 2</AsamTag>\n\t\t<AsamTag type=\"info\">标签 3</AsamTag>\n\t\t<AsamTag type=\"warning\">标签 4</AsamTag>\n\t\t<AsamTag type=\"danger\">标签 5</AsamTag>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagCapBasicDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "51728727d578a1b1943da447a0ce1d0a54f0249e48c621fccfb793b437f5ad41",
									"notice": {
										"id": "d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5",
										"url": "/licenses/source-notices/d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt",
										"licenseFilename": "LICENSE-d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/basic.vue",
											"sourceSha256": "d6e46c712e8b500a08c66e2bd3016b0f67596b70eee234386c79eac8031e891c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-basic/js/Demo.vue",
									"sha256": "98cfe43a623a4b1eeb3524d4db04c5254d8faa72a2f27a36307b89dacb4368d4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag type=\"primary\">标签 1</AsamTag>\n\t\t<AsamTag type=\"success\">标签 2</AsamTag>\n\t\t<AsamTag type=\"info\">标签 3</AsamTag>\n\t\t<AsamTag type=\"warning\">标签 4</AsamTag>\n\t\t<AsamTag type=\"danger\">标签 5</AsamTag>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapBasicDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "1b8e393a874c4c025c135bfb8d1c9c1fd18ffb7180c87c447243f68de29d8e72",
									"notice": {
										"id": "d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5",
										"url": "/licenses/source-notices/d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt",
										"licenseFilename": "LICENSE-d73b777653d5f68b4c7976bcfafcecc69e3790220114c1843f60e4bd1f24f6c5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/basic.vue",
											"sourceSha256": "d6e46c712e8b500a08c66e2bd3016b0f67596b70eee234386c79eac8031e891c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-removable",
					"title": "可移除标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-removable/ts/Demo.vue",
									"sha256": "918a9c8ed28a1f8af2c6abfa6f793eae9a744d5ba44ff628137678c98d5f0879",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag v-for=\"tag in tags\" :key=\"tag.name\" closable :type=\"tag.type\">\n\t\t\t{{ tag.name }}\n\t\t</AsamTag>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagCapRemovableDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTagProps } from '@asam-ui/ui';\n\ninterface TagsItem {\n\tname: string;\n\ttype: AsamTagProps['type'];\n}\n\nconst tags = ref<TagsItem[]>([\n\t{ name: '标签一', type: 'primary' },\n\t{ name: '标签二', type: 'success' },\n\t{ name: '标签三', type: 'info' },\n\t{ name: '标签四', type: 'warning' },\n\t{ name: '标签五', type: 'danger' }\n]);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "95196bb736031e2abe17482c1a974d997fddb16476549fd366689daac9aad3e7",
									"notice": {
										"id": "bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25",
										"url": "/licenses/source-notices/bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt",
										"licenseFilename": "LICENSE-bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/removable.vue",
											"sourceSha256": "4c6e952b78375645ea718504ae40ce7b03be6f2160a604d42ebdcc4e07ecfc22",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-removable/js/Demo.vue",
									"sha256": "2df77039d9438c93a2198253c53710a82acde5377ab5564d9f873404b5f812de",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag v-for=\"tag in tags\" :key=\"tag.name\" closable :type=\"tag.type\">\n\t\t\t{{ tag.name }}\n\t\t</AsamTag>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapRemovableDemo' });\nimport { AsamTag } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst tags = ref([\n\t{ name: '标签一', type: 'primary' },\n\t{ name: '标签二', type: 'success' },\n\t{ name: '标签三', type: 'info' },\n\t{ name: '标签四', type: 'warning' },\n\t{ name: '标签五', type: 'danger' }\n]);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "42cb3a1182e8c5c3a98becd5e915a3d12074fa903c04d2a2967de779add48e32",
									"notice": {
										"id": "bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25",
										"url": "/licenses/source-notices/bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt",
										"licenseFilename": "LICENSE-bdd8bd15339c35f76866da98d40a45788591cfbab00a6b7621f80c4976bcde25.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/removable.vue",
											"sourceSha256": "4c6e952b78375645ea718504ae40ce7b03be6f2160a604d42ebdcc4e07ecfc22",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-editable",
					"title": "动态编辑标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-editable/ts/Demo.vue",
									"sha256": "390ead126b20ffce694f15f71cf577803ffb9e5d75afccd21d73364c342bd4be",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag\n\t\t\tv-for=\"tag in dynamicTags\"\n\t\t\t:key=\"tag\"\n\t\t\tclosable\n\t\t\t:disable-transitions=\"false\"\n\t\t\t@close=\"handleClose(tag)\"\n\t\t>\n\t\t\t{{ tag }}\n\t\t</AsamTag>\n\t\t<AsamInput\n\t\t\tv-if=\"inputVisible\"\n\t\t\tref=\"InputRef\"\n\t\t\t:model-value=\"inputValue\"\n\t\t\tclass=\"w-20\"\n\t\t\tsize=\"small\"\n\t\t\tv-bind=\"domEnterAttrs(handleInputConfirm)\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'string') inputValue = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t\t@blur=\"handleInputConfirm\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\"\n\t\t\tv-else\n\t\t\tclass=\"button-new-tag\"\n\t\t\tsize=\"small\"\n\t\t\t@click=\"showInput\"\n\t\t>\n\t\t\t+ 新建标签\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamTagCapEditableDemo' });\nimport { AsamTag, AsamInput, AsamButton } from '@asam-ui/ui';\n\nimport { nextTick, ref } from 'vue';\n\nimport type { AsamInputExpose } from '@asam-ui/ui';\n\nconst inputValue = ref('');\nconst dynamicTags = ref(['标签一', '标签二', '标签三']);\nconst inputVisible = ref(false);\nconst InputRef = ref<AsamInputExpose>();\n\nconst handleClose = (tag: string) => {\n\tdynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);\n};\n\nconst showInput = () => {\n\tinputVisible.value = true;\n\tnextTick(() => {\n\t\tInputRef.value!.input!.focus();\n\t});\n};\n\nconst handleInputConfirm = () => {\n\tif (inputValue.value) {\n\t\tdynamicTags.value.push(inputValue.value);\n\t}\n\tinputVisible.value = false;\n\tinputValue.value = '';\n};\n\nconst domEnterAttrs = (handler: () => void): Pick<HTMLAttributes, 'class' | 'onKeyup'> => ({\n\tclass: 'ui032-enter-input',\n\tonKeyup: (event) => {\n\t\tif (event.key === 'Enter') handler();\n\t}\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.w-20 {\n\twidth: 5rem;\n}\n</style>\n",
									"originalSourceSha256": "c0c254b24df08b96a67c7767fc38d73ed7efb589df4f2727ffcc602aeacdfaef",
									"notice": {
										"id": "f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d",
										"url": "/licenses/source-notices/f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt",
										"licenseFilename": "LICENSE-f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/editable.vue",
											"sourceSha256": "1113c47ec37e5f7e6b92468e119349a5afe6e31595c68981edd43b3afe18dce4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-editable/js/Demo.vue",
									"sha256": "12fd553ecbe31c0cfaa8e1bf55dee05c2d40be9fee1e193a9a5a74b2dba66ee5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag\n\t\t\tv-for=\"tag in dynamicTags\"\n\t\t\t:key=\"tag\"\n\t\t\tclosable\n\t\t\t:disable-transitions=\"false\"\n\t\t\t@close=\"handleClose(tag)\"\n\t\t>\n\t\t\t{{ tag }}\n\t\t</AsamTag>\n\t\t<AsamInput\n\t\t\tv-if=\"inputVisible\"\n\t\t\tref=\"InputRef\"\n\t\t\t:model-value=\"inputValue\"\n\t\t\tclass=\"w-20\"\n\t\t\tsize=\"small\"\n\t\t\tv-bind=\"domEnterAttrs(handleInputConfirm)\"\n\t\t\t@update:model-value=\"\n\t\t\t\t(value) => {\n\t\t\t\t\tif (typeof value === 'string') inputValue = value;\n\t\t\t\t}\n\t\t\t\"\n\t\t\t@blur=\"handleInputConfirm\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton type=\"default\"\n\t\t\tv-else\n\t\t\tclass=\"button-new-tag\"\n\t\t\tsize=\"small\"\n\t\t\t@click=\"showInput\"\n\t\t>\n\t\t\t+ 新建标签\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapEditableDemo' });\nimport { AsamTag, AsamInput, AsamButton } from '@asam-ui/ui';\nimport { nextTick, ref } from 'vue';\nconst inputValue = ref('');\nconst dynamicTags = ref(['标签一', '标签二', '标签三']);\nconst inputVisible = ref(false);\nconst InputRef = ref();\nconst handleClose = (tag) => {\n\tdynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);\n};\nconst showInput = () => {\n\tinputVisible.value = true;\n\tnextTick(() => {\n\t\tInputRef.value.input.focus();\n\t});\n};\nconst handleInputConfirm = () => {\n\tif (inputValue.value) {\n\t\tdynamicTags.value.push(inputValue.value);\n\t}\n\tinputVisible.value = false;\n\tinputValue.value = '';\n};\n\nconst domEnterAttrs = (handler) => ({\n\tclass: 'ui032-enter-input',\n\tonKeyup: (event) => {\n\t\tif (event.key === 'Enter') handler();\n\t}\n});\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.w-20 {\n\twidth: 5rem;\n}\n</style>\n",
									"originalSourceSha256": "0ea185e62695e71c8dbfafe713ec1d0f24eb2bc710f9ab57653f815f74c62ec8",
									"notice": {
										"id": "f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d",
										"url": "/licenses/source-notices/f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt",
										"licenseFilename": "LICENSE-f75284197908c909e814ff4cfb537557e04896d63b9edd8df332f6f6dbde5d7d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/editable.vue",
											"sourceSha256": "1113c47ec37e5f7e6b92468e119349a5afe6e31595c68981edd43b3afe18dce4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-sizes",
					"title": "尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-sizes/ts/Demo.vue",
									"sha256": "eb7ead45d85eeaf7e0f536b0cea6ddb9e842442afdf93006d8901f0af9a52c1d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag size=\"large\">大尺寸</AsamTag>\n\t\t<AsamTag>默认</AsamTag>\n\t\t<AsamTag size=\"small\">小尺寸</AsamTag>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagCapSizesDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "74ebbcfdbb5b382dc5a428fa928f0f2d5ffdff6a49d4c8f6a6b77e3a04a2ed8b",
									"notice": {
										"id": "561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4",
										"url": "/licenses/source-notices/561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt",
										"licenseFilename": "LICENSE-561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/sizes.vue",
											"sourceSha256": "45048e144b16422e7c693a012714939d6e9e157a48cec7dbc2a0482e20aedec2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-sizes/js/Demo.vue",
									"sha256": "a9e05b5bbff525f471df3f2b4cb78d9c4d58538fce4160b33a082a2c3db530e0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag size=\"large\">大尺寸</AsamTag>\n\t\t<AsamTag>默认</AsamTag>\n\t\t<AsamTag size=\"small\">小尺寸</AsamTag>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapSizesDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "d273a9724c0502ad6c36874a05d3388f7a54513bdef2a35a44464274d88f18c8",
									"notice": {
										"id": "561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4",
										"url": "/licenses/source-notices/561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt",
										"licenseFilename": "LICENSE-561a3e904ffc44172f696b6bc653f241ad5a95a23dc6bb8727d45a690ca286c4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/sizes.vue",
											"sourceSha256": "45048e144b16422e7c693a012714939d6e9e157a48cec7dbc2a0482e20aedec2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-theme",
					"title": "主题",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-theme/ts/Demo.vue",
									"sha256": "42de547a97f624ed9b7eaa99daf480776dab908a0e7a0772101bcc8521bf47f8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<span>深色</span>\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"dark\">\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<span>浅色</span>\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"light\">\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<span>朴素样式</span>\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"plain\">\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagCapThemeDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTagProps } from '@asam-ui/ui';\n\ntype Item = { type: AsamTagProps['type']; label: string };\n\nconst items = ref<Array<Item>>([\n\t{ type: 'primary', label: '标签 1' },\n\t{ type: 'success', label: '标签 2' },\n\t{ type: 'info', label: '标签 3' },\n\t{ type: 'warning', label: '标签 4' },\n\t{ type: 'danger', label: '标签 5' }\n]);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "03387195e51df2bc45fca9e9a692ecbdaa0148d43414c6b14df5d879e9fa1bf3",
									"notice": {
										"id": "59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac",
										"url": "/licenses/source-notices/59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt",
										"licenseFilename": "LICENSE-59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/theme.vue",
											"sourceSha256": "25bd593f8287d009da542ce93eaf383d609ec88c1c2bface9ea34edf2aa4f374",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-theme/js/Demo.vue",
									"sha256": "710d377f90cc08ac73a3afbad095894af0543f3c2e8c79bace00beba9b67458a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<span>深色</span>\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"dark\">\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<span>浅色</span>\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"light\">\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<span>朴素样式</span>\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"plain\">\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapThemeDemo' });\nimport { AsamTag } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst items = ref([\n\t{ type: 'primary', label: '标签 1' },\n\t{ type: 'success', label: '标签 2' },\n\t{ type: 'info', label: '标签 3' },\n\t{ type: 'warning', label: '标签 4' },\n\t{ type: 'danger', label: '标签 5' }\n]);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "9971d647a8f4e2dea7fbc6797ac203164fcffcede5af5cfb68ff214d24f851fb",
									"notice": {
										"id": "59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac",
										"url": "/licenses/source-notices/59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt",
										"licenseFilename": "LICENSE-59d2fd9855424eb59f9105056d57fa57551a1e7586f3e1645c87a2154eb5e5ac.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/theme.vue",
											"sourceSha256": "25bd593f8287d009da542ce93eaf383d609ec88c1c2bface9ea34edf2aa4f374",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-rounded",
					"title": "圆角标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-rounded/ts/Demo.vue",
									"sha256": "135224bf7cfa0b3970c228e031765b1f1592166477f6a84218fb0e0474824710",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"dark\" round>\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"light\" round>\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"plain\" round>\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagCapRoundedDemo' });\nimport { AsamTag } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTagProps } from '@asam-ui/ui';\n\ntype Item = { type: AsamTagProps['type']; label: string };\n\nconst items = ref<Array<Item>>([\n\t{ type: 'primary', label: '标签 1' },\n\t{ type: 'success', label: '标签 2' },\n\t{ type: 'info', label: '标签 3' },\n\t{ type: 'warning', label: '标签 4' },\n\t{ type: 'danger', label: '标签 5' }\n]);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "d2235ddd2076873cfdf0894c6ddba327786e1299303e6c7c4c18bae385f1be2e",
									"notice": {
										"id": "7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9",
										"url": "/licenses/source-notices/7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt",
										"licenseFilename": "LICENSE-7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/rounded.vue",
											"sourceSha256": "d4c1505f727421ac2babf8ea08d3fa6e5204ff87a0311d0ba03f70ff93b3ce49",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-rounded/js/Demo.vue",
									"sha256": "906b22337a5a352780f08a15a2a0fd0ab12c9e83d1fae9f548cab5ee5de9a442",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"dark\" round>\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"light\" round>\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<AsamTag v-for=\"item in items\" :key=\"item.label\" :type=\"item.type\" effect=\"plain\" round>\n\t\t\t{{ item.label }}\n\t\t</AsamTag>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapRoundedDemo' });\nimport { AsamTag } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst items = ref([\n\t{ type: 'primary', label: '标签 1' },\n\t{ type: 'success', label: '标签 2' },\n\t{ type: 'info', label: '标签 3' },\n\t{ type: 'warning', label: '标签 4' },\n\t{ type: 'danger', label: '标签 5' }\n]);\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "0f6ff0c7f839bb507e0d38b3db1828509bff09242c88df4296487ba23081935f",
									"notice": {
										"id": "7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9",
										"url": "/licenses/source-notices/7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt",
										"licenseFilename": "LICENSE-7e1df071d4bbb9a4f7b82be3bf291f5b4faabbaf0af0f84fcd7e1d18e7023fa9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/rounded.vue",
											"sourceSha256": "d4c1505f727421ac2babf8ea08d3fa6e5204ff87a0311d0ba03f70ff93b3ce49",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-checkable",
					"title": "可选中的标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-checkable/ts/Demo.vue",
									"sha256": "a4f91caab18f2d72bdccad0190ca5170ea9990fafbdc910508f101589681dae0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamCheckTag checked>已选中</AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked\" @change=\"onChange\">切换状态</AsamCheckTag>\n\t\t<AsamCheckTag disabled>禁用</AsamCheckTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<AsamCheckTag :checked=\"checked1\" type=\"primary\" @change=\"onChange1\"> 标签 1 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked2\" type=\"success\" @change=\"onChange2\"> 标签 2 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked3\" type=\"info\" @change=\"onChange3\"> 标签 3 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked4\" type=\"warning\" @change=\"onChange4\"> 标签 4 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked5\" type=\"danger\" @change=\"onChange5\"> 标签 5 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked6\" disabled type=\"success\" @change=\"onChange6\">\n\t\t\t标签 6\n\t\t</AsamCheckTag>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTagCapCheckableDemo' });\nimport { AsamCheckTag } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst checked = ref(false);\nconst checked1 = ref(true);\nconst checked2 = ref(true);\nconst checked3 = ref(true);\nconst checked4 = ref(true);\nconst checked5 = ref(true);\nconst checked6 = ref(true);\n\nconst onChange = (status: boolean) => {\n\tchecked.value = status;\n};\n\nconst onChange1 = (status: boolean) => {\n\tchecked1.value = status;\n};\n\nconst onChange2 = (status: boolean) => {\n\tchecked2.value = status;\n};\n\nconst onChange3 = (status: boolean) => {\n\tchecked3.value = status;\n};\n\nconst onChange4 = (status: boolean) => {\n\tchecked4.value = status;\n};\n\nconst onChange5 = (status: boolean) => {\n\tchecked5.value = status;\n};\n\nconst onChange6 = (status: boolean) => {\n\tchecked6.value = status;\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "2eb8260f237591b26f39a0fa5334f59608b3b58bbb106a12900839105852790a",
									"notice": {
										"id": "e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd",
										"url": "/licenses/source-notices/e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt",
										"licenseFilename": "LICENSE-e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/checkable.vue",
											"sourceSha256": "c3dd5b72cc246c72eb3d51bfeabd3d24da14f642c1178c509627fa222bc1dad5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTag/cap-checkable/js/Demo.vue",
									"sha256": "38e25026d8bee885da0a5f41372e17f1f5969bd99064f8d43015b83d50580663",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt\n-->\n<template>\n\t<div class=\"flex gap-2\">\n\t\t<AsamCheckTag checked>已选中</AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked\" @change=\"onChange\">切换状态</AsamCheckTag>\n\t\t<AsamCheckTag disabled>禁用</AsamCheckTag>\n\t</div>\n\t<div class=\"flex gap-2 mt-4\">\n\t\t<AsamCheckTag :checked=\"checked1\" type=\"primary\" @change=\"onChange1\"> 标签 1 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked2\" type=\"success\" @change=\"onChange2\"> 标签 2 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked3\" type=\"info\" @change=\"onChange3\"> 标签 3 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked4\" type=\"warning\" @change=\"onChange4\"> 标签 4 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked5\" type=\"danger\" @change=\"onChange5\"> 标签 5 </AsamCheckTag>\n\t\t<AsamCheckTag :checked=\"checked6\" disabled type=\"success\" @change=\"onChange6\">\n\t\t\t标签 6\n\t\t</AsamCheckTag>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTagCapCheckableDemo' });\nimport { AsamCheckTag } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst checked = ref(false);\nconst checked1 = ref(true);\nconst checked2 = ref(true);\nconst checked3 = ref(true);\nconst checked4 = ref(true);\nconst checked5 = ref(true);\nconst checked6 = ref(true);\nconst onChange = (status) => {\n\tchecked.value = status;\n};\nconst onChange1 = (status) => {\n\tchecked1.value = status;\n};\nconst onChange2 = (status) => {\n\tchecked2.value = status;\n};\nconst onChange3 = (status) => {\n\tchecked3.value = status;\n};\nconst onChange4 = (status) => {\n\tchecked4.value = status;\n};\nconst onChange5 = (status) => {\n\tchecked5.value = status;\n};\nconst onChange6 = (status) => {\n\tchecked6.value = status;\n};\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n\n.gap-2 {\n\tgap: 0.5rem;\n}\n\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "9d327bc16f9b0f84fcd401254678993df5a6fba45bc81473e5082022ab10a20f",
									"notice": {
										"id": "e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd",
										"url": "/licenses/source-notices/e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt",
										"licenseFilename": "LICENSE-e2abb3963f7c8a32af22c1d80ed1e086ee8dcbeabb0fff2a0a3c1e7c5fc69ddd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tag/checkable.vue",
											"sourceSha256": "c3dd5b72cc246c72eb3d51bfeabd3d24da14f642c1178c509627fa222bc1dad5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamText",
			"documentation": "/component-AsamText.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/basic/ts/Demo.vue",
									"sha256": "4407fa071e28c935d320e21aafce07278c90e0a6e57f3f9c4af94a545a7fa1e8",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamText v-for=\"size in sizes\" :key=\"size\" :size=\"size\">{{ size }} 文本</AsamText>\n\t</div>\n\t<AsamText\n\t\tclass=\"short-text\"\n\t\tv-bind=\"{ truncated: true, title: '这段完整说明超过示例宽度，可以查看完整标题' }\"\n\t>\n\t\t<span>这段完整说明超过示例宽度，可以查看完整标题</span>\n\t</AsamText>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextBasicDemo' });\nimport { AsamText } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.short-text {\n\twidth: 180px;\n\tdisplay: inline-block;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/basic/js/Demo.vue",
									"sha256": "263f1f8b4963ce98e8cd07b366b797b7975cacd7ec74ddef86c2caef2cec1f05",
									"source": "<template>\n\t<div class=\"flow\">\n\t\t<AsamText v-for=\"size in sizes\" :key=\"size\" :size=\"size\">{{ size }} 文本</AsamText>\n\t</div>\n\t<AsamText\n\t\tclass=\"short-text\"\n\t\tv-bind=\"{ truncated: true, title: '这段完整说明超过示例宽度，可以查看完整标题' }\"\n\t>\n\t\t<span>这段完整说明超过示例宽度，可以查看完整标题</span>\n\t</AsamText>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextBasicDemo' });\nimport { AsamText } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\n</script>\n\n<style scoped>\n.flow {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.short-text {\n\twidth: 180px;\n\tdisplay: inline-block;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-basic/ts/Demo.vue",
									"sha256": "5290ec1c98d0a78d2cf2d7f5b152ae80da457464db5dad45f74655260aab459e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt\n-->\n<template>\n\t<AsamText class=\"mx-1\">默认</AsamText>\n\t<AsamText class=\"mx-1\" type=\"primary\">主要</AsamText>\n\t<AsamText class=\"mx-1\" type=\"success\">成功</AsamText>\n\t<AsamText class=\"mx-1\" type=\"info\">信息</AsamText>\n\t<AsamText class=\"mx-1\" type=\"warning\">警告</AsamText>\n\t<AsamText class=\"mx-1\" type=\"danger\">危险</AsamText>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextCapBasicDemo' });\nimport { AsamText } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mx-1 {\n\tmargin-left: 0.25rem;\n\tmargin-right: 0.25rem;\n}\n</style>\n",
									"originalSourceSha256": "8f063b96a2b4a97ba47025baafe43286c4198da0859fae724d586dd5a6eab4ee",
									"notice": {
										"id": "ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73",
										"url": "/licenses/source-notices/ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt",
										"licenseFilename": "LICENSE-ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/basic.vue",
											"sourceSha256": "5e8d759fb001a8b6018e468f376840666befa9a09f4826427fae4c93c670789b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-basic/js/Demo.vue",
									"sha256": "c9b13041af911071a2f490927729970fb31916de25ef35b492781eb878b119fe",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt\n-->\n<template>\n\t<AsamText class=\"mx-1\">默认</AsamText>\n\t<AsamText class=\"mx-1\" type=\"primary\">主要</AsamText>\n\t<AsamText class=\"mx-1\" type=\"success\">成功</AsamText>\n\t<AsamText class=\"mx-1\" type=\"info\">信息</AsamText>\n\t<AsamText class=\"mx-1\" type=\"warning\">警告</AsamText>\n\t<AsamText class=\"mx-1\" type=\"danger\">危险</AsamText>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextCapBasicDemo' });\nimport { AsamText } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mx-1 {\n\tmargin-left: 0.25rem;\n\tmargin-right: 0.25rem;\n}\n</style>\n",
									"originalSourceSha256": "881fe71d5551be318235b549e8d9c995204075c8b41e13bd0f810bb4817456c4",
									"notice": {
										"id": "ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73",
										"url": "/licenses/source-notices/ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt",
										"licenseFilename": "LICENSE-ceff442a8074dd2dec8c900fcdc2251f33b799988f13332ef24203d90dab0e73.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/basic.vue",
											"sourceSha256": "5e8d759fb001a8b6018e468f376840666befa9a09f4826427fae4c93c670789b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-sizes",
					"title": "尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-sizes/ts/Demo.vue",
									"sha256": "c8d530b4521fa76c3e0aad0ef4f82accbeeadf38403ff91cf5fcac42f8942ef2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt\n-->\n<template>\n\t<AsamText class=\"mx-1\" size=\"large\">大尺寸</AsamText>\n\t<AsamText class=\"mx-1\">默认</AsamText>\n\t<AsamText class=\"mx-1\" size=\"small\">小尺寸</AsamText>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextCapSizesDemo' });\nimport { AsamText } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mx-1 {\n\tmargin-left: 0.25rem;\n\tmargin-right: 0.25rem;\n}\n</style>\n",
									"originalSourceSha256": "77fbc644a4aef324cba65370028343958ef6f41ed937e4e3f94fae1239f3cd6c",
									"notice": {
										"id": "6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5",
										"url": "/licenses/source-notices/6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt",
										"licenseFilename": "LICENSE-6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/sizes.vue",
											"sourceSha256": "06adbf55e7ba54a6c7a85387564fa1959f9ba2d10abc04df9a687cf0d101eefc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-sizes/js/Demo.vue",
									"sha256": "e4be838ae50a18f8d77ef896f01e7cc68ed398918a2087974f30c18c1811faaa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt\n-->\n<template>\n\t<AsamText class=\"mx-1\" size=\"large\">大尺寸</AsamText>\n\t<AsamText class=\"mx-1\">默认</AsamText>\n\t<AsamText class=\"mx-1\" size=\"small\">小尺寸</AsamText>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextCapSizesDemo' });\nimport { AsamText } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mx-1 {\n\tmargin-left: 0.25rem;\n\tmargin-right: 0.25rem;\n}\n</style>\n",
									"originalSourceSha256": "6d112fc5a9653cd40636223977c0af085252bb0f3eb3e7102f21841a074f7fee",
									"notice": {
										"id": "6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5",
										"url": "/licenses/source-notices/6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt",
										"licenseFilename": "LICENSE-6de7975f7b5c40f38eb40b522abfb6bcc2c8ac53acd53915d5f31b58c0056bc5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/sizes.vue",
											"sourceSha256": "06adbf55e7ba54a6c7a85387564fa1959f9ba2d10abc04df9a687cf0d101eefc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-truncated",
					"title": "省略",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-truncated/ts/Demo.vue",
									"sha256": "da660a340bf7242a38d50b467aa235d9d1cb49d752beab549095f0d23b0e9be6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt\n-->\n<template>\n\t<AsamText class=\"w-150px mb-2\" truncated> 元素自身宽度为 100px </AsamText>\n\t<AsamRow class=\"w-150px mb-2\">\n\t\t<AsamText truncated>受到父元素空间挤压</AsamText>\n\t</AsamRow>\n\t<AsamRow class=\"mb-2\">\n\t\t<AsamText line-clamp=\"2\">\n\t\t\tCSS 属性 -webkit-line-clamp<br />\n\t\t\t可以限制<br />\n\t\t\t内容块的行数。\n\t\t</AsamText>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamTooltip content=\"仅在文本被截断时显示文字提示\" :disabled=\"!textRef?.isTruncated\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamText\n\t\t\t\tref=\"textRef\"\n\t\t\t\tclass=\"w-150px\"\n\t\t\t\ttruncated\n\t\t\t\tv-bind=\"domTitleAttrs('')\"\n\t\t\t>\n\t\t\t\t仅在文字被截断时显示提示\n\t\t\t</AsamText>\n\t\t</AsamTooltip>\n\t</AsamRow>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamTextCapTruncatedDemo' });\nimport { AsamText, AsamRow, AsamTooltip } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst textRef = ref();\n\nconst domTitleAttrs = (\n\ttitle: NonNullable<HTMLAttributes['title']>\n): Pick<HTMLAttributes, 'class' | 'title'> => ({ class: 'ui032-text-title', title });\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.w-150px {\n\twidth: 150px;\n}\n\n.mb-2 {\n\tmargin-bottom: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "5630b8bea717d22d7e09526da145766205f62526570444756694c201343d89ec",
									"notice": {
										"id": "73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f",
										"url": "/licenses/source-notices/73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt",
										"licenseFilename": "LICENSE-73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/truncated.vue",
											"sourceSha256": "97304c10d9b050d55f42411129bc1ce577a876a953237ee42ccf37892da049f2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-truncated/js/Demo.vue",
									"sha256": "ff2c004be72f9570fd3103166e56f2ea02560a32f2ee0002d8701bd6b5e490c3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt\n-->\n<template>\n\t<AsamText class=\"w-150px mb-2\" truncated> 元素自身宽度为 100px </AsamText>\n\t<AsamRow class=\"w-150px mb-2\">\n\t\t<AsamText truncated>受到父元素空间挤压</AsamText>\n\t</AsamRow>\n\t<AsamRow class=\"mb-2\">\n\t\t<AsamText line-clamp=\"2\">\n\t\t\tCSS 属性 -webkit-line-clamp<br />\n\t\t\t可以限制<br />\n\t\t\t内容块的行数。\n\t\t</AsamText>\n\t</AsamRow>\n\t<AsamRow>\n\t\t<AsamTooltip content=\"仅在文本被截断时显示文字提示\" :disabled=\"!textRef?.isTruncated\">\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamText\n\t\t\t\tref=\"textRef\"\n\t\t\t\tclass=\"w-150px\"\n\t\t\t\ttruncated\n\t\t\t\tv-bind=\"domTitleAttrs('')\"\n\t\t\t>\n\t\t\t\t仅在文字被截断时显示提示\n\t\t\t</AsamText>\n\t\t</AsamTooltip>\n\t</AsamRow>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextCapTruncatedDemo' });\nimport { AsamText, AsamRow, AsamTooltip } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst textRef = ref();\n\nconst domTitleAttrs = (title) => ({ class: 'ui032-text-title', title });\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.w-150px {\n\twidth: 150px;\n}\n\n.mb-2 {\n\tmargin-bottom: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "4117ecd0b3e01556a64f04b866e921e4bd2367fb8bc4320be0a74193054ad23e",
									"notice": {
										"id": "73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f",
										"url": "/licenses/source-notices/73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt",
										"licenseFilename": "LICENSE-73726d3566ca392e4598cc3e7ea2975a7dedfaf7c359a687772e2040bcb27f3f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/truncated.vue",
											"sourceSha256": "97304c10d9b050d55f42411129bc1ce577a876a953237ee42ccf37892da049f2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-override",
					"title": "覆盖",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-override/ts/Demo.vue",
									"sha256": "29776d0d2bc7ffea89b7fb5c114b8fb485930d054be8c92e84aa5a8c492ea828",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\">\n\t\t<AsamText>span</AsamText>\n\t\t<AsamText tag=\"p\">这是一段文字。</AsamText>\n\t\t<AsamText tag=\"b\">粗体</AsamText>\n\t\t<AsamText tag=\"i\">斜体</AsamText>\n\t\t<AsamText>\n\t\t\t这是\n\t\t\t<AsamText tag=\"sub\" size=\"small\">subscript</AsamText>\n\t\t</AsamText>\n\t\t<AsamText>\n\t\t\t这是\n\t\t\t<AsamText tag=\"sup\" size=\"small\">superscript</AsamText>\n\t\t</AsamText>\n\t\t<AsamText tag=\"ins\">已插入</AsamText>\n\t\t<AsamText tag=\"del\">已删除</AsamText>\n\t\t<AsamText tag=\"mark\">已标记</AsamText>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextCapOverrideDemo' });\nimport { AsamSpace, AsamText } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "d35b1f0e845a7a52a2a4367e666fc573f9744a32d3e8fa01c8e6b63a296ffb2f",
									"notice": {
										"id": "02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3",
										"url": "/licenses/source-notices/02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt",
										"licenseFilename": "LICENSE-02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/override.vue",
											"sourceSha256": "01e325fbae37686fbfcf2706593c9d339a286fcd0cc7671dffcd555b87009da1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-override/js/Demo.vue",
									"sha256": "5ac5eb4472fcd65fc8cca560e1f2cdfc2e0264abfbc7b72d2f8a3c8e2598763c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\">\n\t\t<AsamText>span</AsamText>\n\t\t<AsamText tag=\"p\">这是一段文字。</AsamText>\n\t\t<AsamText tag=\"b\">粗体</AsamText>\n\t\t<AsamText tag=\"i\">斜体</AsamText>\n\t\t<AsamText>\n\t\t\t这是\n\t\t\t<AsamText tag=\"sub\" size=\"small\">subscript</AsamText>\n\t\t</AsamText>\n\t\t<AsamText>\n\t\t\t这是\n\t\t\t<AsamText tag=\"sup\" size=\"small\">superscript</AsamText>\n\t\t</AsamText>\n\t\t<AsamText tag=\"ins\">已插入</AsamText>\n\t\t<AsamText tag=\"del\">已删除</AsamText>\n\t\t<AsamText tag=\"mark\">已标记</AsamText>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextCapOverrideDemo' });\nimport { AsamSpace, AsamText } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "70f722b3b181400e643b6def472e8da5ebe7cc954da39271b6c89885f2f7f5e2",
									"notice": {
										"id": "02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3",
										"url": "/licenses/source-notices/02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt",
										"licenseFilename": "LICENSE-02803b03fc23a01f50ba0240a9ccfb0463cbc825ec999129db917cb17aa7d9a3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/override.vue",
											"sourceSha256": "01e325fbae37686fbfcf2706593c9d339a286fcd0cc7671dffcd555b87009da1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-mixed",
					"title": "混合使用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-mixed/ts/Demo.vue",
									"sha256": "1667b761a6966f6cbad0e0b7a6d866d2960f90584d92afe8d9f26240e37306fa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\">\n\t\t<AsamText>\n\t\t\t<AsamIcon>\n\t\t\t\t<Grid />\n\t\t\t</AsamIcon>\n\t\t\tElement-Plus\n\t\t</AsamText>\n\t\t<AsamRow>\n\t\t\t<AsamText>评分</AsamText>\n\t\t\t<AsamRate class=\"ml-1\" />\n\t\t</AsamRow>\n\t\t<AsamText>\n\t\t\t文字与图标混排\n\t\t\t<AsamIcon>\n\t\t\t\t<Bell />\n\t\t\t</AsamIcon>\n\t\t\t与组件\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t</AsamText>\n\t</AsamSpace>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTextCapMixedDemo' });\nimport { AsamSpace, AsamText, AsamIcon, AsamRow, AsamRate, AsamButton } from '@asam-ui/ui';\n\nimport { Bell, Grid } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.ml-1 {\n\tmargin-left: 0.25rem;\n}\n</style>\n",
									"originalSourceSha256": "e05c4a6c42799b970a1345c8a8f6a5f549679c436ba7cdda685a29b0e9e94563",
									"notice": {
										"id": "f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb",
										"url": "/licenses/source-notices/f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt",
										"licenseFilename": "LICENSE-f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/mixed.vue",
											"sourceSha256": "9796787d1fbd89687b4b38b32dfbba5c4bbbc9878ffad22dc68dbbef4472f5cf",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/cap-mixed/js/Demo.vue",
									"sha256": "48b2328e4f4ac6a62afa98863b0184475a62f14bba03b8fcb66dbd0eedea02e6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt\n-->\n<template>\n\t<AsamSpace direction=\"vertical\">\n\t\t<AsamText>\n\t\t\t<AsamIcon>\n\t\t\t\t<Grid />\n\t\t\t</AsamIcon>\n\t\t\tElement-Plus\n\t\t</AsamText>\n\t\t<AsamRow>\n\t\t\t<AsamText>评分</AsamText>\n\t\t\t<AsamRate class=\"ml-1\" />\n\t\t</AsamRow>\n\t\t<AsamText>\n\t\t\t文字与图标混排\n\t\t\t<AsamIcon>\n\t\t\t\t<Bell />\n\t\t\t</AsamIcon>\n\t\t\t与组件\n\t\t\t<AsamButton type=\"default\">按钮</AsamButton>\n\t\t</AsamText>\n\t</AsamSpace>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTextCapMixedDemo' });\nimport { AsamSpace, AsamText, AsamIcon, AsamRow, AsamRate, AsamButton } from '@asam-ui/ui';\nimport { Bell, Grid } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.ml-1 {\n\tmargin-left: 0.25rem;\n}\n</style>\n",
									"originalSourceSha256": "9b530ebfcae3dd4753f33b518a8f15464fe1b7e3a54aa030a98d135ca6a5329b",
									"notice": {
										"id": "f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb",
										"url": "/licenses/source-notices/f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt",
										"licenseFilename": "LICENSE-f893fe311e220708f7563252b2d6f421aaa38a036459065ac3f141298c5352cb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/text/mixed.vue",
											"sourceSha256": "9796787d1fbd89687b4b38b32dfbba5c4bbbc9878ffad22dc68dbbef4472f5cf",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "behavior",
					"title": "响应式截断状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/behavior/ts/Demo.vue",
									"sha256": "2073095ce8857970709024fb83a3ab28fa745382e39c4ca251c18ab86ccb78d9",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"content = content === '短文' ? longText : '短文'\"\n\t\t\t>\n\t\t\t\t切换内容\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"width = width === 120 ? 1000 : 120\"\n\t\t\t\t>切换宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"truncated = !truncated\"\n\t\t\t\t>切换截断</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamText\n\t\t\tref=\"text\"\n\t\t\t:truncated=\"truncated\"\n\t\t\t:style=\"{ width: width + 'px', display: 'inline-block' }\"\n\t\t>\n\t\t\t{{ content }}\n\t\t</AsamText>\n\t\t<output v-bind=\"domDataAttrs('data-state', 'single')\">{{ text?.isTruncated }}</output>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamText\n\t\tref=\"multi\"\n\t\t:line-clamp=\"2\"\n\t\tstyle=\"width: 120px\"\n\t\tv-bind=\"domTitleAttrs('')\"\n\t>\n\t\t{{ content }}\n\t</AsamText>\n\t\t<output v-bind=\"domDataAttrs('data-state', 'multi')\">{{ multi?.isTruncated }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\ndefineOptions({ name: 'AsamTextBehaviorDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamText } from '@asam-ui/ui';\nimport type { AsamTextExpose } from '@asam-ui/ui';\nconst longText = '这是一段超过容器宽度的文字，用于观察内容与宽度变化后真实截断状态是否更新。';\nconst content = ref(longText);\nconst width = ref(120);\nconst truncated = ref(true);\nconst text = ref<AsamTextExpose>();\nconst multi = ref<AsamTextExpose>();\n\ntype DemoDataAttributes = Record<`data-${string}`, string | number | boolean | null | undefined>;\nconst domDataAttrs = (\n\tname: `data-${string}`,\n\tvalue: string | number | boolean | null | undefined = ''\n): Pick<HTMLAttributes, 'class'> & DemoDataAttributes => ({\n\tclass: 'ui032-data-marker',\n\t[name]: value\n});\n\nconst domTitleAttrs = (\n\ttitle: NonNullable<HTMLAttributes['title']>\n): Pick<HTMLAttributes, 'class' | 'title'> => ({ class: 'ui032-text-title', title });\n</script>\n<style scoped>\n.controls {\n\tdisplay: flex;\n\tgap: var(--asam-space-sm);\n\tmargin-bottom: var(--asam-space-sm);\n}\n\noutput {\n\tdisplay: block;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamText/behavior/js/Demo.vue",
									"sha256": "1e05811620f5832898998097bee67d0d6ceeecdabe6729fd73ad9f87f705b4ed",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"content = content === '短文' ? longText : '短文'\"\n\t\t\t>\n\t\t\t\t切换内容\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"width = width === 120 ? 1000 : 120\"\n\t\t\t\t>切换宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"truncated = !truncated\"\n\t\t\t\t>切换截断</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamText\n\t\t\tref=\"text\"\n\t\t\t:truncated=\"truncated\"\n\t\t\t:style=\"{ width: width + 'px', display: 'inline-block' }\"\n\t\t>\n\t\t\t{{ content }}\n\t\t</AsamText>\n\t\t<output v-bind=\"domDataAttrs('data-state', 'single')\">{{ text?.isTruncated }}</output>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamText\n\t\tref=\"multi\"\n\t\t:line-clamp=\"2\"\n\t\tstyle=\"width: 120px\"\n\t\tv-bind=\"domTitleAttrs('')\"\n\t>\n\t\t{{ content }}\n\t</AsamText>\n\t\t<output v-bind=\"domDataAttrs('data-state', 'multi')\">{{ multi?.isTruncated }}</output>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTextBehaviorDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamText } from '@asam-ui/ui';\nconst longText = '这是一段超过容器宽度的文字，用于观察内容与宽度变化后真实截断状态是否更新。';\nconst content = ref(longText);\nconst width = ref(120);\nconst truncated = ref(true);\nconst text = ref();\nconst multi = ref();\n\nconst domDataAttrs = (name, value = '') => ({ class: 'ui032-data-marker', [name]: value });\n\nconst domTitleAttrs = (title) => ({ class: 'ui032-text-title', title });\n</script>\n<style scoped>\n.controls {\n\tdisplay: flex;\n\tgap: var(--asam-space-sm);\n\tmargin-bottom: var(--asam-space-sm);\n}\n\noutput {\n\tdisplay: block;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTimeline",
			"documentation": "/component-AsamTimeline.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/basic/ts/Demo.vue",
									"sha256": "2ca45b576361351dbb996d7051fd9580cbb32099dc22f922e3f3e22c8a90bce5",
									"source": "<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem timestamp=\"09:00\" type=\"primary\">准备本地内容</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"09:30\" hollow>完成编辑</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"10:00\" placement=\"top\">\n\t\t\t<p class=\"example-paragraph\">查看结果</p>\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineBasicDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/basic/js/Demo.vue",
									"sha256": "87cb41e5f73d69c53931b44187427643e21d903c6723f6d2e78e04cf4d71e229",
									"source": "<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem timestamp=\"09:00\" type=\"primary\">准备本地内容</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"09:30\" hollow>完成编辑</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"10:00\" placement=\"top\">\n\t\t\t<p class=\"example-paragraph\">查看结果</p>\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineBasicDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-basic/ts/Demo.vue",
									"sha256": "6556130ea274759328a64dd77e96f35328287778931e092cbbb457f1778c6662",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineCapBasicDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n\nconst activities = [\n\t{\n\t\tcontent: '开始事件',\n\t\ttimestamp: '2018-04-15'\n\t},\n\t{\n\t\tcontent: '已通过',\n\t\ttimestamp: '2018-04-13'\n\t},\n\t{\n\t\tcontent: '成功',\n\t\ttimestamp: '2018-04-11'\n\t}\n];\n</script>\n",
									"originalSourceSha256": "5a26cde3bc9145a4990d912e688acadff02eac5a3a0a2bae4c38be5282b27dee",
									"notice": {
										"id": "080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f",
										"url": "/licenses/source-notices/080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt",
										"licenseFilename": "LICENSE-080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/basic.vue",
											"sourceSha256": "4997899e4db0fe5627710b71ddbe54986e5591721ab47fc198cf5ea1b664591b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-basic/js/Demo.vue",
									"sha256": "db7fad1ae0a9ef2be500cde9362ad53d88c525995b313c5f67168227b8a2f6db",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineCapBasicDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\nconst activities = [\n\t{\n\t\tcontent: '开始事件',\n\t\ttimestamp: '2018-04-15'\n\t},\n\t{\n\t\tcontent: '已通过',\n\t\ttimestamp: '2018-04-13'\n\t},\n\t{\n\t\tcontent: '成功',\n\t\ttimestamp: '2018-04-11'\n\t}\n];\n</script>\n",
									"originalSourceSha256": "f555d9be49ff41466510bed031259bee6dc1ed3fb19f85c16f9eeecb2e3e093b",
									"notice": {
										"id": "080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f",
										"url": "/licenses/source-notices/080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt",
										"licenseFilename": "LICENSE-080f68b1366441c21ed8f22dccb893173c8828d5ff88e04f031d24d13615e83f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/basic.vue",
											"sourceSha256": "4997899e4db0fe5627710b71ddbe54986e5591721ab47fc198cf5ea1b664591b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-mode",
					"title": "布局模式（2.13.1）",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-mode/ts/Demo.vue",
									"sha256": "1f7aef3f5f5b048d5162604ebbfd74a135f279b8ddc26cafcc310bf60cc42b29",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"mode\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (\n\t\t\t\t\tvalue === 'start' ||\n\t\t\t\t\tvalue === 'end' ||\n\t\t\t\t\tvalue === 'alternate' ||\n\t\t\t\t\tvalue === 'alternate-reverse'\n\t\t\t\t)\n\t\t\t\t\tmode = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioButton label=\"start\" value=\"start\" />\n\t\t<AsamRadioButton label=\"alternate\" value=\"alternate\" />\n\t\t<AsamRadioButton label=\"alternate-reverse\" value=\"alternate-reverse\" />\n\t\t<AsamRadioButton label=\"end\" value=\"end\" />\n\t</AsamRadioGroup>\n\n\t<AsamTimeline class=\"mt-4\" :mode=\"mode\">\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineCapModeDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nimport type { AsamTimelineProps } from '@asam-ui/ui';\n\nconst activities = [\n\t{\n\t\tcontent: '开始事件',\n\t\ttimestamp: '2018-04-15'\n\t},\n\t{\n\t\tcontent: '已通过',\n\t\ttimestamp: '2018-04-13'\n\t},\n\t{\n\t\tcontent: '成功',\n\t\ttimestamp: '2018-04-11'\n\t}\n];\n\nconst mode = ref<AsamTimelineProps['mode']>('start');\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "9538e7daf8d94c54c808524b6832f483243646e638da79ab8339409478df7cba",
									"notice": {
										"id": "e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056",
										"url": "/licenses/source-notices/e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt",
										"licenseFilename": "LICENSE-e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/mode.vue",
											"sourceSha256": "d154d41e3523ad1537e890009ccfba822f3d3d0b1cfa557fbce34d9c618c52b4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-mode/js/Demo.vue",
									"sha256": "3fcbab801e3143486f11c3dbfc4f9ea04f480e367eed1fed16b074f803c604fe",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt\n-->\n<template>\n\t<AsamRadioGroup\n\t\t:model-value=\"mode\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (\n\t\t\t\t\tvalue === 'start' ||\n\t\t\t\t\tvalue === 'end' ||\n\t\t\t\t\tvalue === 'alternate' ||\n\t\t\t\t\tvalue === 'alternate-reverse'\n\t\t\t\t)\n\t\t\t\t\tmode = value;\n\t\t\t}\n\t\t\"\n\t>\n\t\t<AsamRadioButton label=\"start\" value=\"start\" />\n\t\t<AsamRadioButton label=\"alternate\" value=\"alternate\" />\n\t\t<AsamRadioButton label=\"alternate-reverse\" value=\"alternate-reverse\" />\n\t\t<AsamRadioButton label=\"end\" value=\"end\" />\n\t</AsamRadioGroup>\n\n\t<AsamTimeline class=\"mt-4\" :mode=\"mode\">\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineCapModeDemo' });\nimport { AsamRadioGroup, AsamRadioButton, AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst activities = [\n\t{\n\t\tcontent: '开始事件',\n\t\ttimestamp: '2018-04-15'\n\t},\n\t{\n\t\tcontent: '已通过',\n\t\ttimestamp: '2018-04-13'\n\t},\n\t{\n\t\tcontent: '成功',\n\t\ttimestamp: '2018-04-11'\n\t}\n];\nconst mode = ref('start');\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mt-4 {\n\tmargin-top: 1rem;\n}\n</style>\n",
									"originalSourceSha256": "dcdbcb5f35ec26b3550d7d7db4c46e92c33236be20b0b702f825e0f5b02446c2",
									"notice": {
										"id": "e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056",
										"url": "/licenses/source-notices/e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt",
										"licenseFilename": "LICENSE-e8c1952841ee9e39e399b687d4732dccec7f160b21f4d8a3a4bfd1a4150cc056.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/mode.vue",
											"sourceSha256": "d154d41e3523ad1537e890009ccfba822f3d3d0b1cfa557fbce34d9c618c52b4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-node",
					"title": "⾃定义节点样式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-custom-node/ts/Demo.vue",
									"sha256": "ddc29aadb091f9ef36890f068b50c485f320901a6bf74d7a8c97057d43a5173b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:icon=\"activity.icon\"\n\t\t\t:type=\"activity.type\"\n\t\t\t:color=\"activity.color\"\n\t\t\t:size=\"activity.size\"\n\t\t\t:hollow=\"activity.hollow\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineCapCustomNodeDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n\nimport { MoreFilled } from '@asam-ui/icons-vue';\n\nimport type { AsamTimelineItemProps } from '@asam-ui/ui';\n\ninterface ActivityType extends Partial<AsamTimelineItemProps> {\n\tcontent: string;\n}\n\nconst activities: ActivityType[] = [\n\t{\n\t\tcontent: '自定义图标',\n\t\ttimestamp: '2018-04-12 20:46',\n\t\tsize: 'large',\n\t\ttype: 'primary',\n\t\ticon: MoreFilled\n\t},\n\t{\n\t\tcontent: '自定义颜色',\n\t\ttimestamp: '2018-04-03 20:46',\n\t\tcolor: '#0bbd87'\n\t},\n\t{\n\t\tcontent: '自定义尺寸',\n\t\ttimestamp: '2018-04-03 20:46',\n\t\tsize: 'large'\n\t},\n\t{\n\t\tcontent: '自定义空心节点',\n\t\ttimestamp: '2018-04-03 20:46',\n\t\ttype: 'primary',\n\t\thollow: true\n\t},\n\t{\n\t\tcontent: '默认节点',\n\t\ttimestamp: '2018-04-03 20:46'\n\t}\n];\n</script>\n",
									"originalSourceSha256": "5eaa6f7941a4eb2494f751bf47e3ed9f65156d2c5f30762b3f304f3c84de0b6d",
									"notice": {
										"id": "51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c",
										"url": "/licenses/source-notices/51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt",
										"licenseFilename": "LICENSE-51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/custom-node.vue",
											"sourceSha256": "944f58d93d631ebc9b7ab7417d019e610933a57649bc344f9f79ff130e20b37d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-custom-node/js/Demo.vue",
									"sha256": "414dc2fd3629c3dc24d6601657727d0aab84a9282be6e8f571dfcd548068a386",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:icon=\"activity.icon\"\n\t\t\t:type=\"activity.type\"\n\t\t\t:color=\"activity.color\"\n\t\t\t:size=\"activity.size\"\n\t\t\t:hollow=\"activity.hollow\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineCapCustomNodeDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\nimport { MoreFilled } from '@asam-ui/icons-vue';\nconst activities = [\n\t{\n\t\tcontent: '自定义图标',\n\t\ttimestamp: '2018-04-12 20:46',\n\t\tsize: 'large',\n\t\ttype: 'primary',\n\t\ticon: MoreFilled\n\t},\n\t{\n\t\tcontent: '自定义颜色',\n\t\ttimestamp: '2018-04-03 20:46',\n\t\tcolor: '#0bbd87'\n\t},\n\t{\n\t\tcontent: '自定义尺寸',\n\t\ttimestamp: '2018-04-03 20:46',\n\t\tsize: 'large'\n\t},\n\t{\n\t\tcontent: '自定义空心节点',\n\t\ttimestamp: '2018-04-03 20:46',\n\t\ttype: 'primary',\n\t\thollow: true\n\t},\n\t{\n\t\tcontent: '默认节点',\n\t\ttimestamp: '2018-04-03 20:46'\n\t}\n];\n</script>\n",
									"originalSourceSha256": "d29baa9af5d44cfc25e8b8154b9b08f15b1a4ba08c232dc7d42a6707ef2fbcf2",
									"notice": {
										"id": "51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c",
										"url": "/licenses/source-notices/51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt",
										"licenseFilename": "LICENSE-51db25ca713685e6b95a5148c057675f21dbc2525bc9a195507a4afc18c2fd7c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/custom-node.vue",
											"sourceSha256": "944f58d93d631ebc9b7ab7417d019e610933a57649bc344f9f79ff130e20b37d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom-timestamp",
					"title": "⾃定义时间戳",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-custom-timestamp/ts/Demo.vue",
									"sha256": "5f26650a4f703a889dc2b67e249c8b411e65998b351f3acce074c5f506ad236b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem timestamp=\"2018/4/12\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/12 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/3\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/3 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/2\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/2 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineCapCustomTimestampDemo' });\nimport { AsamTimeline, AsamTimelineItem, AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "34c18d2b2ebbd7d4a275a45e55cba94c4e94127406287a1f1b69a934a9acfa69",
									"notice": {
										"id": "b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4",
										"url": "/licenses/source-notices/b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt",
										"licenseFilename": "LICENSE-b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/custom-timestamp.vue",
											"sourceSha256": "ba705dcb30b11871a5adcb8f6599494f18170ddecda3502c758423f4c34def3d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-custom-timestamp/js/Demo.vue",
									"sha256": "723948a9c8eb6c1853ae6498a403b206ef8fca830286b40bc4734ab550da9610",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem timestamp=\"2018/4/12\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/12 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/3\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/3 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/2\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/2 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineCapCustomTimestampDemo' });\nimport { AsamTimeline, AsamTimelineItem, AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "2f60ac8f968897ae7f7032ec5e4ccf2410ee16dbb47a1c6a518aaf610004e762",
									"notice": {
										"id": "b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4",
										"url": "/licenses/source-notices/b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt",
										"licenseFilename": "LICENSE-b8b1740673420d38f461f160742ca9c087ed7ed9d23adf40e29a61db651e4ff4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/custom-timestamp.vue",
											"sourceSha256": "ba705dcb30b11871a5adcb8f6599494f18170ddecda3502c758423f4c34def3d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-center",
					"title": "居中的步骤条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-center/ts/Demo.vue",
									"sha256": "f150af28c21f9468c3130403394cc78dee3e18b1e065bbb204f2b2b5b87a2aaf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem center timestamp=\"2018/4/12\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/12 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/3\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/3 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem center timestamp=\"2018/4/2\" placement=\"top\"> 开始事件 </AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/2\" placement=\"top\"> 结束事件 </AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineCapCenterDemo' });\nimport { AsamTimeline, AsamTimelineItem, AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "dc9bfd9c1c058e2d8e6f32c4d5dcf6165c0b14df48574dff57c55d7fb80fc2dc",
									"notice": {
										"id": "7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1",
										"url": "/licenses/source-notices/7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt",
										"licenseFilename": "LICENSE-7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/center.vue",
											"sourceSha256": "29c3b5df4ceacc7974746dda65fc1e278444e663ede7eb620498e52f87414bbe",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-center/js/Demo.vue",
									"sha256": "d0095d61d8a919a6659dcbe5111729f54dd87526a7215f4d7ea4cd51a319ac5e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt\n-->\n<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem center timestamp=\"2018/4/12\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/12 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/3\" placement=\"top\">\n\t\t\t<AsamCard>\n\t\t\t\t<h4>更新 GitHub 模板</h4>\n\t\t\t\t<p class=\"example-paragraph\">Tom 提交于 2018/4/3 20:46</p>\n\t\t\t</AsamCard>\n\t\t</AsamTimelineItem>\n\t\t<AsamTimelineItem center timestamp=\"2018/4/2\" placement=\"top\"> 开始事件 </AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"2018/4/2\" placement=\"top\"> 结束事件 </AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineCapCenterDemo' });\nimport { AsamTimeline, AsamTimelineItem, AsamCard } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "984be2ef5fe348b39840fbf8e0657da3c8c9d9f03da22397bd052a950fb82f32",
									"notice": {
										"id": "7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1",
										"url": "/licenses/source-notices/7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt",
										"licenseFilename": "LICENSE-7dd294d38fa98d701ba9840837564a429019bcf4073048213597fe0f4d1ee7b1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/center.vue",
											"sourceSha256": "29c3b5df4ceacc7974746dda65fc1e278444e663ede7eb620498e52f87414bbe",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-reverse",
					"title": "反向 2.11.9",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-reverse/ts/Demo.vue",
									"sha256": "18cd335908e8c10e55b83f5ee0c449e97aa60951dd21e0628311c7fbe19dd859",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt\n-->\n<template>\n\t<AsamSwitch\n\t\t:model-value=\"reverse\"\n\t\tactive-text=\"reverse\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'boolean') reverse = value;\n\t\t\t}\n\t\t\"\n\t/>\n\n\t<AsamTimeline class=\"mt-2\" :reverse=\"reverse\">\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineCapReverseDemo' });\nimport { AsamSwitch, AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst reverse = ref(true);\nconst activities = [\n\t{\n\t\tcontent: '开始事件',\n\t\ttimestamp: '2018-04-15'\n\t},\n\t{\n\t\tcontent: '已通过',\n\t\ttimestamp: '2018-04-13'\n\t},\n\t{\n\t\tcontent: '成功',\n\t\ttimestamp: '2018-04-11'\n\t}\n];\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mt-2 {\n\tmargin-top: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "09f619cf41c7733a270f5db9f2ddd1a842fbdfbdbff87a072514af2a74ccf1a2",
									"notice": {
										"id": "2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6",
										"url": "/licenses/source-notices/2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt",
										"licenseFilename": "LICENSE-2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/reverse.vue",
											"sourceSha256": "e5575823431ead552892580cd9dd73bf241f2b043d06e6033b9efc5181fb57a2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeline/cap-reverse/js/Demo.vue",
									"sha256": "77069c280b6ab43f70cf02a409a56d0f4907af652370ebcf5706be3da4d600fa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt\n-->\n<template>\n\t<AsamSwitch\n\t\t:model-value=\"reverse\"\n\t\tactive-text=\"reverse\"\n\t\t@update:model-value=\"\n\t\t\t(value) => {\n\t\t\t\tif (typeof value === 'boolean') reverse = value;\n\t\t\t}\n\t\t\"\n\t/>\n\n\t<AsamTimeline class=\"mt-2\" :reverse=\"reverse\">\n\t\t<AsamTimelineItem\n\t\t\tv-for=\"(activity, index) in activities\"\n\t\t\t:key=\"index\"\n\t\t\t:timestamp=\"activity.timestamp\"\n\t\t>\n\t\t\t{{ activity.content }}\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineCapReverseDemo' });\nimport { AsamSwitch, AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst reverse = ref(true);\nconst activities = [\n\t{\n\t\tcontent: '开始事件',\n\t\ttimestamp: '2018-04-15'\n\t},\n\t{\n\t\tcontent: '已通过',\n\t\ttimestamp: '2018-04-13'\n\t},\n\t{\n\t\tcontent: '成功',\n\t\ttimestamp: '2018-04-11'\n\t}\n];\n</script>\n\n<style scoped>\n/* Local styles keep this sample runnable without a website utility-CSS preset. */\n.mt-2 {\n\tmargin-top: 0.5rem;\n}\n</style>\n",
									"originalSourceSha256": "39d73d69571808d35c2a690a8fc23fc5ba705d23977228a08f0eddce89160f37",
									"notice": {
										"id": "2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6",
										"url": "/licenses/source-notices/2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt",
										"licenseFilename": "LICENSE-2d7e5292b3d42eadac0d3ba5f57abb5f11f3a42078486298f407bf3f6bdd72f6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/timeline/reverse.vue",
											"sourceSha256": "e5575823431ead552892580cd9dd73bf241f2b043d06e6033b9efc5181fb57a2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTimelineItem",
			"documentation": "/component-AsamTimelineItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimelineItem/basic/ts/Demo.vue",
									"sha256": "96329bc22f27cd0390cf091552f881d4db1553c06517384d90be935e34e0a3d1",
									"source": "<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem timestamp=\"09:00\" type=\"primary\">准备本地内容</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"09:30\" hollow>完成编辑</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"10:00\" placement=\"top\">\n\t\t\t<p class=\"example-paragraph\">查看结果</p>\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimelineItemBasicDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimelineItem/basic/js/Demo.vue",
									"sha256": "a54c9f1cc9be50fe3ce221b14accea52c10903b3c0613bb5fc2c06617170d8c4",
									"source": "<template>\n\t<AsamTimeline>\n\t\t<AsamTimelineItem timestamp=\"09:00\" type=\"primary\">准备本地内容</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"09:30\" hollow>完成编辑</AsamTimelineItem>\n\t\t<AsamTimelineItem timestamp=\"10:00\" placement=\"top\">\n\t\t\t<p class=\"example-paragraph\">查看结果</p>\n\t\t</AsamTimelineItem>\n\t</AsamTimeline>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimelineItemBasicDemo' });\nimport { AsamTimeline, AsamTimelineItem } from '@asam-ui/ui';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTree",
			"documentation": "/component-AsamTree.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/basic/ts/Demo.vue",
									"sha256": "8cff26efa7da9cab45846e28b248917137cdcac775b85d16056e08d3e92e711b",
									"source": "<template>\n\t<AsamTree\n\t\tv-bind=\"{ data, nodeKey: 'id', showCheckbox: true, defaultExpandedKeys: ['root'] }\"\n\t\t@node-click=\"selected = $event.label\"\n\t>\n\t\t<template #default=\"{ data: item }\">\n\t\t\t<span>{{ item.label }}</span>\n\t\t</template>\n\t</AsamTree>\n\t<p class=\"example-paragraph\" role=\"status\">当前节点：{{ selected }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTree } from '@asam-ui/ui';\nconst data = [\n\t{\n\t\tid: 'root',\n\t\tlabel: '本地记录',\n\t\tchildren: [\n\t\t\t{ id: 'draft', label: '草稿' },\n\t\t\t{ id: 'locked', label: '锁定记录', disabled: true }\n\t\t]\n\t}\n];\nconst selected = ref('');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/basic/js/Demo.vue",
									"sha256": "15ef86900e5e765ecd259b6452057643a4e965bea7264f8b3aa525af9e56a0b2",
									"source": "<template>\n\t<AsamTree\n\t\tv-bind=\"{ data, nodeKey: 'id', showCheckbox: true, defaultExpandedKeys: ['root'] }\"\n\t\t@node-click=\"selected = $event.label\"\n\t>\n\t\t<template #default=\"{ data: item }\">\n\t\t\t<span>{{ item.label }}</span>\n\t\t</template>\n\t</AsamTree>\n\t<p class=\"example-paragraph\" role=\"status\">当前节点：{{ selected }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTree } from '@asam-ui/ui';\nconst data = [\n\t{\n\t\tid: 'root',\n\t\tlabel: '本地记录',\n\t\tchildren: [\n\t\t\t{ id: 'draft', label: '草稿' },\n\t\t\t{ id: 'locked', label: '锁定记录', disabled: true }\n\t\t]\n\t}\n];\nconst selected = ref('');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-basic/ts/Demo.vue",
									"sha256": "c58c2633119d2ce6bc4ada56ec12d4b99be2962b92dfc06654ff921a39c5e3c5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\t:props=\"defaultProps\"\n\t\t@node-click=\"handleNodeClick\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/basic.vue\n\ninterface Tree {\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst handleNodeClick = (data: Tree) => {\n\tconsole.log(data);\n};\n\nconst data: Tree[] = [\n\t{\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\n</script>\n",
									"originalSourceSha256": "a37a19cc95ac2a1bcb02fb95ef41e96c9fedf16451dfa124dc46a8655443975d",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-basic/js/Demo.vue",
									"sha256": "cfa580cdf6127dde44fcbae57e0a283f11fb2c9f320371d9e1ff82380a3ace89",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\t:props=\"defaultProps\"\n\t\t@node-click=\"handleNodeClick\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nconst handleNodeClick = (data) => {\n\tconsole.log(data);\n};\nconst data = [\n\t{\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\n</script>\n",
									"originalSourceSha256": "1ba0ae80da9969ac258ac4ef35b0907043fda0886d998bdf1688859693dfcc54",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-selectable",
					"title": "可选择的虚拟树",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-selectable/ts/Demo.vue",
									"sha256": "89a62aa27f1aab6929bd9caaa2eb74efc23778cf537e272abc68b821dc599139",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:props=\"props\"\n\t\t:load=\"loadNode\"\n\t\tlazy\n\t\tshow-checkbox\n\t\t@check-change=\"handleCheckChange\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/selectable.vue\n\nimport type { AsamTreeLoadFunction } from '@asam-ui/ui';\n\ninterface Tree {\n\tname: string;\n}\n\nlet count = 1;\nconst props = {\n\tlabel: 'name',\n\tchildren: 'zones'\n};\n\nconst handleCheckChange = (data: Tree, checked: boolean, indeterminate: boolean) => {\n\tconsole.log(data, checked, indeterminate);\n};\n\nconst loadNode: AsamTreeLoadFunction = (node, resolve) => {\n\tif (node.level === 0) {\n\t\treturn resolve([{ name: 'region1' }, { name: 'region2' }]);\n\t}\n\tif (node.level > 3) return resolve([]);\n\n\tlet hasChild = false;\n\tif (node.data.name === 'region1') {\n\t\thasChild = true;\n\t} else if (node.data.name === 'region2') {\n\t\thasChild = false;\n\t} else {\n\t\thasChild = Math.random() > 0.5;\n\t}\n\n\tsetTimeout(() => {\n\t\tlet data: Tree[];\n\t\tif (hasChild) {\n\t\t\tdata = [\n\t\t\t\t{\n\t\t\t\t\tname: `zone${count++}`\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: `zone${count++}`\n\t\t\t\t}\n\t\t\t];\n\t\t} else {\n\t\t\tdata = [];\n\t\t}\n\n\t\tresolve(data);\n\t}, 500);\n};\n</script>\n",
									"originalSourceSha256": "1b7ffc888c5db4072518bb5fdf5892a9e129d2a8c45a01972e667bab694f7bef",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-selectable/js/Demo.vue",
									"sha256": "9267fd6fc518d3a5bb077ffb2aa0e96e41d037b8520880f5ae291d6ef552da4b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:props=\"props\"\n\t\t:load=\"loadNode\"\n\t\tlazy\n\t\tshow-checkbox\n\t\t@check-change=\"handleCheckChange\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nlet count = 1;\nconst props = {\n\tlabel: 'name',\n\tchildren: 'zones'\n};\nconst handleCheckChange = (data, checked, indeterminate) => {\n\tconsole.log(data, checked, indeterminate);\n};\nconst loadNode = (node, resolve) => {\n\tif (node.level === 0) {\n\t\treturn resolve([{ name: 'region1' }, { name: 'region2' }]);\n\t}\n\tif (node.level > 3) return resolve([]);\n\tlet hasChild = false;\n\tif (node.data.name === 'region1') {\n\t\thasChild = true;\n\t} else if (node.data.name === 'region2') {\n\t\thasChild = false;\n\t} else {\n\t\thasChild = Math.random() > 0.5;\n\t}\n\tsetTimeout(() => {\n\t\tlet data;\n\t\tif (hasChild) {\n\t\t\tdata = [\n\t\t\t\t{\n\t\t\t\t\tname: `zone${count++}`\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: `zone${count++}`\n\t\t\t\t}\n\t\t\t];\n\t\t} else {\n\t\t\tdata = [];\n\t\t}\n\t\tresolve(data);\n\t}, 500);\n};\n</script>\n",
									"originalSourceSha256": "efa183729c15aa9cee89ddcc6c1b03ca6ae2172e8e250604329560b901066a76",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-leaf",
					"title": "懒加载自定义叶子节点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-custom-leaf/ts/Demo.vue",
									"sha256": "297f453b55a405361bf04f058820220baf80dfee15863ac2477542a809172267",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree style=\"max-width: 600px\" :props=\"props\" :load=\"loadNode\" lazy show-checkbox />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/custom-leaf.vue\n\nimport type { AsamTreeLoadFunction } from '@asam-ui/ui';\n\ninterface Tree {\n\tname: string;\n\tleaf?: boolean;\n}\n\nconst props = {\n\tlabel: 'name',\n\tchildren: 'zones',\n\tisLeaf: 'leaf'\n};\n\nconst loadNode: AsamTreeLoadFunction = (node, resolve) => {\n\tif (node.level === 0) {\n\t\treturn resolve([{ name: 'region' }]);\n\t}\n\tif (node.level > 1) return resolve([]);\n\n\tsetTimeout(() => {\n\t\tconst data: Tree[] = [\n\t\t\t{\n\t\t\t\tname: 'leaf',\n\t\t\t\tleaf: true\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'zone'\n\t\t\t}\n\t\t];\n\n\t\tresolve(data);\n\t}, 500);\n};\n</script>\n",
									"originalSourceSha256": "b03d645455c321983cef5f299208682dd92a2f4fbd27f31b86e3dfb5dcf2153e",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-custom-leaf/js/Demo.vue",
									"sha256": "df7a611a569bb23d5a9db68c5dd2502634651447684db24b8a1716b7f40c4f8e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree style=\"max-width: 600px\" :props=\"props\" :load=\"loadNode\" lazy show-checkbox />\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nconst props = {\n\tlabel: 'name',\n\tchildren: 'zones',\n\tisLeaf: 'leaf'\n};\nconst loadNode = (node, resolve) => {\n\tif (node.level === 0) {\n\t\treturn resolve([{ name: 'region' }]);\n\t}\n\tif (node.level > 1) return resolve([]);\n\tsetTimeout(() => {\n\t\tconst data = [\n\t\t\t{\n\t\t\t\tname: 'leaf',\n\t\t\t\tleaf: true\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'zone'\n\t\t\t}\n\t\t];\n\t\tresolve(data);\n\t}, 500);\n};\n</script>\n",
									"originalSourceSha256": "9d294da5dd1d8e73da94e277a6d008c01dd1667749356ee0df4e466db22f4711",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-multiple-times-load",
					"title": "多次懒加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-multiple-times-load/ts/Demo.vue",
									"sha256": "b015953429b6eaf31d2b41f6f8915c4890d616761c5ad1d29d30a3ca43377bda",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree style=\"max-width: 600px\" :props=\"props\" :load=\"loadNode\" lazy />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/multiple-times-load.vue\n\nimport type { AsamTreeLoadFunction } from '@asam-ui/ui';\n\nconst props = {\n\tlabel: 'name',\n\tchildren: 'zones',\n\tisLeaf: 'leaf'\n};\n\nlet time = 0;\nconst loadNode: AsamTreeLoadFunction = (node, resolve, reject) => {\n\tif (node.level === 0) {\n\t\treturn resolve([{ name: 'region' }]);\n\t}\n\ttime++;\n\tif (node.level >= 1) {\n\t\tsetTimeout(() => {\n\t\t\tif (time > 3) {\n\t\t\t\treturn resolve([\n\t\t\t\t\t{ name: 'zone1', leaf: true },\n\t\t\t\t\t{ name: 'zone2', leaf: true },\n\t\t\t\t\t{ name: 'zone3', leaf: true }\n\t\t\t\t]);\n\t\t\t} else {\n\t\t\t\treturn reject();\n\t\t\t}\n\t\t}, 3000);\n\t}\n};\n</script>\n",
									"originalSourceSha256": "5752d1496e7b4da03b6f68fe355d3a87d9a4b12dc79cbaae543c4bfcb351dcd3",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-multiple-times-load/js/Demo.vue",
									"sha256": "1b4df25f1ff4c063048cc6a735ee56c86ce3dd34a342ce5c9422179af07ff260",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree style=\"max-width: 600px\" :props=\"props\" :load=\"loadNode\" lazy />\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nconst props = {\n\tlabel: 'name',\n\tchildren: 'zones',\n\tisLeaf: 'leaf'\n};\nlet time = 0;\nconst loadNode = (node, resolve, reject) => {\n\tif (node.level === 0) {\n\t\treturn resolve([{ name: 'region' }]);\n\t}\n\ttime++;\n\tif (node.level >= 1) {\n\t\tsetTimeout(() => {\n\t\t\tif (time > 3) {\n\t\t\t\treturn resolve([\n\t\t\t\t\t{ name: 'zone1', leaf: true },\n\t\t\t\t\t{ name: 'zone2', leaf: true },\n\t\t\t\t\t{ name: 'zone3', leaf: true }\n\t\t\t\t]);\n\t\t\t} else {\n\t\t\t\treturn reject();\n\t\t\t}\n\t\t}, 3000);\n\t}\n};\n</script>\n",
									"originalSourceSha256": "00b8015ef81d25202fb2a1d10e248a3b73d29541109fd55cc5c790c23ed52f2b",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-disabled",
					"title": "禁用复选框",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-disabled/ts/Demo.vue",
									"sha256": "260deff667315efe5d3193337eefaebb235fc50f5b760b36542cacbadd63f627",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree style=\"max-width: 600px\" :data=\"data\" :props=\"defaultProps\" show-checkbox />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/disabled.vue\n\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label',\n\tdisabled: 'disabled'\n};\n\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 4,\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 5,\n\t\t\t\t\t\tlabel: '三级节点 3-1-2',\n\t\t\t\t\t\tdisabled: true\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tdisabled: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 6,\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 7,\n\t\t\t\t\t\tlabel: '三级节点 3-2-2',\n\t\t\t\t\t\tdisabled: true\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "5b241856e37f00df5daf673aa672ce67985db3d6571b33a87886b8fd4773c1ef",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-disabled/js/Demo.vue",
									"sha256": "ee25a2eaeff5eb49f5bd7c984896dd7812d2877edaebc04b8b777105ba74a5ca",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree style=\"max-width: 600px\" :data=\"data\" :props=\"defaultProps\" show-checkbox />\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/disabled.vue\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label',\n\tdisabled: 'disabled'\n};\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 4,\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 5,\n\t\t\t\t\t\tlabel: '三级节点 3-1-2',\n\t\t\t\t\t\tdisabled: true\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tdisabled: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 6,\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 7,\n\t\t\t\t\t\tlabel: '三级节点 3-2-2',\n\t\t\t\t\t\tdisabled: true\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "a00d58d991e19119596c9917a7926c88f72b77ab59c60a418f98c9fb03b364ac",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-default-state",
					"title": "默认扩展和默认检查",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-default-state/ts/Demo.vue",
									"sha256": "1a8c58bdd8f81a9cb5395ea8f849e926098aa68f4bb8fb71da0aa7f9bd58e750",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\tshow-checkbox\n\t\tnode-key=\"id\"\n\t\t:default-expanded-keys=\"[2, 3]\"\n\t\t:default-checked-keys=\"[5]\"\n\t\t:props=\"defaultProps\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/default-state.vue\n\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "3822f4b330b5eea64c2c5e9e39e410ff8ff5f7efd35cfea662b560ead76ea8b6",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-default-state/js/Demo.vue",
									"sha256": "afe706bd01d758f54400b19c1420c0319ca00a2f7183a573640db3a59546d24a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\tshow-checkbox\n\t\tnode-key=\"id\"\n\t\t:default-expanded-keys=\"[2, 3]\"\n\t\t:default-checked-keys=\"[5]\"\n\t\t:props=\"defaultProps\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/default-state.vue\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "ad2d62508dc8a46a61bcbfc2755dcad9e4b51df6e543b3067ce18e4599227554",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-checking-tree",
					"title": "树节点的选择",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-checking-tree/ts/Demo.vue",
									"sha256": "ff650bb0c24985b1ed3c955652934987ba88781a62f093aaddc4c24383eb4700",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTree\n\t\t\tref=\"treeRef\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"data\"\n\t\t\tshow-checkbox\n\t\t\tdefault-expand-all\n\t\t\tnode-key=\"id\"\n\t\t\thighlight-current\n\t\t\t:props=\"defaultProps\"\n\t\t/>\n\n\t\t<div class=\"flex flex-wrap demo-gap mt-2\">\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"getCheckedNodes\"\n\t\t\t\t>按节点获取</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"getCheckedKeys\">按键获取</AsamButton>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"setCheckedNodes\"\n\t\t\t\t>按节点设置</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"setCheckedKeys\">按键设置</AsamButton>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"resetChecked\">重置</AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree, AsamButton } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/checking-tree.vue\n\nimport { ref } from 'vue';\n\nimport type { AsamTreeRenderContentContext, AsamTreeInstance } from '@asam-ui/ui';\n\ninterface Tree {\n\tid: number;\n\tlabel: string;\n\tchildren?: Tree[];\n}\ntype Node = AsamTreeRenderContentContext['node'];\n\nconst treeRef = ref<AsamTreeInstance>();\n\nconst getCheckedNodes = () => {\n\tconsole.log(treeRef.value!.getCheckedNodes(false, false));\n};\nconst getCheckedKeys = () => {\n\tconsole.log(treeRef.value!.getCheckedKeys(false));\n};\nconst setCheckedNodes = () => {\n\ttreeRef.value!.setCheckedNodes(\n\t\t[\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 9,\n\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t}\n\t\t] as Node[],\n\t\tfalse\n\t);\n};\nconst setCheckedKeys = () => {\n\ttreeRef.value!.setCheckedKeys([3], false);\n};\nconst resetChecked = () => {\n\ttreeRef.value!.setCheckedKeys([], false);\n};\n\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\n\nconst data: Tree[] = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n.mt-2 {\n\tmargin-top: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "34db6327ed99359610f3afbc792aa35b5281cebfd9436025880cfe7ac7f16291",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-checking-tree/js/Demo.vue",
									"sha256": "06ceb5dd205d8ababde0a0d630ef196461f22ec4d214b72092e888423c49997c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTree\n\t\t\tref=\"treeRef\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"data\"\n\t\t\tshow-checkbox\n\t\t\tdefault-expand-all\n\t\t\tnode-key=\"id\"\n\t\t\thighlight-current\n\t\t\t:props=\"defaultProps\"\n\t\t/>\n\n\t\t<div class=\"flex flex-wrap demo-gap mt-2\">\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"getCheckedNodes\"\n\t\t\t\t>按节点获取</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"getCheckedKeys\">按键获取</AsamButton>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"setCheckedNodes\"\n\t\t\t\t>按节点设置</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"setCheckedKeys\">按键设置</AsamButton>\n\t\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"resetChecked\">重置</AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamTree, AsamButton } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/checking-tree.vue\nimport { ref } from 'vue';\nconst treeRef = ref();\nconst getCheckedNodes = () => {\n\tconsole.log(treeRef.value.getCheckedNodes(false, false));\n};\nconst getCheckedKeys = () => {\n\tconsole.log(treeRef.value.getCheckedKeys(false));\n};\nconst setCheckedNodes = () => {\n\ttreeRef.value.setCheckedNodes(\n\t\t[\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 9,\n\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t}\n\t\t],\n\t\tfalse\n\t);\n};\nconst setCheckedKeys = () => {\n\ttreeRef.value.setCheckedKeys([3], false);\n};\nconst resetChecked = () => {\n\ttreeRef.value.setCheckedKeys([], false);\n};\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n.mt-2 {\n\tmargin-top: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "23f1324271bd00909ea409e1c7168695a61c956fcd0d1dc09998140bfd714c6c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-customized-node",
					"title": "自定义节点内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-customized-node/ts/Demo.vue",
									"sha256": "91f4a186d8d9e66e7c31593589448e9b19a46fad667d6ce91e0bc8cfbc56f0c0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"custom-tree-container\">\n\t\t<p class=\"example-paragraph\">使用 render-content</p>\n\t\t<AsamTree\n\t\t\tref=\"treeRef1\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"dataSource\"\n\t\t\tshow-checkbox\n\t\t\tnode-key=\"id\"\n\t\t\tdefault-expand-all\n\t\t\t:expand-on-click-node=\"false\"\n\t\t\t:render-content=\"renderContent\"\n\t\t/>\n\t\t<p class=\"example-paragraph\">使用作用域插槽</p>\n\t\t<AsamTree\n\t\t\tref=\"treeRef2\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"dataSource\"\n\t\t\tshow-checkbox\n\t\t\tnode-key=\"id\"\n\t\t\tdefault-expand-all\n\t\t\t:expand-on-click-node=\"false\"\n\t\t>\n\t\t\t<template #default=\"{ node, data }\">\n\t\t\t\t<div class=\"custom-tree-node\">\n\t\t\t\t\t<span>{{ node.label }}</span>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<AsamButton type=\"default\" link @click=\"append(data)\"> 追加 </AsamButton>\n\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\tstyle=\"margin-left: 4px\"\n\t\t\t\t\t\t\ttype=\"default\"\n\t\t\t\t\t\t\tlink\n\t\t\t\t\t\t\t@click=\"remove(node, data)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t删除\n\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamTree>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree, AsamButton } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/customized-node.vue\n\nimport { ref } from 'vue';\n\nimport type {\n\tAsamTreeRenderContentContext,\n\tAsamTreeRenderContentFunction,\n\tAsamTreeInstance\n} from '@asam-ui/ui';\n\ninterface Tree {\n\tid: number;\n\tlabel: string;\n\tchildren?: Tree[];\n}\ntype Node = AsamTreeRenderContentContext['node'];\ntype Data = AsamTreeRenderContentContext['data'];\n\nlet id = 1000;\nconst treeRef1 = ref<AsamTreeInstance>();\nconst treeRef2 = ref<AsamTreeInstance>();\n\nconst append = (data: Data) => {\n\tconst newChild = { id: id++, label: 'testtest', children: [] };\n\ttreeRef1.value?.append(newChild, data);\n\ttreeRef2.value?.append(newChild, data);\n};\n\nconst remove = (node: Node, data: Data) => {\n\ttreeRef1.value?.remove(data);\n\ttreeRef2.value?.remove(data);\n};\n\nconst renderContent: AsamTreeRenderContentFunction = (h, { node, data }) => {\n\treturn h(\n\t\t'div',\n\t\t{\n\t\t\tclass: 'custom-tree-node'\n\t\t},\n\t\t[\n\t\t\th('span', null, node.label),\n\t\t\th('div', null, [\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\tlink: true,\n\t\t\t\t\t\tonClick: () => append(data)\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tdefault: () => '添加'\n\t\t\t\t\t}\n\t\t\t\t),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\tlink: true,\n\t\t\t\t\t\tstyle: 'margin-left: 4px',\n\t\t\t\t\t\tonClick: () => remove(node, data)\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tdefault: () => '删除'\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t])\n\t\t]\n\t);\n};\n\nconst dataSource = ref<Tree[]>([\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n]);\n</script>\n\n<style>\n.custom-tree-node {\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tfont-size: 14px;\n\tpadding-right: 8px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "40044db4dc3bfbf50eee935fcbd5108450837c48e06d618eb68d7efe8c5cc5e0",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-customized-node/js/Demo.vue",
									"sha256": "e741c49909fb79aaccf7d7f84aaa6e6f1fe524816b225922d511699f28b7d177",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"custom-tree-container\">\n\t\t<p class=\"example-paragraph\">使用 render-content</p>\n\t\t<AsamTree\n\t\t\tref=\"treeRef1\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"dataSource\"\n\t\t\tshow-checkbox\n\t\t\tnode-key=\"id\"\n\t\t\tdefault-expand-all\n\t\t\t:expand-on-click-node=\"false\"\n\t\t\t:render-content=\"renderContent\"\n\t\t/>\n\t\t<p class=\"example-paragraph\">使用作用域插槽</p>\n\t\t<AsamTree\n\t\t\tref=\"treeRef2\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"dataSource\"\n\t\t\tshow-checkbox\n\t\t\tnode-key=\"id\"\n\t\t\tdefault-expand-all\n\t\t\t:expand-on-click-node=\"false\"\n\t\t>\n\t\t\t<template #default=\"{ node, data }\">\n\t\t\t\t<div class=\"custom-tree-node\">\n\t\t\t\t\t<span>{{ node.label }}</span>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<AsamButton type=\"default\" link @click=\"append(data)\"> 追加 </AsamButton>\n\t\t\t\t\t\t<AsamButton\n\t\t\t\t\t\t\tstyle=\"margin-left: 4px\"\n\t\t\t\t\t\t\ttype=\"default\"\n\t\t\t\t\t\t\tlink\n\t\t\t\t\t\t\t@click=\"remove(node, data)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t删除\n\t\t\t\t\t\t</AsamButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamTree>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamTree, AsamButton } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/customized-node.vue\nimport { ref } from 'vue';\nlet id = 1000;\nconst treeRef1 = ref();\nconst treeRef2 = ref();\nconst append = (data) => {\n\tconst newChild = { id: id++, label: 'testtest', children: [] };\n\ttreeRef1.value?.append(newChild, data);\n\ttreeRef2.value?.append(newChild, data);\n};\nconst remove = (node, data) => {\n\ttreeRef1.value?.remove(data);\n\ttreeRef2.value?.remove(data);\n};\nconst renderContent = (h, { node, data }) => {\n\treturn h(\n\t\t'div',\n\t\t{\n\t\t\tclass: 'custom-tree-node'\n\t\t},\n\t\t[\n\t\t\th('span', null, node.label),\n\t\t\th('div', null, [\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\tlink: true,\n\t\t\t\t\t\tonClick: () => append(data)\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tdefault: () => '添加'\n\t\t\t\t\t}\n\t\t\t\t),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\tlink: true,\n\t\t\t\t\t\tstyle: 'margin-left: 4px',\n\t\t\t\t\t\tonClick: () => remove(node, data)\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tdefault: () => '删除'\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t])\n\t\t]\n\t);\n};\nconst dataSource = ref([\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n]);\n</script>\n\n<style>\n.custom-tree-node {\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tfont-size: 14px;\n\tpadding-right: 8px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "56606e3915eba133c7b41dd670e1d6aff64030edb8b7ebdbcd21191f7585bb9c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-node-class",
					"title": "自定义节点类名",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-custom-node-class/ts/Demo.vue",
									"sha256": "74436932a391b004ce01e86a12bf93f10dd3293d46dcebd320addb6e018a078f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"custom-tree-node-container\">\n\t\t<AsamTree\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"data\"\n\t\t\tshow-checkbox\n\t\t\tnode-key=\"id\"\n\t\t\tdefault-expand-all\n\t\t\t:expand-on-click-node=\"false\"\n\t\t\t:props=\"{ class: customNodeClass }\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/custom-node-class.vue\n\nimport type { AsamTreeNodeData } from '@asam-ui/ui';\n\ninterface Tree {\n\tid: number;\n\tlabel: string;\n\tisPenultimate?: boolean;\n\tchildren?: Tree[];\n}\n\nconst customNodeClass = ({ isPenultimate }: AsamTreeNodeData) =>\n\tisPenultimate ? 'is-penultimate' : '';\n\nconst data: Tree[] = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tisPenultimate: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style>\n.is-penultimate > .el-tree-node__content .el-tree-node__label {\n\tcolor: #626aef;\n}\n\n.is-penultimate > .el-tree-node__children > div {\n\tdisplay: inline-block;\n\tmargin-right: 4px;\n\n\t.el-tree-node__content {\n\t\tpadding-right: 16px;\n\t}\n\n\t&:not(:first-child) .el-tree-node__content {\n\t\tpadding-left: 0 !important;\n\t}\n}\n</style>\n",
									"originalSourceSha256": "a55526db4ffa3e137636da1fde5ffe85969c0a6f545590a1d71ca85a0f97cd0c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-custom-node-class/js/Demo.vue",
									"sha256": "79b9a47b674a6afa63cbb6c0166581dcf928445ef50132158aabacb2ba86cfe0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"custom-tree-node-container\">\n\t\t<AsamTree\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"data\"\n\t\t\tshow-checkbox\n\t\t\tnode-key=\"id\"\n\t\t\tdefault-expand-all\n\t\t\t:expand-on-click-node=\"false\"\n\t\t\t:props=\"{ class: customNodeClass }\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nconst customNodeClass = ({ isPenultimate }) => (isPenultimate ? 'is-penultimate' : '');\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tisPenultimate: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style>\n.is-penultimate > .el-tree-node__content .el-tree-node__label {\n\tcolor: #626aef;\n}\n\n.is-penultimate > .el-tree-node__children > div {\n\tdisplay: inline-block;\n\tmargin-right: 4px;\n\n\t.el-tree-node__content {\n\t\tpadding-right: 16px;\n\t}\n\n\t&:not(:first-child) .el-tree-node__content {\n\t\tpadding-left: 0 !important;\n\t}\n}\n</style>\n",
									"originalSourceSha256": "40842172e5e7e02e6eac50270857c36e99dd74973ca925066305abbfae6ff2c1",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-filtering",
					"title": "树节点过滤",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-filtering/ts/Demo.vue",
									"sha256": "9da1443bf211bad7668c57722623726c10c0049dc730e6af8c32db5d264377d5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamInput\n\t\t\t:model-value=\"filterText\"\n\t\t\tclass=\"w-60 mb-2\"\n\t\t\tplaceholder=\"筛选关键字\"\n\t\t\t@update:model-value=\"updateFilterText\"\n\t\t/>\n\n\t\t<AsamTree\n\t\t\tref=\"treeRef\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\tclass=\"filter-tree\"\n\t\t\t:data=\"data\"\n\t\t\t:props=\"defaultProps\"\n\t\t\tdefault-expand-all\n\t\t\t:filter-node-method=\"filterNode\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamInput, AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/filtering.vue\n\nimport { ref, watch } from 'vue';\n\nimport type {\n\tAsamInputEmits,\n\tAsamTreeFilterNodeMethodFunction,\n\tAsamTreeInstance\n} from '@asam-ui/ui';\n\ninterface Tree {\n\tid: number;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst filterText = ref('');\nconst treeRef = ref<AsamTreeInstance>();\n\nconst updateFilterText = (value: AsamInputEmits['update:modelValue'][0]) => {\n\tfilterText.value = String(value);\n};\n\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\n\nwatch(filterText, (val) => {\n\ttreeRef.value!.filter(val);\n});\n\nconst filterNode: AsamTreeFilterNodeMethodFunction = (value: string, data) => {\n\tif (!value) return true;\n\treturn data.label.includes(value);\n};\n\nconst data: Tree[] = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n.w-60 {\n\twidth: calc(var(--asam-space-xs) * 60);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "2bf59d60da0da1f708cf355ebb5ff7e63aa5f9e72a88d52f1d4718d76f5b278f",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-filtering/js/Demo.vue",
									"sha256": "f7c8e44f25c4e2c578dfb1786b9bdecde86eb9cb62d1857eda462108dae7c3d9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamInput\n\t\t\t:model-value=\"filterText\"\n\t\t\tclass=\"w-60 mb-2\"\n\t\t\tplaceholder=\"筛选关键字\"\n\t\t\t@update:model-value=\"updateFilterText\"\n\t\t/>\n\n\t\t<AsamTree\n\t\t\tref=\"treeRef\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\tclass=\"filter-tree\"\n\t\t\t:data=\"data\"\n\t\t\t:props=\"defaultProps\"\n\t\t\tdefault-expand-all\n\t\t\t:filter-node-method=\"filterNode\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamInput, AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/filtering.vue\nimport { ref, watch } from 'vue';\nconst filterText = ref('');\nconst treeRef = ref();\nconst updateFilterText = (value) => {\n\tfilterText.value = String(value);\n};\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\nwatch(filterText, (val) => {\n\ttreeRef.value.filter(val);\n});\nconst filterNode = (value, data) => {\n\tif (!value) return true;\n\treturn data.label.includes(value);\n};\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 4,\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 9,\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 10,\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 2,\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 5,\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 6,\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: 3,\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 7,\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 8,\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-2 {\n\tmargin-bottom: var(--asam-space-sm);\n}\n.w-60 {\n\twidth: calc(var(--asam-space-xs) * 60);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "68947c43c32aeec7f26a9c72a5f2a579d1927f4f222871400f30545e634e98f6",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-accordion",
					"title": "手风琴效果",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-accordion/ts/Demo.vue",
									"sha256": "9ef8eaaa258275611d1141fbc191185870bae28431cf88ffc97d7fc48257f5d7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\t:props=\"defaultProps\"\n\t\taccordion\n\t\t@node-click=\"handleNodeClick\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/accordion.vue\n\ninterface Tree {\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst handleNodeClick = (data: Tree) => {\n\tconsole.log(data);\n};\n\nconst data: Tree[] = [\n\t{\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\n</script>\n",
									"originalSourceSha256": "3a984717681e6378f7d94533e08221f29c1c2bf0e2ca257d5fd3c8b6a1f59cbe",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-accordion/js/Demo.vue",
									"sha256": "7917328371f479f23471d36a9d57003e2acd945602515d06fd7399cc6dc4612b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\t:props=\"defaultProps\"\n\t\taccordion\n\t\t@node-click=\"handleNodeClick\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nconst handleNodeClick = (data) => {\n\tconsole.log(data);\n};\nconst data = [\n\t{\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst defaultProps = {\n\tchildren: 'children',\n\tlabel: 'label'\n};\n</script>\n",
									"originalSourceSha256": "d1ae5911e47759bc472065199156ee9eae337617af43f68bc79dbf16d1d5bb8e",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-draggable",
					"title": "可拖放",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-draggable/ts/Demo.vue",
									"sha256": "f9cbe7682e5d22729aa821d75e82a0a74894ae051b50ddbbf4d8b5d061f89a5c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:allow-drop=\"allowDrop\"\n\t\t:allow-drag=\"allowDrag\"\n\t\t:data=\"data\"\n\t\tdraggable\n\t\tdefault-expand-all\n\t\tnode-key=\"id\"\n\t\t@node-drag-start=\"handleDragStart\"\n\t\t@node-drag-enter=\"handleDragEnter\"\n\t\t@node-drag-leave=\"handleDragLeave\"\n\t\t@node-drag-over=\"handleDragOver\"\n\t\t@node-drag-end=\"handleDragEnd\"\n\t\t@node-drop=\"handleDrop\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree/draggable.vue\n\nimport type {\n\tAsamTreeAllowDropType,\n\tAsamTreeNodeDropType,\n\tAsamTreeRenderContentContext\n} from '@asam-ui/ui';\n\ntype Node = AsamTreeRenderContentContext['node'];\n\nconst handleDragStart = (node: Node, _event: DragEvent) => {\n\tconsole.log('drag start', node);\n};\nconst handleDragEnter = (draggingNode: Node, dropNode: Node, _event: DragEvent) => {\n\tconsole.log('tree drag enter:', dropNode.label);\n};\nconst handleDragLeave = (draggingNode: Node, dropNode: Node, _event: DragEvent) => {\n\tconsole.log('tree drag leave:', dropNode.label);\n};\nconst handleDragOver = (draggingNode: Node, dropNode: Node, _event: DragEvent) => {\n\tconsole.log('tree drag over:', dropNode.label);\n};\nconst handleDragEnd = (\n\tdraggingNode: Node,\n\tdropNode: Node | null,\n\tdropType: AsamTreeNodeDropType,\n\t_event: DragEvent\n) => {\n\tconsole.log('tree drag end:', dropNode && dropNode.label, dropType);\n};\nconst handleDrop = (\n\tdraggingNode: Node,\n\tdropNode: Node,\n\tdropType: Exclude<AsamTreeNodeDropType, 'none'>,\n\t_event: DragEvent\n) => {\n\tconsole.log('tree drop:', dropNode.label, dropType);\n};\nconst allowDrop = (draggingNode: Node, dropNode: Node, type: AsamTreeAllowDropType) => {\n\tif (dropNode.data.label === '二级节点 3-1') {\n\t\treturn type !== 'inner';\n\t} else {\n\t\treturn true;\n\t}\n};\nconst allowDrag = (draggingNode: Node) => {\n\treturn !draggingNode.data.label.includes('三级节点 3-1-1');\n};\n\nconst data = [\n\t{\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "bc2dea6e7d37f24f53979c2dd29089901e45f26f4a38bb3fd2023678accf761c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTree/native-draggable/js/Demo.vue",
									"sha256": "d4b8178c24641021781247ce794fe2ccba330c5da04f222042fc92e7a899cc31",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTree\n\t\tstyle=\"max-width: 600px\"\n\t\t:allow-drop=\"allowDrop\"\n\t\t:allow-drag=\"allowDrag\"\n\t\t:data=\"data\"\n\t\tdraggable\n\t\tdefault-expand-all\n\t\tnode-key=\"id\"\n\t\t@node-drag-start=\"handleDragStart\"\n\t\t@node-drag-enter=\"handleDragEnter\"\n\t\t@node-drag-leave=\"handleDragLeave\"\n\t\t@node-drag-over=\"handleDragOver\"\n\t\t@node-drag-end=\"handleDragEnd\"\n\t\t@node-drop=\"handleDrop\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTree } from '@asam-ui/ui';\nconst handleDragStart = (node, _event) => {\n\tconsole.log('drag start', node);\n};\nconst handleDragEnter = (draggingNode, dropNode, _event) => {\n\tconsole.log('tree drag enter:', dropNode.label);\n};\nconst handleDragLeave = (draggingNode, dropNode, _event) => {\n\tconsole.log('tree drag leave:', dropNode.label);\n};\nconst handleDragOver = (draggingNode, dropNode, _event) => {\n\tconsole.log('tree drag over:', dropNode.label);\n};\nconst handleDragEnd = (draggingNode, dropNode, dropType, _event) => {\n\tconsole.log('tree drag end:', dropNode && dropNode.label, dropType);\n};\nconst handleDrop = (draggingNode, dropNode, dropType, _event) => {\n\tconsole.log('tree drop:', dropNode.label, dropType);\n};\nconst allowDrop = (draggingNode, dropNode, type) => {\n\tif (dropNode.data.label === '二级节点 3-1') {\n\t\treturn type !== 'inner';\n\t} else {\n\t\treturn true;\n\t}\n};\nconst allowDrag = (draggingNode) => {\n\treturn !draggingNode.data.label.includes('三级节点 3-1-1');\n};\nconst data = [\n\t{\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "cd9bc29d2e0af55b3317e1069074d0358add4d4a1197639a0b97c83f4cf3dbb3",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTreeV2",
			"documentation": "/component-AsamTreeV2.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/basic/ts/Demo.vue",
									"sha256": "e0ae13421f355196c1cb2871c727095e882c3be683028c38daba7911bab28fe4",
									"source": "<template>\n\t<AsamTreeV2\n\t\tv-bind=\"{\n\t\t\tdata,\n\t\t\theight: 180,\n\t\t\titemSize: 32,\n\t\t\tshowCheckbox: true,\n\t\t\tdefaultExpandedKeys: ['root'],\n\t\t\tprops: { value: 'id', label: 'label', children: 'children', disabled: 'disabled' }\n\t\t}\"\n\t\t@node-click=\"selected = $event.label\"\n\t>\n\t\t<template #default=\"{ data: item }\">\n\t\t\t<span>{{ item.label }}</span>\n\t\t</template>\n\t</AsamTreeV2>\n\t<p class=\"example-paragraph\" role=\"status\">当前节点：{{ selected }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeV2BasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTreeV2 } from '@asam-ui/ui';\nconst data = [\n\t{\n\t\tid: 'root',\n\t\tlabel: '本地记录',\n\t\tchildren: [\n\t\t\t{ id: 'draft', label: '草稿' },\n\t\t\t{ id: 'locked', label: '锁定记录', disabled: true }\n\t\t]\n\t}\n];\nconst selected = ref('');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/basic/js/Demo.vue",
									"sha256": "47c505267ec8d3a207834647363ee23fb0c96901ceaee468198bda0b1fd06cba",
									"source": "<template>\n\t<AsamTreeV2\n\t\tv-bind=\"{\n\t\t\tdata,\n\t\t\theight: 180,\n\t\t\titemSize: 32,\n\t\t\tshowCheckbox: true,\n\t\t\tdefaultExpandedKeys: ['root'],\n\t\t\tprops: { value: 'id', label: 'label', children: 'children', disabled: 'disabled' }\n\t\t}\"\n\t\t@node-click=\"selected = $event.label\"\n\t>\n\t\t<template #default=\"{ data: item }\">\n\t\t\t<span>{{ item.label }}</span>\n\t\t</template>\n\t</AsamTreeV2>\n\t<p class=\"example-paragraph\" role=\"status\">当前节点：{{ selected }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeV2BasicDemo' });\nimport { ref } from 'vue';\nimport { AsamTreeV2 } from '@asam-ui/ui';\nconst data = [\n\t{\n\t\tid: 'root',\n\t\tlabel: '本地记录',\n\t\tchildren: [\n\t\t\t{ id: 'draft', label: '草稿' },\n\t\t\t{ id: 'locked', label: '锁定记录', disabled: true }\n\t\t]\n\t}\n];\nconst selected = ref('');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-basic/ts/Demo.vue",
									"sha256": "af826607449f8e9807b66490844a0f8672d3b8b4374177e9e9ef3770b8ea2bb2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" :height=\"200\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/basic.vue\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst getKey = (prefix: string, id: number) => {\n\treturn `${prefix}-${id}`;\n};\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\n\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n",
									"originalSourceSha256": "c01919b45a9fe9528c2ac0ced0ef55a2964cb97d2640f6567f3db8f6cbba5b5c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-basic/js/Demo.vue",
									"sha256": "2cec0b7539ee1b297373c3fee7258ef0956d7901483be74fb22585030851ecb0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" :height=\"200\" />\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\nconst getKey = (prefix, id) => {\n\treturn `${prefix}-${id}`;\n};\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n",
									"originalSourceSha256": "53272c05ae02114d9b28e16cd82ca6ab963c1e906f6ee629f1df7d85e24915d1",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-selectable",
					"title": "可选择的虚拟树",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-selectable/ts/Demo.vue",
									"sha256": "c11377a53bc1c0502b4ab994e87a5be867f249bb1d2c4b6347141e6ab2c5d35e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" show-checkbox :height=\"200\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/selectable.vue\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst getKey = (prefix: string, id: number) => {\n\treturn `${prefix}-${id}`;\n};\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\n\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n",
									"originalSourceSha256": "06a958e2eb458173d6725017cf83a027d42b9be8417b045dee4381161db01f27",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-selectable/js/Demo.vue",
									"sha256": "28869c53a90dd030a0bc6b72961690c2747e28a4c240ed5e0e7405412fe2a25c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" show-checkbox :height=\"200\" />\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\nconst getKey = (prefix, id) => {\n\treturn `${prefix}-${id}`;\n};\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n",
									"originalSourceSha256": "aae5b07de9c2d17dac6c8b2da10b71f8177c9c1199893ae7338e123d8fb70cbc",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-disabled",
					"title": "禁用复选框",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-disabled/ts/Demo.vue",
									"sha256": "c5e9bc827e9dc193455f7b8a7eba310b0d218a40b183f12048b5a8112cd27950",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" show-checkbox :height=\"200\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/disabled.vue\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n\tdisabled: boolean;\n}\n\nconst getKey = (prefix: string, id: number) => {\n\treturn `${prefix}-${id}`;\n};\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined,\n\t\t\t\tdisabled: nodeKey.includes('2')\n\t\t\t};\n\t\t});\n};\n\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children',\n\tdisabled: 'disabled'\n};\nconst data = createData(4, 30, 40);\n</script>\n",
									"originalSourceSha256": "94ab23fa6da4995364d71c805e4f10390016ed05396999951abaca7b9813caf2",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-disabled/js/Demo.vue",
									"sha256": "d7283b442db190ad2e35bee9f16c52409665cbf4961e5ccc772a8689d93d42bd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" show-checkbox :height=\"200\" />\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\nconst getKey = (prefix, id) => {\n\treturn `${prefix}-${id}`;\n};\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined,\n\t\t\t\tdisabled: nodeKey.includes('2')\n\t\t\t};\n\t\t});\n};\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children',\n\tdisabled: 'disabled'\n};\nconst data = createData(4, 30, 40);\n</script>\n",
									"originalSourceSha256": "5fa5e2f4e57f41eff812d13ce4eaefe5946e3e8f84457021e36f361575cd46c1",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-default-state",
					"title": "默认扩展和默认检查",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-default-state/ts/Demo.vue",
									"sha256": "be22f03943aa55c7d408cdd42f4eb83027ef6be7320dcac9ec182cb254601986",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\t:height=\"200\"\n\t\t:props=\"props\"\n\t\tshow-checkbox\n\t\t:default-checked-keys=\"defaultCheckedKeys\"\n\t\t:default-expanded-keys=\"defaultExpandedKeys\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/default-state.vue\n\nimport { ref } from 'vue';\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst getKey = (prefix: string, id: number) => {\n\treturn `${prefix}-${id}`;\n};\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\n\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\nconst checkedKeys: string[] = [];\nconst expanedKeys: string[] = [];\nfor (const datum of data) {\n\tconst children = datum.children;\n\tif (children) {\n\t\texpanedKeys.push(datum.id);\n\t\tcheckedKeys.push(children[0].id);\n\t\tbreak;\n\t}\n}\n\nconst defaultCheckedKeys = ref(checkedKeys);\nconst defaultExpandedKeys = ref(expanedKeys);\n</script>\n",
									"originalSourceSha256": "5aefb63f571b636ee0336ec7321600ebb11b9dd533b9c39d122f40185b51d085",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-default-state/js/Demo.vue",
									"sha256": "f9908959082d031fb8ae130d957908df6c652da1fd36b9ddf20563cf5eb9c480",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\t:height=\"200\"\n\t\t:props=\"props\"\n\t\tshow-checkbox\n\t\t:default-checked-keys=\"defaultCheckedKeys\"\n\t\t:default-expanded-keys=\"defaultExpandedKeys\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/default-state.vue\nimport { ref } from 'vue';\nconst getKey = (prefix, id) => {\n\treturn `${prefix}-${id}`;\n};\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\nconst checkedKeys = [];\nconst expanedKeys = [];\nfor (const datum of data) {\n\tconst children = datum.children;\n\tif (children) {\n\t\texpanedKeys.push(datum.id);\n\t\tcheckedKeys.push(children[0].id);\n\t\tbreak;\n\t}\n}\nconst defaultCheckedKeys = ref(checkedKeys);\nconst defaultExpandedKeys = ref(expanedKeys);\n</script>\n",
									"originalSourceSha256": "39cb0aee70837fd5ad8e67f9fcda56b97d70b33f930a7a9b7e873490c4d266fd",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-node",
					"title": "自定义节点内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-custom-node/ts/Demo.vue",
									"sha256": "d85c61776c7eefc54924da34f691fa0fba85e6dcbe17b80f5e8fb251934761e3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" :height=\"200\">\n\t\t<template #default=\"{ node }\">\n\t\t\t<AsamIcon class=\"el-icon--left\">\n\t\t\t\t<Document v-if=\"node.isLeaf\" />\n\t\t\t\t<Folder v-else-if=\"!node.expanded\" />\n\t\t\t\t<FolderOpened v-else />\n\t\t\t</AsamIcon>\n\t\t\t<span class=\"prefix\" :class=\"{ 'is-leaf': node.isLeaf }\">[ElementPlus]</span>\n\t\t\t<span>{{ node.label }}</span>\n\t\t</template>\n\t</AsamTreeV2>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2, AsamIcon } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/custom-node.vue\n\nimport { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst getKey = (prefix: string, id: number) => {\n\treturn `${prefix}-${id}`;\n};\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\n\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n\n<style scoped>\n.prefix {\n\tcolor: var(--el-color-primary);\n\tmargin-right: 10px;\n}\n\n.prefix.is-leaf {\n\tcolor: var(--el-color-success);\n}\n</style>\n",
									"originalSourceSha256": "51bebdcd4acc236d00f1b575c12af4524728f5b512d8e4360584d31f5bda1002",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-custom-node/js/Demo.vue",
									"sha256": "a99f93013f337b8e734e1b207eec423271468ab5bcf5dbf6e66df73def209cf3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" :height=\"200\">\n\t\t<template #default=\"{ node }\">\n\t\t\t<AsamIcon class=\"el-icon--left\">\n\t\t\t\t<Document v-if=\"node.isLeaf\" />\n\t\t\t\t<Folder v-else-if=\"!node.expanded\" />\n\t\t\t\t<FolderOpened v-else />\n\t\t\t</AsamIcon>\n\t\t\t<span class=\"prefix\" :class=\"{ 'is-leaf': node.isLeaf }\">[ElementPlus]</span>\n\t\t\t<span>{{ node.label }}</span>\n\t\t</template>\n\t</AsamTreeV2>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2, AsamIcon } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/custom-node.vue\nimport { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';\nconst getKey = (prefix, id) => {\n\treturn `${prefix}-${id}`;\n};\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n\n<style scoped>\n.prefix {\n\tcolor: var(--el-color-primary);\n\tmargin-right: 10px;\n}\n\n.prefix.is-leaf {\n\tcolor: var(--el-color-success);\n}\n</style>\n",
									"originalSourceSha256": "41385f2ce997202391f21cf55d56ddb9c72fe007f44090cb174802fe9c307263",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-node-class",
					"title": "自定义节点类名",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-custom-node-class/ts/Demo.vue",
									"sha256": "2567f74b47d2fd89a67b98f8bd1c23bf25eeba7dd9982b2b3ef922c1c7c04d7a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\tshow-checkbox\n\t\t:expand-on-click-node=\"false\"\n\t\t:props=\"{ class: customNodeClass }\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/custom-node-class.vue\n\nimport type { AsamTreeV2Node, AsamTreeV2NodeData } from '@asam-ui/ui';\n\ninterface Tree {\n\tid?: string;\n\tvalue?: string;\n\tlabel?: string;\n\tisPenultimate?: boolean;\n\tchildren?: Tree[];\n}\n\nconst customNodeClass = ({ isPenultimate }: AsamTreeV2NodeData, _node: AsamTreeV2Node) =>\n\tisPenultimate ? 'is-penultimate' : '';\n\nconst data: Tree[] = [\n\t{\n\t\tid: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: '4',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tisPenultimate: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: '9',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: '10',\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: '2',\n\t\tlabel: '一级节点 2',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: '5',\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: '6',\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: '3',\n\t\tlabel: '一级节点 3',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: '7',\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: '8',\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n:deep(.is-penultimate .el-tree-node__label) {\n\tcolor: #626aef;\n\tfont-weight: 600;\n}\n</style>\n",
									"originalSourceSha256": "fe569dc28ed90c2a1419b0bab35345d3b00bc707c0bd0ab8905038fd73586470",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-custom-node-class/js/Demo.vue",
									"sha256": "08ae005424835eff7f3d93b4ba5c14fc6a9bd723449a0a4e495c638a26090adf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2\n\t\tstyle=\"max-width: 600px\"\n\t\t:data=\"data\"\n\t\tshow-checkbox\n\t\t:expand-on-click-node=\"false\"\n\t\t:props=\"{ class: customNodeClass }\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2 } from '@asam-ui/ui';\nconst customNodeClass = ({ isPenultimate }, _node) => (isPenultimate ? 'is-penultimate' : '');\nconst data = [\n\t{\n\t\tid: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: '4',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tisPenultimate: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: '9',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: '10',\n\t\t\t\t\t\tlabel: '三级节点 1-1-2'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: '2',\n\t\tlabel: '一级节点 2',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: '5',\n\t\t\t\tlabel: '二级节点 2-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: '6',\n\t\t\t\tlabel: '二级节点 2-2'\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tid: '3',\n\t\tlabel: '一级节点 3',\n\t\tisPenultimate: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: '7',\n\t\t\t\tlabel: '二级节点 3-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: '8',\n\t\t\t\tlabel: '二级节点 3-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n:deep(.is-penultimate .el-tree-node__label) {\n\tcolor: #626aef;\n\tfont-weight: 600;\n}\n</style>\n",
									"originalSourceSha256": "e817e8b1e1aac7b6435be6ba1f11225c56de0b5f358fbc4af3f5f771dfe72866",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-icon",
					"title": "自定义节点图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-custom-icon/ts/Demo.vue",
									"sha256": "ba3e388092880b4727173a2fe1d055bf43670effde0b8aead356cde6f751d487",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" :height=\"200\">\n\t\t<template #default=\"{ node }\">\n\t\t\t<AsamIcon class=\"node-icon\" :class=\"{ 'is-leaf': node.isLeaf }\">\n\t\t\t\t<Document v-if=\"node.isLeaf\" />\n\t\t\t\t<Folder v-else-if=\"!node.expanded\" />\n\t\t\t\t<FolderOpened v-else />\n\t\t\t</AsamIcon>\n\t\t\t<span>{{ node.label }}</span>\n\t\t</template>\n\t</AsamTreeV2>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeV2, AsamIcon } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/custom-icon.vue\n\nimport { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst getKey = (prefix: string, id: number) => {\n\treturn `${prefix}-${id}`;\n};\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\n\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n\n<style scoped>\n.node-icon {\n\tmargin-right: 5px;\n\tcolor: var(--el-color-warning);\n}\n</style>\n",
									"originalSourceSha256": "143ab02667ab5b2b7f8b11a7698c41a64d63742b403a9334d01abb92cc61ceb6",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-custom-icon/js/Demo.vue",
									"sha256": "915364f8cdd293ab17d26a7d68b1d85b2ca841476b6344dec38328ab7b1d6f95",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeV2 style=\"max-width: 600px\" :data=\"data\" :props=\"props\" :height=\"200\">\n\t\t<template #default=\"{ node }\">\n\t\t\t<AsamIcon class=\"node-icon\" :class=\"{ 'is-leaf': node.isLeaf }\">\n\t\t\t\t<Document v-if=\"node.isLeaf\" />\n\t\t\t\t<Folder v-else-if=\"!node.expanded\" />\n\t\t\t\t<FolderOpened v-else />\n\t\t\t</AsamIcon>\n\t\t\t<span>{{ node.label }}</span>\n\t\t</template>\n\t</AsamTreeV2>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeV2, AsamIcon } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/custom-icon.vue\nimport { Document, Folder, FolderOpened } from '@asam-ui/icons-vue';\nconst getKey = (prefix, id) => {\n\treturn `${prefix}-${id}`;\n};\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst data = createData(4, 30, 40);\n</script>\n\n<style scoped>\n.node-icon {\n\tmargin-right: 5px;\n\tcolor: var(--el-color-warning);\n}\n</style>\n",
									"originalSourceSha256": "c1e9c49ffb2975eb88fbdc4a6edf8470bef05f89e18bbd86e81b082c496e2e4a",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-filter",
					"title": "树节点过滤",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-filter/ts/Demo.vue",
									"sha256": "0326ed264b1480e108a36bbeec820e25f2826c1fbfe34bef3c09b0eeb18c235e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamInput\n\t\t\t:model-value=\"query\"\n\t\t\tstyle=\"width: 240px\"\n\t\t\tplaceholder=\"请输入关键字\"\n\t\t\t@update:model-value=\"onQueryChanged\"\n\t\t/>\n\t\t<AsamTreeV2\n\t\t\tref=\"treeRef\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"data\"\n\t\t\t:props=\"props\"\n\t\t\t:filter-method=\"filterMethod\"\n\t\t\t:height=\"200\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamInput, AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/filter.vue\n\nimport { ref } from 'vue';\n\nimport type { AsamInputEmits, AsamTreeV2NodeData, AsamTreeV2Instance } from '@asam-ui/ui';\n\ninterface Tree {\n\tid: string;\n\tlabel: string;\n\tchildren?: Tree[];\n}\n\nconst getKey = (prefix: string, id: number) => `${prefix}-${id}`;\n\nconst createData = (\n\tmaxDeep: number,\n\tmaxChildren: number,\n\tminNodesNumber: number,\n\tdeep = 1,\n\tkey = 'node'\n): Tree[] => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\n\nconst query = ref('');\nconst treeRef = ref<AsamTreeV2Instance>();\nconst data = createData(4, 30, 5);\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\n\nconst onQueryChanged = (value: AsamInputEmits['update:modelValue'][0]) => {\n\tquery.value = String(value);\n\ttreeRef.value!.filter(query.value);\n};\nconst filterMethod = (query: string, node: AsamTreeV2NodeData) => node.label!.includes(query);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "6573808cff3824b83f6ab66ae17ef98bf1667edbb35d1c06e7158c04626367d2",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeV2/native-filter/js/Demo.vue",
									"sha256": "35019c4e3755884f43196cf98b648574d6d67dc5d9838d71e0feece13e580f47",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamInput\n\t\t\t:model-value=\"query\"\n\t\t\tstyle=\"width: 240px\"\n\t\t\tplaceholder=\"请输入关键字\"\n\t\t\t@update:model-value=\"onQueryChanged\"\n\t\t/>\n\t\t<AsamTreeV2\n\t\t\tref=\"treeRef\"\n\t\t\tstyle=\"max-width: 600px\"\n\t\t\t:data=\"data\"\n\t\t\t:props=\"props\"\n\t\t\t:filter-method=\"filterMethod\"\n\t\t\t:height=\"200\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamInput, AsamTreeV2 } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-v2/filter.vue\nimport { ref } from 'vue';\nconst getKey = (prefix, id) => `${prefix}-${id}`;\nconst createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {\n\tlet id = 0;\n\treturn Array.from({ length: minNodesNumber })\n\t\t.fill(deep)\n\t\t.map(() => {\n\t\t\tconst childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n\t\t\tconst nodeKey = getKey(key, ++id);\n\t\t\treturn {\n\t\t\t\tid: nodeKey,\n\t\t\t\tlabel: nodeKey.replace(/^node/, '节点'),\n\t\t\t\tchildren: childrenNumber\n\t\t\t\t\t? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)\n\t\t\t\t\t: undefined\n\t\t\t};\n\t\t});\n};\nconst query = ref('');\nconst treeRef = ref();\nconst data = createData(4, 30, 5);\nconst props = {\n\tvalue: 'id',\n\tlabel: 'label',\n\tchildren: 'children'\n};\nconst onQueryChanged = (value) => {\n\tquery.value = String(value);\n\ttreeRef.value.filter(query.value);\n};\nconst filterMethod = (query, node) => node.label.includes(query);\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "ab2da25daf3e1aac71257b87c292dd80934cfc56a19ad2064d57ec881ccfe3c3",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamWatermark",
			"documentation": "/component-AsamWatermark.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/basic/ts/Demo.vue",
									"sha256": "768ad84d49d5bffd48fb5ac953ff6baa997344312d2b5403b2528fffc1687eb9",
									"source": "<template>\n\t<AsamWatermark :content=\"['ASAM', '本地示例']\">\n\t\t<div class=\"watermark-content\">用于展示水印的本地内容区域。</div>\n\t</AsamWatermark>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamWatermarkBasicDemo' });\nimport { AsamWatermark } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.watermark-content {\n\theight: 240px;\n\tpadding: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/basic/js/Demo.vue",
									"sha256": "2adaea47bf02b101f38e013319495f92f253fc8811f1b2f4a976048ca62a240e",
									"source": "<template>\n\t<AsamWatermark :content=\"['ASAM', '本地示例']\">\n\t\t<div class=\"watermark-content\">用于展示水印的本地内容区域。</div>\n\t</AsamWatermark>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamWatermarkBasicDemo' });\nimport { AsamWatermark } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.watermark-content {\n\theight: 240px;\n\tpadding: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-basic/ts/Demo.vue",
									"sha256": "dfebc696d18e738b8d86ebeb9c0c6af2415db43b29626f5b7243db514b0bc589",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt\n-->\n<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"isDark = !isDark\"\n\t\t>切换深色水印</AsamButton\n\t>\n\t<AsamWatermark :font=\"font\">\n\t\t<div style=\"height: 500px\" />\n\t</AsamWatermark>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamWatermarkCapBasicDemo' });\nimport { AsamButton, AsamWatermark } from '@asam-ui/ui';\n\nimport { reactive, watch } from 'vue';\nimport { ref } from 'vue';\nconst isDark = ref(false);\n\nconst font = reactive({\n\tcolor: 'rgba(0, 0, 0, .15)'\n});\n\nwatch(\n\tisDark,\n\t() => {\n\t\tfont.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';\n\t},\n\t{\n\t\timmediate: true\n\t}\n);\n</script>\n",
									"originalSourceSha256": "91ea5405612eb2a9fd62ea529ca4f1acb4ac5b1ce999bfa64fe5dbbdba036b81",
									"notice": {
										"id": "e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1",
										"url": "/licenses/source-notices/e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt",
										"licenseFilename": "LICENSE-e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/basic.vue",
											"sourceSha256": "ad60bb395f964c0df5efbb10a25f55452c2d942d7dfc2679b526eb35899956aa",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-basic/js/Demo.vue",
									"sha256": "c12de00ee1ff354739a1fdac717e5aa3d28e150ada28e52607566ec48146f30b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt\n-->\n<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"isDark = !isDark\"\n\t\t>切换深色水印</AsamButton\n\t>\n\t<AsamWatermark :font=\"font\">\n\t\t<div style=\"height: 500px\" />\n\t</AsamWatermark>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamWatermarkCapBasicDemo' });\nimport { AsamButton, AsamWatermark } from '@asam-ui/ui';\nimport { reactive, watch } from 'vue';\nimport { ref } from 'vue';\nconst isDark = ref(false);\nconst font = reactive({\n\tcolor: 'rgba(0, 0, 0, .15)'\n});\nwatch(\n\tisDark,\n\t() => {\n\t\tfont.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';\n\t},\n\t{\n\t\timmediate: true\n\t}\n);\n</script>\n",
									"originalSourceSha256": "c7338e37001f36abea69c56b81a0cd65d0fb0b46a389551e7d0eb0cd5319f282",
									"notice": {
										"id": "e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1",
										"url": "/licenses/source-notices/e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt",
										"licenseFilename": "LICENSE-e4cab9f35c620af36f05c822b4357597d5cc42fbc671b9cfebda2abe9691edb1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/basic.vue",
											"sourceSha256": "ad60bb395f964c0df5efbb10a25f55452c2d942d7dfc2679b526eb35899956aa",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-multi-line",
					"title": "多行水印",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-multi-line/ts/Demo.vue",
									"sha256": "1c5bc14bdaf670b8487ed6bdec4208334c7069f2bd73b93d344a0ffebd5aa531",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt\n-->\n<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"isDark = !isDark\"\n\t\t>切换深色水印</AsamButton\n\t>\n\t<AsamWatermark :font=\"font\" :content=\"['Element+', 'ASAM UI']\">\n\t\t<div style=\"height: 500px\" />\n\t</AsamWatermark>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamWatermarkCapMultiLineDemo' });\nimport { AsamButton, AsamWatermark } from '@asam-ui/ui';\n\nimport { reactive, watch } from 'vue';\nimport { ref } from 'vue';\nconst isDark = ref(false);\n\nconst font = reactive({\n\tcolor: 'rgba(0, 0, 0, .15)'\n});\n\nwatch(\n\tisDark,\n\t() => {\n\t\tfont.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';\n\t},\n\t{\n\t\timmediate: true\n\t}\n);\n</script>\n",
									"originalSourceSha256": "1749fce04f02f4807f018c2941519c0eb9f4ba5a320e44db35d152269900f9c9",
									"notice": {
										"id": "4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7",
										"url": "/licenses/source-notices/4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt",
										"licenseFilename": "LICENSE-4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/multi-line.vue",
											"sourceSha256": "7c0f886b82c3cd842c225f02c9ba09250e00dbee030d30cc769fa39344ee7526",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-multi-line/js/Demo.vue",
									"sha256": "45c690ba1a60399054367fb5f354aac2c0dc50117ca44d7f635b18f822366f2e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt\n-->\n<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"isDark = !isDark\"\n\t\t>切换深色水印</AsamButton\n\t>\n\t<AsamWatermark :font=\"font\" :content=\"['Element+', 'ASAM UI']\">\n\t\t<div style=\"height: 500px\" />\n\t</AsamWatermark>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamWatermarkCapMultiLineDemo' });\nimport { AsamButton, AsamWatermark } from '@asam-ui/ui';\nimport { reactive, watch } from 'vue';\nimport { ref } from 'vue';\nconst isDark = ref(false);\nconst font = reactive({\n\tcolor: 'rgba(0, 0, 0, .15)'\n});\nwatch(\n\tisDark,\n\t() => {\n\t\tfont.color = isDark.value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';\n\t},\n\t{\n\t\timmediate: true\n\t}\n);\n</script>\n",
									"originalSourceSha256": "f3030a9c3b414d80c3f009a72e78b4e65d417bc35d6e42b45484cec14b569fcf",
									"notice": {
										"id": "4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7",
										"url": "/licenses/source-notices/4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt",
										"licenseFilename": "LICENSE-4dbd0aa18f1b10c90fc6f24559af49ee82ee8528070a66d0717c553fb71ab6d7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/multi-line.vue",
											"sourceSha256": "7c0f886b82c3cd842c225f02c9ba09250e00dbee030d30cc769fa39344ee7526",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-image",
					"title": "图片水印",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-image/ts/Demo.vue",
									"sha256": "d502f10e5a418fde6127925c8c9f4620bfc114991f7f84c504cb4e2c6a4ae194",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt\n-->\n<template>\n\t<AsamWatermark\n\t\t:width=\"130\"\n\t\t:height=\"30\"\n\t\timage=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t>\n\t\t<div style=\"height: 500px\" />\n\t</AsamWatermark>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamWatermarkCapImageDemo' });\nimport { AsamWatermark } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "dc6f8d61b69e8e59a1fd545b1745ac51882bdddcbf88a6e871a7ac96ac2082a6",
									"notice": {
										"id": "81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09",
										"url": "/licenses/source-notices/81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt",
										"licenseFilename": "LICENSE-81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/image.vue",
											"sourceSha256": "137f127a047e7e1bbbd59a73e0bf30bea09f095acbaebd6a1a2105376fbeb091",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-image/js/Demo.vue",
									"sha256": "24d8b6e18802e65571e0492dab68f47164afa109a84fd44f8b08d315028bb227",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt\n-->\n<template>\n\t<AsamWatermark\n\t\t:width=\"130\"\n\t\t:height=\"30\"\n\t\timage=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t>\n\t\t<div style=\"height: 500px\" />\n\t</AsamWatermark>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamWatermarkCapImageDemo' });\nimport { AsamWatermark } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "5113be2c118e922cc3f475bae4cb0bd03723a7eb3e39fdaad18e526ce47b9b17",
									"notice": {
										"id": "81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09",
										"url": "/licenses/source-notices/81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt",
										"licenseFilename": "LICENSE-81c4b4aa47dd4319ea564bc930d9728f2b7e2e072a527f992d9fefe5f2a35c09.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/image.vue",
											"sourceSha256": "137f127a047e7e1bbbd59a73e0bf30bea09f095acbaebd6a1a2105376fbeb091",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-custom",
					"title": "自定义配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-custom/ts/Demo.vue",
									"sha256": "2c8d77e0fae35ace7ebfa3f6a8399d3984d4e6e23731f3cfdc87bf7352509e49",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"isDark = !isDark\"\n\t\t\t>切换深色水印</AsamButton\n\t\t>\n\t\t<div class=\"wrapper demo-layout-1\">\n\t\t\t<AsamWatermark\n\t\t\t\tclass=\"watermark\"\n\t\t\t\t:content=\"config.content\"\n\t\t\t\t:font=\"config.font\"\n\t\t\t\t:z-index=\"config.zIndex\"\n\t\t\t\t:rotate=\"config.rotate\"\n\t\t\t\t:gap=\"config.gap\"\n\t\t\t\t:offset=\"watermarkOffset\"\n\t\t\t>\n\t\t\t\t<div class=\"watermark-container\">\n\t\t\t\t\t<h1>ASAM UI</h1>\n\t\t\t\t\t<h2>面向设计师与开发者的 Vue 3 组件库</h2>\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\talt=\"示例图片\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamWatermark>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamBaseForm\n\t\t\tclass=\"form\"\n\t\t\t:model=\"config\"\n\t\t\tlabel-position=\"top\"\n\t\t\tlabel-width=\"50px\"\n\t\t>\n\t\t\t<AsamFormItem label=\"内容\">\n\t\t\t\t<AsamInput\n\t\t\t\t\t:model-value=\"config.content\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'string') config.content = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"颜色\">\n\t\t\t\t<AsamColorPicker\n\t\t\t\t\t:model-value=\"config.font.color\"\n\t\t\t\t\tshow-alpha\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tconfig.font.color =\n\t\t\t\t\t\t\t\ttypeof value === 'string'\n\t\t\t\t\t\t\t\t\t? value\n\t\t\t\t\t\t\t\t\t: isDark\n\t\t\t\t\t\t\t\t\t\t? 'rgba(255, 255, 255, .15)'\n\t\t\t\t\t\t\t\t\t\t: 'rgba(0, 0, 0, .15)';\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"字号\">\n\t\t\t\t<AsamSlider\n\t\t\t\t\t:model-value=\"config.font.fontSize\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'number') config.font.fontSize = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"zIndex\">\n\t\t\t\t<AsamSlider\n\t\t\t\t\t:model-value=\"config.zIndex\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'number') config.zIndex = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"旋转\">\n\t\t\t\t<AsamSlider\n\t\t\t\t\t:model-value=\"config.rotate\"\n\t\t\t\t\t:min=\"-180\"\n\t\t\t\t\t:max=\"180\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'number') config.rotate = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"间距\">\n\t\t\t\t<AsamSpace>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"config.gap[0]\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\tconfig.gap[0] = typeof value === 'number' ? value : 100;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"config.gap[1]\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\tconfig.gap[1] = typeof value === 'number' ? value : 100;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamSpace>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"偏移量\">\n\t\t\t\t<AsamSpace>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"offset[0]\"\n\t\t\t\t\t\tplaceholder=\"offsetLeft\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\toffset[0] = typeof value === 'number' ? value : undefined;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"offset[1]\"\n\t\t\t\t\t\tplaceholder=\"offsetTop\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\toffset[1] = typeof value === 'number' ? value : undefined;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamSpace>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamWatermarkCapCustomDemo' });\nimport {\n\tAsamImage,\n\tAsamButton,\n\tAsamWatermark,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamColorPicker,\n\tAsamSlider,\n\tAsamSpace,\n\tAsamInputNumber\n} from '@asam-ui/ui';\n\nimport { computed, reactive, watch } from 'vue';\nimport { ref } from 'vue';\nconst isDark = ref(false);\n\nconst gap = reactive<[number, number]>([100, 100]);\nconst offset = reactive<[number | undefined, number | undefined]>([undefined, undefined]);\n\nconst config = reactive({\n\tcontent: 'ASAM UI',\n\tfont: {\n\t\tfontSize: 16,\n\t\tcolor: 'rgba(0, 0, 0, 0.15)'\n\t},\n\tzIndex: -1,\n\trotate: -22,\n\tgap\n});\n\nconst watermarkOffset = computed<[number, number] | undefined>(() => {\n\tconst [left, top] = offset;\n\treturn left === undefined && top === undefined\n\t\t? undefined\n\t\t: [left ?? config.gap[0] / 2, top ?? config.gap[1] / 2];\n});\n\nwatch(\n\tisDark,\n\t(value) => {\n\t\tconfig.font.color = value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';\n\t},\n\t{ immediate: true }\n);\n</script>\n\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n}\n\n.watermark {\n\tdisplay: flex;\n\tflex: auto;\n}\n\n.watermark-container {\n\tflex: auto;\n}\n\n.form {\n\twidth: 330px;\n\tmargin-left: 20px;\n\tborder-left: 1px solid #eee;\n\tpadding-left: 20px;\n}\n\nimg {\n\tz-index: 10;\n\twidth: 100%;\n\tmax-width: 300px;\n\tposition: relative;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "65dc500d531c6f3b4883c1780cab44053aeb046423a37a9f90dc35552d4b7637",
									"notice": {
										"id": "686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda",
										"url": "/licenses/source-notices/686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt",
										"licenseFilename": "LICENSE-686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/custom.vue",
											"sourceSha256": "9d460b68edcb8d3f313bb352b2e9a6c4a5daf04225ae0183de9435dc0d33013c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamWatermark/cap-custom/js/Demo.vue",
									"sha256": "00935978b73f3449801134b0d9b96f905343218bb03db71dd5aac46670ffb489",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"isDark = !isDark\"\n\t\t\t>切换深色水印</AsamButton\n\t\t>\n\t\t<div class=\"wrapper demo-layout-1\">\n\t\t\t<AsamWatermark\n\t\t\t\tclass=\"watermark\"\n\t\t\t\t:content=\"config.content\"\n\t\t\t\t:font=\"config.font\"\n\t\t\t\t:z-index=\"config.zIndex\"\n\t\t\t\t:rotate=\"config.rotate\"\n\t\t\t\t:gap=\"config.gap\"\n\t\t\t\t:offset=\"watermarkOffset\"\n\t\t\t>\n\t\t\t\t<div class=\"watermark-container\">\n\t\t\t\t\t<h1>ASAM UI</h1>\n\t\t\t\t\t<h2>面向设计师与开发者的 Vue 3 组件库</h2>\n\t\t\t\t\t<AsamImage\n\t\t\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22180%22%3E%3Crect%20width%3D%22320%22%20height%3D%22180%22%20fill%3D%22%238899aa%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%2245%22%20r%3D%2228%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M0%20180L100%2060L220%20180%22%20fill%3D%22%2340566c%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2230%22%20fill%3D%22%23fff%22%3EASAM%20%E7%A4%BA%E4%BE%8B%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\t\t\talt=\"示例图片\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamWatermark>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamBaseForm\n\t\t\tclass=\"form\"\n\t\t\t:model=\"config\"\n\t\t\tlabel-position=\"top\"\n\t\t\tlabel-width=\"50px\"\n\t\t>\n\t\t\t<AsamFormItem label=\"内容\">\n\t\t\t\t<AsamInput\n\t\t\t\t\t:model-value=\"config.content\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'string') config.content = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"颜色\">\n\t\t\t\t<AsamColorPicker\n\t\t\t\t\t:model-value=\"config.font.color\"\n\t\t\t\t\tshow-alpha\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tconfig.font.color =\n\t\t\t\t\t\t\t\ttypeof value === 'string'\n\t\t\t\t\t\t\t\t\t? value\n\t\t\t\t\t\t\t\t\t: isDark\n\t\t\t\t\t\t\t\t\t\t? 'rgba(255, 255, 255, .15)'\n\t\t\t\t\t\t\t\t\t\t: 'rgba(0, 0, 0, .15)';\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"字号\">\n\t\t\t\t<AsamSlider\n\t\t\t\t\t:model-value=\"config.font.fontSize\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'number') config.font.fontSize = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"zIndex\">\n\t\t\t\t<AsamSlider\n\t\t\t\t\t:model-value=\"config.zIndex\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'number') config.zIndex = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"旋转\">\n\t\t\t\t<AsamSlider\n\t\t\t\t\t:model-value=\"config.rotate\"\n\t\t\t\t\t:min=\"-180\"\n\t\t\t\t\t:max=\"180\"\n\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\tif (typeof value === 'number') config.rotate = value;\n\t\t\t\t\t\t}\n\t\t\t\t\t\"\n\t\t\t\t/>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"间距\">\n\t\t\t\t<AsamSpace>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"config.gap[0]\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\tconfig.gap[0] = typeof value === 'number' ? value : 100;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"config.gap[1]\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\tconfig.gap[1] = typeof value === 'number' ? value : 100;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamSpace>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"偏移量\">\n\t\t\t\t<AsamSpace>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"offset[0]\"\n\t\t\t\t\t\tplaceholder=\"offsetLeft\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\toffset[0] = typeof value === 'number' ? value : undefined;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t:model-value=\"offset[1]\"\n\t\t\t\t\t\tplaceholder=\"offsetTop\"\n\t\t\t\t\t\tcontrols-position=\"right\"\n\t\t\t\t\t\t@update:model-value=\"\n\t\t\t\t\t\t\t(value) => {\n\t\t\t\t\t\t\t\toffset[1] = typeof value === 'number' ? value : undefined;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\"\n\t\t\t\t\t/>\n\t\t\t\t</AsamSpace>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamWatermarkCapCustomDemo' });\nimport {\n\tAsamImage,\n\tAsamButton,\n\tAsamWatermark,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamColorPicker,\n\tAsamSlider,\n\tAsamSpace,\n\tAsamInputNumber\n} from '@asam-ui/ui';\nimport { computed, reactive, watch } from 'vue';\nimport { ref } from 'vue';\nconst isDark = ref(false);\nconst gap = reactive([100, 100]);\nconst offset = reactive([undefined, undefined]);\n\nconst config = reactive({\n\tcontent: 'ASAM UI',\n\tfont: {\n\t\tfontSize: 16,\n\t\tcolor: 'rgba(0, 0, 0, 0.15)'\n\t},\n\tzIndex: -1,\n\trotate: -22,\n\tgap\n});\nconst watermarkOffset = computed(() => {\n\tconst [left, top] = offset;\n\treturn left === undefined && top === undefined\n\t\t? undefined\n\t\t: [left ?? config.gap[0] / 2, top ?? config.gap[1] / 2];\n});\n\nwatch(\n\tisDark,\n\t(value) => {\n\t\tconfig.font.color = value ? 'rgba(255, 255, 255, .15)' : 'rgba(0, 0, 0, .15)';\n\t},\n\t{ immediate: true }\n);\n</script>\n\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n}\n\n.watermark {\n\tdisplay: flex;\n\tflex: auto;\n}\n\n.watermark-container {\n\tflex: auto;\n}\n\n.form {\n\twidth: 330px;\n\tmargin-left: 20px;\n\tborder-left: 1px solid #eee;\n\tpadding-left: 20px;\n}\n\nimg {\n\tz-index: 10;\n\twidth: 100%;\n\tmax-width: 300px;\n\tposition: relative;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "c519ca97b187168b8e149b022c81e8038bbe0926bd7f7d0ca432a1c5281f5332",
									"notice": {
										"id": "686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda",
										"url": "/licenses/source-notices/686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt",
										"licenseFilename": "LICENSE-686bc0b23059d4738afce60b230fb9756b289db071b6d6e453ad30a96c152bda.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/watermark/custom.vue",
											"sourceSha256": "9d460b68edcb8d3f313bb352b2e9a6c4a5daf04225ae0183de9435dc0d33013c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFixedSizeGrid",
			"documentation": "/component-AsamFixedSizeGrid.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeGrid/basic/ts/Demo.vue",
									"sha256": "fb738aed420c4237732f865e6cf769945a1937dd037347b8c1853cdc06619ad1",
									"source": "<template>\n\t<AsamFixedSizeGrid\n\t\tv-bind=\"{ height: 200, width: 280, totalRow: 50, totalColumn: 5, rowHeight, columnWidth }\"\n\t>\n\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">\n\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t</div>\n\t\t</template>\n\t</AsamFixedSizeGrid>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFixedSizeGridBasicDemo' });\nimport { AsamFixedSizeGrid } from '@asam-ui/ui';\nconst rowHeight = 40;\nconst columnWidth = 100;\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeGrid/basic/js/Demo.vue",
									"sha256": "8072b3946f397c575b6b59796dfe3f1886f3444a41821ac1ac84ae62b0bccc95",
									"source": "<template>\n\t<AsamFixedSizeGrid\n\t\tv-bind=\"{ height: 200, width: 280, totalRow: 50, totalColumn: 5, rowHeight, columnWidth }\"\n\t>\n\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">\n\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t</div>\n\t\t</template>\n\t</AsamFixedSizeGrid>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFixedSizeGridBasicDemo' });\nimport { AsamFixedSizeGrid } from '@asam-ui/ui';\nconst rowHeight = 40;\nconst columnWidth = 100;\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "boundary",
					"title": "首尾定位、动态尺寸、RTL 与滚动条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeGrid/boundary/ts/Demo.vue",
									"sha256": "caa243bdb7113a426984fd941a5b7dde271ddab424837fa79cf42b58de684764",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"grid?.scrollToItem(99, 29, 'end')\"\n\t\t\t>到最后单元格</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"grid?.scrollTo({ scrollLeft: 0, scrollTop: 0 })\"\n\t\t\t>返回网格起点</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变行列尺寸</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}</p>\n\t\t<AsamFixedSizeGrid\n\t\t\t:key=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\tref=\"grid\"\n\t\t\t:height=\"220\"\n\t\t\t:width=\"360\"\n\t\t\t:total-row=\"100\"\n\t\t\t:total-column=\"30\"\n\t\t\t:row-height=\"rowHeight\"\n\t\t\t:column-width=\"columnWidth\"\n\t\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\t:scrollbar-always-on=\"always\"\n\t\t\t@item-rendered=\"onRendered\"\n\t\t\t@scroll=\"onScroll\"\n\t\t>\n\t\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-cell=\"rowIndex + ':' + columnIndex\">\n\t\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamFixedSizeGrid>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFixedSizeGridBoundaryDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamFixedSizeGrid } from '@asam-ui/ui';\nimport type { AsamFixedSizeGridExpose, AsamFixedSizeGridEmits } from '@asam-ui/ui';\nconst grid = ref<AsamFixedSizeGridExpose>();\nconst large = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst range = ref('');\nconst eventState = ref('');\nfunction onRendered(value: AsamFixedSizeGridEmits['itemRendered'][0]): void {\n\trange.value =\n\t\tvalue.rowVisibleStart +\n\t\t':' +\n\t\tvalue.rowVisibleEnd +\n\t\t'/' +\n\t\tvalue.columnVisibleStart +\n\t\t':' +\n\t\tvalue.columnVisibleEnd;\n}\nfunction onScroll(value: AsamFixedSizeGridEmits['scroll'][0]): void {\n\teventState.value = value.scrollTop + ':' + value.scrollLeft;\n}\nconst rowHeight = ref(44);\nconst columnWidth = ref(110);\nfunction resize(): void {\n\tlarge.value = !large.value;\n\trowHeight.value = large.value ? 74 : 44;\n\tcolumnWidth.value = large.value ? 150 : 110;\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeGrid/boundary/js/Demo.vue",
									"sha256": "c8657f66fdb4dedcbdadb7d1debd20975f665265d91f099d8730c4cd3f6d4f85",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"grid?.scrollToItem(99, 29, 'end')\"\n\t\t\t>到最后单元格</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"grid?.scrollTo({ scrollLeft: 0, scrollTop: 0 })\"\n\t\t\t>返回网格起点</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变行列尺寸</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}</p>\n\t\t<AsamFixedSizeGrid\n\t\t\t:key=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\tref=\"grid\"\n\t\t\t:height=\"220\"\n\t\t\t:width=\"360\"\n\t\t\t:total-row=\"100\"\n\t\t\t:total-column=\"30\"\n\t\t\t:row-height=\"rowHeight\"\n\t\t\t:column-width=\"columnWidth\"\n\t\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\t:scrollbar-always-on=\"always\"\n\t\t\t@item-rendered=\"onRendered\"\n\t\t\t@scroll=\"onScroll\"\n\t\t>\n\t\t\t<template #default=\"{ rowIndex, columnIndex, style }\">\n\t\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-cell=\"rowIndex + ':' + columnIndex\">\n\t\t\t\t\t{{ rowIndex + 1 }} 行 / {{ columnIndex + 1 }} 列\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamFixedSizeGrid>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamFixedSizeGridBoundaryDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamFixedSizeGrid } from '@asam-ui/ui';\nconst grid = ref();\nconst large = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst range = ref('');\nconst eventState = ref('');\nfunction onRendered(value) {\n\trange.value =\n\t\tvalue.rowVisibleStart +\n\t\t':' +\n\t\tvalue.rowVisibleEnd +\n\t\t'/' +\n\t\tvalue.columnVisibleStart +\n\t\t':' +\n\t\tvalue.columnVisibleEnd;\n}\nfunction onScroll(value) {\n\teventState.value = value.scrollTop + ':' + value.scrollLeft;\n}\nconst rowHeight = ref(44);\nconst columnWidth = ref(110);\nfunction resize() {\n\tlarge.value = !large.value;\n\trowHeight.value = large.value ? 74 : 44;\n\tcolumnWidth.value = large.value ? 150 : 110;\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFixedSizeList",
			"documentation": "/component-AsamFixedSizeList.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeList/basic/ts/Demo.vue",
									"sha256": "02f12f1ce2767016a5850ed0ef5b204b0956c0e0391181348168eea7306f56fc",
									"source": "<template>\n\t<AsamFixedSizeList\n\t\tv-bind=\"{ height: 200, width: 280, total: items.length, data: items, itemSize }\"\n\t>\n\t\t<template #default=\"{ index, data, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">{{ data[index] }}</div>\n\t\t</template>\n\t</AsamFixedSizeList>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFixedSizeListBasicDemo' });\nimport { AsamFixedSizeList } from '@asam-ui/ui';\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst itemSize = 40;\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeList/basic/js/Demo.vue",
									"sha256": "a3aec720f11d1c655d4d2c900f16a67e9bb3f2388b3e3797127e3876df070562",
									"source": "<template>\n\t<AsamFixedSizeList\n\t\tv-bind=\"{ height: 200, width: 280, total: items.length, data: items, itemSize }\"\n\t>\n\t\t<template #default=\"{ index, data, style }\">\n\t\t\t<div :style=\"style\" class=\"virtual-cell\">{{ data[index] }}</div>\n\t\t</template>\n\t</AsamFixedSizeList>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFixedSizeListBasicDemo' });\nimport { AsamFixedSizeList } from '@asam-ui/ui';\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst itemSize = 40;\n</script>\n\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "boundary",
					"title": "首尾定位、动态尺寸、RTL 与滚动条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeList/boundary/ts/Demo.vue",
									"sha256": "34e700e8c86ab767deaa3dfc81b705789af493427cbee64d93ab8f39baf687ad",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.scrollToItem(99, 'end')\"\n\t\t\t>到最后一项</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.resetScrollTop()\"\n\t\t\t>返回起点</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变项目尺寸</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"horizontal\">水平布局</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}；边界 {{ edge }}</p>\n\t\t<AsamFixedSizeList\n\t\t\t:key=\"[revision, horizontal, rtl].join(':')\"\n\t\t\tref=\"list\"\n\t\t\t:data=\"items\"\n\t\t\t:height=\"200\"\n\t\t\t:width=\"320\"\n\t\t\t:total=\"items.length\"\n\t\t\t:item-size=\"itemSize\"\n\t\t\t:layout=\"horizontal ? 'horizontal' : 'vertical'\"\n\t\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\t:scrollbar-always-on=\"always\"\n\t\t\t:use-is-scrolling=\"true\"\n\t\t\t@item-rendered=\"onRendered\"\n\t\t\t@scroll=\"onScroll\"\n\t\t\t@end-reached=\"edge = $event\"\n\t\t>\n\t\t\t<template #default=\"{ index, style, isScrolling }\">\n\t\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-index=\"index\">\n\t\t\t\t\t{{ items[index] }}{{ isScrolling ? '（滚动中）' : '' }}\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamFixedSizeList>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFixedSizeListBoundaryDemo' });\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamFixedSizeList } from '@asam-ui/ui';\nimport type { AsamFixedSizeListExpose, AsamFixedSizeListEmits } from '@asam-ui/ui';\nconst list = ref<AsamFixedSizeListExpose>();\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst horizontal = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst revision = ref(0);\nconst eventState = ref('');\nconst edge = ref('');\nconst onScroll = (...[direction, offset, requested]: AsamFixedSizeListEmits['scroll']): void => {\n\teventState.value = direction + ':' + offset + ':' + requested;\n};\nconst onRendered = (...[start, end, first, last]: AsamFixedSizeListEmits['itemRendered']): void => {\n\trange.value = start + ':' + end + ':' + first + ':' + last;\n};\nconst range = ref('');\n\nconst itemSize = ref(44);\nasync function resize(): Promise<void> {\n\tconst offset = list.value?.states.scrollOffset ?? 0;\n\titemSize.value = itemSize.value === 44 ? 70 : 44;\n\tawait nextTick();\n\tlist.value?.scrollTo(offset);\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFixedSizeList/boundary/js/Demo.vue",
									"sha256": "fb6f1ea485114f4e6baaa49eee97bec0719900992f34c9e0932398382c63db17",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.scrollToItem(99, 'end')\"\n\t\t\t>到最后一项</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"list?.resetScrollTop()\"\n\t\t\t>返回起点</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"resize\">改变项目尺寸</AsamButton>\n\t\t<AsamCheckboxItem v-model=\"horizontal\">水平布局</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"rtl\">RTL</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"always\">滚动条持续显示</AsamCheckboxItem>\n\t\t<p class=\"example-paragraph\" data-testid=\"virtual-events\">范围 {{ range }}；滚动 {{ eventState }}；边界 {{ edge }}</p>\n\t\t<AsamFixedSizeList\n\t\t\t:key=\"[revision, horizontal, rtl].join(':')\"\n\t\t\tref=\"list\"\n\t\t\t:data=\"items\"\n\t\t\t:height=\"200\"\n\t\t\t:width=\"320\"\n\t\t\t:total=\"items.length\"\n\t\t\t:item-size=\"itemSize\"\n\t\t\t:layout=\"horizontal ? 'horizontal' : 'vertical'\"\n\t\t\t:direction=\"rtl ? 'rtl' : 'ltr'\"\n\t\t\t:scrollbar-always-on=\"always\"\n\t\t\t:use-is-scrolling=\"true\"\n\t\t\t@item-rendered=\"onRendered\"\n\t\t\t@scroll=\"onScroll\"\n\t\t\t@end-reached=\"edge = $event\"\n\t\t>\n\t\t\t<template #default=\"{ index, style, isScrolling }\">\n\t\t\t\t<div :style=\"style\" class=\"virtual-cell\" :data-index=\"index\">\n\t\t\t\t\t{{ items[index] }}{{ isScrolling ? '（滚动中）' : '' }}\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamFixedSizeList>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamFixedSizeListBoundaryDemo' });\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamFixedSizeList } from '@asam-ui/ui';\nconst list = ref();\nconst items = Array.from({ length: 100 }, (_, index) => '记录 ' + (index + 1));\nconst horizontal = ref(false);\nconst rtl = ref(false);\nconst always = ref(true);\nconst revision = ref(0);\nconst eventState = ref('');\nconst edge = ref('');\nconst onScroll = (...[direction, offset, requested]) => {\n\teventState.value = direction + ':' + offset + ':' + requested;\n};\nconst onRendered = (...[start, end, first, last]) => {\n\trange.value = start + ':' + end + ':' + first + ':' + last;\n};\nconst range = ref('');\nconst itemSize = ref(44);\nasync function resize() {\n\tconst offset = list.value?.states.scrollOffset ?? 0;\n\titemSize.value = itemSize.value === 44 ? 70 : 44;\n\tawait nextTick();\n\tlist.value?.scrollTo(offset);\n}\n</script>\n<style scoped>\n.virtual-cell {\n\tbox-sizing: border-box;\n\tpadding: var(--asam-space-sm);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamClickOutside",
			"documentation": "/component-AsamClickOutside.html",
			"demos": [
				{
					"id": "basic",
					"title": "外部点击关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamClickOutside/basic/ts/Demo.vue",
									"sha256": "b856fc6af6d05b4440dbbee499c3524a2ffc6ee79df4b0e66155728e6bd67b66",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开面板</AsamButton>\n\t<div v-if=\"open\" v-asam-click-outside=\"close\" class=\"panel\">\n\t\t<p class=\"example-paragraph\">内部点击保留面板</p>\n\t\t<AsamButton type=\"default\" native-type=\"button\">内部按钮</AsamButton>\n\t</div>\n\t<AsamButton type=\"default\" native-type=\"button\">外部按钮</AsamButton>\n\t<p class=\"example-paragraph\" role=\"status\">{{ open ? '面板显示' : '面板关闭' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamClickOutsideBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamClickOutside as vAsamClickOutside } from '@asam-ui/ui';\nconst open = ref(false);\nconst close = () => {\n\topen.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamClickOutside/basic/js/Demo.vue",
									"sha256": "9de3fc67a55bed379a0345084584ddf8cff5e47cac77749398d58723a18b01d4",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">打开面板</AsamButton>\n\t<div v-if=\"open\" v-asam-click-outside=\"close\" class=\"panel\">\n\t\t<p class=\"example-paragraph\">内部点击保留面板</p>\n\t\t<AsamButton type=\"default\" native-type=\"button\">内部按钮</AsamButton>\n\t</div>\n\t<AsamButton type=\"default\" native-type=\"button\">外部按钮</AsamButton>\n\t<p class=\"example-paragraph\" role=\"status\">{{ open ? '面板显示' : '面板关闭' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamClickOutsideBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamClickOutside as vAsamClickOutside } from '@asam-ui/ui';\nconst open = ref(false);\nconst close = () => {\n\topen.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamAlert",
			"documentation": "/component-AsamAlert.html",
			"demos": [
				{
					"id": "basic",
					"title": "状态与关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/basic/ts/Demo.vue",
									"sha256": "76f8090fd2f64a1ed21b3b696c475bbb6467f2a85fdc20a8fce82967c01794ba",
									"source": "<template>\n\t<div class=\"demo\">\n\t\t<div class=\"actions\">\n\t\t\t<label>\n\t\t\t\t<span>状态</span>\n\t\t\t\t<AsamSelect v-model=\"kind\">\n\t\t\t\t\t<AsamOption :label=\"'success'\" :value=\"'success'\">success</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'info'\" :value=\"'info'\">info</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'warning'\" :value=\"'warning'\">warning</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'error'\" :value=\"'error'\">error</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"shown = true\"\n\t\t\t\t>重置提示</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamAlert\n\t\t\tv-if=\"shown\"\n\t\t\ttitle=\"数据导入结果\"\n\t\t\t:type=\"kind\"\n\t\t\tdescription=\"请确认导入内容后继续。\"\n\t\t\tshow-icon\n\t\t\t@close=\"shown = false\"\n\t\t/>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ shown ? '提示显示中' : '提示已关闭' }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamAlert } from '@asam-ui/ui';\nconst kind = ref<'success' | 'info' | 'warning' | 'error'>('info');\nconst shown = ref(true);\n</script>\n\n<style scoped>\n.demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.demo > .asam-button {\n\tjustify-self: start;\n}\n\n.actions label {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--asam-space-xs);\n}\n\n.demo > p {\n\tmargin: 0;\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/basic/js/Demo.vue",
									"sha256": "6788bb146fc25be37cb7f5c864011fddd3977bd708724a29d9c0455d99763063",
									"source": "<template>\n\t<div class=\"demo\">\n\t\t<div class=\"actions\">\n\t\t\t<label>\n\t\t\t\t<span>状态</span>\n\t\t\t\t<AsamSelect v-model=\"kind\">\n\t\t\t\t\t<AsamOption :label=\"'success'\" :value=\"'success'\">success</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'info'\" :value=\"'info'\">info</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'warning'\" :value=\"'warning'\">warning</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'error'\" :value=\"'error'\">error</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</label>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"shown = true\"\n\t\t\t\t>重置提示</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamAlert\n\t\t\tv-if=\"shown\"\n\t\t\ttitle=\"数据导入结果\"\n\t\t\t:type=\"kind\"\n\t\t\tdescription=\"请确认导入内容后继续。\"\n\t\t\tshow-icon\n\t\t\t@close=\"shown = false\"\n\t\t/>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ shown ? '提示显示中' : '提示已关闭' }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamAlert } from '@asam-ui/ui';\nconst kind = ref('info');\nconst shown = ref(true);\n</script>\n\n<style scoped>\n.demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.demo > .asam-button {\n\tjustify-self: start;\n}\n\n.actions label {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: var(--asam-space-xs);\n}\n\n.demo > p {\n\tmargin: 0;\n}\n\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "图标和内容插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/slots/ts/Demo.vue",
									"sha256": "f0baa708c2a7f56606ac9148eca79696edf8f73fdfa93c78b35491de38fa53b1",
									"source": "<template>\n\t<AsamAlert v-bind=\"{ type: 'success', effect: 'dark', showIcon: true, closable: false }\">\n\t\t<template #title>已保存本地草稿</template>\n\t\t<template #icon>\n\t\t\t<InfoFilled />\n\t\t</template>\n\t\t<p class=\"example-paragraph\">草稿可以稍后继续编辑。</p>\n\t</AsamAlert>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertSlotsDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/slots/js/Demo.vue",
									"sha256": "cd7ba38db44c1a84d13d1397aa2af415f83a098f55a3aa9aedbf7edcb66ba191",
									"source": "<template>\n\t<AsamAlert v-bind=\"{ type: 'success', effect: 'dark', showIcon: true, closable: false }\">\n\t\t<template #title>已保存本地草稿</template>\n\t\t<template #icon>\n\t\t\t<InfoFilled />\n\t\t</template>\n\t\t<p class=\"example-paragraph\">草稿可以稍后继续编辑。</p>\n\t</AsamAlert>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertSlotsDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cap-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-basic/ts/Demo.vue",
									"sha256": "430236fd448e23c30f9de47ac9d7bedd9ff304df2be3bf9728b1d28714ccb67a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapBasicDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "443a4b6fd3c649a0c4bcb4101524e2eaae43663bd838a83119532fc6e78fd521",
									"notice": {
										"id": "c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2",
										"url": "/licenses/source-notices/c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt",
										"licenseFilename": "LICENSE-c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/basic.vue",
											"sourceSha256": "249ea03b1076f2ec3de6dee0cb0f431daac6a21477bff345dde5ff1154d9b67c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-basic/js/Demo.vue",
									"sha256": "eb5a167babb0ba86ae915ceed7b3c9ab32b7d537d6ce7dbea8189e7d78c63088",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapBasicDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "7f364b3a321251ce5cf02097e33f69481d38dbfd68883c5d8cc278b11c6bc75a",
									"notice": {
										"id": "c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2",
										"url": "/licenses/source-notices/c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt",
										"licenseFilename": "LICENSE-c27fcd63753734868ce46ae42b77a4e12a7d301387af7588c882bd2457f69aa2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/basic.vue",
											"sourceSha256": "249ea03b1076f2ec3de6dee0cb0f431daac6a21477bff345dde5ff1154d9b67c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-theme",
					"title": "主题",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-theme/ts/Demo.vue",
									"sha256": "0d21c173dbcb10a7ab987a44083252baae50a7a04af55a1ee4882b49a490b73e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" effect=\"dark\" />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" effect=\"dark\" />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" effect=\"dark\" />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" effect=\"dark\" />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" effect=\"dark\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapThemeDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "0ee0f71ad996b3e9fe330d9150e6541a22cc13d94260a3bfc4d27aa477e6f46e",
									"notice": {
										"id": "272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6",
										"url": "/licenses/source-notices/272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt",
										"licenseFilename": "LICENSE-272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/theme.vue",
											"sourceSha256": "4b31faa7ecebcbd9b500fee2a4f83f50ca2b6dd1606b6d512d9bf58762b3880d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-theme/js/Demo.vue",
									"sha256": "8930eeccf81cb94f5879bd0e04b3c2633b35924d9aa8a501cc70d26aa9dbddf8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" effect=\"dark\" />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" effect=\"dark\" />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" effect=\"dark\" />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" effect=\"dark\" />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" effect=\"dark\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapThemeDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "aecd29044ca6b08a3585da5d68d460a4f29ab42c1c11eeaf3c171ea808f8efea",
									"notice": {
										"id": "272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6",
										"url": "/licenses/source-notices/272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt",
										"licenseFilename": "LICENSE-272b8e6fa82bbbad4c183f36ce35ac2291d299e376dbbbfe89b262d18e82dec6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/theme.vue",
											"sourceSha256": "4b31faa7ecebcbd9b500fee2a4f83f50ca2b6dd1606b6d512d9bf58762b3880d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-close-button",
					"title": "自定义关闭按钮",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-close-button/ts/Demo.vue",
									"sha256": "a57dfa3c416c760802eba20ac7ea3d87df14d936c29d606fe6f43ac4999b6d2d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"不可关闭的提示\" type=\"success\" :closable=\"false\" />\n\t\t<AsamAlert title=\"自定义关闭文字\" type=\"info\" close-text=\"知道了\" />\n\t\t<AsamAlert title=\"带回调的提示\" type=\"warning\" @close=\"hello\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapCloseButtonDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n\nconst hello = () => {\n\talert('你好！');\n};\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "ea2da310c124f099bdd5a824afc55b09b005bad33f6a0dde63655e027db551a0",
									"notice": {
										"id": "771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3",
										"url": "/licenses/source-notices/771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt",
										"licenseFilename": "LICENSE-771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/close-button.vue",
											"sourceSha256": "55095435dbd26f649483e686a9d139b9e2e6f4cdfdd9b8ea4d445fdc3bcc0313",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-close-button/js/Demo.vue",
									"sha256": "9e5b65e5193f025e68ebdca41aab9603e3ec76791eef055f287263f4ff42dabf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"不可关闭的提示\" type=\"success\" :closable=\"false\" />\n\t\t<AsamAlert title=\"自定义关闭文字\" type=\"info\" close-text=\"知道了\" />\n\t\t<AsamAlert title=\"带回调的提示\" type=\"warning\" @close=\"hello\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapCloseButtonDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\nconst hello = () => {\n\talert('你好！');\n};\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "d13547912fa67eb08775f28cd14ea6088a81c3ffc9ef5791fd75a355dad44b7a",
									"notice": {
										"id": "771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3",
										"url": "/licenses/source-notices/771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt",
										"licenseFilename": "LICENSE-771a9da578d42a170463ce74be0cfcb7098aac1149f0cbd2ae8298e97e34afa3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/close-button.vue",
											"sourceSha256": "55095435dbd26f649483e686a9d139b9e2e6f4cdfdd9b8ea4d445fdc3bcc0313",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-icon",
					"title": "图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-icon/ts/Demo.vue",
									"sha256": "12a9d0ff75469fbe6c59be474a1c46144e83c592560467e149d2432a2b021811",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" show-icon />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" show-icon />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" show-icon />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" show-icon />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" show-icon />\n\t\t<AsamAlert title=\"带自定义图标的错误提示\" type=\"error\" show-icon>\n\t\t\t<template #icon>\n\t\t\t\t<Bell />\n\t\t\t</template>\n\t\t</AsamAlert>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapIconDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n\nimport { Bell } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "374f4772dd4e52ef41b15b3901b3aa6f07c4036d710a91245838ff60474eae01",
									"notice": {
										"id": "ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1",
										"url": "/licenses/source-notices/ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt",
										"licenseFilename": "LICENSE-ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/icon.vue",
											"sourceSha256": "51b8337d2c72ef52aa8e7d7c14bfb72985a5013c9113ea6c56591e9702c783d6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-icon/js/Demo.vue",
									"sha256": "8063b57b1f2d7fc9f21ec4ec7961379d0915bbf98439606808873ec94490e046",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" show-icon />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" show-icon />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" show-icon />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" show-icon />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" show-icon />\n\t\t<AsamAlert title=\"带自定义图标的错误提示\" type=\"error\" show-icon>\n\t\t\t<template #icon>\n\t\t\t\t<Bell />\n\t\t\t</template>\n\t\t</AsamAlert>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapIconDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\nimport { Bell } from '@asam-ui/icons-vue';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "7ba1476a9a9d47d42fed7c4ae627531ca9728605a3021174ecfe8ce71cac8ffc",
									"notice": {
										"id": "ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1",
										"url": "/licenses/source-notices/ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt",
										"licenseFilename": "LICENSE-ea19b69c68346ae3682eec73c4e79021d0e0179fb0ec80679c160424b9a004b1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/icon.vue",
											"sourceSha256": "51b8337d2c72ef52aa8e7d7c14bfb72985a5013c9113ea6c56591e9702c783d6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-center",
					"title": "居中的步骤条",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-center/ts/Demo.vue",
									"sha256": "0986767b6dfd3aeea7e47a91995d765d21a41bad73aa8bfe9e45c9155ecb0876",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" center show-icon />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" center show-icon />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" center show-icon />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" center show-icon />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" center show-icon />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapCenterDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "d8c0defe995a0e20755acc10febb20fac5b66a80ca8b802f4443dacd0d3f601a",
									"notice": {
										"id": "3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6",
										"url": "/licenses/source-notices/3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt",
										"licenseFilename": "LICENSE-3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/center.vue",
											"sourceSha256": "fb94f9a1c5e27ff6845004e3265ea06a77be0160dc53d8a074fc4f65456e3a2b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-center/js/Demo.vue",
									"sha256": "81c07cc608155455e0bb1dc0098dc02f1cde1806b98195d7029cdff89b6efa0f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" center show-icon />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" center show-icon />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" center show-icon />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" center show-icon />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" center show-icon />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapCenterDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "6c483339c606e88b0e7ced98aff3326b7dd08f36ec56c9c4d9a202efecc56662",
									"notice": {
										"id": "3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6",
										"url": "/licenses/source-notices/3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt",
										"licenseFilename": "LICENSE-3153563ad782db3b60bb37f22480db40e4bc9b9c79f562112e66170cf81418d6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/center.vue",
											"sourceSha256": "fb94f9a1c5e27ff6845004e3265ea06a77be0160dc53d8a074fc4f65456e3a2b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-description",
					"title": "文字描述",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-description/ts/Demo.vue",
									"sha256": "ce7feb0846caaed0d5eb05e15885e9a31c51876f7ce628b40a4fbc600b644efd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"带说明\" type=\"success\" description=\"这是一段说明。\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapDescriptionDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "18d8614f018cb68237f20840b7794f3b4eca0b5e403a3de89c661446248f7865",
									"notice": {
										"id": "fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51",
										"url": "/licenses/source-notices/fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt",
										"licenseFilename": "LICENSE-fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/description.vue",
											"sourceSha256": "bd7ab9f8f8ebcf96033a931d76587ef0a12779a68c7b22bb98e518d2303bbbee",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-description/js/Demo.vue",
									"sha256": "ce46637052f017585dd0fee52689374e504f873a73e6debaa9d3d460ecc1c7fb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"带说明\" type=\"success\" description=\"这是一段说明。\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapDescriptionDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "f25b9e3a2a47ff7cac655f99780a7edd617618a1dc40f0e65c80f2e8fb8913b4",
									"notice": {
										"id": "fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51",
										"url": "/licenses/source-notices/fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt",
										"licenseFilename": "LICENSE-fe0beec6376c7ce43ebc8e79403c18506fa9be01b2766145fcb23f4659488d51.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/description.vue",
											"sourceSha256": "bd7ab9f8f8ebcf96033a931d76587ef0a12779a68c7b22bb98e518d2303bbbee",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "cap-icon-description",
					"title": "带图标和描述",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-icon-description/ts/Demo.vue",
									"sha256": "43d83a6df430051c7ade125a62493e4712c952194c3f12ebf2447187a5f2c231",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" description=\"更多文字说明\" show-icon />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamAlertCapIconDescriptionDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "aaa47160a7919189bb87a330d2eb8b16c4d8fae9b932b2be5f0fc2b24d3b88dd",
									"notice": {
										"id": "3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317",
										"url": "/licenses/source-notices/3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt",
										"licenseFilename": "LICENSE-3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/icon-description.vue",
											"sourceSha256": "33373430f6993d25085353c60b5f16de59be0b1b4bc7e971300f4448130fee3f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamAlert/cap-icon-description/js/Demo.vue",
									"sha256": "adeaed56f613a6c6f20e9acda0c761fbb543d7ec42428395b340eeb7b1f83cbd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt\n-->\n<template>\n\t<div style=\"max-width: 600px\">\n\t\t<AsamAlert title=\"主要提示\" type=\"primary\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"成功提示\" type=\"success\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"信息提示\" type=\"info\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"警告提示\" type=\"warning\" description=\"更多文字说明\" show-icon />\n\t\t<AsamAlert title=\"错误提示\" type=\"error\" description=\"更多文字说明\" show-icon />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamAlertCapIconDescriptionDemo' });\nimport { AsamAlert } from '@asam-ui/ui';\n</script>\n\n<style scoped>\n.el-alert {\n\tmargin: 20px 0 0;\n}\n\n.el-alert:first-child {\n\tmargin: 0;\n}\n</style>\n",
									"originalSourceSha256": "bf2be091938ad09af5913f8f41698300d1ecd3d378282a1a7a5d991de4e4aee7",
									"notice": {
										"id": "3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317",
										"url": "/licenses/source-notices/3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt",
										"licenseFilename": "LICENSE-3e970d5cfa9b1727a98f73c7ea2268801d8ee766024c16f18582088cc705e317.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/alert/icon-description.vue",
											"sourceSha256": "33373430f6993d25085353c60b5f16de59be0b1b4bc7e971300f4448130fee3f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDropdownItem",
			"documentation": "/component-AsamDropdownItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合菜单、图标与公开方法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdownItem/basic/ts/Demo.vue",
									"sha256": "535b10d5be78aa8c12c8017c455e6d36a87f2d2a51059bda0b938f3e0c9e2070",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown ref=\"menu\" v-bind=\"{ trigger: 'click', wrapMenu: false }\" @command=\"select\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled>删除（不可用）</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t>通过方法打开</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t>通过方法关闭</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDropdownItemBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport type { AsamDropdownExpose } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef<AsamDropdownExpose>();\nconst command = ref('未选择');\nconst select = (value: string | number | object) => {\n\tcommand.value = String(value);\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdownItem/basic/js/Demo.vue",
									"sha256": "b4de4ed04375cad6fb0950902ee9d19f1a0cac818c76b50e4a039ab30acea6fa",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown ref=\"menu\" v-bind=\"{ trigger: 'click', wrapMenu: false }\" @command=\"select\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled>删除（不可用）</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t>通过方法打开</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t>通过方法关闭</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDropdownItemBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef();\nconst command = ref('未选择');\nconst select = (value) => {\n\tcommand.value = String(value);\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDropdownMenu",
			"documentation": "/component-AsamDropdownMenu.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合菜单、图标与公开方法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdownMenu/basic/ts/Demo.vue",
									"sha256": "7c86e0651004302509d6e428fd6d3d0a1bb853e1bced198f5b6f2022bd1be2a8",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown ref=\"menu\" v-bind=\"{ trigger: 'click', wrapMenu: false }\" @command=\"select\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled>删除（不可用）</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t>通过方法打开</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t>通过方法关闭</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDropdownMenuBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport type { AsamDropdownExpose } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef<AsamDropdownExpose>();\nconst command = ref('未选择');\nconst select = (value: string | number | object) => {\n\tcommand.value = String(value);\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDropdownMenu/basic/js/Demo.vue",
									"sha256": "8a9b9a9ffe0d7d8129b035c35cd775af34f0a08951c5f35fd061545b2139f1d9",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamDropdown ref=\"menu\" v-bind=\"{ trigger: 'click', wrapMenu: false }\" @command=\"select\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">打开操作菜单</AsamButton>\n\t\t\t<template #dropdown>\n\t\t\t\t<AsamDropdownMenu>\n\t\t\t\t\t<AsamDropdownItem command=\"edit\" :icon=\"Edit\">编辑</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"archive\" divided>归档</AsamDropdownItem>\n\t\t\t\t\t<AsamDropdownItem command=\"remove\" disabled>删除（不可用）</AsamDropdownItem>\n\t\t\t\t</AsamDropdownMenu>\n\t\t\t</template>\n\t\t</AsamDropdown>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.open()\"\n\t\t\t>通过方法打开</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"menu?.close()\"\n\t\t\t>通过方法关闭</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">当前命令：{{ command }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDropdownMenuBasicDemo' });\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDropdown, AsamDropdownMenu, AsamDropdownItem } from '@asam-ui/ui';\nimport { Edit } from '@asam-ui/icons-vue';\nconst menu = shallowRef();\nconst command = ref('未选择');\nconst select = (value) => {\n\tcommand.value = String(value);\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamInfiniteScroll",
			"documentation": "/component-AsamInfiniteScroll.html",
			"demos": [
				{
					"id": "basic",
					"title": "基础用法与状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInfiniteScroll/basic/ts/Demo.vue",
									"sha256": "d20ddca8d1576def7efea292c04f1aec422ddbfe48b02191c3f8666180f43188",
									"source": "<template>\n\t<AsamCheckboxItem v-model=\"paused\"> 暂停追加</AsamCheckboxItem>\n\t<ul\n\t\tv-asam-infinite-scroll=\"load\"\n\t\t:infinite-scroll-disabled=\"disabled\"\n\t\t:infinite-scroll-distance=\"16\"\n\t\t:infinite-scroll-immediate=\"false\"\n\t\tclass=\"scroll-list\"\n\t>\n\t\t<li v-for=\"item in count\" :key=\"item\">记录 {{ item }}</li>\n\t</ul>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '正在追加' : count >= 30 ? '已经到底' : '可继续滚动' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInfiniteScrollBasicDemo' });\nimport { ref, computed, onBeforeUnmount } from 'vue';\nimport { AsamCheckboxItem, AsamInfiniteScroll as vAsamInfiniteScroll } from '@asam-ui/ui';\nconst count = ref(12);\nconst paused = ref(false);\nconst loading = ref(false);\nconst disabled = computed(() => paused.value || loading.value || count.value >= 30);\nlet timer: ReturnType<typeof setTimeout> | undefined;\nconst load = () => {\n\tif (disabled.value) return;\n\tloading.value = true;\n\ttimer = setTimeout(() => {\n\t\tcount.value = Math.min(count.value + 6, 30);\n\t\tloading.value = false;\n\t}, 250);\n};\nonBeforeUnmount(() => clearTimeout(timer));\n</script>\n\n<style scoped>\n.scroll-list {\n\theight: 160px;\n\toverflow: auto;\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.scroll-list li {\n\tpadding: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInfiniteScroll/basic/js/Demo.vue",
									"sha256": "4f01b507e187c818e2eb525e43b08c27c412a5504807237491400a3e6dba80ca",
									"source": "<template>\n\t<AsamCheckboxItem v-model=\"paused\"> 暂停追加</AsamCheckboxItem>\n\t<ul\n\t\tv-asam-infinite-scroll=\"load\"\n\t\t:infinite-scroll-disabled=\"disabled\"\n\t\t:infinite-scroll-distance=\"16\"\n\t\t:infinite-scroll-immediate=\"false\"\n\t\tclass=\"scroll-list\"\n\t>\n\t\t<li v-for=\"item in count\" :key=\"item\">记录 {{ item }}</li>\n\t</ul>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '正在追加' : count >= 30 ? '已经到底' : '可继续滚动' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamInfiniteScrollBasicDemo' });\nimport { ref, computed, onBeforeUnmount } from 'vue';\nimport { AsamCheckboxItem, AsamInfiniteScroll as vAsamInfiniteScroll } from '@asam-ui/ui';\nconst count = ref(12);\nconst paused = ref(false);\nconst loading = ref(false);\nconst disabled = computed(() => paused.value || loading.value || count.value >= 30);\nlet timer;\nconst load = () => {\n\tif (disabled.value) return;\n\tloading.value = true;\n\ttimer = setTimeout(() => {\n\t\tcount.value = Math.min(count.value + 6, 30);\n\t\tloading.value = false;\n\t}, 250);\n};\nonBeforeUnmount(() => clearTimeout(timer));\n</script>\n\n<style scoped>\n.scroll-list {\n\theight: 160px;\n\toverflow: auto;\n\tborder: 1px solid var(--asam-color-border);\n}\n\n.scroll-list li {\n\tpadding: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "immediate",
					"title": "立即填充与嵌套滚动容器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInfiniteScroll/immediate/ts/Demo.vue",
									"sha256": "57ef5ac3e6e797d0285ed19df33da50b3da165251cc2f635864289a10fab0294",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamCheckboxItem v-model=\"paused\">暂停加载</AsamCheckboxItem>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"reset\">清空后重新填充</AsamButton>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"secondary = !secondary\"\n\t\t\t>切换宿主加载分派</AsamButton\n\t\t>\n\t\t<div class=\"scroll-parent\">\n\t\t\t<ul\n\t\t\t\t:key=\"generation\"\n\t\t\t\tv-asam-infinite-scroll=\"loadCallback\"\n\t\t\t\t:infinite-scroll-delay=\"80\"\n\t\t\t\t:infinite-scroll-distance=\"24\"\n\t\t\t\t:infinite-scroll-disabled=\"disabled\"\n\t\t\t\t:infinite-scroll-immediate=\"true\"\n\t\t\t>\n\t\t\t\t<li v-for=\"id in count\" :key=\"id\">记录 {{ id }}</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t{{ loading ? '正在加载' : '可加载' }}；{{ count }} 条；调用 {{ calls }} 次\n\t\t</p>\n\t\t<p class=\"example-paragraph\">\n\t\t\t当前函数 {{ secondary ? '第二加载函数' : '第一加载函数' }}；最近调用 {{ lastCallback }}\n\t\t</p>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamInfiniteScrollImmediateDemo' });\nimport { computed, onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamInfiniteScroll as vAsamInfiniteScroll\n} from '@asam-ui/ui';\nconst count = ref(0);\nconst calls = ref(0);\nconst paused = ref(false);\nconst loading = ref(false);\nconst secondary = ref(false);\nconst lastCallback = ref('尚未调用');\n\nconst disabled = computed(() => paused.value || loading.value || count.value >= 50);\nlet timer: ReturnType<typeof setTimeout> | undefined;\nconst generation = ref(0);\nfunction loadCallback(): void {\n\tload(secondary.value ? '第二加载函数' : '第一加载函数');\n}\nfunction load(source: string): void {\n\tif (disabled.value) return;\n\tlastCallback.value = source;\n\tloading.value = true;\n\tcalls.value++;\n\tconst revision = generation.value;\n\ttimer = setTimeout(() => {\n\t\tif (revision !== generation.value) return;\n\t\tcount.value = Math.min(50, count.value + 5);\n\t\tloading.value = false;\n\t}, 100);\n}\nfunction reset(): void {\n\tgeneration.value++;\n\tclearTimeout(timer);\n\tcount.value = 0;\n\tloading.value = false;\n}\nonBeforeUnmount(() => {\n\tgeneration.value++;\n\tclearTimeout(timer);\n});\n</script>\n<style scoped>\n.scroll-parent {\n\theight: 160px;\n\toverflow: auto;\n\tborder: 1px solid var(--asam-color-border);\n}\n\nul {\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style: none;\n}\n\nli {\n\tmin-height: 36px;\n\tpadding: var(--asam-space-xs);\n\tbox-sizing: border-box;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamInfiniteScroll/immediate/js/Demo.vue",
									"sha256": "b8d6ac0a9bf5e45b24a54d959e409a46eac5c10ca064cef9af08b208b96ba2c3",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamCheckboxItem v-model=\"paused\">暂停加载</AsamCheckboxItem>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"reset\">清空后重新填充</AsamButton>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"secondary = !secondary\"\n\t\t\t>切换宿主加载分派</AsamButton\n\t\t>\n\t\t<div class=\"scroll-parent\">\n\t\t\t<ul\n\t\t\t\t:key=\"generation\"\n\t\t\t\tv-asam-infinite-scroll=\"loadCallback\"\n\t\t\t\t:infinite-scroll-delay=\"80\"\n\t\t\t\t:infinite-scroll-distance=\"24\"\n\t\t\t\t:infinite-scroll-disabled=\"disabled\"\n\t\t\t\t:infinite-scroll-immediate=\"true\"\n\t\t\t>\n\t\t\t\t<li v-for=\"id in count\" :key=\"id\">记录 {{ id }}</li>\n\t\t\t</ul>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">\n\t\t\t{{ loading ? '正在加载' : '可加载' }}；{{ count }} 条；调用 {{ calls }} 次\n\t\t</p>\n\t\t<p class=\"example-paragraph\">\n\t\t\t当前函数 {{ secondary ? '第二加载函数' : '第一加载函数' }}；最近调用 {{ lastCallback }}\n\t\t</p>\n\t</div>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamInfiniteScrollImmediateDemo' });\nimport { computed, onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamInfiniteScroll as vAsamInfiniteScroll\n} from '@asam-ui/ui';\nconst count = ref(0);\nconst calls = ref(0);\nconst paused = ref(false);\nconst loading = ref(false);\nconst secondary = ref(false);\nconst lastCallback = ref('尚未调用');\n\nconst disabled = computed(() => paused.value || loading.value || count.value >= 50);\nlet timer;\nconst generation = ref(0);\nfunction loadCallback() {\n\tload(secondary.value ? '第二加载函数' : '第一加载函数');\n}\nfunction load(source) {\n\tif (disabled.value) return;\n\tlastCallback.value = source;\n\tloading.value = true;\n\tcalls.value++;\n\tconst revision = generation.value;\n\ttimer = setTimeout(() => {\n\t\tif (revision !== generation.value) return;\n\t\tcount.value = Math.min(50, count.value + 5);\n\t\tloading.value = false;\n\t}, 100);\n}\nfunction reset() {\n\tgeneration.value++;\n\tclearTimeout(timer);\n\tcount.value = 0;\n\tloading.value = false;\n}\nonBeforeUnmount(() => {\n\tgeneration.value++;\n\tclearTimeout(timer);\n});\n</script>\n<style scoped>\n.scroll-parent {\n\theight: 160px;\n\toverflow: auto;\n\tborder: 1px solid var(--asam-color-border);\n}\n\nul {\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style: none;\n}\n\nli {\n\tmin-height: 36px;\n\tpadding: var(--asam-space-xs);\n\tbox-sizing: border-box;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamLoading",
			"documentation": "/component-AsamLoading.html",
			"demos": [
				{
					"id": "basic",
					"title": "通过组合入口使用指令",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoading/basic/ts/Demo.vue",
									"sha256": "284a16c9c84ae97d26698dc0b5efd096b002fb171a16e7f353936fec5f608628",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载</AsamButton\n\t\t>\n\t\t<label>\n\t\t\t<span>提示文字</span>\n\t\t\t<AsamInput v-model=\"text\" />\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mounted = !mounted\"\n\t\t\t>卸载/恢复区域</AsamButton\n\t\t>\n\t</div>\n\t<div\n\t\tv-if=\"mounted\"\n\t\tv-asam-loading=\"loading\"\n\t\tv-bind=\"{ 'element-loading-text': text, class: 'loading-target' }\"\n\t>\n\t\t<p class=\"example-paragraph\">局部内容区域</p>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '加载中' : '加载已结束' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLoadingBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton, AsamLoading } from '@asam-ui/ui';\nconst vAsamLoading = AsamLoading.directive;\nconst loading = ref(false);\nconst text = ref('正在加载');\nconst mounted = ref(true);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tposition: relative;\n\tmin-height: 140px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoading/basic/js/Demo.vue",
									"sha256": "18cbf624b58ac5f4edc971e0b5561c358a8b48bdaafa79eb53ecd4f46c0a0fac",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载</AsamButton\n\t\t>\n\t\t<label>\n\t\t\t<span>提示文字</span>\n\t\t\t<AsamInput v-model=\"text\" />\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mounted = !mounted\"\n\t\t\t>卸载/恢复区域</AsamButton\n\t\t>\n\t</div>\n\t<div\n\t\tv-if=\"mounted\"\n\t\tv-asam-loading=\"loading\"\n\t\tv-bind=\"{ 'element-loading-text': text, class: 'loading-target' }\"\n\t>\n\t\t<p class=\"example-paragraph\">局部内容区域</p>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '加载中' : '加载已结束' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLoadingBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton, AsamLoading } from '@asam-ui/ui';\nconst vAsamLoading = AsamLoading.directive;\nconst loading = ref(false);\nconst text = ref('正在加载');\nconst mounted = ref(true);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tposition: relative;\n\tmin-height: 140px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamLoadingDirective",
			"documentation": "/component-AsamLoadingDirective.html",
			"demos": [
				{
					"id": "basic",
					"title": "状态、动态文字与卸载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/basic/ts/Demo.vue",
									"sha256": "8a37309af4b7112077adbab2579a912b7a4cf07cfeb2816b865654bc6c89648e",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载</AsamButton\n\t\t>\n\t\t<label>\n\t\t\t<span>提示文字</span>\n\t\t\t<AsamInput v-model=\"text\" />\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mounted = !mounted\"\n\t\t\t>卸载/恢复区域</AsamButton\n\t\t>\n\t</div>\n\t<div\n\t\tv-if=\"mounted\"\n\t\tv-asam-loading=\"loading\"\n\t\tv-bind=\"{ 'element-loading-text': text, class: 'loading-target' }\"\n\t>\n\t\t<p class=\"example-paragraph\">局部内容区域</p>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '加载中' : '加载已结束' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLoadingDirectiveBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton, AsamLoadingDirective as vAsamLoading } from '@asam-ui/ui';\nconst loading = ref(false);\nconst text = ref('正在加载');\nconst mounted = ref(true);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tmin-height: 140px;\n\tposition: relative;\n\tpadding: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/basic/js/Demo.vue",
									"sha256": "00dbdfabe6faeff8a5e598b1d6c428257ab3daa3c9bfe0401c6fc6f911018961",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载</AsamButton\n\t\t>\n\t\t<label>\n\t\t\t<span>提示文字</span>\n\t\t\t<AsamInput v-model=\"text\" />\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mounted = !mounted\"\n\t\t\t>卸载/恢复区域</AsamButton\n\t\t>\n\t</div>\n\t<div\n\t\tv-if=\"mounted\"\n\t\tv-asam-loading=\"loading\"\n\t\tv-bind=\"{ 'element-loading-text': text, class: 'loading-target' }\"\n\t>\n\t\t<p class=\"example-paragraph\">局部内容区域</p>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '加载中' : '加载已结束' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLoadingDirectiveBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton, AsamLoadingDirective as vAsamLoading } from '@asam-ui/ui';\nconst loading = ref(false);\nconst text = ref('正在加载');\nconst mounted = ref(true);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tmin-height: 140px;\n\tposition: relative;\n\tpadding: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "fullscreen",
					"title": "全屏指令与自动结束",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/fullscreen/ts/Demo.vue",
									"sha256": "896d0e24f154ad0a66cdde1d7eb1c057ef768b688366c7c381806b5947672963",
									"source": "<template>\n\t<AsamButton v-asam-loading.fullscreen.lock=\"loading\" type=\"default\" @click=\"start\"\n\t\t>显示全屏指令加载</AsamButton\n\t>\n\t<p class=\"example-paragraph\">指令绑定状态决定显隐，1.5 秒后自动结束。</p>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, vAsamLoading } from '@asam-ui/ui';\nconst loading = ref(false);\nlet timer: ReturnType<typeof setTimeout> | undefined;\nconst start = () => {\n\tclearTimeout(timer);\n\tloading.value = true;\n\ttimer = setTimeout(() => {\n\t\tloading.value = false;\n\t}, 1500);\n};\nonBeforeUnmount(() => clearTimeout(timer));\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/fullscreen/js/Demo.vue",
									"sha256": "06d19fbb08157fe0ac43bc2a9fbb12efbc2ebc4d34465cffcb9bd26653959f34",
									"source": "<template>\n\t<AsamButton v-asam-loading.fullscreen.lock=\"loading\" type=\"default\" @click=\"start\"\n\t\t>显示全屏指令加载</AsamButton\n\t>\n\t<p class=\"example-paragraph\">指令绑定状态决定显隐，1.5 秒后自动结束。</p>\n</template>\n\n<script setup>\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, vAsamLoading } from '@asam-ui/ui';\nconst loading = ref(false);\nlet timer;\nconst start = () => {\n\tclearTimeout(timer);\n\tloading.value = true;\n\ttimer = setTimeout(() => {\n\t\tloading.value = false;\n\t}, 1500);\n};\nonBeforeUnmount(() => clearTimeout(timer));\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic",
					"title": "局部表格加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/ep2147-basic/ts/Demo.vue",
									"sha256": "5fb29cf58fce59fce9010b0246ea2bc37b9f6f24d61ec7d9509590a81d44d00b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt\n-->\n<template>\n\t<AsamTable v-asam-loading=\"loading\" :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamTable, AsamTableColumn, vAsamLoading } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst loading = ref(true);\n\nconst tableData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t}\n];\n</script>\n\n<style>\nbody {\n\tmargin: 0;\n}\n\n.example-showcase .el-loading-mask {\n\tz-index: 9;\n}\n</style>\n",
									"originalSourceSha256": "822c82307b998e2746ee12e31cdf4eaeae078bae94949e43ad742d8857cd4356",
									"notice": {
										"id": "3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258",
										"url": "/licenses/source-notices/3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt",
										"licenseFilename": "LICENSE-3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/loading/basic.vue",
											"sourceSha256": "fe2ef10037c962dea8d46125c29c0f240bd2235aa9c859f84b4f572391973a5a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/ep2147-basic/js/Demo.vue",
									"sha256": "cada4e12a3cf699259a39fd2e814d03410f7c23df58120fa384f4b1bc916d4a3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt\n-->\n<template>\n\t<AsamTable v-asam-loading=\"loading\" :data=\"tableData\" style=\"width: 100%\">\n\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t</AsamTable>\n</template>\n\n<script setup>\nimport { AsamTable, AsamTableColumn, vAsamLoading } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst loading = ref(true);\nconst tableData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t}\n];\n</script>\n\n<style>\nbody {\n\tmargin: 0;\n}\n\n.example-showcase .el-loading-mask {\n\tz-index: 9;\n}\n</style>\n",
									"originalSourceSha256": "3d05214565224f2a29df623851513ed433c3628483f8fcec9b7c01d9c5d2f460",
									"notice": {
										"id": "3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258",
										"url": "/licenses/source-notices/3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt",
										"licenseFilename": "LICENSE-3a8f57077f420dde653eb21714bfccbf8b61fd66fb30f9798afd807d0d0c4258.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/loading/basic.vue",
											"sourceSha256": "fe2ef10037c962dea8d46125c29c0f240bd2235aa9c859f84b4f572391973a5a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customization",
					"title": "自定义文字与加载图案",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/ep2147-customization/ts/Demo.vue",
									"sha256": "404523f131ad76d806f01479a4c4341e1e1e4bfa6c028e1209fd6612564ce573",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTable\n\t\t\tv-asam-loading=\"\n\t\t\t\tloading\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ttext: '加载中……',\n\t\t\t\t\t\t\tspinner: svg,\n\t\t\t\t\t\t\tsvgViewBox: '-10, -10, 50, 50',\n\t\t\t\t\t\t\tbackground: 'rgba(122, 122, 122, 0.8)'\n\t\t\t\t\t\t}\n\t\t\t\t\t: false\n\t\t\t\"\n\t\t\t:data=\"tableData\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t\t<AsamTable\n\t\t\tv-asam-loading=\"loading ? { svg, svgViewBox: '-10, -10, 50, 50' } : false\"\n\t\t\t:data=\"tableData\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamTable, AsamTableColumn, vAsamLoading } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst loading = ref(true);\nconst svg = `\n        <path class=\"path\" d=\"\n          M 30 15\n          L 28 17\n          M 25.61 25.61\n          A 15 15, 0, 0, 1, 15 30\n          A 15 15, 0, 1, 1, 27.99 7.5\n          L 15 15\n        \" style=\"stroke-width: 4px; fill: rgba(0, 0, 0, 0)\"/>\n      `;\nconst tableData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t}\n];\n</script>\n\n<style>\n.example-showcase .el-loading-mask {\n\tz-index: 9;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "79944c55efd2a7b6b6f3a73c97138cfe6cde18d665e93c45583bc75104be2dc9",
									"notice": {
										"id": "ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8",
										"url": "/licenses/source-notices/ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt",
										"licenseFilename": "LICENSE-ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/loading/customization.vue",
											"sourceSha256": "1e937a047fa748df70091aba11ac5f265673b999c34685b3fc062d459d6f17bd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingDirective/ep2147-customization/js/Demo.vue",
									"sha256": "62e8b7a9f23c43651eb53b369d4bf640ff0fd9c5e7c09c0eb20174b532d9c7ed",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamTable\n\t\t\tv-asam-loading=\"\n\t\t\t\tloading\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ttext: '加载中……',\n\t\t\t\t\t\t\tspinner: svg,\n\t\t\t\t\t\t\tsvgViewBox: '-10, -10, 50, 50',\n\t\t\t\t\t\t\tbackground: 'rgba(122, 122, 122, 0.8)'\n\t\t\t\t\t\t}\n\t\t\t\t\t: false\n\t\t\t\"\n\t\t\t:data=\"tableData\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t\t<AsamTable\n\t\t\tv-asam-loading=\"loading ? { svg, svgViewBox: '-10, -10, 50, 50' } : false\"\n\t\t\t:data=\"tableData\"\n\t\t\tstyle=\"width: 100%\"\n\t\t>\n\t\t\t<AsamTableColumn prop=\"date\" label=\"日期\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"name\" label=\"姓名\" width=\"180\" />\n\t\t\t<AsamTableColumn prop=\"address\" label=\"地址\" />\n\t\t</AsamTable>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamTable, AsamTableColumn, vAsamLoading } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst loading = ref(true);\nconst svg = `\n        <path class=\"path\" d=\"\n          M 30 15\n          L 28 17\n          M 25.61 25.61\n          A 15 15, 0, 0, 1, 15 30\n          A 15 15, 0, 1, 1, 27.99 7.5\n          L 15 15\n        \" style=\"stroke-width: 4px; fill: rgba(0, 0, 0, 0)\"/>\n      `;\nconst tableData = [\n\t{\n\t\tdate: '2016-05-02',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-04',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t},\n\t{\n\t\tdate: '2016-05-01',\n\t\tname: '约翰·史密斯',\n\t\taddress: '普陀区金沙江路 1518 号'\n\t}\n];\n</script>\n\n<style>\n.example-showcase .el-loading-mask {\n\tz-index: 9;\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "98bd65e300fe6aa32077d004e93ca2eaba204d74daf26f6fe8b9dc3f1fbe2977",
									"notice": {
										"id": "ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8",
										"url": "/licenses/source-notices/ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt",
										"licenseFilename": "LICENSE-ceffdb556c0b597fd053954bf67020462f81dab79b7862bdac43c471a9eb77c8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/loading/customization.vue",
											"sourceSha256": "1e937a047fa748df70091aba11ac5f265673b999c34685b3fc062d459d6f17bd",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamLoadingService",
			"documentation": "/component-AsamLoadingService.html",
			"demos": [
				{
					"id": "basic",
					"title": "创建、更新和关闭实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingService/basic/ts/Demo.vue",
									"sha256": "aab46f70bfade3446915a03ead3bee6f1ba90488572d3f92cb21a6ff1c191fe1",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"start\">启动加载</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"handle?.setText('即将完成')\"\n\t\t\t>更新加载文字</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"stop\">结束加载</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"loading-target\">\n\t\t<p class=\"example-paragraph\">服务目标区域</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamLoadingServiceBasicDemo' });\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamLoadingService } from '@asam-ui/ui';\nimport type { AsamLoadingInstance } from '@asam-ui/ui';\nconst target = ref<HTMLElement>();\nlet handle: AsamLoadingInstance | undefined;\nconst stop = () => {\n\thandle?.close();\n\thandle = undefined;\n};\nconst start = () => {\n\tif (!target.value || handle) return;\n\thandle = AsamLoadingService({ target: target.value, fullscreen: false, text: '正在加载' });\n};\nonBeforeUnmount(stop);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tposition: relative;\n\tmin-height: 140px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingService/basic/js/Demo.vue",
									"sha256": "c233f35bc02f39d2181bfd7a099b82424eaefa0bc035b1b4d539e13ac2240115",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"start\">启动加载</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"handle?.setText('即将完成')\"\n\t\t\t>更新加载文字</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"stop\">结束加载</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"loading-target\">\n\t\t<p class=\"example-paragraph\">服务目标区域</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamLoadingServiceBasicDemo' });\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamLoadingService } from '@asam-ui/ui';\nconst target = ref();\nlet handle;\nconst stop = () => {\n\thandle?.close();\n\thandle = undefined;\n};\nconst start = () => {\n\tif (!target.value || handle) return;\n\thandle = AsamLoadingService({ target: target.value, fullscreen: false, text: '正在加载' });\n};\nonBeforeUnmount(stop);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tposition: relative;\n\tmin-height: 140px;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "service-context",
					"title": "宿主上下文与所属服务清理",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingService/service-context/ts/Demo.vue",
									"sha256": "b7b9c6ac807170f95125c440a6ca415dd290ecb18a9820eae4a8575b2982495f",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open\"\n\t\t\t>显示带宿主上下文的服务</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例服务</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"panel\">局部加载目标</div>\n</template>\n<script lang=\"ts\" setup>\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamLoadingService, AsamMessage, AsamNotification } from '@asam-ui/ui';\nimport type { AsamLoadingInstance, AsamMessageHandler, AsamNotificationHandle } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst target = ref<HTMLElement>();\nconst handles: Array<AsamMessageHandler | AsamNotificationHandle> = [];\nlet loading: AsamLoadingInstance | undefined;\nconst Label = defineComponent({\n\tsetup() {\n\t\tconst label = inject<string>('asam-service-label', '当前宿主的服务内容');\n\t\treturn () => h('span', label);\n\t}\n});\nconst close = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n\tloading?.close();\n\tloading = undefined;\n};\nconst open = () => {\n\tclose();\n\thandles.push(AsamMessage({ message: h(Label), duration: 0 }, context));\n\thandles.push(\n\t\tAsamNotification(\n\t\t\t{ title: '宿主上下文', message: h(Label), duration: 0, progress: true },\n\t\t\tcontext\n\t\t)\n\t);\n\tif (target.value)\n\t\tloading = AsamLoadingService(\n\t\t\t{ target: target.value, text: '局部处理', fullscreen: false },\n\t\t\tcontext\n\t\t);\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.panel {\n\tmin-height: 100px;\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingService/service-context/js/Demo.vue",
									"sha256": "ddc1f4ecae6d86bc648b7a86b46a33334c158093b4e95eeb4427ff10c8820a20",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open\"\n\t\t\t>显示带宿主上下文的服务</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例服务</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"panel\">局部加载目标</div>\n</template>\n<script setup>\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamLoadingService, AsamMessage, AsamNotification } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst target = ref();\nconst handles = [];\nlet loading;\nconst Label = defineComponent({\n\tsetup() {\n\t\tconst label = inject('asam-service-label', '当前宿主的服务内容');\n\t\treturn () => h('span', label);\n\t}\n});\nconst close = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n\tloading?.close();\n\tloading = undefined;\n};\nconst open = () => {\n\tclose();\n\thandles.push(AsamMessage({ message: h(Label), duration: 0 }, context));\n\thandles.push(\n\t\tAsamNotification(\n\t\t\t{ title: '宿主上下文', message: h(Label), duration: 0, progress: true },\n\t\t\tcontext\n\t\t)\n\t);\n\tif (target.value)\n\t\tloading = AsamLoadingService(\n\t\t\t{ target: target.value, text: '局部处理', fullscreen: false },\n\t\t\tcontext\n\t\t);\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.panel {\n\tmin-height: 100px;\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "fullscreen",
					"title": "全屏加载与自动结束",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingService/fullscreen/ts/Demo.vue",
									"sha256": "6d1bc82c37c85eceaf926740d22dfcb8794fb0f31c0b655ef7550ed2c029e3f1",
									"source": "<template>\n\t<AsamButton type=\"default\" @click=\"start\">显示全屏加载</AsamButton>\n\t<p class=\"example-paragraph\">锁定页面滚动，1.5 秒后自动结束；卸载时也会清理。</p>\n</template>\n\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamLoadingService } from '@asam-ui/ui';\nlet handle: ReturnType<typeof AsamLoadingService> | undefined;\nlet timer: ReturnType<typeof setTimeout> | undefined;\nconst stop = () => {\n\tclearTimeout(timer);\n\thandle?.close();\n\thandle = undefined;\n};\nconst start = () => {\n\tstop();\n\thandle = AsamLoadingService({ fullscreen: true, lock: true, text: '全屏加载中，稍后自动结束' });\n\ttimer = setTimeout(stop, 1500);\n};\nonBeforeUnmount(stop);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamLoadingService/fullscreen/js/Demo.vue",
									"sha256": "f54dd5579fbec12162a35deafbd8ee6324909e253ddd8d3fc8077ef469f619b8",
									"source": "<template>\n\t<AsamButton type=\"default\" @click=\"start\">显示全屏加载</AsamButton>\n\t<p class=\"example-paragraph\">锁定页面滚动，1.5 秒后自动结束；卸载时也会清理。</p>\n</template>\n\n<script setup>\nimport { onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamLoadingService } from '@asam-ui/ui';\nlet handle;\nlet timer;\nconst stop = () => {\n\tclearTimeout(timer);\n\thandle?.close();\n\thandle = undefined;\n};\nconst start = () => {\n\tstop();\n\thandle = AsamLoadingService({ fullscreen: true, lock: true, text: '全屏加载中，稍后自动结束' });\n\ttimer = setTimeout(stop, 1500);\n};\nonBeforeUnmount(stop);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMessage",
			"documentation": "/component-AsamMessage.html",
			"demos": [
				{
					"id": "basic",
					"title": "类型、分组与手动关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/basic/ts/Demo.vue",
									"sha256": "ba23cad7bac835fdadc9ebd6aea37d574a0ac675d96dbb9ca22ebd11af586f18",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"success\">成功消息</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"grouped\">分组信息</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"closeOwned\"\n\t\t\t>关闭本例消息</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">已创建 {{ count }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMessageBasicDemo' });\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport type { AsamMessageHandler } from '@asam-ui/ui';\nconst handles: AsamMessageHandler[] = [];\nconst count = ref(0);\nconst success = () => {\n\thandles.push(AsamMessage.success({ message: '草稿保存成功', duration: 0, showClose: true }));\n\tcount.value++;\n};\nconst grouped = () => {\n\thandles.push(\n\t\tAsamMessage({ message: '重复提示合并', grouping: true, duration: 0, showClose: true })\n\t);\n\tcount.value++;\n};\nconst closeOwned = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n};\nonBeforeUnmount(closeOwned);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/basic/js/Demo.vue",
									"sha256": "82058ca82a057b7d914b22d380aa0cfe89085b573f5e4e22931baf079a453e3b",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"success\">成功消息</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"grouped\">分组信息</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"closeOwned\"\n\t\t\t>关闭本例消息</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">已创建 {{ count }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMessageBasicDemo' });\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nconst handles = [];\nconst count = ref(0);\nconst success = () => {\n\thandles.push(AsamMessage.success({ message: '草稿保存成功', duration: 0, showClose: true }));\n\tcount.value++;\n};\nconst grouped = () => {\n\thandles.push(\n\t\tAsamMessage({ message: '重复提示合并', grouping: true, duration: 0, showClose: true })\n\t);\n\tcount.value++;\n};\nconst closeOwned = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n};\nonBeforeUnmount(closeOwned);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "service-context",
					"title": "宿主上下文与所属服务清理",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/service-context/ts/Demo.vue",
									"sha256": "b7b9c6ac807170f95125c440a6ca415dd290ecb18a9820eae4a8575b2982495f",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open\"\n\t\t\t>显示带宿主上下文的服务</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例服务</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"panel\">局部加载目标</div>\n</template>\n<script lang=\"ts\" setup>\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamLoadingService, AsamMessage, AsamNotification } from '@asam-ui/ui';\nimport type { AsamLoadingInstance, AsamMessageHandler, AsamNotificationHandle } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst target = ref<HTMLElement>();\nconst handles: Array<AsamMessageHandler | AsamNotificationHandle> = [];\nlet loading: AsamLoadingInstance | undefined;\nconst Label = defineComponent({\n\tsetup() {\n\t\tconst label = inject<string>('asam-service-label', '当前宿主的服务内容');\n\t\treturn () => h('span', label);\n\t}\n});\nconst close = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n\tloading?.close();\n\tloading = undefined;\n};\nconst open = () => {\n\tclose();\n\thandles.push(AsamMessage({ message: h(Label), duration: 0 }, context));\n\thandles.push(\n\t\tAsamNotification(\n\t\t\t{ title: '宿主上下文', message: h(Label), duration: 0, progress: true },\n\t\t\tcontext\n\t\t)\n\t);\n\tif (target.value)\n\t\tloading = AsamLoadingService(\n\t\t\t{ target: target.value, text: '局部处理', fullscreen: false },\n\t\t\tcontext\n\t\t);\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.panel {\n\tmin-height: 100px;\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/service-context/js/Demo.vue",
									"sha256": "ddc1f4ecae6d86bc648b7a86b46a33334c158093b4e95eeb4427ff10c8820a20",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open\"\n\t\t\t>显示带宿主上下文的服务</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例服务</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"panel\">局部加载目标</div>\n</template>\n<script setup>\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamLoadingService, AsamMessage, AsamNotification } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst target = ref();\nconst handles = [];\nlet loading;\nconst Label = defineComponent({\n\tsetup() {\n\t\tconst label = inject('asam-service-label', '当前宿主的服务内容');\n\t\treturn () => h('span', label);\n\t}\n});\nconst close = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n\tloading?.close();\n\tloading = undefined;\n};\nconst open = () => {\n\tclose();\n\thandles.push(AsamMessage({ message: h(Label), duration: 0 }, context));\n\thandles.push(\n\t\tAsamNotification(\n\t\t\t{ title: '宿主上下文', message: h(Label), duration: 0, progress: true },\n\t\t\tcontext\n\t\t)\n\t);\n\tif (target.value)\n\t\tloading = AsamLoadingService(\n\t\t\t{ target: target.value, text: '局部处理', fullscreen: false },\n\t\t\tcontext\n\t\t);\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.panel {\n\tmin-height: 100px;\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic",
					"title": "基本用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-basic/ts/Demo.vue",
									"sha256": "d5db0d6ea7e769daca633cd431f739c7d82a414309d7699b105503659139ae2a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open\"> 显示消息 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openVn\"\n\t\t\t>VNode 内容</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { h } from 'vue';\n\nconst open = () => {\n\ttrackAsamMessage(AsamMessage('这是一条消息。'));\n};\n\nconst openVn = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: h('p', { style: 'line-height: 1; font-size: 14px' }, [\n\t\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t\t])\n\t\t})\n\t);\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "3498e5d53c261a81f8f67cff07e8e8ae9c9265563b30f8d55c0e9c0e8e4568bb",
									"notice": {
										"id": "2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4",
										"url": "/licenses/source-notices/2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt",
										"licenseFilename": "LICENSE-2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/basic.vue",
											"sourceSha256": "d8cc29a6a05b4089060657ad701e30d9b6f62551c5417b6535c84bbe647ce6a6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-basic/js/Demo.vue",
									"sha256": "053084674320d6f25c8237074e0ab423dde6164dea83d536de1c0b414fe2bff5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open\"> 显示消息 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openVn\"\n\t\t\t>VNode 内容</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { h } from 'vue';\nconst open = () => {\n\ttrackAsamMessage(AsamMessage('这是一条消息。'));\n};\nconst openVn = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: h('p', { style: 'line-height: 1; font-size: 14px' }, [\n\t\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t\t])\n\t\t})\n\t);\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "4bf917e6b4d95199865ade4451221429d1a20941acf3ba83d6d877bbbef3e139",
									"notice": {
										"id": "2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4",
										"url": "/licenses/source-notices/2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt",
										"licenseFilename": "LICENSE-2cb32093116a1a3419e5fcb684e4b7cf7c9f85441cb0cc80ce01aa817225b4b4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/basic.vue",
											"sourceSha256": "d8cc29a6a05b4089060657ad701e30d9b6f62551c5417b6535c84bbe647ce6a6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-different-types",
					"title": "状态与快捷调用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-different-types/ts/Demo.vue",
									"sha256": "46684aba59c9c2605926159b8d53c96f61cbd55e22ce788a37710945f13b620c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open5\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open2\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open3\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open1\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open4\">错误</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open1 = () => {\n\ttrackAsamMessage(AsamMessage('这是一条信息提示。'));\n};\nconst open2 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '操作成功，这是一条成功提示。',\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '请注意，这是一条警告提示。',\n\t\t\ttype: 'warning'\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamMessage(AsamMessage.error('操作失败，这是一条错误提示。'));\n};\nconst open5 = () => {\n\ttrackAsamMessage(AsamMessage.primary('这是一条主要消息。'));\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "17dea6953dab6f8ff9eea171ed3b1a099b0fc52a9ccac6eecabb037f0cc51c22",
									"notice": {
										"id": "73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2",
										"url": "/licenses/source-notices/73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt",
										"licenseFilename": "LICENSE-73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/different-types.vue",
											"sourceSha256": "b978e513e1699daa24d779486487eeb8c2ec9aace1b1c150ed5a7381b5acf558",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-different-types/js/Demo.vue",
									"sha256": "0a4f04866ad121719cff2a8357c200e661aef9c4396376e30b912a96482a5f77",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open5\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open2\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open3\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open1\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open4\">错误</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open1 = () => {\n\ttrackAsamMessage(AsamMessage('这是一条信息提示。'));\n};\nconst open2 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '操作成功，这是一条成功提示。',\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '请注意，这是一条警告提示。',\n\t\t\ttype: 'warning'\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamMessage(AsamMessage.error('操作失败，这是一条错误提示。'));\n};\nconst open5 = () => {\n\ttrackAsamMessage(AsamMessage.primary('这是一条主要消息。'));\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "8b59922217bbc280f8ae080123f79c525b3d090d1f4b9a5712da1dfb9a6ac6b3",
									"notice": {
										"id": "73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2",
										"url": "/licenses/source-notices/73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt",
										"licenseFilename": "LICENSE-73bc21643e3fe7ced421d99ccf33eaef8aa8cb4ea349bf2e18f93b746ac971a2.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/different-types.vue",
											"sourceSha256": "b978e513e1699daa24d779486487eeb8c2ec9aace1b1c150ed5a7381b5acf558",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-plain",
					"title": "简洁消息",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-plain/ts/Demo.vue",
									"sha256": "173af264e1712136dd7d7d13c28f86d802fa33a0421d5f79d1043ab3a6a09f0d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open5\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open1\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open2\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open3\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open4\">错误</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open1 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '操作成功，这是一条成功提示。',\n\t\t\ttype: 'success',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '请注意，这是一条警告提示。',\n\t\t\ttype: 'warning',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '这是一条信息提示。',\n\t\t\ttype: 'info',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '操作失败，这是一条错误提示。',\n\t\t\ttype: 'error',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open5 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '这是一条主要消息。',\n\t\t\ttype: 'primary',\n\t\t\tplain: true\n\t\t})\n\t);\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "b142017b6f854e91c17bf85a23f687515e2faff3a3a0100e87f96d0451889408",
									"notice": {
										"id": "cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5",
										"url": "/licenses/source-notices/cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt",
										"licenseFilename": "LICENSE-cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/plain.vue",
											"sourceSha256": "b9d906ad6f1d52725994eed2b462c309776a35a18fce9c7c1b5fafa4fb953145",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-plain/js/Demo.vue",
									"sha256": "261aadc8ed0e433cb77f571cc5bb7e1501df790e63d2864ec168b6d8bd0ac9d2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open5\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open1\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open2\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open3\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open4\">错误</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open1 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '操作成功，这是一条成功提示。',\n\t\t\ttype: 'success',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '请注意，这是一条警告提示。',\n\t\t\ttype: 'warning',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '这是一条信息提示。',\n\t\t\ttype: 'info',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '操作失败，这是一条错误提示。',\n\t\t\ttype: 'error',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst open5 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '这是一条主要消息。',\n\t\t\ttype: 'primary',\n\t\t\tplain: true\n\t\t})\n\t);\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "34dac149be17f5c56aa1acb0dfcc48353f52c2966f5b6d7741c023f816b807fa",
									"notice": {
										"id": "cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5",
										"url": "/licenses/source-notices/cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt",
										"licenseFilename": "LICENSE-cbd591e96e8e9a9368ff35482a64b7a941a438dedb835d999e9bc150d5f984a5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/plain.vue",
											"sourceSha256": "b9d906ad6f1d52725994eed2b462c309776a35a18fce9c7c1b5fafa4fb953145",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-closable",
					"title": "完整交互：closable",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-closable/ts/Demo.vue",
									"sha256": "bc37eca289de3e7bdd741b39b854496e862aa5da49123cc324c4e6aaacf3e3ea",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open6\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open2\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open3\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open1\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open4\">错误</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open5\">\n\t\t\t不自动关闭\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open1 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '这是一条信息提示。'\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '操作成功，这是一条成功提示。',\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '请注意，这是一条警告提示。',\n\t\t\ttype: 'warning'\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '操作失败，这是一条错误提示。',\n\t\t\ttype: 'error'\n\t\t})\n\t);\n};\nconst open5 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '这条消息不会自动关闭。',\n\t\t\tduration: 0\n\t\t})\n\t);\n};\nconst open6 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '这是一条主要消息。',\n\t\t\ttype: 'primary'\n\t\t})\n\t);\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "7d001349c859c9faa637e9c1922c9a8782491fa8e3362e3320d80eecd7f456d5",
									"notice": {
										"id": "652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688",
										"url": "/licenses/source-notices/652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt",
										"licenseFilename": "LICENSE-652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/closable.vue",
											"sourceSha256": "825d84aca3843bbbc4ac49a40a9877dce07c1a9d16046dfa8ce0920e7b683ef1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-closable/js/Demo.vue",
									"sha256": "c582e0091bb237854d84f6876a14f8a07a3f2c7a83f44f255364dbfd94c85f85",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open6\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open2\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open3\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open1\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open4\">错误</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"open5\">\n\t\t\t不自动关闭\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open1 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '这是一条信息提示。'\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '操作成功，这是一条成功提示。',\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '请注意，这是一条警告提示。',\n\t\t\ttype: 'warning'\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '操作失败，这是一条错误提示。',\n\t\t\ttype: 'error'\n\t\t})\n\t);\n};\nconst open5 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '这条消息不会自动关闭。',\n\t\t\tduration: 0\n\t\t})\n\t);\n};\nconst open6 = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tshowClose: true,\n\t\t\tmessage: '这是一条主要消息。',\n\t\t\ttype: 'primary'\n\t\t})\n\t);\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "777ba6b972677115cfaade499f2bb8a4d34037372d4ba79876b4a30f244a4ab7",
									"notice": {
										"id": "652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688",
										"url": "/licenses/source-notices/652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt",
										"licenseFilename": "LICENSE-652a0d5e0d44a641b5626cfbe9664958dc8e7ac60872fa68006f99af10e50688.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/closable.vue",
											"sourceSha256": "825d84aca3843bbbc4ac49a40a9877dce07c1a9d16046dfa8ce0920e7b683ef1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-raw-html",
					"title": "可信 HTML 内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-raw-html/ts/Demo.vue",
									"sha256": "4c69a2d7123103ae1211b7d39b446deee3ce2395580cf27d84844f7e1422b3eb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt\n-->\n<template>\n\t<AsamButton type=\"default\" :plain=\"true\" @click=\"openHTML\">使用 HTML 字符串</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst openHTML = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tdangerouslyUseHTMLString: true,\n\t\t\tmessage: '<strong>这是一段 <i>HTML</i> 内容</strong>'\n\t\t})\n\t);\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "a9b9d77beed041109b7e112028c9f1224f8a235be4a6d9ba01660b717f2e1392",
									"notice": {
										"id": "1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee",
										"url": "/licenses/source-notices/1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt",
										"licenseFilename": "LICENSE-1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/raw-html.vue",
											"sourceSha256": "b06f48e41c6ef574fafc31b9abf4e0e168fe5a57cc7142daadb11f87262315c9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-raw-html/js/Demo.vue",
									"sha256": "77f828ffc92585f32f512a9f8450179a953395a5bdafaa9dc59659bae278beee",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt\n-->\n<template>\n\t<AsamButton type=\"default\" :plain=\"true\" @click=\"openHTML\">使用 HTML 字符串</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst openHTML = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tdangerouslyUseHTMLString: true,\n\t\t\tmessage: '<strong>这是一段 <i>HTML</i> 内容</strong>'\n\t\t})\n\t);\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "3f2d3f15577e8d3415f6f192b48a1cedb2c4e72f40df7e1e593d690427484859",
									"notice": {
										"id": "1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee",
										"url": "/licenses/source-notices/1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt",
										"licenseFilename": "LICENSE-1572d06fcf0a38d1dc79bb4955f0fd41611a6945404206ad4f15a5dbc4b9deee.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/raw-html.vue",
											"sourceSha256": "b06f48e41c6ef574fafc31b9abf4e0e168fe5a57cc7142daadb11f87262315c9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-grouping",
					"title": "消息合并",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-grouping/ts/Demo.vue",
									"sha256": "7147c85c3e7d183b17c01521b7d075c35721357769970f8e5ddded430a4b0863",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt\n-->\n<template>\n\t<AsamButton type=\"default\" :plain=\"true\" @click=\"open\">显示消息</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '这是一条消息。',\n\t\t\tgrouping: true,\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "927bf790c39eeff5042168f45941f2e3ae482569b0f1c3bf67dcd867c1c4602f",
									"notice": {
										"id": "f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9",
										"url": "/licenses/source-notices/f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt",
										"licenseFilename": "LICENSE-f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/grouping.vue",
											"sourceSha256": "39633131a4b6b0b86ee33b7796530c8e12e65955763b8ace0b54d5668ed19599",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-grouping/js/Demo.vue",
									"sha256": "91ae6154a31fafef8aa0e96b9fbe66de1866c47775aa5a43357658b7e3650545",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt\n-->\n<template>\n\t<AsamButton type=\"default\" :plain=\"true\" @click=\"open\">显示消息</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: '这是一条消息。',\n\t\t\tgrouping: true,\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "f4711c63b6794f5a532a4386f1b628e8a3d4e48e7c033d372198c1a41c57ae3a",
									"notice": {
										"id": "f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9",
										"url": "/licenses/source-notices/f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt",
										"licenseFilename": "LICENSE-f865c23c6c2926d9997c885298f4efe660b407cf237e5faebc88f61f0b4869e9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/grouping.vue",
											"sourceSha256": "39633131a4b6b0b86ee33b7796530c8e12e65955763b8ace0b54d5668ed19599",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-placement",
					"title": "定位方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-placement/ts/Demo.vue",
									"sha256": "e09bfc6a41318c31252b159c9e94845bc0ced1acdba5306505e7502971bd1b83",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg()\">\n\t\t\t顶部\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('top-left')\">\n\t\t\t左上方\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('top-right')\">\n\t\t\t右上方\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('bottom')\">\n\t\t\t底部\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('bottom-left')\">\n\t\t\t左下方\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('bottom-right')\">\n\t\t\t右下方\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamMessage,\n\ttype AsamMessageHandler,\n\ttype AsamMessagePlacement as MessagePlacement,\n\ttype AsamMessageType as MessageType\n} from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nlet topCount = 0;\nlet bottomCount = 0;\nlet topLeftCount = 0;\nlet topRightCount = 0;\nlet bottomLeftCount = 0;\nlet bottomRightCount = 0;\n\nconst openMsg = (placement: MessagePlacement = 'top') => {\n\tlet count = 0;\n\tlet type: MessageType = 'success';\n\n\tswitch (placement) {\n\t\tcase 'top':\n\t\t\tcount = ++topCount;\n\t\t\ttype = 'success';\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\tcount = ++bottomCount;\n\t\t\ttype = 'warning';\n\t\t\tbreak;\n\t\tcase 'top-left':\n\t\t\tcount = ++topLeftCount;\n\t\t\ttype = 'info';\n\t\t\tbreak;\n\t\tcase 'top-right':\n\t\t\tcount = ++topRightCount;\n\t\t\ttype = 'primary';\n\t\t\tbreak;\n\t\tcase 'bottom-left':\n\t\t\tcount = ++bottomLeftCount;\n\t\t\ttype = 'warning';\n\t\t\tbreak;\n\t\tcase 'bottom-right':\n\t\t\tcount = ++bottomRightCount;\n\t\t\ttype = 'error';\n\t\t\tbreak;\n\t}\n\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: `消息位置：${placement}，第 ${count} 条`,\n\t\t\ttype,\n\t\t\tplacement\n\t\t})\n\t);\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "15237797ae793b751d5583d0d53bce336aa502036790bae8edc997a4e222354d",
									"notice": {
										"id": "faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847",
										"url": "/licenses/source-notices/faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt",
										"licenseFilename": "LICENSE-faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/placement.vue",
											"sourceSha256": "43c8497086b426cbb7adec82f3a215971ed2f10b67170311f69d4a9460158cd4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessage/ep2147-placement/js/Demo.vue",
									"sha256": "56d0cd5951f6ae6465f4c78c3341a34c9389621b5f0d75921d251bb1c53e81c9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg()\">\n\t\t\t顶部\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('top-left')\">\n\t\t\t左上方\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('top-right')\">\n\t\t\t右上方\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('bottom')\">\n\t\t\t底部\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('bottom-left')\">\n\t\t\t左下方\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" :plain=\"true\" @click=\"openMsg('bottom-right')\">\n\t\t\t右下方\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nlet topCount = 0;\nlet bottomCount = 0;\nlet topLeftCount = 0;\nlet topRightCount = 0;\nlet bottomLeftCount = 0;\nlet bottomRightCount = 0;\nconst openMsg = (placement = 'top') => {\n\tlet count = 0;\n\tlet type = 'success';\n\tswitch (placement) {\n\t\tcase 'top':\n\t\t\tcount = ++topCount;\n\t\t\ttype = 'success';\n\t\t\tbreak;\n\t\tcase 'bottom':\n\t\t\tcount = ++bottomCount;\n\t\t\ttype = 'warning';\n\t\t\tbreak;\n\t\tcase 'top-left':\n\t\t\tcount = ++topLeftCount;\n\t\t\ttype = 'info';\n\t\t\tbreak;\n\t\tcase 'top-right':\n\t\t\tcount = ++topRightCount;\n\t\t\ttype = 'primary';\n\t\t\tbreak;\n\t\tcase 'bottom-left':\n\t\t\tcount = ++bottomLeftCount;\n\t\t\ttype = 'warning';\n\t\t\tbreak;\n\t\tcase 'bottom-right':\n\t\t\tcount = ++bottomRightCount;\n\t\t\ttype = 'error';\n\t\t\tbreak;\n\t}\n\ttrackAsamMessage(\n\t\tAsamMessage({\n\t\t\tmessage: `消息位置：${placement}，第 ${count} 条`,\n\t\t\ttype,\n\t\t\tplacement\n\t\t})\n\t);\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "cddf655c7bdeabcf43c0dd73d5bba2137e48aca1508a659c5a0584f35c482702",
									"notice": {
										"id": "faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847",
										"url": "/licenses/source-notices/faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt",
										"licenseFilename": "LICENSE-faa2a8876e351f512f243073599e0464f61e32a08fa1bacee567017e55224847.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message/placement.vue",
											"sourceSha256": "43c8497086b426cbb7adec82f3a215971ed2f10b67170311f69d4a9460158cd4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMessageBox",
			"documentation": "/component-AsamMessageBox.html",
			"demos": [
				{
					"id": "basic",
					"title": "提示、确认和输入验证",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/basic/ts/Demo.vue",
									"sha256": "a4c57a7842a2e5e1e30b73c63b2b70365a419e2b6c527f24bf658ec3662254d1",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" :disabled=\"active\" native-type=\"button\" @click=\"alert\"\n\t\t\t>提示</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" :disabled=\"active\" native-type=\"button\" @click=\"confirm\"\n\t\t\t>确认归档</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" :disabled=\"active\" native-type=\"button\" @click=\"prompt\"\n\t\t\t>输入名称</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMessageBoxBasicDemo' });\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamMessageBox } from '@asam-ui/ui';\nconst result = ref('等待操作');\nconst active = ref(false);\nconst alert = async () => {\n\tactive.value = true;\n\ttry {\n\t\tawait AsamMessageBox.alert('本地草稿已保存', '提示', { buttonSize: 'big' });\n\t\tresult.value = '已阅读';\n\t} catch {\n\t\tresult.value = '提示关闭';\n\t} finally {\n\t\tactive.value = false;\n\t}\n};\nconst confirm = async () => {\n\tactive.value = true;\n\ttry {\n\t\tawait AsamMessageBox.confirm('确认归档这条记录？', '归档确认', {\n\t\t\tdistinguishCancelAndClose: true,\n\t\t\tbuttonSize: 'small'\n\t\t});\n\t\tresult.value = '已确认归档';\n\t} catch (action) {\n\t\tresult.value = String(action);\n\t} finally {\n\t\tactive.value = false;\n\t}\n};\nconst prompt = async () => {\n\tactive.value = true;\n\ttry {\n\t\tconst data = await AsamMessageBox.prompt('请输入至少两个字的名称', '命名', {\n\t\t\tinputPattern: /^.{2,}$/,\n\t\t\tinputErrorMessage: '名称至少两个字',\n\t\t\tbuttonSize: 'large'\n\t\t});\n\t\tresult.value = data.value;\n\t} catch {\n\t\tresult.value = '输入已取消';\n\t} finally {\n\t\tactive.value = false;\n\t}\n};\nonBeforeUnmount(() => {\n\tif (active.value) AsamMessageBox.close();\n});\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/basic/js/Demo.vue",
									"sha256": "b8064027fe66b788120555c4efc7289909d7c625ae9b01ea994ba9f77579ae22",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" :disabled=\"active\" native-type=\"button\" @click=\"alert\"\n\t\t\t>提示</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" :disabled=\"active\" native-type=\"button\" @click=\"confirm\"\n\t\t\t>确认归档</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" :disabled=\"active\" native-type=\"button\" @click=\"prompt\"\n\t\t\t>输入名称</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMessageBoxBasicDemo' });\nimport { ref, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamMessageBox } from '@asam-ui/ui';\nconst result = ref('等待操作');\nconst active = ref(false);\nconst alert = async () => {\n\tactive.value = true;\n\ttry {\n\t\tawait AsamMessageBox.alert('本地草稿已保存', '提示', { buttonSize: 'big' });\n\t\tresult.value = '已阅读';\n\t} catch {\n\t\tresult.value = '提示关闭';\n\t} finally {\n\t\tactive.value = false;\n\t}\n};\nconst confirm = async () => {\n\tactive.value = true;\n\ttry {\n\t\tawait AsamMessageBox.confirm('确认归档这条记录？', '归档确认', {\n\t\t\tdistinguishCancelAndClose: true,\n\t\t\tbuttonSize: 'small'\n\t\t});\n\t\tresult.value = '已确认归档';\n\t} catch (action) {\n\t\tresult.value = String(action);\n\t} finally {\n\t\tactive.value = false;\n\t}\n};\nconst prompt = async () => {\n\tactive.value = true;\n\ttry {\n\t\tconst data = await AsamMessageBox.prompt('请输入至少两个字的名称', '命名', {\n\t\t\tinputPattern: /^.{2,}$/,\n\t\t\tinputErrorMessage: '名称至少两个字',\n\t\t\tbuttonSize: 'large'\n\t\t});\n\t\tresult.value = data.value;\n\t} catch {\n\t\tresult.value = '输入已取消';\n\t} finally {\n\t\tactive.value = false;\n\t}\n};\nonBeforeUnmount(() => {\n\tif (active.value) AsamMessageBox.close();\n});\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-alert",
					"title": "提示与确认结果",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-alert/ts/Demo.vue",
									"sha256": "b10bcbafeb75734fc773f723688925552ac72c861a02c97b01a77c130d9e8f7c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamMessage,\n\tAsamMessageBox,\n\ttype AsamMessageBoxAction as Action,\n\ttype AsamMessageHandler\n} from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.alert('这是一条消息。', '标题', {\n\t\t// if you want to disable its autofocus\n\t\t// autofocus: false,\n\t\tconfirmButtonText: '确认',\n\t\tcallback: (action: Action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: `操作结果：${action}`\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "6ac1693db04396c3efbc95c756a0179e7af55bfb8b91bfca73e9528e6751e77f",
									"notice": {
										"id": "7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69",
										"url": "/licenses/source-notices/7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt",
										"licenseFilename": "LICENSE-7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/alert.vue",
											"sourceSha256": "1b065297c66e465d400cd2e65fbcc4ebea3f9c80f87635c684fdd467f18ab1a1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-alert/js/Demo.vue",
									"sha256": "fb91d901683f3a6a687206d649a306be08c2640c5873a6eef50c37ae57dcee04",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\tAsamMessageBox.alert('这是一条消息。', '标题', {\n\t\t// if you want to disable its autofocus\n\t\t// autofocus: false,\n\t\tconfirmButtonText: '确认',\n\t\tcallback: (action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: `操作结果：${action}`\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "686fbfb47413a810eb585428cb8c5c5d3a8606365b23f1601f0b0cc26a3aad3c",
									"notice": {
										"id": "7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69",
										"url": "/licenses/source-notices/7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt",
										"licenseFilename": "LICENSE-7a2f37de2f4da99f2640e45637ed85c72b03862bd2c0287f4a8c8bdd64887f69.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/alert.vue",
											"sourceSha256": "1b065297c66e465d400cd2e65fbcc4ebea3f9c80f87635c684fdd467f18ab1a1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-confirm",
					"title": "确认与取消",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-confirm/ts/Demo.vue",
									"sha256": "2b999af569aa1955e488fe6d1ad747b36d6ef7f80070581390ed53760a4db813",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning'\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "feee355b7907d1962f19c049c13de4936899051806087e2edc60e0a27f70c887",
									"notice": {
										"id": "3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311",
										"url": "/licenses/source-notices/3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt",
										"licenseFilename": "LICENSE-3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/confirm.vue",
											"sourceSha256": "28b3e99372a249380b9e6bd05b3c78295c6b36317d2b113703da951a9d6ce8cb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-confirm/js/Demo.vue",
									"sha256": "32bce4a832ac71c369a64b0a64f3eba8836a4b33f2b883f3daee9b0e888dd82a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning'\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "f2a785f741923fb7eb776f5d412eefe063423c66595b9acc824603bf8a1b6934",
									"notice": {
										"id": "3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311",
										"url": "/licenses/source-notices/3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt",
										"licenseFilename": "LICENSE-3e881208759c306ae07d0e8d6731666e47a4b87468fc189e37e156ed06bb9311.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/confirm.vue",
											"sourceSha256": "28b3e99372a249380b9e6bd05b3c78295c6b36317d2b113703da951a9d6ce8cb",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-prompt",
					"title": "输入验证",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-prompt/ts/Demo.vue",
									"sha256": "569ff8cde98eca12f6dec24ccea297076bebae50d96d596e99dcf5630fd12d34",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.prompt('请输入电子邮箱', '提示', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\tinputPattern:\n\t\t\t/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n\t\tinputErrorMessage: '邮箱格式不正确'\n\t})\n\t\t.then(({ value }) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: `你的邮箱是：${value}`\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消输入'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "464f7d4e544c2e844eac2304c8bf3ca3a6ff616b2a76e0c5a2fb328a12bce330",
									"notice": {
										"id": "51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a",
										"url": "/licenses/source-notices/51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt",
										"licenseFilename": "LICENSE-51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/prompt.vue",
											"sourceSha256": "6d7121bbb79571fa7aec531e6f28d296cc7d9621d3ae88d35ba8c6cffcb7629e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-prompt/js/Demo.vue",
									"sha256": "e39fb9223ea25c309fcc00b6537869faae5b6cedaaee1eb6a94e8e6c725848a6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\tAsamMessageBox.prompt('请输入电子邮箱', '提示', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\tinputPattern:\n\t\t\t/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n\t\tinputErrorMessage: '邮箱格式不正确'\n\t})\n\t\t.then(({ value }) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: `你的邮箱是：${value}`\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消输入'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "e59ddbedf7f0638c743d87bcacdbaaf684f13177f8dc9b1aae25bbca7d3d6058",
									"notice": {
										"id": "51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a",
										"url": "/licenses/source-notices/51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt",
										"licenseFilename": "LICENSE-51f111f77e93f976472b3c69a86905dad6dcb0eb9f8cf5e83d59a637b86d009a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/prompt.vue",
											"sourceSha256": "6d7121bbb79571fa7aec531e6f28d296cc7d9621d3ae88d35ba8c6cffcb7629e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-use-vnode",
					"title": "VNode 内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-use-vnode/ts/Demo.vue",
									"sha256": "6b9a742a62da4f6031705b8edb774309d758fb843f58e88693bc0fd3305cdfad",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open\">普通 VNode</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\">动态属性</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessageBox, AsamSwitch } from '@asam-ui/ui';\n\nimport { h, ref } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox({\n\t\ttitle: '消息',\n\t\tmessage: h('p', null, [\n\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t])\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\n\nconst open1 = () => {\n\tconst checked = ref<boolean | string | number>(false);\n\tAsamMessageBox({\n\t\ttitle: '消息',\n\t\t// Should pass a function if VNode contains dynamic props\n\t\tmessage: () =>\n\t\t\th(AsamSwitch, {\n\t\t\t\tmodelValue: checked.value,\n\t\t\t\t'onUpdate:modelValue': (val: boolean | string | number) => {\n\t\t\t\t\tchecked.value = val;\n\t\t\t\t}\n\t\t\t})\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "ed210cc7629feac569139edbbb4512dce5f5c44aa37527d4ef18b7f9b0520f7f",
									"notice": {
										"id": "864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02",
										"url": "/licenses/source-notices/864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt",
										"licenseFilename": "LICENSE-864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/use-vnode.vue",
											"sourceSha256": "12d286948ea8aae0e2340571375a68c100bca54606b9a00997fd218cae9228f1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-use-vnode/js/Demo.vue",
									"sha256": "481234bf0efe77450d945674361f918f725d7d7a98ced62b0b658ee00fdb9663",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open\">普通 VNode</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\">动态属性</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessageBox, AsamSwitch } from '@asam-ui/ui';\nimport { h, ref } from 'vue';\nconst open = () => {\n\tAsamMessageBox({\n\t\ttitle: '消息',\n\t\tmessage: h('p', null, [\n\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t])\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\nconst open1 = () => {\n\tconst checked = ref(false);\n\tAsamMessageBox({\n\t\ttitle: '消息',\n\t\t// Should pass a function if VNode contains dynamic props\n\t\tmessage: () =>\n\t\t\th(AsamSwitch, {\n\t\t\t\tmodelValue: checked.value,\n\t\t\t\t'onUpdate:modelValue': (val) => {\n\t\t\t\t\tchecked.value = val;\n\t\t\t\t}\n\t\t\t})\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "a93bdde36596fdd7aab6c1312390bfd33cbcd261cd4021588c5caa92f7baed7c",
									"notice": {
										"id": "864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02",
										"url": "/licenses/source-notices/864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt",
										"licenseFilename": "LICENSE-864f9a4eae21abb84247e514cc50460821773ba2cb2b3790aacf17c80edc8c02.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/use-vnode.vue",
											"sourceSha256": "12d286948ea8aae0e2340571375a68c100bca54606b9a00997fd218cae9228f1",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-use-vnode-with-action-handlers",
					"title": "VNode 动作与 Promise",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-use-vnode-with-action-handlers/ts/Demo.vue",
									"sha256": "55985cf7c3eded81a3fa639ad2ba5035fdf1cc5616bac82dbfb8629e93a2fd87",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { h } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.confirm(\n\t\t({ confirm, cancel, close }) => {\n\t\t\treturn h('div', [\n\t\t\t\th('p', { style: 'margin-bottom: 8px' }, '自定义按钮使用消息框操作处理器'),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tconfirm();\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t() => '完成（resolve）'\n\t\t\t\t),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tcancel();\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t() => '拒绝（reject）'\n\t\t\t\t),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t() => '关闭（close）'\n\t\t\t\t)\n\t\t\t]);\n\t\t},\n\t\t{\n\t\t\ttitle: '消息',\n\t\t\tshowConfirmButton: false,\n\t\t\tshowCancelButton: false,\n\t\t\tdistinguishCancelAndClose: true\n\t\t}\n\t)\n\t\t.then((action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: `resolved: ${action}`\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch((reason) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'error',\n\t\t\t\t\tmessage: `rejected: ${reason}`\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "dd7880c6a42e7c18159fdb5d44aa47c66afa3a9653e648e587d2516fa78b12fc",
									"notice": {
										"id": "974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73",
										"url": "/licenses/source-notices/974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt",
										"licenseFilename": "LICENSE-974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/use-vnode-with-action-handlers.vue",
											"sourceSha256": "891dec2ce52e8ca1bac5ac7d486481ecebaa511a12c2ff052cc5ecbf6ade5bf2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-use-vnode-with-action-handlers/js/Demo.vue",
									"sha256": "5205a0d399641bcbe3826a1874e64e1bbb89391c1d1f7ebc3d16a52c7fc497ff",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { h } from 'vue';\nconst open = () => {\n\tAsamMessageBox.confirm(\n\t\t({ confirm, cancel, close }) => {\n\t\t\treturn h('div', [\n\t\t\t\th('p', { style: 'margin-bottom: 8px' }, '自定义按钮使用消息框操作处理器'),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'default',\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tconfirm();\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t() => '完成（resolve）'\n\t\t\t\t),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tcancel();\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t() => '拒绝（reject）'\n\t\t\t\t),\n\t\t\t\th(\n\t\t\t\t\tAsamButton,\n\t\t\t\t\t{\n\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\t() => '关闭（close）'\n\t\t\t\t)\n\t\t\t]);\n\t\t},\n\t\t{\n\t\t\ttitle: '消息',\n\t\t\tshowConfirmButton: false,\n\t\t\tshowCancelButton: false,\n\t\t\tdistinguishCancelAndClose: true\n\t\t}\n\t)\n\t\t.then((action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: `resolved: ${action}`\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch((reason) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'error',\n\t\t\t\t\tmessage: `rejected: ${reason}`\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "b090e03739d03de7b608d26e2c7a474c6dfcca357c618378c9b73d781a2c3cdb",
									"notice": {
										"id": "974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73",
										"url": "/licenses/source-notices/974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt",
										"licenseFilename": "LICENSE-974cd1e1437bcc9c67c51ad9642fe9bdac6bc060592071f51f7cafe874874e73.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/use-vnode-with-action-handlers.vue",
											"sourceSha256": "891dec2ce52e8ca1bac5ac7d486481ecebaa511a12c2ff052cc5ecbf6ade5bf2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customization",
					"title": "异步关闭守卫",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-customization/ts/Demo.vue",
									"sha256": "4246a0532c242eccce13377df8f14ce202cd200eee43098bae03549fb4e40f3f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { h } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox({\n\t\ttitle: '消息',\n\t\tmessage: h('p', null, [\n\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t]),\n\t\tshowCancelButton: true,\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\tbeforeClose: (action, instance, done) => {\n\t\t\tif (action === 'confirm') {\n\t\t\t\tinstance.confirmButtonLoading = true;\n\t\t\t\tinstance.confirmButtonText = '加载中……';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tdone();\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tinstance.confirmButtonLoading = false;\n\t\t\t\t\t}, 300);\n\t\t\t\t}, 3000);\n\t\t\t} else {\n\t\t\t\tdone();\n\t\t\t}\n\t\t}\n\t})\n\t\t.then((action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: `操作结果：${action}`\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch((action) => {\n\t\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "b828069a3540ea9d94c398fb81fbb1300fa68fe2452720d00e622260e2ffd3c4",
									"notice": {
										"id": "abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a",
										"url": "/licenses/source-notices/abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt",
										"licenseFilename": "LICENSE-abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/customization.vue",
											"sourceSha256": "dddd24457c02991e2bd262eee655f66f2a94b14db11edaf5eadf86a8300dbce7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-customization/js/Demo.vue",
									"sha256": "92e060e807e2437f012cc05c7007dabde62553738435f87366b5be438f16fbf4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { h } from 'vue';\nconst open = () => {\n\tAsamMessageBox({\n\t\ttitle: '消息',\n\t\tmessage: h('p', null, [\n\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t]),\n\t\tshowCancelButton: true,\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\tbeforeClose: (action, instance, done) => {\n\t\t\tif (action === 'confirm') {\n\t\t\t\tinstance.confirmButtonLoading = true;\n\t\t\t\tinstance.confirmButtonText = '加载中……';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tdone();\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tinstance.confirmButtonLoading = false;\n\t\t\t\t\t}, 300);\n\t\t\t\t}, 3000);\n\t\t\t} else {\n\t\t\t\tdone();\n\t\t\t}\n\t\t}\n\t})\n\t\t.then((action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: `操作结果：${action}`\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch((action) => {\n\t\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "46eb49595ce967be5844f1c8029031b3b12981bfd5c5500f7a2f67c3ed164192",
									"notice": {
										"id": "abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a",
										"url": "/licenses/source-notices/abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt",
										"licenseFilename": "LICENSE-abe2aa97343eff10153e88321ff69bba58edf458e41d70e0694e415a2e794f8a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/customization.vue",
											"sourceSha256": "dddd24457c02991e2bd262eee655f66f2a94b14db11edaf5eadf86a8300dbce7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-use-html",
					"title": "可信 HTML 内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-use-html/ts/Demo.vue",
									"sha256": "6080a233dbeec4b2150f425c11b97314f1046107ed0a54f393cf5f660fcc84be",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessageBox } from '@asam-ui/ui';\n\nconst open = () => {\n\tAsamMessageBox.alert('<strong>这是一段 <i>HTML</i> 内容</strong>', 'HTML 内容', {\n\t\tdangerouslyUseHTMLString: true\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\n</script>\n",
									"originalSourceSha256": "55a245927c99fe55d0c7f2657d56bb74fd1e32b6a10d01322d483d3d8be78df2",
									"notice": {
										"id": "00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9",
										"url": "/licenses/source-notices/00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt",
										"licenseFilename": "LICENSE-00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/use-html.vue",
											"sourceSha256": "5e8c45ddf9f4e34e39e88e0995b860aebe4b57e9f697d3f055e70b7d8b09955c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-use-html/js/Demo.vue",
									"sha256": "f07e591872b4db3b83c82a4831eb75b99866bd233fb55fd664b369ef60b1424d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessageBox } from '@asam-ui/ui';\nconst open = () => {\n\tAsamMessageBox.alert('<strong>这是一段 <i>HTML</i> 内容</strong>', 'HTML 内容', {\n\t\tdangerouslyUseHTMLString: true\n\t}).catch((action) => {\n\t\tif (action !== 'cancel' && action !== 'close') throw action;\n\t});\n};\n</script>\n",
									"originalSourceSha256": "09b905631622d26c9d0e8348e8aebaf8fad90c912b58f589d26aadf36ca79a32",
									"notice": {
										"id": "00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9",
										"url": "/licenses/source-notices/00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt",
										"licenseFilename": "LICENSE-00e53caa81831a69dc6b4482646fa6ba00bc97af77bc86e8c8d9ff797441a6f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/use-html.vue",
											"sourceSha256": "5e8c45ddf9f4e34e39e88e0995b860aebe4b57e9f697d3f055e70b7d8b09955c",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-distinguishable-close-cancel",
					"title": "区分取消与关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-distinguishable-close-cancel/ts/Demo.vue",
									"sha256": "d4e16bc80ea5a685076f3ab35793911bc67c6d12723bfe95a988c4b4a58bd5da",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamMessage,\n\tAsamMessageBox,\n\ttype AsamMessageBoxAction as Action,\n\ttype AsamMessageHandler\n} from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.confirm('有未保存的修改，是否保存并继续？', '确认', {\n\t\tdistinguishCancelAndClose: true,\n\t\tconfirmButtonText: '保存',\n\t\tcancelButtonText: '放弃修改'\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '修改已保存，即将前往新页面。'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch((action: Action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: action === 'cancel' ? '已放弃修改，即将前往新页面。' : '留在当前页面'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "94ada97a62e0e9ede198e96f612340813b6df4de68ee90a9d9bc5b2b583f5915",
									"notice": {
										"id": "df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c",
										"url": "/licenses/source-notices/df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt",
										"licenseFilename": "LICENSE-df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/distinguishable-close-cancel.vue",
											"sourceSha256": "525a212bffb29637e707f730204cbb017cc8e027b2cc490a813d2cd649138f1e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-distinguishable-close-cancel/js/Demo.vue",
									"sha256": "953e6bc64ba6c1972848b6d93b265f0106c9638a7231d8df116a245eb9077131",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\tAsamMessageBox.confirm('有未保存的修改，是否保存并继续？', '确认', {\n\t\tdistinguishCancelAndClose: true,\n\t\tconfirmButtonText: '保存',\n\t\tcancelButtonText: '放弃修改'\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '修改已保存，即将前往新页面。'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch((action) => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: action === 'cancel' ? '已放弃修改，即将前往新页面。' : '留在当前页面'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "2df5427440f4b0ffe64cc1624adb781250ae5090d5fa73a984d49b82a1d86229",
									"notice": {
										"id": "df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c",
										"url": "/licenses/source-notices/df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt",
										"licenseFilename": "LICENSE-df086ef7654dc1905769daf9f4c27300efda098805376b935bebff4aaff4ea6c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/distinguishable-close-cancel.vue",
											"sourceSha256": "525a212bffb29637e707f730204cbb017cc8e027b2cc490a813d2cd649138f1e",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-centered-content",
					"title": "居中内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-centered-content/ts/Demo.vue",
									"sha256": "9f78e575b68025f6edd5b58ea171f10fd30ecbc122db163346ecd57d9533b98a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\tcenter: true\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "99676c0e4d3704fcb2ca932e7ee8fb192178abb6e49804498ffbf9d67db2d63e",
									"notice": {
										"id": "43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f",
										"url": "/licenses/source-notices/43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt",
										"licenseFilename": "LICENSE-43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/centered-content.vue",
											"sourceSha256": "83a89893ce91b1ef3541e92d47fef2e04d8c611938175d01646ecf29ca0997ea",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-centered-content/js/Demo.vue",
									"sha256": "746d4a02433598c571fca3e0a055d53d77f2d4f895b9257fb89445f913cce829",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\tcenter: true\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "c3dbae1043faa1bad4c45c11a313fe6045dbc5220422672ac0e7380c4704c3d3",
									"notice": {
										"id": "43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f",
										"url": "/licenses/source-notices/43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt",
										"licenseFilename": "LICENSE-43d77e7f0e5f8ef9322c4d1d84476b2d860fe76819410b185c93c14a95d3842f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/centered-content.vue",
											"sourceSha256": "83a89893ce91b1ef3541e92d47fef2e04d8c611938175d01646ecf29ca0997ea",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customized-icon",
					"title": "自定义图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-customized-icon/ts/Demo.vue",
									"sha256": "0f4477d4abbb0108c70d03dbde6e542cd016162eeac35d2500ba4c0aa0b6ae79",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { markRaw } from 'vue';\n\nimport { Delete } from '@asam-ui/icons-vue';\n\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\ticon: markRaw(Delete)\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "06e947f6e224c7d5851b1569d6c4146d96e1a676e941463ad6869fc53ea66954",
									"notice": {
										"id": "0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf",
										"url": "/licenses/source-notices/0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt",
										"licenseFilename": "LICENSE-0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/customized-icon.vue",
											"sourceSha256": "b7bbdb4feb07baa7a1e7b940d53de53275fe05d36d74398a9f03f489119c74b4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-customized-icon/js/Demo.vue",
									"sha256": "45346b0c2da18a656d0595b59a60ed537bead798b533ff77e39a8041079c8094",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\">点击打开消息框</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { markRaw } from 'vue';\nimport { Delete } from '@asam-ui/icons-vue';\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\ticon: markRaw(Delete)\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n",
									"originalSourceSha256": "3e01762df6ba9327d1bb749d77206272a53e288f6d2e3242668212065571d6dc",
									"notice": {
										"id": "0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf",
										"url": "/licenses/source-notices/0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt",
										"licenseFilename": "LICENSE-0c24b4ae195e84a427db123365773fa7eed09fad5ec42dc4c4acf808c319becf.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/customized-icon.vue",
											"sourceSha256": "b7bbdb4feb07baa7a1e7b940d53de53275fe05d36d74398a9f03f489119c74b4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-draggable",
					"title": "拖动",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-draggable/ts/Demo.vue",
									"sha256": "6141466f006a38a5c79185305fe632669674888f2692d8d8f9160b8cb8b72065",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open\"> 打开可拖拽消息框 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\">\n\t\t\t打开允许越界拖拽的消息框\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open3\">\n\t\t\t打开自定义拖拽样式的消息框\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamMessage, AsamMessageBox, type AsamMessageHandler } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\tdraggable: true\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst open2 = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\tdraggable: true,\n\t\toverflow: true\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst open3 = () => {\n\tAsamMessageBox.confirm('此消息框使用自定义拖拽样式，拖动它即可查看效果。', '自定义拖拽样式', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'info',\n\t\tdraggable: true,\n\t\tcustomClass: 'custom-dragging-message-box'\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '操作完成'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消操作'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\n\nconst ownedAsamMessage = new Set<AsamMessageHandler>();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle: AsamMessageHandler) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style>\n.custom-dragging-message-box.is-dragging {\n\tborder: 2px dashed var(--el-color-primary);\n\topacity: 0.65;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "f786b6e9702e5e92dde4573403264a8e85a2fbe9c6ece0b67eace8642ee0201c",
									"notice": {
										"id": "399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd",
										"url": "/licenses/source-notices/399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt",
										"licenseFilename": "LICENSE-399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/draggable.vue",
											"sourceSha256": "40d742de96c188b20d19c47d607cc13be4057211e10d8a31390f30ae057b320f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/ep2147-draggable/js/Demo.vue",
									"sha256": "294d6704f959e2eef8f4bdbe60259fe61a7b2d1fa4a11f267a0e2deee06b9d9d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open\"> 打开可拖拽消息框 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\">\n\t\t\t打开允许越界拖拽的消息框\n\t\t</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open3\">\n\t\t\t打开自定义拖拽样式的消息框\n\t\t</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamMessage, AsamMessageBox } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\tdraggable: true\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst open2 = () => {\n\tAsamMessageBox.confirm('此操作将永久删除文件，确定继续吗？', '警告', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'warning',\n\t\tdraggable: true,\n\t\toverflow: true\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '删除成功'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消删除'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst open3 = () => {\n\tAsamMessageBox.confirm('此消息框使用自定义拖拽样式，拖动它即可查看效果。', '自定义拖拽样式', {\n\t\tconfirmButtonText: '确认',\n\t\tcancelButtonText: '取消',\n\t\ttype: 'info',\n\t\tdraggable: true,\n\t\tcustomClass: 'custom-dragging-message-box'\n\t})\n\t\t.then(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'success',\n\t\t\t\t\tmessage: '操作完成'\n\t\t\t\t})\n\t\t\t);\n\t\t})\n\t\t.catch(() => {\n\t\t\ttrackAsamMessage(\n\t\t\t\tAsamMessage({\n\t\t\t\t\ttype: 'info',\n\t\t\t\t\tmessage: '已取消操作'\n\t\t\t\t})\n\t\t\t);\n\t\t});\n};\nconst ownedAsamMessage = new Set();\nlet mountedAsamMessage = true;\nconst trackAsamMessage = (handle) => {\n\tif (mountedAsamMessage) ownedAsamMessage.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamMessage = false;\n\tfor (const handle of ownedAsamMessage) handle.close();\n\townedAsamMessage.clear();\n});\n</script>\n\n<style>\n.custom-dragging-message-box.is-dragging {\n\tborder: 2px dashed var(--el-color-primary);\n\topacity: 0.65;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "a4388119f439ae7e52263f2c817f321e5256821889c1066fd9412d58eca1d4af",
									"notice": {
										"id": "399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd",
										"url": "/licenses/source-notices/399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt",
										"licenseFilename": "LICENSE-399986496e94e8a7964b94c5d2b5c41fc124bbd625a79b1da2d3c6263b62f2cd.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/message-box/draggable.vue",
											"sourceSha256": "40d742de96c188b20d19c47d607cc13be4057211e10d8a31390f30ae057b320f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "service-context",
					"title": "宿主 AppContext 与简写重载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/service-context/ts/Demo.vue",
									"sha256": "e4d4fe2d63c5decaa130c40e9918d4b46cb57d2c7447c0164e196ccfe2c6cede",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<label>\n\t\t\t<span>服务类型</span>\n\t\t\t<AsamSelect v-model=\"method\" :disabled=\"active\">\n\t\t\t\t<AsamOption value=\"alert\" :label=\"'alert'\">alert</AsamOption>\n\t\t\t\t<AsamOption value=\"confirm\" :label=\"'确认'\">确认</AsamOption>\n\t\t\t\t<AsamOption value=\"prompt\" :label=\"'prompt'\">prompt</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<label>\n\t\t\t<span>上下文</span>\n\t\t\t<AsamSelect v-model=\"contextMode\" :disabled=\"active\">\n\t\t\t\t<AsamOption value=\"explicit\" :label=\"'显式当前 AppContext'\"\n\t\t\t\t\t>显式当前 AppContext</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"installed\" :label=\"'安装服务的默认上下文'\"\n\t\t\t\t\t>安装服务的默认上下文</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"null\" :label=\"'显式 null'\">显式 null</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" :disabled=\"active\" @click=\"open(false)\"\n\t\t\t>使用 options 简写</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" :disabled=\"active\" @click=\"open(true)\"\n\t\t\t>使用 title 重载</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMessageBoxServiceContextDemo' });\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamMessageBox } from '@asam-ui/ui';\nimport type { AsamMessageBoxActionHandlers, AsamMessageBoxOptions } from '@asam-ui/ui';\n\nconst context = getCurrentInstance()?.appContext;\nconst method = ref<'alert' | 'confirm' | 'prompt'>('alert');\nconst contextMode = ref<'explicit' | 'installed' | 'null'>('explicit');\nconst active = ref(false);\nconst result = ref('等待操作');\nlet cancelOwned: (() => void) | undefined;\nconst Content = defineComponent({\n\tsetup() {\n\t\tconst label = inject<string>('asam-message-box-context', '未设置宿主 provide');\n\t\treturn () => h('span', { 'data-context-label': '' }, label);\n\t}\n});\nconst cancel = () => cancelOwned?.();\nconst open = async (withTitle: boolean) => {\n\tif (active.value) return;\n\tactive.value = true;\n\tresult.value = '等待确认';\n\tconst message = ({ cancel }: AsamMessageBoxActionHandlers) => {\n\t\tcancelOwned = cancel;\n\t\treturn h('div', [\n\t\t\th(Content),\n\t\t\th(\n\t\t\t\tAsamButton,\n\t\t\t\t{ type: 'default', nativeType: 'button', onClick: cancel },\n\t\t\t\t'取消本例弹层'\n\t\t\t)\n\t\t]);\n\t};\n\tconst options: AsamMessageBoxOptions = {\n\t\tbuttonSize: 'default',\n\t\tinputPlaceholder: '输入本次确认值',\n\t\tdistinguishCancelAndClose: true\n\t};\n\tconst appContext =\n\t\tcontextMode.value === 'installed'\n\t\t\t? undefined\n\t\t\t: contextMode.value === 'null'\n\t\t\t\t? null\n\t\t\t\t: context;\n\ttry {\n\t\tconst value = withTitle\n\t\t\t? await AsamMessageBox[method.value](message, '宿主上下文', options, appContext)\n\t\t\t: await AsamMessageBox[method.value](message, options, appContext);\n\t\tresult.value =\n\t\t\tmethod.value === 'prompt' ? `confirmed: ${value.value}` : `resolved: ${value}`;\n\t} catch (action) {\n\t\tresult.value = `rejected: ${String(action)}`;\n\t} finally {\n\t\tcancelOwned = undefined;\n\t\tactive.value = false;\n\t}\n};\nonBeforeUnmount(cancel);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMessageBox/service-context/js/Demo.vue",
									"sha256": "c089041d14378f83c95bb8ae75e737a85f0911b54970d7376d76d9342cbf812e",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<label>\n\t\t\t<span>服务类型</span>\n\t\t\t<AsamSelect v-model=\"method\" :disabled=\"active\">\n\t\t\t\t<AsamOption value=\"alert\" :label=\"'alert'\">alert</AsamOption>\n\t\t\t\t<AsamOption value=\"confirm\" :label=\"'确认'\">确认</AsamOption>\n\t\t\t\t<AsamOption value=\"prompt\" :label=\"'prompt'\">prompt</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<label>\n\t\t\t<span>上下文</span>\n\t\t\t<AsamSelect v-model=\"contextMode\" :disabled=\"active\">\n\t\t\t\t<AsamOption value=\"explicit\" :label=\"'显式当前 AppContext'\"\n\t\t\t\t\t>显式当前 AppContext</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"installed\" :label=\"'安装服务的默认上下文'\"\n\t\t\t\t\t>安装服务的默认上下文</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"null\" :label=\"'显式 null'\">显式 null</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" :disabled=\"active\" @click=\"open(false)\"\n\t\t\t>使用 options 简写</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" :disabled=\"active\" @click=\"open(true)\"\n\t\t\t>使用 title 重载</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamMessageBoxServiceContextDemo' });\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamMessageBox } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst method = ref('alert');\nconst contextMode = ref('explicit');\nconst active = ref(false);\nconst result = ref('等待操作');\nlet cancelOwned;\nconst Content = defineComponent({\n\tsetup() {\n\t\tconst label = inject('asam-message-box-context', '未设置宿主 provide');\n\t\treturn () => h('span', { 'data-context-label': '' }, label);\n\t}\n});\nconst cancel = () => cancelOwned?.();\nconst open = async (withTitle) => {\n\tif (active.value) return;\n\tactive.value = true;\n\tresult.value = '等待确认';\n\tconst message = ({ cancel }) => {\n\t\tcancelOwned = cancel;\n\t\treturn h('div', [\n\t\t\th(Content),\n\t\t\th(\n\t\t\t\tAsamButton,\n\t\t\t\t{ type: 'default', nativeType: 'button', onClick: cancel },\n\t\t\t\t'取消本例弹层'\n\t\t\t)\n\t\t]);\n\t};\n\tconst options = {\n\t\tbuttonSize: 'default',\n\t\tinputPlaceholder: '输入本次确认值',\n\t\tdistinguishCancelAndClose: true\n\t};\n\tconst appContext =\n\t\tcontextMode.value === 'installed'\n\t\t\t? undefined\n\t\t\t: contextMode.value === 'null'\n\t\t\t\t? null\n\t\t\t\t: context;\n\ttry {\n\t\tconst value = withTitle\n\t\t\t? await AsamMessageBox[method.value](message, '宿主上下文', options, appContext)\n\t\t\t: await AsamMessageBox[method.value](message, options, appContext);\n\t\tresult.value =\n\t\t\tmethod.value === 'prompt' ? `confirmed: ${value.value}` : `resolved: ${value}`;\n\t} catch (action) {\n\t\tresult.value = `rejected: ${String(action)}`;\n\t} finally {\n\t\tcancelOwned = undefined;\n\t\tactive.value = false;\n\t}\n};\nonBeforeUnmount(cancel);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamNotification",
			"documentation": "/component-AsamNotification.html",
			"demos": [
				{
					"id": "basic",
					"title": "通知位置与关闭句柄",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/basic/ts/Demo.vue",
									"sha256": "3d7f01cef48742a0c31513f1e24764a12e6070c15ee6d28da2901afe600bc7c0",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"notify\">显示通知</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"closeOwned\"\n\t\t\t>关闭本例通知</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamNotificationBasicDemo' });\nimport { onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport type { AsamNotificationHandle } from '@asam-ui/ui';\nconst handles: AsamNotificationHandle[] = [];\nconst notify = () => {\n\thandles.push(\n\t\tAsamNotification.success({\n\t\t\ttitle: '处理完成',\n\t\t\tmessage: '共处理 3 条本地记录。',\n\t\t\tposition: 'bottom-right',\n\t\t\tduration: 0,\n\t\t\tshowClose: true\n\t\t})\n\t);\n};\nconst closeOwned = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n};\nonBeforeUnmount(closeOwned);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/basic/js/Demo.vue",
									"sha256": "27d05bb09e0ad4452ea9ef82e2d9b0ae131edeae4c3abe7015ef63377da541e5",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"notify\">显示通知</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"closeOwned\"\n\t\t\t>关闭本例通知</AsamButton\n\t\t>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamNotificationBasicDemo' });\nimport { onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nconst handles = [];\nconst notify = () => {\n\thandles.push(\n\t\tAsamNotification.success({\n\t\t\ttitle: '处理完成',\n\t\t\tmessage: '共处理 3 条本地记录。',\n\t\t\tposition: 'bottom-right',\n\t\t\tduration: 0,\n\t\t\tshowClose: true\n\t\t})\n\t);\n};\nconst closeOwned = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n};\nonBeforeUnmount(closeOwned);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "service-context",
					"title": "宿主上下文与所属服务清理",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/service-context/ts/Demo.vue",
									"sha256": "b7b9c6ac807170f95125c440a6ca415dd290ecb18a9820eae4a8575b2982495f",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open\"\n\t\t\t>显示带宿主上下文的服务</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例服务</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"panel\">局部加载目标</div>\n</template>\n<script lang=\"ts\" setup>\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamLoadingService, AsamMessage, AsamNotification } from '@asam-ui/ui';\nimport type { AsamLoadingInstance, AsamMessageHandler, AsamNotificationHandle } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst target = ref<HTMLElement>();\nconst handles: Array<AsamMessageHandler | AsamNotificationHandle> = [];\nlet loading: AsamLoadingInstance | undefined;\nconst Label = defineComponent({\n\tsetup() {\n\t\tconst label = inject<string>('asam-service-label', '当前宿主的服务内容');\n\t\treturn () => h('span', label);\n\t}\n});\nconst close = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n\tloading?.close();\n\tloading = undefined;\n};\nconst open = () => {\n\tclose();\n\thandles.push(AsamMessage({ message: h(Label), duration: 0 }, context));\n\thandles.push(\n\t\tAsamNotification(\n\t\t\t{ title: '宿主上下文', message: h(Label), duration: 0, progress: true },\n\t\t\tcontext\n\t\t)\n\t);\n\tif (target.value)\n\t\tloading = AsamLoadingService(\n\t\t\t{ target: target.value, text: '局部处理', fullscreen: false },\n\t\t\tcontext\n\t\t);\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.panel {\n\tmin-height: 100px;\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/service-context/js/Demo.vue",
									"sha256": "ddc1f4ecae6d86bc648b7a86b46a33334c158093b4e95eeb4427ff10c8820a20",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open\"\n\t\t\t>显示带宿主上下文的服务</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例服务</AsamButton>\n\t</div>\n\t<div ref=\"target\" class=\"panel\">局部加载目标</div>\n</template>\n<script setup>\nimport { defineComponent, getCurrentInstance, h, inject, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamLoadingService, AsamMessage, AsamNotification } from '@asam-ui/ui';\nconst context = getCurrentInstance()?.appContext;\nconst target = ref();\nconst handles = [];\nlet loading;\nconst Label = defineComponent({\n\tsetup() {\n\t\tconst label = inject('asam-service-label', '当前宿主的服务内容');\n\t\treturn () => h('span', label);\n\t}\n});\nconst close = () => {\n\thandles.splice(0).forEach((handle) => handle.close());\n\tloading?.close();\n\tloading = undefined;\n};\nconst open = () => {\n\tclose();\n\thandles.push(AsamMessage({ message: h(Label), duration: 0 }, context));\n\thandles.push(\n\t\tAsamNotification(\n\t\t\t{ title: '宿主上下文', message: h(Label), duration: 0, progress: true },\n\t\t\tcontext\n\t\t)\n\t);\n\tif (target.value)\n\t\tloading = AsamLoadingService(\n\t\t\t{ target: target.value, text: '局部处理', fullscreen: false },\n\t\t\tcontext\n\t\t);\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n}\n\n.panel {\n\tmin-height: 100px;\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "progress-lifecycle",
					"title": "计时进度、悬停和卸载清理",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/progress-lifecycle/ts/Demo.vue",
									"sha256": "0968119532050809a43e9c65c81b84ee82ea7cc6ddcea0212f58a3bbe6a7b340",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open(2400, true)\"\n\t\t\t>悬停暂停</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"open(2400, false)\"\n\t\t\t>悬停继续计时</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"open(0, true)\">持续通知</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例通知</AsamButton>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">已关闭 {{ closed }} 次</p>\n</template>\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport type { AsamNotificationHandle, AsamNotificationProgress } from '@asam-ui/ui';\nconst closed = ref(0);\nconst handles = new Set<AsamNotificationHandle>();\nconst progress: AsamNotificationProgress = {\n\tstrokeWidth: 4,\n\tcolor: [\n\t\t{ color: '#1989fa', percentage: 50 },\n\t\t{ color: '#5cb87a', percentage: 100 }\n\t]\n};\nconst open = (duration: number, pauseOnHover: boolean) => {\n\tconst handle = AsamNotification({\n\t\ttitle: duration === 0 ? '持续通知' : '进度倒计时',\n\t\tmessage: '将鼠标移入通知观察计时变化',\n\t\tduration,\n\t\tpauseOnHover,\n\t\tprogress,\n\t\tonClose: () => {\n\t\t\tclosed.value++;\n\t\t\thandles.delete(handle);\n\t\t}\n\t});\n\thandles.add(handle);\n};\nconst close = () => {\n\tfor (const handle of handles) handle.close();\n\thandles.clear();\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/progress-lifecycle/js/Demo.vue",
									"sha256": "1555646b2a871fb30c04df4768b2c494a4fcc5124c5a2c41c7687a57ee1cdf11",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"open(2400, true)\"\n\t\t\t>悬停暂停</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"open(2400, false)\"\n\t\t\t>悬停继续计时</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"open(0, true)\">持续通知</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"close\">关闭本例通知</AsamButton>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">已关闭 {{ closed }} 次</p>\n</template>\n<script setup>\nimport { onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nconst closed = ref(0);\nconst handles = new Set();\nconst progress = {\n\tstrokeWidth: 4,\n\tcolor: [\n\t\t{ color: '#1989fa', percentage: 50 },\n\t\t{ color: '#5cb87a', percentage: 100 }\n\t]\n};\nconst open = (duration, pauseOnHover) => {\n\tconst handle = AsamNotification({\n\t\ttitle: duration === 0 ? '持续通知' : '进度倒计时',\n\t\tmessage: '将鼠标移入通知观察计时变化',\n\t\tduration,\n\t\tpauseOnHover,\n\t\tprogress,\n\t\tonClose: () => {\n\t\t\tclosed.value++;\n\t\t\thandles.delete(handle);\n\t\t}\n\t});\n\thandles.add(handle);\n};\nconst close = () => {\n\tfor (const handle of handles) handle.close();\n\thandles.clear();\n};\nonBeforeUnmount(close);\n</script>\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic",
					"title": "基本用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-basic/ts/Demo.vue",
									"sha256": "45d12fd0ddee7a7c8435d6edd2264168dd2eff57d98017d6a246f7078d0d820d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\"> 自动关闭 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\"> 不自动关闭 </AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { h } from 'vue';\n\nconst open1 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '标题',\n\t\t\tmessage: h('i', { style: 'color: teal' }, '这是一条提醒。')\n\t\t})\n\t);\n};\n\nconst open2 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '提示',\n\t\t\tmessage: '这条消息不会自动关闭。',\n\t\t\tduration: 0\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "7f9c4f22d46d1037ec20a60e001de123152f4dd59cc774f3039d505d04873e5f",
									"notice": {
										"id": "10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484",
										"url": "/licenses/source-notices/10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt",
										"licenseFilename": "LICENSE-10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/basic.vue",
											"sourceSha256": "46a71c9be1e7d0b694633d9ff8e7a599cf74496a227fc3a06a60ee109b8221f3",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-basic/js/Demo.vue",
									"sha256": "e339a7f08d77e503d2a426e893421a0e76669a681a41e7a8f5a680331b9b21d5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\"> 自动关闭 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\"> 不自动关闭 </AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { h } from 'vue';\nconst open1 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '标题',\n\t\t\tmessage: h('i', { style: 'color: teal' }, '这是一条提醒。')\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '提示',\n\t\t\tmessage: '这条消息不会自动关闭。',\n\t\t\tduration: 0\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "8508f8130f7f825ee0fcab2ebe15348716962617fce328b04d18d3e0d8ba5d81",
									"notice": {
										"id": "10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484",
										"url": "/licenses/source-notices/10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt",
										"licenseFilename": "LICENSE-10674ae89c4d0f97ecc7b5e2c884a3a6f816843897f45b8ae369567b7a195484.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/basic.vue",
											"sourceSha256": "46a71c9be1e7d0b694633d9ff8e7a599cf74496a227fc3a06a60ee109b8221f3",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-different-types",
					"title": "状态与快捷调用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-different-types/ts/Demo.vue",
									"sha256": "b1e61735698011bbfe2fab8a81f1ab9b65d986b8d4bce6defe695e6e9a88488e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open5\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open3\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open4\">错误</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open1 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '成功',\n\t\t\tmessage: '这是一条成功消息。',\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\n\nconst open2 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '警告',\n\t\t\tmessage: '这是一条警告消息。',\n\t\t\ttype: 'warning'\n\t\t})\n\t);\n};\n\nconst open3 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.info({\n\t\t\ttitle: '信息',\n\t\t\tmessage: '这是一条信息提示。'\n\t\t})\n\t);\n};\n\nconst open4 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.error({\n\t\t\ttitle: '错误',\n\t\t\tmessage: '这是一条错误消息。'\n\t\t})\n\t);\n};\n\nconst open5 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '主要',\n\t\t\tmessage: '这是一条主要消息。',\n\t\t\ttype: 'primary'\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "5c5b57d9eb3ca1bb8a6dcd83eca2c54fd978af12a555abd647a27002f022eeb5",
									"notice": {
										"id": "2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4",
										"url": "/licenses/source-notices/2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt",
										"licenseFilename": "LICENSE-2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/different-types.vue",
											"sourceSha256": "0e78954d6e89d3b5e778224fe1ffa34251f1082abf060f9068d266a35102f771",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-different-types/js/Demo.vue",
									"sha256": "66cc38bbf2898e10afba91c8fc0e92f3d3716ceb350d0bca8827511650a23654",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open5\">主要</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\">成功</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\">警告</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open3\">信息</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open4\">错误</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open1 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '成功',\n\t\t\tmessage: '这是一条成功消息。',\n\t\t\ttype: 'success'\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '警告',\n\t\t\tmessage: '这是一条警告消息。',\n\t\t\ttype: 'warning'\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.info({\n\t\t\ttitle: '信息',\n\t\t\tmessage: '这是一条信息提示。'\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.error({\n\t\t\ttitle: '错误',\n\t\t\tmessage: '这是一条错误消息。'\n\t\t})\n\t);\n};\nconst open5 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '主要',\n\t\t\tmessage: '这是一条主要消息。',\n\t\t\ttype: 'primary'\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "d8b15e4ef22a06c16f9c1d2c9118855db83d27676e6d8f17174740e7688d5d9a",
									"notice": {
										"id": "2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4",
										"url": "/licenses/source-notices/2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt",
										"licenseFilename": "LICENSE-2f65c97b05fcce070133920e3a98c550ff1326d44aa7f7c8a77a56f811e568d4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/different-types.vue",
											"sourceSha256": "0e78954d6e89d3b5e778224fe1ffa34251f1082abf060f9068d266a35102f771",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-positioning",
					"title": "四角定位",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-positioning/ts/Demo.vue",
									"sha256": "21c0d86991d0390a965d53a42384cdfe8fa19ef2782d852fecb77000ecc3e189",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\"> 右上方 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\"> 右下方 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open3\"> 左下方 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open4\"> 左上方 </AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open1 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于右上角。'\n\t\t})\n\t);\n};\n\nconst open2 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于右下角。',\n\t\t\tposition: 'bottom-right'\n\t\t})\n\t);\n};\n\nconst open3 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于左下角。',\n\t\t\tposition: 'bottom-left'\n\t\t})\n\t);\n};\n\nconst open4 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于左上角。',\n\t\t\tposition: 'top-left'\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "bb5b97fe6d23eeccd22f622b518da3f5bbf4176657e01b572a1f4dfd22d84a82",
									"notice": {
										"id": "3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d",
										"url": "/licenses/source-notices/3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt",
										"licenseFilename": "LICENSE-3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/positioning.vue",
											"sourceSha256": "568d62a1d4eb8b58ea9a702c0d07632bbe4a21143211d48d30660af2b8908138",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-positioning/js/Demo.vue",
									"sha256": "3edb53c3c893d17175d9c1a6049fbbc1bb85970a1859308f8e2a7b8b3253bc8e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\"> 右上方 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open2\"> 右下方 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open3\"> 左下方 </AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open4\"> 左上方 </AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open1 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于右上角。'\n\t\t})\n\t);\n};\nconst open2 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于右下角。',\n\t\t\tposition: 'bottom-right'\n\t\t})\n\t);\n};\nconst open3 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于左下角。',\n\t\t\tposition: 'bottom-left'\n\t\t})\n\t);\n};\nconst open4 = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义位置',\n\t\t\tmessage: '我位于左上角。',\n\t\t\tposition: 'top-left'\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "ab9a619959af8b53dd0210ba26f762e1d84503ee39cb3640c63d3b8d3107a74e",
									"notice": {
										"id": "3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d",
										"url": "/licenses/source-notices/3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt",
										"licenseFilename": "LICENSE-3c29b9bd28f60cbc174132cf112584476530e2ba531460bccabc54ef6f753e7d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/positioning.vue",
											"sourceSha256": "568d62a1d4eb8b58ea9a702c0d07632bbe4a21143211d48d30660af2b8908138",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-offsetting",
					"title": "叠放与间距",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-offsetting/ts/Demo.vue",
									"sha256": "d7fc587e42e37fc3d6638be382d1781ea948e1fec417c0e2327d5dc5a6c67525",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\"> 带偏移量的通知 </AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.success({\n\t\t\ttitle: '成功',\n\t\t\tmessage: '这是一条成功消息。',\n\t\t\toffset: 100\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "49aa4c41ef94fcacb08639d0fe22829a22ab3ba9b15a20b8e96ed48594c5233f",
									"notice": {
										"id": "b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee",
										"url": "/licenses/source-notices/b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt",
										"licenseFilename": "LICENSE-b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/offsetting.vue",
											"sourceSha256": "cff901f0001ca599f8ee3ff5ccba2dc40989ccddcd2f87703cd95ae35eaa5acc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-offsetting/js/Demo.vue",
									"sha256": "87d3768d4fb46a1a20032080c3d52f887f6d13c56b11ea252e89860f6bbd2b36",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\"> 带偏移量的通知 </AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.success({\n\t\t\ttitle: '成功',\n\t\t\tmessage: '这是一条成功消息。',\n\t\t\toffset: 100\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "1c00245d99bf1fc9d95d8290762846ffef80b9f73f9a45781c159a6f1e2b049c",
									"notice": {
										"id": "b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee",
										"url": "/licenses/source-notices/b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt",
										"licenseFilename": "LICENSE-b8b469714f1b8dbca76c7027e89e3c5ced7da39f0146eeb6bb35c43fd76a47ee.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/offsetting.vue",
											"sourceSha256": "cff901f0001ca599f8ee3ff5ccba2dc40989ccddcd2f87703cd95ae35eaa5acc",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-raw-html",
					"title": "可信 HTML 内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-raw-html/ts/Demo.vue",
									"sha256": "fc9ac417064dfb3989aee1cb92e1a1ba2957f0b2f75ef079cb85e22f4eff8572",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\"> 使用 HTML 字符串 </AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: 'HTML 内容',\n\t\t\tdangerouslyUseHTMLString: true,\n\t\t\tmessage: '<strong>这是一段 <i>HTML</i> 内容</strong>'\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "315cb3fe546fbfb4ef23fc2cec0e1ea961282d83af2ddcd4f502a90b1c842fb8",
									"notice": {
										"id": "93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71",
										"url": "/licenses/source-notices/93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt",
										"licenseFilename": "LICENSE-93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/raw-html.vue",
											"sourceSha256": "9dc0cc7fdf8b2f094bd4d1191e02075c430ec519ebe1f370749faa6f5f957599",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-raw-html/js/Demo.vue",
									"sha256": "901809bfb6303cc895e98ef04e681159d0edd02afa6df5fed6344ca5d7f36c89",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\"> 使用 HTML 字符串 </AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: 'HTML 内容',\n\t\t\tdangerouslyUseHTMLString: true,\n\t\t\tmessage: '<strong>这是一段 <i>HTML</i> 内容</strong>'\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "1a5397fcac180b21418866f3d96a795cdf3ae8522b7e10f54d18b5f5d6b16306",
									"notice": {
										"id": "93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71",
										"url": "/licenses/source-notices/93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt",
										"licenseFilename": "LICENSE-93d96a8ef309af3c20561fd686fb528ef8f26618c2afd012d669669359040c71.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/raw-html.vue",
											"sourceSha256": "9dc0cc7fdf8b2f094bd4d1191e02075c430ec519ebe1f370749faa6f5f957599",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-use-vnode",
					"title": "VNode 内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-use-vnode/ts/Demo.vue",
									"sha256": "77c2b4a9201e988a520a940d48292b6164591059ca7f59f8f37be47eccaabcaf",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open\">普通 VNode</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\">动态属性</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, AsamSwitch, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nimport { h, ref } from 'vue';\n\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '使用 VNode',\n\t\t\tmessage: h('p', null, [\n\t\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t\t])\n\t\t})\n\t);\n};\n\nconst open1 = () => {\n\tconst checked = ref<boolean | string | number>(false);\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '使用 VNode',\n\t\t\t// Should pass a function if VNode contains dynamic props\n\t\t\tmessage: () =>\n\t\t\t\th(AsamSwitch, {\n\t\t\t\t\tmodelValue: checked.value,\n\t\t\t\t\t'onUpdate:modelValue': (val: boolean | string | number) => {\n\t\t\t\t\t\tchecked.value = val;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "cf37502ef8591664286d6592f42acf6a19d8e11be044bb941f1b1e04e97907d1",
									"notice": {
										"id": "6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da",
										"url": "/licenses/source-notices/6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt",
										"licenseFilename": "LICENSE-6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/use-vnode.vue",
											"sourceSha256": "a751435d2a96ddb64e7b82f8e8c75a134f25b57a23793b29c652863e916c0f57",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-use-vnode/js/Demo.vue",
									"sha256": "ef56b460bb69720362827ac247a7edca5dfbb31444e541df74d28f9ebfefbf2b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap demo-gap\">\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open\">普通 VNode</AsamButton>\n\t\t<AsamButton type=\"default\" class=\"!ml-0\" @click=\"open1\">动态属性</AsamButton>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification, AsamSwitch } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nimport { h, ref } from 'vue';\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '使用 VNode',\n\t\t\tmessage: h('p', null, [\n\t\t\t\th('span', null, '消息内容可以使用 '),\n\t\t\t\th('i', { style: 'color: teal' }, 'VNode')\n\t\t\t])\n\t\t})\n\t);\n};\nconst open1 = () => {\n\tconst checked = ref(false);\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '使用 VNode',\n\t\t\t// Should pass a function if VNode contains dynamic props\n\t\t\tmessage: () =>\n\t\t\t\th(AsamSwitch, {\n\t\t\t\t\tmodelValue: checked.value,\n\t\t\t\t\t'onUpdate:modelValue': (val) => {\n\t\t\t\t\t\tchecked.value = val;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n</style>\n",
									"originalSourceSha256": "6af6d0068b926695365a19219e14e952bea7ca9da0a79d5c5d757d51409d4ae8",
									"notice": {
										"id": "6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da",
										"url": "/licenses/source-notices/6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt",
										"licenseFilename": "LICENSE-6d56f9725e34e0bedb6ca7f38537a7db3d68893fef699ead36e4a38cb740c8da.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/use-vnode.vue",
											"sourceSha256": "a751435d2a96ddb64e7b82f8e8c75a134f25b57a23793b29c652863e916c0f57",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-progress-bar",
					"title": "进度计时与悬停暂停",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-progress-bar/ts/Demo.vue",
									"sha256": "4aa02936f5c556f7e5089e22b9b733277ffa1fb977530bb1743211b50d2b5032",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open('')\"> 默认 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('success')\"> 成功 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('warning')\"> 警告 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('error')\"> 错误 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('info')\"> 信息 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"openCustomColor\"> 自定义颜色 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"openWithoutPause\"> 悬停时不暂停 </AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n\tAsamButton,\n\tAsamNotification,\n\ttype AsamNotificationHandle,\n\ttype AsamNotificationType\n} from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nfunction open(type: AsamNotificationType) {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: `${type || 'Default'} progress`,\n\t\t\tmessage: '鼠标悬停时暂停计时和进度条。',\n\t\t\ttype,\n\t\t\tduration: 6000,\n\t\t\tprogress: true\n\t\t})\n\t);\n}\n\nfunction openWithoutPause() {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '悬停时不暂停',\n\t\t\tmessage: '鼠标悬停时计时和进度条继续运行。',\n\t\t\tduration: 6000,\n\t\t\tprogress: true,\n\t\t\tpauseOnHover: false\n\t\t})\n\t);\n}\n\nfunction openCustomColor() {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义颜色',\n\t\t\tmessage: '自定义进度条颜色覆盖默认颜色。',\n\t\t\tduration: 6000,\n\t\t\tprogress: {\n\t\t\t\tcolor: [\n\t\t\t\t\t{ color: '#f56c6c', percentage: 20 },\n\t\t\t\t\t{ color: '#e6a23c', percentage: 40 },\n\t\t\t\t\t{ color: '#5cb87a', percentage: 60 },\n\t\t\t\t\t{ color: '#1989fa', percentage: 80 },\n\t\t\t\t\t{ color: '#6f7ad3', percentage: 100 }\n\t\t\t\t]\n\t\t\t}\n\t\t})\n\t);\n}\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "fee5b7dd5b9a2d0109b5b70421a88c630721953a13635aabb67841efaf801d2b",
									"notice": {
										"id": "8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d",
										"url": "/licenses/source-notices/8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt",
										"licenseFilename": "LICENSE-8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/progress-bar.vue",
											"sourceSha256": "6b98d9fad60bba24375e7f8a2e47562153c04fe241c1a2de685a47be3912d823",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-progress-bar/js/Demo.vue",
									"sha256": "9ff92ba54b41a32c91f5a338c9b4e0d4bebe7c4ede76110c81eb8daaac246072",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open('')\"> 默认 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('success')\"> 成功 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('warning')\"> 警告 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('error')\"> 错误 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"open('info')\"> 信息 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"openCustomColor\"> 自定义颜色 </AsamButton>\n\t<AsamButton type=\"default\" @click=\"openWithoutPause\"> 悬停时不暂停 </AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nfunction open(type) {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: `${type || 'Default'} progress`,\n\t\t\tmessage: '鼠标悬停时暂停计时和进度条。',\n\t\t\ttype,\n\t\t\tduration: 6000,\n\t\t\tprogress: true\n\t\t})\n\t);\n}\nfunction openWithoutPause() {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '悬停时不暂停',\n\t\t\tmessage: '鼠标悬停时计时和进度条继续运行。',\n\t\t\tduration: 6000,\n\t\t\tprogress: true,\n\t\t\tpauseOnHover: false\n\t\t})\n\t);\n}\nfunction openCustomColor() {\n\ttrackAsamNotification(\n\t\tAsamNotification({\n\t\t\ttitle: '自定义颜色',\n\t\t\tmessage: '自定义进度条颜色覆盖默认颜色。',\n\t\t\tduration: 6000,\n\t\t\tprogress: {\n\t\t\t\tcolor: [\n\t\t\t\t\t{ color: '#f56c6c', percentage: 20 },\n\t\t\t\t\t{ color: '#e6a23c', percentage: 40 },\n\t\t\t\t\t{ color: '#5cb87a', percentage: 60 },\n\t\t\t\t\t{ color: '#1989fa', percentage: 80 },\n\t\t\t\t\t{ color: '#6f7ad3', percentage: 100 }\n\t\t\t\t]\n\t\t\t}\n\t\t})\n\t);\n}\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "f3083bf996de66ce846a302a0bdacc519bd727cc45d4dd0b68f58a93720ce72e",
									"notice": {
										"id": "8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d",
										"url": "/licenses/source-notices/8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt",
										"licenseFilename": "LICENSE-8520b42cbe66bd83b9c74e44c9e70af9f4ad5c53b86212150fc80754d157ed2d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/progress-bar.vue",
											"sourceSha256": "6b98d9fad60bba24375e7f8a2e47562153c04fe241c1a2de685a47be3912d823",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-no-close",
					"title": "隐藏关闭按钮",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-no-close/ts/Demo.vue",
									"sha256": "44507cb86f58c1fa9fcecf7c02ab2c7272d676675e530d4672420776999383f5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\"> 隐藏关闭按钮 </AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamNotification, type AsamNotificationHandle } from '@asam-ui/ui';\n\nimport { onBeforeUnmount } from 'vue';\n\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.success({\n\t\t\ttitle: '信息',\n\t\t\tmessage: '这条消息没有关闭按钮。',\n\t\t\tshowClose: false\n\t\t})\n\t);\n};\n\nconst ownedAsamNotification = new Set<AsamNotificationHandle>();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle: AsamNotificationHandle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "864a7ba95fabe311e2bc3e7df5b5baf980f61615623125c5462b72412426a720",
									"notice": {
										"id": "05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3",
										"url": "/licenses/source-notices/05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt",
										"licenseFilename": "LICENSE-05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/no-close.vue",
											"sourceSha256": "47e8b316a19d30f989b6251b37bc9f5bff171e21876b3165bcbd6a5f7e8a9001",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamNotification/ep2147-no-close/js/Demo.vue",
									"sha256": "200c5c1674dc1291fa502a7c4d5e47fd865229781dababd7c4c3802db0126289",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open\"> 隐藏关闭按钮 </AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamNotification } from '@asam-ui/ui';\nimport { onBeforeUnmount } from 'vue';\nconst open = () => {\n\ttrackAsamNotification(\n\t\tAsamNotification.success({\n\t\t\ttitle: '信息',\n\t\t\tmessage: '这条消息没有关闭按钮。',\n\t\t\tshowClose: false\n\t\t})\n\t);\n};\nconst ownedAsamNotification = new Set();\nlet mountedAsamNotification = true;\nconst trackAsamNotification = (handle) => {\n\tif (mountedAsamNotification) ownedAsamNotification.add(handle);\n\telse handle.close();\n\treturn handle;\n};\nonBeforeUnmount(() => {\n\tmountedAsamNotification = false;\n\tfor (const handle of ownedAsamNotification) handle.close();\n\townedAsamNotification.clear();\n});\n</script>\n",
									"originalSourceSha256": "32a50bc6e4f45b41e4078ec25d4aaff286b35d897dd61a5da0184e6b7c49050c",
									"notice": {
										"id": "05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3",
										"url": "/licenses/source-notices/05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt",
										"licenseFilename": "LICENSE-05ceefaf2009bd70230ca335f824f3fdc1abf96999aecee1d7c664169cb946b3.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/notification/no-close.vue",
											"sourceSha256": "47e8b316a19d30f989b6251b37bc9f5bff171e21876b3165bcbd6a5f7e8a9001",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamOverlay",
			"documentation": "/component-AsamOverlay.html",
			"demos": [
				{
					"id": "basic",
					"title": "局部遮罩与点击关闭",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOverlay/basic/ts/Demo.vue",
									"sha256": "3de8f13ced23654fa58109e6d55598d30b87c9d0c0f26facf82aca795ad18525",
									"source": "<template>\n\t<div class=\"stage\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>显示局部遮罩</AsamButton\n\t\t>\n\t\t<AsamOverlay\n\t\t\tv-if=\"open\"\n\t\t\tv-bind=\"{ overlayClass: 'local-overlay', zIndex: 1 }\"\n\t\t\t@click=\"open = false\"\n\t\t>\n\t\t\t<div class=\"panel\" @click.stop>\n\t\t\t\t<p class=\"example-paragraph\">自定义浮层内容</p>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t>关闭局部遮罩</AsamButton\n\t\t\t\t>\n\t\t\t</div>\n\t\t</AsamOverlay>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOverlayBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamOverlay } from '@asam-ui/ui';\nconst open = ref(false);\n</script>\n\n<style scoped>\n.stage {\n\tposition: relative;\n\theight: 180px;\n\tisolation: isolate;\n}\n\n.stage .local-overlay {\n\tposition: absolute;\n\tdisplay: grid;\n\tplace-items: center;\n}\n\n.panel {\n\tbackground: var(--asam-color-surface);\n\tpadding: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOverlay/basic/js/Demo.vue",
									"sha256": "7c14d2c5c168febf7e204c144be665f056b9263eef93194ed82504b8062c5a96",
									"source": "<template>\n\t<div class=\"stage\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\"\n\t\t\t>显示局部遮罩</AsamButton\n\t\t>\n\t\t<AsamOverlay\n\t\t\tv-if=\"open\"\n\t\t\tv-bind=\"{ overlayClass: 'local-overlay', zIndex: 1 }\"\n\t\t\t@click=\"open = false\"\n\t\t>\n\t\t\t<div class=\"panel\" @click.stop>\n\t\t\t\t<p class=\"example-paragraph\">自定义浮层内容</p>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = false\"\n\t\t\t\t\t>关闭局部遮罩</AsamButton\n\t\t\t\t>\n\t\t\t</div>\n\t\t</AsamOverlay>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOverlayBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamOverlay } from '@asam-ui/ui';\nconst open = ref(false);\n</script>\n\n<style scoped>\n.stage {\n\tposition: relative;\n\theight: 180px;\n\tisolation: isolate;\n}\n\n.stage .local-overlay {\n\tposition: absolute;\n\tdisplay: grid;\n\tplace-items: center;\n}\n\n.panel {\n\tbackground: var(--asam-color-surface);\n\tpadding: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "fullscreen",
					"title": "全屏遮罩与关闭操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOverlay/fullscreen/ts/Demo.vue",
									"sha256": "421bc3035063869fa0a034b544ad4c346bd469ef23ea626b5f0e9d44c0149c24",
									"source": "<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">显示全屏遮罩</AsamButton>\n\t<Teleport to=\"body\"\n\t\t><AsamOverlay v-if=\"open\" :z-index=\"3500\" @click=\"open = false\"\n\t\t\t><div class=\"fullscreen-content\" @click.stop>\n\t\t\t\t<p class=\"example-paragraph\">全屏遮罩内容；点击遮罩、关闭按钮或按 Esc 关闭。</p>\n\t\t\t\t<AsamButton type=\"default\" @click=\"open = false\">关闭全屏遮罩</AsamButton>\n\t\t\t</div></AsamOverlay\n\t\t></Teleport\n\t>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamOverlay } from '@asam-ui/ui';\nconst open = ref(false);\nconst onKey = (event: KeyboardEvent) => {\n\tif (event.key === 'Escape') open.value = false;\n};\nonMounted(() => document.addEventListener('keydown', onKey));\nonBeforeUnmount(() => document.removeEventListener('keydown', onKey));\n</script>\n\n<style scoped>\n.fullscreen-content {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tpadding: var(--asam-space-lg);\n\tbackground: var(--asam-color-surface);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOverlay/fullscreen/js/Demo.vue",
									"sha256": "dcde42f25933c9756862af3fb0794f832a9ab591fbd7fa19d7575a784cf0d7b8",
									"source": "<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">显示全屏遮罩</AsamButton>\n\t<Teleport to=\"body\"\n\t\t><AsamOverlay v-if=\"open\" :z-index=\"3500\" @click=\"open = false\"\n\t\t\t><div class=\"fullscreen-content\" @click.stop>\n\t\t\t\t<p class=\"example-paragraph\">全屏遮罩内容；点击遮罩、关闭按钮或按 Esc 关闭。</p>\n\t\t\t\t<AsamButton type=\"default\" @click=\"open = false\">关闭全屏遮罩</AsamButton>\n\t\t\t</div></AsamOverlay\n\t\t></Teleport\n\t>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\nimport { AsamButton, AsamOverlay } from '@asam-ui/ui';\nconst open = ref(false);\nconst onKey = (event) => {\n\tif (event.key === 'Escape') open.value = false;\n};\nonMounted(() => document.addEventListener('keydown', onKey));\nonBeforeUnmount(() => document.removeEventListener('keydown', onKey));\n</script>\n\n<style scoped>\n.fullscreen-content {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tpadding: var(--asam-space-lg);\n\tbackground: var(--asam-color-surface);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopconfirm",
			"documentation": "/component-AsamPopconfirm.html",
			"demos": [
				{
					"id": "basic",
					"title": "确认与取消",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/basic/ts/Demo.vue",
									"sha256": "e6ba35fd47ab831aecaf3c5b0ab5590fdd483985c02b8f5a8ba438f2f5d44ca3",
									"source": "<template>\n\t<AsamPopconfirm\n\t\ttitle=\"确认归档这条记录？\"\n\t\tconfirm-button-text=\"归档\"\n\t\tcancel-button-text=\"保留\"\n\t\t:icon=\"InfoFilled\"\n\t\t@confirm=\"result = '已归档'\"\n\t\t@cancel=\"result = '已保留'\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">归档记录</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopconfirmBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst result = ref('等待操作');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/basic/js/Demo.vue",
									"sha256": "b862af3f7593cf43e798ba0278941728ead3aa04f5d54e11f8c3c0a20c069d5f",
									"source": "<template>\n\t<AsamPopconfirm\n\t\ttitle=\"确认归档这条记录？\"\n\t\tconfirm-button-text=\"归档\"\n\t\tcancel-button-text=\"保留\"\n\t\t:icon=\"InfoFilled\"\n\t\t@confirm=\"result = '已归档'\"\n\t\t@cancel=\"result = '已保留'\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">归档记录</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopconfirmBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst result = ref('等待操作');\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "actions",
					"title": "自定义确认操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/actions/ts/Demo.vue",
									"sha256": "6f7a9ae8f7bcad77f97a336fb8f662951128d670f4ff3323428c201def2489a6",
									"source": "<template>\n\t<AsamPopconfirm title=\"清理本地草稿？\" @confirm=\"cleared = true\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">清理草稿</AsamButton>\n\t\t</template>\n\t\t<template #actions=\"{ confirm, cancel }\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">保留草稿</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"confirm\">确认清理</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n\t<p class=\"example-paragraph\" role=\"status\">{{ cleared ? '草稿已清理' : '草稿仍保留' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopconfirmActionsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nconst cleared = ref(false);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/actions/js/Demo.vue",
									"sha256": "082ec5715608aa4522d5c0f945f3f26f24f98d337d94624a27b1e8dfc67be9c2",
									"source": "<template>\n\t<AsamPopconfirm title=\"清理本地草稿？\" @confirm=\"cleared = true\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">清理草稿</AsamButton>\n\t\t</template>\n\t\t<template #actions=\"{ confirm, cancel }\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">保留草稿</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"confirm\">确认清理</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n\t<p class=\"example-paragraph\" role=\"status\">{{ cleared ? '草稿已清理' : '草稿仍保留' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopconfirmActionsDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nconst cleared = ref(false);\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-placement",
					"title": "定位方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-placement/ts/Demo.vue",
									"sha256": "332e028455d5106e1591027df8a4b662596ef21f1543bc99ed61c9e02126eb6b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt\n-->\n<template>\n\t<div class=\"popconfirm-base-box demo-layout-1\">\n\t\t<div class=\"row center demo-layout-2\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左上方显示提示\" placement=\"top-start\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"顶部居中显示提示\" placement=\"top\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右上方显示提示\" placement=\"top-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row demo-layout-3\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左上方显示提示\" placement=\"left-start\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右上方显示提示\" placement=\"right-start\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row demo-layout-4\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左侧居中显示提示\" placement=\"left\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"mt-3 mb-3\">左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右侧居中显示提示\" placement=\"right\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row demo-layout-5\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左下方显示提示\" placement=\"left-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右下方显示提示\" placement=\"right-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row center demo-layout-6\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左下方显示提示\" placement=\"bottom-start\">\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部左侧</AsamButton></template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"底部居中显示提示\" placement=\"bottom\">\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部</AsamButton></template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右下方显示提示\" placement=\"bottom-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\n</script>\n\n<style>\n.popconfirm-base-box {\n\twidth: 600px;\n}\n\n.popconfirm-base-box .row {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.popconfirm-base-box .center {\n\tjustify-content: center;\n}\n\n.popconfirm-base-box .box-item {\n\twidth: 110px;\n\tmargin-top: 10px;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-3 {\n\tmargin-top: calc(var(--asam-space-xs) * 3);\n}\n.mb-3 {\n\tmargin-bottom: calc(var(--asam-space-xs) * 3);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "b3bf1e39862ff781644b182a549830a4bc3f72351cfd48a996fc3a845c28f957",
									"notice": {
										"id": "632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6",
										"url": "/licenses/source-notices/632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt",
										"licenseFilename": "LICENSE-632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/placement.vue",
											"sourceSha256": "8dd8f9df54af57bf442e16bf0f679c2280cd66d4275d66aa918cb153f8139df5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-placement/js/Demo.vue",
									"sha256": "e0380e081a79c3172465ed84d9773d21b9b14438e12f7e0324ef3b722b565985",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt\n-->\n<template>\n\t<div class=\"popconfirm-base-box demo-layout-1\">\n\t\t<div class=\"row center demo-layout-2\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左上方显示提示\" placement=\"top-start\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"顶部居中显示提示\" placement=\"top\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右上方显示提示\" placement=\"top-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row demo-layout-3\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左上方显示提示\" placement=\"left-start\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右上方显示提示\" placement=\"right-start\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧顶部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row demo-layout-4\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左侧居中显示提示\" placement=\"left\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\" class=\"mt-3 mb-3\">左侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右侧居中显示提示\" placement=\"right\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row demo-layout-5\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左下方显示提示\" placement=\"left-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">左侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右下方显示提示\" placement=\"right-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">右侧底部</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t\t<div class=\"row center demo-layout-6\">\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"左下方显示提示\" placement=\"bottom-start\">\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部左侧</AsamButton></template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"底部居中显示提示\" placement=\"bottom\">\n\t\t\t\t<template #reference> <AsamButton type=\"default\">底部</AsamButton></template>\n\t\t\t</AsamPopconfirm>\n\t\t\t<AsamPopconfirm class=\"box-item\" title=\"右下方显示提示\" placement=\"bottom-end\">\n\t\t\t\t<template #reference>\n\t\t\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamPopconfirm>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\n</script>\n\n<style>\n.popconfirm-base-box {\n\twidth: 600px;\n}\n\n.popconfirm-base-box .row {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.popconfirm-base-box .center {\n\tjustify-content: center;\n}\n\n.popconfirm-base-box .box-item {\n\twidth: 110px;\n\tmargin-top: 10px;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-3 {\n\tmargin-top: calc(var(--asam-space-xs) * 3);\n}\n.mb-3 {\n\tmargin-bottom: calc(var(--asam-space-xs) * 3);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "bd90edbf3e1a0eb8742acc5a6f61c14a77b25dd5ffef20c25aeab8adbe5b7e24",
									"notice": {
										"id": "632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6",
										"url": "/licenses/source-notices/632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt",
										"licenseFilename": "LICENSE-632379b86f93ce354fc2dfaa59abffc320ad0f85884048eb59b8697adff629e6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/placement.vue",
											"sourceSha256": "8dd8f9df54af57bf442e16bf0f679c2280cd66d4275d66aa918cb153f8139df5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic-usage",
					"title": "显隐与关闭守卫",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-basic-usage/ts/Demo.vue",
									"sha256": "2d88719bdf8eecbc5726412492425907b213c931a191cf91d22f5e489645ea59",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt\n-->\n<template>\n\t<AsamPopconfirm title=\"确定删除此项吗？\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\">删除</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "2245c12480e0b72c28ffeae8303e9d1d818ff13a47eb8a0f76413232eddca682",
									"notice": {
										"id": "18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218",
										"url": "/licenses/source-notices/18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt",
										"licenseFilename": "LICENSE-18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/basic-usage.vue",
											"sourceSha256": "35df06d1843f50a5c520966876a0c4ab2fda6eba753f0e813af240c6332e7110",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-basic-usage/js/Demo.vue",
									"sha256": "336ed685017de115cddcb3493f5866ace3da7bb791999fb196b67529c6da15c7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt\n-->\n<template>\n\t<AsamPopconfirm title=\"确定删除此项吗？\">\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\">删除</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "c3fa51bd9e67bc0b8f587dc158a51fc99957f2bd606e3110cc19e6d227944fc2",
									"notice": {
										"id": "18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218",
										"url": "/licenses/source-notices/18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt",
										"licenseFilename": "LICENSE-18b18eaa3825d567c7ca9cae10228e1ee2494bc545d7ef031b752c799bd96218.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/basic-usage.vue",
											"sourceSha256": "35df06d1843f50a5c520966876a0c4ab2fda6eba753f0e813af240c6332e7110",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-customize",
					"title": "完整交互：customize",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-customize/ts/Demo.vue",
									"sha256": "ac8a73c6f70b27df160165c2c10046d183c3da2c96d9343eabd0260d7990f96d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt\n-->\n<template>\n\t<AsamPopconfirm\n\t\twidth=\"220\"\n\t\t:icon=\"InfoFilled\"\n\t\ticon-color=\"#626AEF\"\n\t\ttitle=\"确定删除此项吗？\"\n\t\t@cancel=\"onCancel\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\">删除</AsamButton>\n\t\t</template>\n\t\t<template #actions=\"{ confirm, cancel }\">\n\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"cancel\">No!</AsamButton>\n\t\t\t<AsamButton type=\"default\" size=\"small\" :disabled=\"!clicked\" @click=\"confirm\">\n\t\t\t\t是否确认？\n\t\t\t</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\nimport { InfoFilled } from '@asam-ui/icons-vue';\n\nconst clicked = ref(false);\nfunction onCancel() {\n\tclicked.value = true;\n}\n</script>\n",
									"originalSourceSha256": "6952c946bfaa5a4b573dc1cfac50c6a5d5f97753e0a26761d36a33b5b1ce4af1",
									"notice": {
										"id": "2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e",
										"url": "/licenses/source-notices/2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt",
										"licenseFilename": "LICENSE-2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/customize.vue",
											"sourceSha256": "4ddf23fb4ea4965ebfa6c691c75cdd56375fda8e939e3b1ed334fb674608f163",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-customize/js/Demo.vue",
									"sha256": "47dd61eb0a7418015875722971dc3bd4e74bb7f0b43e5daa9d4b65c8aadbd282",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt\n-->\n<template>\n\t<AsamPopconfirm\n\t\twidth=\"220\"\n\t\t:icon=\"InfoFilled\"\n\t\ticon-color=\"#626AEF\"\n\t\ttitle=\"确定删除此项吗？\"\n\t\t@cancel=\"onCancel\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\">删除</AsamButton>\n\t\t</template>\n\t\t<template #actions=\"{ confirm, cancel }\">\n\t\t\t<AsamButton type=\"default\" size=\"small\" @click=\"cancel\">No!</AsamButton>\n\t\t\t<AsamButton type=\"default\" size=\"small\" :disabled=\"!clicked\" @click=\"confirm\">\n\t\t\t\t是否确认？\n\t\t\t</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst clicked = ref(false);\nfunction onCancel() {\n\tclicked.value = true;\n}\n</script>\n",
									"originalSourceSha256": "0458a1cedd10f960e95c21b8e9e509f558cd37a2e9aac52cd59b221efeb6ced1",
									"notice": {
										"id": "2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e",
										"url": "/licenses/source-notices/2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt",
										"licenseFilename": "LICENSE-2744033a25bc178aad1bc7ee8d5a29023a945cd55f086cc365227fc74f2fe84e.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/customize.vue",
											"sourceSha256": "4ddf23fb4ea4965ebfa6c691c75cdd56375fda8e939e3b1ed334fb674608f163",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-trigger-event",
					"title": "完整交互：trigger-event",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-trigger-event/ts/Demo.vue",
									"sha256": "02eb27ad8521df4333008f4f57d11cfc8793d8a03894d3b093d5d8c19efdaca2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt\n-->\n<template>\n\t<AsamPopconfirm\n\t\tconfirm-button-text=\"Yes\"\n\t\tcancel-button-text=\"No\"\n\t\t:icon=\"InfoFilled\"\n\t\ticon-color=\"#626AEF\"\n\t\ttitle=\"确定删除此项吗？\"\n\t\t@confirm=\"confirmEvent\"\n\t\t@cancel=\"cancelEvent\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\">删除</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\n\nimport { InfoFilled } from '@asam-ui/icons-vue';\n\nconst confirmEvent = () => {\n\tconsole.log('confirm!');\n};\nconst cancelEvent = () => {\n\tconsole.log('cancel!');\n};\n</script>\n",
									"originalSourceSha256": "345c2837122706285d6c114dd6cd1d3891cde21f18117c045ee36c9e669658d7",
									"notice": {
										"id": "9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5",
										"url": "/licenses/source-notices/9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt",
										"licenseFilename": "LICENSE-9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/trigger-event.vue",
											"sourceSha256": "d4e5c774d17e4e1cdf36e957648b1a6a1012a5eff6f4f48bea50cba8d4e58ada",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/ep2147-trigger-event/js/Demo.vue",
									"sha256": "f12d7747bd35c351a04cc73f84d4a7e3958a1409bf81f578da6f7115af005421",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt\n-->\n<template>\n\t<AsamPopconfirm\n\t\tconfirm-button-text=\"Yes\"\n\t\tcancel-button-text=\"No\"\n\t\t:icon=\"InfoFilled\"\n\t\ticon-color=\"#626AEF\"\n\t\ttitle=\"确定删除此项吗？\"\n\t\t@confirm=\"confirmEvent\"\n\t\t@cancel=\"cancelEvent\"\n\t>\n\t\t<template #reference>\n\t\t\t<AsamButton type=\"default\">删除</AsamButton>\n\t\t</template>\n\t</AsamPopconfirm>\n</template>\n\n<script setup>\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst confirmEvent = () => {\n\tconsole.log('confirm!');\n};\nconst cancelEvent = () => {\n\tconsole.log('cancel!');\n};\n</script>\n",
									"originalSourceSha256": "b148203ed38f7770614ad67424c6b4ee2a4bee7d076c33dec5849fc9b707cdb1",
									"notice": {
										"id": "9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5",
										"url": "/licenses/source-notices/9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt",
										"licenseFilename": "LICENSE-9c5973f097579087b2432a91bed04cd3bc067ef7a82744af79be1afa24691dc5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/popconfirm/trigger-event.vue",
											"sourceSha256": "d4e5c774d17e4e1cdf36e957648b1a6a1012a5eff6f4f48bea50cba8d4e58ada",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/popup-container/ts/Demo.vue",
									"sha256": "6bdc740c49ee3c9a57b051723974a89a2ea3880524d28e6c6c19592ed15e8645",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamPopconfirm\n\t\t\ttitle=\"确认归档这条记录？\"\n\t\t\tconfirm-button-text=\"归档\"\n\t\t\tcancel-button-text=\"保留\"\n\t\t\t:icon=\"InfoFilled\"\n\t\t\t@confirm=\"result = '已归档'\"\n\t\t\t@cancel=\"result = '已保留'\"\n\t\t\t:teleported=\"globalPopup\"\n\t\t>\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">归档记录</AsamButton>\n\t\t\t</template>\n\t\t</AsamPopconfirm>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopconfirmBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst result = ref('等待操作');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopconfirm/popup-container/js/Demo.vue",
									"sha256": "083a7ea2142e5227abe9a10ea339754fbf51718005a870349e9fd8b02fa6b28c",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamPopconfirm\n\t\t\ttitle=\"确认归档这条记录？\"\n\t\t\tconfirm-button-text=\"归档\"\n\t\t\tcancel-button-text=\"保留\"\n\t\t\t:icon=\"InfoFilled\"\n\t\t\t@confirm=\"result = '已归档'\"\n\t\t\t@cancel=\"result = '已保留'\"\n\t\t\t:teleported=\"globalPopup\"\n\t\t>\n\t\t\t<template #reference>\n\t\t\t\t<AsamButton type=\"default\" native-type=\"button\">归档记录</AsamButton>\n\t\t\t</template>\n\t\t</AsamPopconfirm>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }}</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopconfirmBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamPopconfirm } from '@asam-ui/ui';\nimport { InfoFilled } from '@asam-ui/icons-vue';\nconst result = ref('等待操作');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopoverDirective",
			"documentation": "/component-AsamPopoverDirective.html",
			"demos": [
				{
					"id": "basic",
					"title": "外部触发器关联",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopoverDirective/basic/ts/Demo.vue",
									"sha256": "dadf8282a20a950cdc7e3ec7a506e2003d37c92443be96df5f964c2260e96708",
									"source": "<template>\n\t<AsamButton type=\"default\" v-if=\"popover\" v-asam-popover=\"popover\" native-type=\"button\"\n\t\t>外部气泡触发器</AsamButton\n\t>\n\t<AsamPopover\n\t\tref=\"popover\"\n\t\tvirtual-triggering\n\t\ttrigger=\"click\"\n\t\ttitle=\"外部触发\"\n\t\tcontent=\"面板与触发器分开声明。\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopoverDirectiveBasicDemo' });\nimport { shallowRef } from 'vue';\nimport { AsamButton, AsamPopover, AsamPopoverDirective as vAsamPopover } from '@asam-ui/ui';\nimport type { AsamPopoverExpose } from '@asam-ui/ui';\nconst popover = shallowRef<AsamPopoverExpose>();\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopoverDirective/basic/js/Demo.vue",
									"sha256": "530c6ba23478a4a390915ebbc0e6bbe14a741ddcf13a46de2ea30a9502206c05",
									"source": "<template>\n\t<AsamButton type=\"default\" v-if=\"popover\" v-asam-popover=\"popover\" native-type=\"button\"\n\t\t>外部气泡触发器</AsamButton\n\t>\n\t<AsamPopover\n\t\tref=\"popover\"\n\t\tvirtual-triggering\n\t\ttrigger=\"click\"\n\t\ttitle=\"外部触发\"\n\t\tcontent=\"面板与触发器分开声明。\"\n\t/>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopoverDirectiveBasicDemo' });\nimport { shallowRef } from 'vue';\nimport { AsamButton, AsamPopover, AsamPopoverDirective as vAsamPopover } from '@asam-ui/ui';\nconst popover = shallowRef();\n</script>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopper",
			"documentation": "/component-AsamPopper.html",
			"demos": [
				{
					"id": "basic",
					"title": "触发器、内容与箭头组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopper/basic/ts/Demo.vue",
									"sha256": "65d46e472d55100b66535ec1c3ca0f6c83501a3e59c90c695aee6f5571ed47b7",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopperBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopper/basic/js/Demo.vue",
									"sha256": "06e198e043bde1883316df17c0e99c78239ae7a9c8be5af629c3f9d8a3d333a2",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopperBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopperArrow",
			"documentation": "/component-AsamPopperArrow.html",
			"demos": [
				{
					"id": "basic",
					"title": "触发器、内容与箭头组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopperArrow/basic/ts/Demo.vue",
									"sha256": "b7450a8631195bfd29a7c273b09ac2923e80832fc7f4fe9087ee4be2f2687a7f",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopperArrowBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopperArrow/basic/js/Demo.vue",
									"sha256": "7dadd6f6b8270e55e4747760a9bab1443feb087a815ccab10e62d8384850a432",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopperArrowBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopperContent",
			"documentation": "/component-AsamPopperContent.html",
			"demos": [
				{
					"id": "basic",
					"title": "触发器、内容与箭头组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopperContent/basic/ts/Demo.vue",
									"sha256": "29b32be7f6ba37d261f5da53e10f914ef5b2422df504eed37646b90ea5a09e96",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopperContentBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopperContent/basic/js/Demo.vue",
									"sha256": "b187cd49f044082bd73e050577a769455af110d975ba7ddd62f51b8ad565bec4",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopperContentBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamPopperTrigger",
			"documentation": "/component-AsamPopperTrigger.html",
			"demos": [
				{
					"id": "basic",
					"title": "触发器、内容与箭头组合",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopperTrigger/basic/ts/Demo.vue",
									"sha256": "d41170c5bb283810cfc0c3dbd3e41b038b21f7852c9eecd260f873d361d73a69",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamPopperTriggerBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamPopperTrigger/basic/js/Demo.vue",
									"sha256": "c935af57a6aeaf2e1596f9c93c4891e4b869d156286b29e0f67b5f586fd00964",
									"source": "<template>\n\t<AsamPopper role=\"tooltip\">\n\t\t<AsamPopperTrigger\n\t\t\t:on-mouseenter=\"show\"\n\t\t\t:on-mouseleave=\"hide\"\n\t\t\t:on-focus=\"show\"\n\t\t\t:on-blur=\"hide\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\">基础定位触发器</AsamButton>\n\t\t</AsamPopperTrigger>\n\t\t<AsamPopperContent\n\t\t\tv-show=\"visible\"\n\t\t\t:visible=\"visible\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:offset=\"12\"\n\t\t\t:arrow-offset=\"6\"\n\t\t\t:trapping=\"false\"\n\t\t>\n\t\t\t<div class=\"panel\">组合定位内容</div>\n\t\t\t<AsamPopperArrow />\n\t\t</AsamPopperContent>\n\t</AsamPopper>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamPopperTriggerBasicDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamPopper,\n\tAsamPopperTrigger,\n\tAsamPopperContent,\n\tAsamPopperArrow\n} from '@asam-ui/ui';\nconst visible = ref(false);\nconst show = () => {\n\tvisible.value = true;\n};\nconst hide = () => {\n\tvisible.value = false;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTooltip",
			"documentation": "/component-AsamTooltip.html",
			"demos": [
				{
					"id": "basic",
					"title": "焦点与悬停提示",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/basic/ts/Demo.vue",
									"sha256": "d8a7b05d7867e9aa76b1f34e75ad743b9d86b6a7ad61dbdc5a1f491c52eacaf5",
									"source": "<template>\n\t<AsamTooltip placement=\"top\" :trigger=\"['hover', 'focus']\" :show-after=\"100\">\n\t\t<AsamButton type=\"default\" native-type=\"button\">查看提示</AsamButton>\n\t\t<template #content>草稿保存在当前设备。<br />按完成提交。</template>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTooltipBasicDemo' });\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/basic/js/Demo.vue",
									"sha256": "831ba15a71494f39f85e32467ec88ec071cc24ed2e9c0f65e0d0adcf6f3d599e",
									"source": "<template>\n\t<AsamTooltip placement=\"top\" :trigger=\"['hover', 'focus']\" :show-after=\"100\">\n\t\t<AsamButton type=\"default\" native-type=\"button\">查看提示</AsamButton>\n\t\t<template #content>草稿保存在当前设备。<br />按完成提交。</template>\n\t</AsamTooltip>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTooltipBasicDemo' });\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "controlled",
					"title": "受控提示",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/controlled/ts/Demo.vue",
									"sha256": "8238e03513c4860fee1f72a560c02bab9358ea28995b5866360f05a6e05dce80",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t>切换提示</AsamButton\n\t\t>\n\t\t<AsamTooltip\n\t\t\tv-model:visible=\"visible\"\n\t\t\tcontent=\"由宿主控制显隐\"\n\t\t\t:trigger=\"[]\"\n\t\t\t:trigger-keys=\"[]\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t\t>提示锚点</AsamButton\n\t\t\t>\n\t\t</AsamTooltip>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTooltipControlledDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/controlled/js/Demo.vue",
									"sha256": "35c86ed606c5374bf41107f94c1cba16f5ae616556eba954bd6a14c6b0691835",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t>切换提示</AsamButton\n\t\t>\n\t\t<AsamTooltip\n\t\t\tv-model:visible=\"visible\"\n\t\t\tcontent=\"由宿主控制显隐\"\n\t\t\t:trigger=\"[]\"\n\t\t\t:trigger-keys=\"[]\"\n\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"visible = !visible\"\n\t\t\t\t>提示锚点</AsamButton\n\t\t\t>\n\t\t</AsamTooltip>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTooltipControlledDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nconst visible = ref(false);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic",
					"title": "基本用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-basic/ts/Demo.vue",
									"sha256": "edab1684e263a9c13769a017ac08c81f6fa9e738d0268a2bc7af1722f26f6802",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt\n-->\n<template>\n\t<div class=\"tooltip-base-box demo-layout-1\">\n\t\t<div class=\"row center demo-layout-2\">\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"顶部左侧提示信息\"\n\t\t\t\tplacement=\"top-start\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" content=\"顶部居中提示信息\" placement=\"top\">\n\t\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"顶部右侧提示信息\"\n\t\t\t\tplacement=\"top-end\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row demo-layout-3\">\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"left-start\">\n\t\t\t\t<template #content>\n\t\t\t\t\t左上方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">左侧顶部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"right-start\">\n\t\t\t\t<template #content>\n\t\t\t\t\t右上方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">右侧顶部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row demo-layout-4\">\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"left\">\n\t\t\t\t<template #content>\n\t\t\t\t\t左侧居中\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\" class=\"mt-3 mb-3\">左侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"right\">\n\t\t\t\t<template #content>\n\t\t\t\t\t右侧居中\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">右侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row demo-layout-5\">\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"left-end\">\n\t\t\t\t<template #content>\n\t\t\t\t\t左下方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">左侧底部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"right-end\">\n\t\t\t\t<template #content>\n\t\t\t\t\t右下方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">右侧底部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row center demo-layout-6\">\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"底部左侧提示信息\"\n\t\t\t\tplacement=\"bottom-start\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">底部左侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"底部居中提示信息\"\n\t\t\t\tplacement=\"bottom\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">底部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"底部右侧提示信息\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n\n<style>\n.tooltip-base-box {\n\twidth: 600px;\n}\n\n.tooltip-base-box .row {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.tooltip-base-box .center {\n\tjustify-content: center;\n}\n\n.tooltip-base-box .box-item {\n\twidth: 110px;\n\tmargin-top: 10px;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-3 {\n\tmargin-top: calc(var(--asam-space-xs) * 3);\n}\n.mb-3 {\n\tmargin-bottom: calc(var(--asam-space-xs) * 3);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "ccb99213f2743f22bbbfed0e7b6664bd2e7a375137580f3fa77f0d29e83ab9f2",
									"notice": {
										"id": "d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4",
										"url": "/licenses/source-notices/d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt",
										"licenseFilename": "LICENSE-d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/basic.vue",
											"sourceSha256": "19e5a5818514b73f4b9d59353aff38b9dc52768d6b07344840176ca8742edc19",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-basic/js/Demo.vue",
									"sha256": "cf4e6f3df28d42e3d707817e38bd36b5530ab6939ec82c0d37414237ab9310c8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt\n-->\n<template>\n\t<div class=\"tooltip-base-box demo-layout-1\">\n\t\t<div class=\"row center demo-layout-2\">\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"顶部左侧提示信息\"\n\t\t\t\tplacement=\"top-start\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">顶部左侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" content=\"顶部居中提示信息\" placement=\"top\">\n\t\t\t\t<AsamButton type=\"default\">顶部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"顶部右侧提示信息\"\n\t\t\t\tplacement=\"top-end\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">顶部右侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row demo-layout-3\">\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"left-start\">\n\t\t\t\t<template #content>\n\t\t\t\t\t左上方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">左侧顶部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"right-start\">\n\t\t\t\t<template #content>\n\t\t\t\t\t右上方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">右侧顶部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row demo-layout-4\">\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"left\">\n\t\t\t\t<template #content>\n\t\t\t\t\t左侧居中\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\" class=\"mt-3 mb-3\">左侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"right\">\n\t\t\t\t<template #content>\n\t\t\t\t\t右侧居中\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">右侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row demo-layout-5\">\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"left-end\">\n\t\t\t\t<template #content>\n\t\t\t\t\t左下方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">左侧底部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip class=\"box-item\" effect=\"dark\" placement=\"right-end\">\n\t\t\t\t<template #content>\n\t\t\t\t\t右下方\n\t\t\t\t\t<br />\n\t\t\t\t\t显示提示\n\t\t\t\t</template>\n\t\t\t\t<AsamButton type=\"default\">右侧底部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t\t<div class=\"row center demo-layout-6\">\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"底部左侧提示信息\"\n\t\t\t\tplacement=\"bottom-start\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">底部左侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"底部居中提示信息\"\n\t\t\t\tplacement=\"bottom\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">底部</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t\t<AsamTooltip\n\t\t\t\tclass=\"box-item\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\tcontent=\"底部右侧提示信息\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t>\n\t\t\t\t<AsamButton type=\"default\">底部右侧</AsamButton>\n\t\t\t</AsamTooltip>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n\n<style>\n.tooltip-base-box {\n\twidth: 600px;\n}\n\n.tooltip-base-box .row {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.tooltip-base-box .center {\n\tjustify-content: center;\n}\n\n.tooltip-base-box .box-item {\n\twidth: 110px;\n\tmargin-top: 10px;\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mt-3 {\n\tmargin-top: calc(var(--asam-space-xs) * 3);\n}\n.mb-3 {\n\tmargin-bottom: calc(var(--asam-space-xs) * 3);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-4 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-5 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-6 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "50a018859f0fe9e7cc4986c538dd6369c2b63b9af308e5484d3f684eb549564b",
									"notice": {
										"id": "d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4",
										"url": "/licenses/source-notices/d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt",
										"licenseFilename": "LICENSE-d726dfe1e5f34355c678d76444101807f213a070e24152795115e085590081d4.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/basic.vue",
											"sourceSha256": "19e5a5818514b73f4b9d59353aff38b9dc52768d6b07344840176ca8742edc19",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-theme",
					"title": "主题",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-theme/ts/Demo.vue",
									"sha256": "ae51a7d0135dfaa2970d4efd9039ce9620a1ea6cfbc7563503d4d3d736aed9f9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt\n-->\n<template>\n\t<AsamTooltip content=\"顶部居中\" placement=\"top\">\n\t\t<AsamButton type=\"default\">深色</AsamButton>\n\t</AsamTooltip>\n\t<AsamTooltip content=\"底部居中\" placement=\"bottom\" effect=\"light\">\n\t\t<AsamButton type=\"default\">浅色</AsamButton>\n\t</AsamTooltip>\n\n\t<AsamTooltip content=\"底部居中\" effect=\"customized\">\n\t\t<AsamButton type=\"default\">自定义主题</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-popper.is-customized {\n\t/* Set padding to ensure the height is 32px */\n\tpadding: 6px 12px;\n\tbackground: linear-gradient(90deg, rgb(159 229 151), rgb(204 229 129));\n}\n\n.el-popper.is-customized .el-popper__arrow::before {\n\tbackground: linear-gradient(45deg, #b2e68d, #bce689);\n\tright: 0;\n}\n</style>\n",
									"originalSourceSha256": "c3e9a8d8bc976c1c3fbc6194bb30b0cbb6e9364bd60f162320b8515380e59c96",
									"notice": {
										"id": "093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5",
										"url": "/licenses/source-notices/093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt",
										"licenseFilename": "LICENSE-093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/theme.vue",
											"sourceSha256": "18bd4f0e52d8991b214555f0199053d74ae1f532786d95806c980ac2d272976d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-theme/js/Demo.vue",
									"sha256": "622f8cd2eacf03b075cd4062556c848946ca2a3a8980e072dc8659242a6905e2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt\n-->\n<template>\n\t<AsamTooltip content=\"顶部居中\" placement=\"top\">\n\t\t<AsamButton type=\"default\">深色</AsamButton>\n\t</AsamTooltip>\n\t<AsamTooltip content=\"底部居中\" placement=\"bottom\" effect=\"light\">\n\t\t<AsamButton type=\"default\">浅色</AsamButton>\n\t</AsamTooltip>\n\n\t<AsamTooltip content=\"底部居中\" effect=\"customized\">\n\t\t<AsamButton type=\"default\">自定义主题</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n\n<style>\n.el-popper.is-customized {\n\t/* Set padding to ensure the height is 32px */\n\tpadding: 6px 12px;\n\tbackground: linear-gradient(90deg, rgb(159 229 151), rgb(204 229 129));\n}\n\n.el-popper.is-customized .el-popper__arrow::before {\n\tbackground: linear-gradient(45deg, #b2e68d, #bce689);\n\tright: 0;\n}\n</style>\n",
									"originalSourceSha256": "ae7aca5eb2dbc11f553ba22a9db1c5de3ab78619031845f301f08f82f7a64989",
									"notice": {
										"id": "093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5",
										"url": "/licenses/source-notices/093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt",
										"licenseFilename": "LICENSE-093f8d95b00d57c3cabb255dc199457b70efefc99359bc50fc354688251394e5.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/theme.vue",
											"sourceSha256": "18bd4f0e52d8991b214555f0199053d74ae1f532786d95806c980ac2d272976d",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-rich-content",
					"title": "丰富内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-rich-content/ts/Demo.vue",
									"sha256": "f35d0b29bad04eb1c4187a325b0e0c9142e02fd479172d02d1a736901d2809f0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt\n-->\n<template>\n\t<AsamTooltip placement=\"top\">\n\t\t<template #content> 多行文字<br />第二行 </template>\n\t\t<AsamButton type=\"default\">顶部居中</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "a13b287d13f682a7db01b35f8b6ab117e077b1de216b8f846862d250c871a14f",
									"notice": {
										"id": "ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda",
										"url": "/licenses/source-notices/ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt",
										"licenseFilename": "LICENSE-ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/rich-content.vue",
											"sourceSha256": "bde7545dfe79d8fee6739dd039c455fa77b22e3470f4b71022ac7470dcd7b28a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-rich-content/js/Demo.vue",
									"sha256": "9e0734eb0d53076a69f1c2fd1b3e1f0951a3c966fd002bd55adb30f6dce3e359",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt\n-->\n<template>\n\t<AsamTooltip placement=\"top\">\n\t\t<template #content> 多行文字<br />第二行 </template>\n\t\t<AsamButton type=\"default\">顶部居中</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "274bf94c92ffac030ba0b9a86fe5311054f59dea7d4241dc2403763587348f98",
									"notice": {
										"id": "ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda",
										"url": "/licenses/source-notices/ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt",
										"licenseFilename": "LICENSE-ed72f7ff04f38f8703f69b7d3e2843a89f3dc197074e7d1470a34719bf76feda.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/rich-content.vue",
											"sourceSha256": "bde7545dfe79d8fee6739dd039c455fa77b22e3470f4b71022ac7470dcd7b28a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-advanced-usage",
					"title": "动态状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-advanced-usage/ts/Demo.vue",
									"sha256": "5052fe5f30f607f82ad1f84be96584c1c3287bccfbd9931ea6ca440c0893d3b2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt\n-->\n<template>\n\t<AsamTooltip :disabled=\"disabled\" content=\"点击关闭文字提示\" placement=\"bottom\" effect=\"light\">\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\">\n\t\t\t点击以 {{ disabled ? '启用' : '关闭' }} 提示函数\n\t\t</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst disabled = ref(false);\n</script>\n",
									"originalSourceSha256": "7ae155c6a8c67c24ea19fce790165e8036ccda6ad3f00e51454d6d98a1a6ccff",
									"notice": {
										"id": "1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb",
										"url": "/licenses/source-notices/1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt",
										"licenseFilename": "LICENSE-1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/advanced-usage.vue",
											"sourceSha256": "e5e3222f5d97c42e3764029a110dc57c5624573ae8ca7d7b58ab902bdb728f26",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-advanced-usage/js/Demo.vue",
									"sha256": "3f97bbd5210e8064a1a0eaf31c7e2bbfd15237f0d9dc8f5fa5bcc5295bcd91d3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt\n-->\n<template>\n\t<AsamTooltip :disabled=\"disabled\" content=\"点击关闭文字提示\" placement=\"bottom\" effect=\"light\">\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\">\n\t\t\t点击以 {{ disabled ? '启用' : '关闭' }} 提示函数\n\t\t</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst disabled = ref(false);\n</script>\n",
									"originalSourceSha256": "203d836c8cf9a29bdbf8341c2f7b231652fbfe40a5e584af2ad4ca6054e86cb0",
									"notice": {
										"id": "1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb",
										"url": "/licenses/source-notices/1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt",
										"licenseFilename": "LICENSE-1179c17f8bdce9e7bb1fa7d296b196188253b437cb63cec8dace41f795108bfb.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/advanced-usage.vue",
											"sourceSha256": "e5e3222f5d97c42e3764029a110dc57c5624573ae8ca7d7b58ab902bdb728f26",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-html-content",
					"title": "完整交互：html-content",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-html-content/ts/Demo.vue",
									"sha256": "a3459a3d3c1e434f8846971e3586c8e7a72bdb601f575ca857b1b6c6ee5db806",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt\n-->\n<template>\n\t<AsamTooltip content=\"<span>内容可以使用 <strong>HTML</strong></span>\" raw-content>\n\t\t<AsamButton type=\"default\">悬停查看</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "46afa6d9f2c4d0abc2248b66aa9a498dcee2a3aeca0b957d55f942e04a00be3f",
									"notice": {
										"id": "e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400",
										"url": "/licenses/source-notices/e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt",
										"licenseFilename": "LICENSE-e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/html-content.vue",
											"sourceSha256": "40e0e03d6c9fcfe8e33342e9c9d2f01fab3989e4726cbf2ac93bea49f29d8f33",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-html-content/js/Demo.vue",
									"sha256": "ef6e832742c2655303aa327c5b06a0d6a0ad5489931b4a5b54139ed41676ec28",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt\n-->\n<template>\n\t<AsamTooltip content=\"<span>内容可以使用 <strong>HTML</strong></span>\" raw-content>\n\t\t<AsamButton type=\"default\">悬停查看</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n",
									"originalSourceSha256": "f2ae33e67a692fda341dfbfd520fe4e7b652f0b2d2fc6065bac22b74473aa9b7",
									"notice": {
										"id": "e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400",
										"url": "/licenses/source-notices/e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt",
										"licenseFilename": "LICENSE-e2e01e18375f2dec3347932556dbf472aa956d8c0e637b0f611c15f67cd30400.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/html-content.vue",
											"sourceSha256": "40e0e03d6c9fcfe8e33342e9c9d2f01fab3989e4726cbf2ac93bea49f29d8f33",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-virtual-trigger",
					"title": "虚拟触发目标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-virtual-trigger/ts/Demo.vue",
									"sha256": "48e92108acc4722b10b4c371b0b5ff683b7357d58ee824ca128d315236189bdc",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt\n-->\n<template>\n\t<AsamTooltip\n\t\t:visible=\"visible\"\n\t\tcontent=\"底部居中\"\n\t\tplacement=\"bottom\"\n\t\teffect=\"light\"\n\t\ttrigger=\"click\"\n\t\tvirtual-triggering\n\t\t:virtual-ref=\"triggerRef\"\n\t/>\n\t<AsamButton type=\"default\" @click=\"visible = !visible\">切换文字提示</AsamButton>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n\nimport { onMounted, onUnmounted, ref } from 'vue';\n\nconst visible = ref(false);\nconst position = ref(DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 }));\n\nconst triggerRef = ref({\n\tgetBoundingClientRect: () => position.value\n});\n\nconst mousemoveHandler = ({ clientX, clientY }: MouseEvent) => {\n\tposition.value = DOMRect.fromRect({\n\t\tx: clientX,\n\t\ty: clientY\n\t});\n};\n\nonMounted(() => {\n\tdocument.addEventListener('mousemove', mousemoveHandler);\n});\n\nonUnmounted(() => {\n\tdocument.removeEventListener('mousemove', mousemoveHandler);\n});\n</script>\n",
									"originalSourceSha256": "1601d3e2acc03eacb790d9e347e61f77b6700062ea87b2635ad793bfed54c737",
									"notice": {
										"id": "ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1",
										"url": "/licenses/source-notices/ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt",
										"licenseFilename": "LICENSE-ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/virtual-trigger.vue",
											"sourceSha256": "9bdb35598052f2b8fb5a549a137057208e8f9984e09cafdd79335a8a82f57d94",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-virtual-trigger/js/Demo.vue",
									"sha256": "641ed5f7f6fcb47ddb0a5cdb8262bf97a43097a0e7a5d7f8252f6cc08dbd72b8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt\n-->\n<template>\n\t<AsamTooltip\n\t\t:visible=\"visible\"\n\t\tcontent=\"底部居中\"\n\t\tplacement=\"bottom\"\n\t\teffect=\"light\"\n\t\ttrigger=\"click\"\n\t\tvirtual-triggering\n\t\t:virtual-ref=\"triggerRef\"\n\t/>\n\t<AsamButton type=\"default\" @click=\"visible = !visible\">切换文字提示</AsamButton>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nimport { onMounted, onUnmounted, ref } from 'vue';\nconst visible = ref(false);\nconst position = ref(DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 }));\nconst triggerRef = ref({\n\tgetBoundingClientRect: () => position.value\n});\nconst mousemoveHandler = ({ clientX, clientY }) => {\n\tposition.value = DOMRect.fromRect({\n\t\tx: clientX,\n\t\ty: clientY\n\t});\n};\nonMounted(() => {\n\tdocument.addEventListener('mousemove', mousemoveHandler);\n});\nonUnmounted(() => {\n\tdocument.removeEventListener('mousemove', mousemoveHandler);\n});\n</script>\n",
									"originalSourceSha256": "929a414af23b8ed8c4ced9f5c6deb81992303d1df2a783fa05c3ad5853db5820",
									"notice": {
										"id": "ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1",
										"url": "/licenses/source-notices/ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt",
										"licenseFilename": "LICENSE-ac4e56ad9e05098f951fad4144f173742fcb02962f551cc289e7b9473da41bf1.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/virtual-trigger.vue",
											"sourceSha256": "9bdb35598052f2b8fb5a549a137057208e8f9984e09cafdd79335a8a82f57d94",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-singleton",
					"title": "共享浮层切换目标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-singleton/ts/Demo.vue",
									"sha256": "cbbac95aa703bb42cea64bceb13bdfbbe3e89ac543ac01c0deb58b9de1f109f4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"tooltip-references\">\n\t\t\t<span v-for=\"i in 3\" :key=\"i\" @mouseover=\"setReference\"\n\t\t\t\t><AsamButton type=\"default\" @click=\"visible = !visible\"\n\t\t\t\t\t>点击打开提示</AsamButton\n\t\t\t\t></span\n\t\t\t>\n\t\t</div>\n\n\t\t<AsamTooltip\n\t\t\tref=\"tooltipRef\"\n\t\t\t:visible=\"visible\"\n\t\t\t:popper-options=\"{\n\t\t\t\tmodifiers: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'computeStyles',\n\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\tadaptive: false,\n\t\t\t\t\t\t\tenabled: false\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\"\n\t\t\t:virtual-ref=\"buttonRef\"\n\t\t\tvirtual-triggering\n\t\t\tpopper-class=\"singleton-tooltip\"\n\t\t>\n\t\t\t<template #content>\n\t\t\t\t<span> 示例内容 </span>\n\t\t\t</template>\n\t\t</AsamTooltip>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst buttonRef = ref<HTMLElement>();\nconst tooltipRef = ref();\n\nconst visible = ref(false);\n\nconst setReference = (event: MouseEvent) => {\n\tbuttonRef.value = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;\n};\n</script>\n\n<style>\n.singleton-tooltip {\n\ttransition: transform 0.3s var(--el-transition-function-fast-bezier);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\n.tooltip-references {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "d52a54f410c651f52a1ae4224a49e842c9def05f94b5224113d43560895362d8",
									"notice": {
										"id": "bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295",
										"url": "/licenses/source-notices/bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt",
										"licenseFilename": "LICENSE-bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/singleton.vue",
											"sourceSha256": "2d5bb0706a3ea9dc43afac804439b3e8d327fd35c65edf7976f7994e73a72676",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-singleton/js/Demo.vue",
									"sha256": "6583ebb0369b6145cc2fb37c94c369295346aece57101a0deeb60308e9affb36",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<div class=\"tooltip-references\">\n\t\t\t<span v-for=\"i in 3\" :key=\"i\" @mouseover=\"setReference\"\n\t\t\t\t><AsamButton type=\"default\" @click=\"visible = !visible\"\n\t\t\t\t\t>点击打开提示</AsamButton\n\t\t\t\t></span\n\t\t\t>\n\t\t</div>\n\n\t\t<AsamTooltip\n\t\t\tref=\"tooltipRef\"\n\t\t\t:visible=\"visible\"\n\t\t\t:popper-options=\"{\n\t\t\t\tmodifiers: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'computeStyles',\n\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\tadaptive: false,\n\t\t\t\t\t\t\tenabled: false\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\"\n\t\t\t:virtual-ref=\"buttonRef\"\n\t\t\tvirtual-triggering\n\t\t\tpopper-class=\"singleton-tooltip\"\n\t\t>\n\t\t\t<template #content>\n\t\t\t\t<span> 示例内容 </span>\n\t\t\t</template>\n\t\t</AsamTooltip>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst buttonRef = ref();\nconst tooltipRef = ref();\nconst visible = ref(false);\nconst setReference = (event) => {\n\tbuttonRef.value = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;\n};\n</script>\n\n<style>\n.singleton-tooltip {\n\ttransition: transform 0.3s var(--el-transition-function-fast-bezier);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n\n<style scoped>\n.tooltip-references {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "73110027936d24cae2defc06fac718aa9b792776334f2c812220961a5a870572",
									"notice": {
										"id": "bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295",
										"url": "/licenses/source-notices/bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt",
										"licenseFilename": "LICENSE-bf259e6da208760412b485d8e15ca10ae47180c627cb6bf33aad34c8d4a8c295.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/singleton.vue",
											"sourceSha256": "2d5bb0706a3ea9dc43afac804439b3e8d327fd35c65edf7976f7994e73a72676",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-controlled",
					"title": "受控显隐",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-controlled/ts/Demo.vue",
									"sha256": "586f005014e7e701ce0a64a9f553d1d55f0870e5e6757aa5b78e1bb2ee912215",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt\n-->\n<template>\n\t<AsamTooltip :visible=\"visible\">\n\t\t<template #content>\n\t\t\t<span>内容</span>\n\t\t</template>\n\t\t<span @mouseenter=\"visible = true\" @mouseleave=\"visible = false\"\n\t\t\t><AsamButton type=\"default\"> 悬停查看 </AsamButton></span\n\t\t>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n\nimport { ref } from 'vue';\n\nconst visible = ref(false);\n</script>\n",
									"originalSourceSha256": "b51aeecd25fb68c9e98bedf12f31aebf7bc6fddcc442275b4d7fe18011e08175",
									"notice": {
										"id": "950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d",
										"url": "/licenses/source-notices/950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt",
										"licenseFilename": "LICENSE-950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/controlled.vue",
											"sourceSha256": "24be43b45409436bd9fe268836eb6a06ee360505ced074e8a5ce532461ba9fca",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-controlled/js/Demo.vue",
									"sha256": "aaa54838e65267be31feb571a7a4a66f6a48e8aa0d55c8841b424fdb96bd36e5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt\n-->\n<template>\n\t<AsamTooltip :visible=\"visible\">\n\t\t<template #content>\n\t\t\t<span>内容</span>\n\t\t</template>\n\t\t<span @mouseenter=\"visible = true\" @mouseleave=\"visible = false\"\n\t\t\t><AsamButton type=\"default\"> 悬停查看 </AsamButton></span\n\t\t>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst visible = ref(false);\n</script>\n",
									"originalSourceSha256": "858772bbcdcb474bf983c8be0888547884d141d4370f053c76de3af023e481be",
									"notice": {
										"id": "950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d",
										"url": "/licenses/source-notices/950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt",
										"licenseFilename": "LICENSE-950284faa8e0f7ee8b188bf721fef0c015e5ad06c2c4f0f1795a823a2f899e9d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/controlled.vue",
											"sourceSha256": "24be43b45409436bd9fe268836eb6a06ee360505ced074e8a5ce532461ba9fca",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-animations",
					"title": "完整交互：animations",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-animations/ts/Demo.vue",
									"sha256": "41e72fa3519ccd83c2c1401e20e290289252d1a6bbe8c63e59a26c8153fb5573",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt\n-->\n<template>\n\t<AsamTooltip content=\"这是一条文字提示\" transition=\"slide-fade\">\n\t\t<AsamButton type=\"default\">触发操作</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n\n<style>\n.slide-fade-enter-active {\n\ttransition: all 0.3s ease-out;\n}\n\n.slide-fade-leave-active {\n\ttransition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-fade-enter-from,\n.slide-fade-leave-to {\n\ttransform: translateX(120px);\n\topacity: 0;\n}\n</style>\n",
									"originalSourceSha256": "8d2ca05955d8a7d1927d3abc6d06418c1a4cb4a2ee3f7d5bea4e5210aed3db6c",
									"notice": {
										"id": "23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b",
										"url": "/licenses/source-notices/23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt",
										"licenseFilename": "LICENSE-23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/animations.vue",
											"sourceSha256": "67821d53d243108fba99dd23a306b2fdeaff01cf5fb0bcb7c0922315e0da09d2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-animations/js/Demo.vue",
									"sha256": "f4257d77518883329c1ce5b281e39b328f6b13d99156a69089a849e7fdca94b7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt\n-->\n<template>\n\t<AsamTooltip content=\"这是一条文字提示\" transition=\"slide-fade\">\n\t\t<AsamButton type=\"default\">触发操作</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n</script>\n\n<style>\n.slide-fade-enter-active {\n\ttransition: all 0.3s ease-out;\n}\n\n.slide-fade-leave-active {\n\ttransition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);\n}\n\n.slide-fade-enter-from,\n.slide-fade-leave-to {\n\ttransform: translateX(120px);\n\topacity: 0;\n}\n</style>\n",
									"originalSourceSha256": "1b8d06ad6e77c5d460c943c8c12f81e6a2718dfe46adb0ad8bad1d2a446b2470",
									"notice": {
										"id": "23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b",
										"url": "/licenses/source-notices/23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt",
										"licenseFilename": "LICENSE-23712ec656e6dbe2d1fac82321cfd4d1a3b6544e96c3d01c7c1d7e2bc49d371b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/animations.vue",
											"sourceSha256": "67821d53d243108fba99dd23a306b2fdeaff01cf5fb0bcb7c0922315e0da09d2",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-append-to",
					"title": "自定义挂载容器",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-append-to/ts/Demo.vue",
									"sha256": "c50386e9adc69ad51cd8e1e83aff3cc3ecf8ca390cd995b3c76b70790b16c349",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt\n-->\n<template>\n\t<AsamTooltip\n\t\t:append-to=\"targetElement\"\n\t\ttrigger=\"click\"\n\t\tcontent=\"挂载到 .target 容器\"\n\t\tplacement=\"top\"\n\t>\n\t\t<AsamButton type=\"default\" class=\"target\">点击打开提示</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\n\nimport { onMounted, ref } from 'vue';\n\nconst targetElement = ref('');\n\nonMounted(() => {\n\ttargetElement.value = '.target';\n});\n</script>\n\n<style scoped>\n.target {\n\tposition: relative;\n\tmargin-top: 20px;\n}\n</style>\n",
									"originalSourceSha256": "02810694d189c9abef42e2f9b561f5a4e98bc0fc8039e16449f1699b2fa27e97",
									"notice": {
										"id": "746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0",
										"url": "/licenses/source-notices/746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt",
										"licenseFilename": "LICENSE-746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/append-to.vue",
											"sourceSha256": "936b1bbe94479d9bf05a8ddb9269abe281c80160640d50293f07910ef10443ff",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTooltip/ep2147-append-to/js/Demo.vue",
									"sha256": "876853e52a60cdea490a0adb55e95dd27c0ce1971c19a9b2c8213e60d4c7b9c7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt\n-->\n<template>\n\t<AsamTooltip\n\t\t:append-to=\"targetElement\"\n\t\ttrigger=\"click\"\n\t\tcontent=\"挂载到 .target 容器\"\n\t\tplacement=\"top\"\n\t>\n\t\t<AsamButton type=\"default\" class=\"target\">点击打开提示</AsamButton>\n\t</AsamTooltip>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTooltip } from '@asam-ui/ui';\nimport { onMounted, ref } from 'vue';\nconst targetElement = ref('');\nonMounted(() => {\n\ttargetElement.value = '.target';\n});\n</script>\n\n<style scoped>\n.target {\n\tposition: relative;\n\tmargin-top: 20px;\n}\n</style>\n",
									"originalSourceSha256": "cb9e4ea02d75a36525eb38bd9cee794e0f9653bfab21f2bd75826addbdc3cfa9",
									"notice": {
										"id": "746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0",
										"url": "/licenses/source-notices/746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt",
										"licenseFilename": "LICENSE-746e4433b73e8cd76e66da7b0d69666dde9ef0abe31cf0a06f224a8a008a2aa0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tooltip/append-to.vue",
											"sourceSha256": "936b1bbe94479d9bf05a8ddb9269abe281c80160640d50293f07910ef10443ff",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTour",
			"documentation": "/component-AsamTour.html",
			"demos": [
				{
					"id": "basic",
					"title": "目标步骤与无目标步骤",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/basic/ts/Demo.vue",
									"sha256": "4033f154e7e774218e5be5fc0440fa70231520f06c49e4b8d5e7cc176e65263e",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">开始导览</AsamButton>\n\t<AsamButton type=\"default\" ref=\"target\" native-type=\"button\">导览目标</AsamButton>\n\t<AsamTour v-model=\"open\" v-model:current=\"current\" @finish=\"finished++\">\n\t\t<AsamTourStep :target=\"target?.ref\" title=\"第一步\" description=\"这里展示目标说明。\" />\n\t\t<AsamTourStep title=\"完成导览\">\n\t\t\t<template #header>下一步操作</template>\n\t\t\t<p class=\"example-paragraph\">没有目标的步骤使用居中展示。</p>\n\t\t</AsamTourStep>\n\t\t<template #indicators=\"{ current: index, total }\">{{ index + 1 }} / {{ total }}</template>\n\t</AsamTour>\n\t<p class=\"example-paragraph\" role=\"status\">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTourBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, type AsamButtonExpose, AsamTour, AsamTourStep } from '@asam-ui/ui';\nconst open = ref(false);\nconst current = ref(0);\nconst finished = ref(0);\nconst target = ref<AsamButtonExpose>();\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/basic/js/Demo.vue",
									"sha256": "52d1e44b761bb926e0c6ea1b988ab149faf3755ef0140bafb4099cec9971b304",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">开始导览</AsamButton>\n\t<AsamButton type=\"default\" ref=\"target\" native-type=\"button\">导览目标</AsamButton>\n\t<AsamTour v-model=\"open\" v-model:current=\"current\" @finish=\"finished++\">\n\t\t<AsamTourStep :target=\"target?.ref\" title=\"第一步\" description=\"这里展示目标说明。\" />\n\t\t<AsamTourStep title=\"完成导览\">\n\t\t\t<template #header>下一步操作</template>\n\t\t\t<p class=\"example-paragraph\">没有目标的步骤使用居中展示。</p>\n\t\t</AsamTourStep>\n\t\t<template #indicators=\"{ current: index, total }\">{{ index + 1 }} / {{ total }}</template>\n\t</AsamTour>\n\t<p class=\"example-paragraph\" role=\"status\">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTourBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\nconst open = ref(false);\nconst current = ref(0);\nconst finished = ref(0);\nconst target = ref();\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "ep2147-basic",
					"title": "基本用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-basic/ts/Demo.vue",
									"sha256": "59d11aae246f9bebefe75484f5f0c9e130de0dca578d380be7d440d9b3d451c4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\">\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 240px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\talt=\"tour.png\"\n\t\t\t/>\n\t\t\t<div>将文件放在这里。</div>\n\t\t</AsamTourStep>\n\t\t<AsamTourStep :target=\"ref2?.$el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"ref3?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t</AsamTour>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamImage, AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\ntype ButtonInstance = InstanceType<typeof AsamButton>;\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\n\nconst ref1 = ref<ButtonInstance>();\nconst ref2 = ref<ButtonInstance>();\nconst ref3 = ref<ButtonInstance>();\n\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "0d539290723f89608c3b6d5152e364fbcdd74f6644648829ef9631208e3165f2",
									"notice": {
										"id": "41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f",
										"url": "/licenses/source-notices/41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt",
										"licenseFilename": "LICENSE-41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/basic.vue",
											"sourceSha256": "0fab514013225b4b83fa2b658a3cf504b35408ba31fb87bc9d9586914e96d3e6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-basic/js/Demo.vue",
									"sha256": "c3103817930022e3d35243ac9bcef0b4f61843e7aceb9054093653e374ce53be",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\">\n\t\t\t<AsamImage\n\t\t\t\tstyle=\"width: 240px\"\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\talt=\"tour.png\"\n\t\t\t/>\n\t\t\t<div>将文件放在这里。</div>\n\t\t</AsamTourStep>\n\t\t<AsamTourStep :target=\"ref2?.$el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"ref3?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t</AsamTour>\n</template>\n\n<script setup>\nimport { AsamImage, AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\nconst ref1 = ref();\nconst ref2 = ref();\nconst ref3 = ref();\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "85c16a587ace85b37f293437f492518682adee89bee34513a2a9987c1bf0401a",
									"notice": {
										"id": "41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f",
										"url": "/licenses/source-notices/41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt",
										"licenseFilename": "LICENSE-41fe8a621dba7f6de3e5537f320d27281f600638d8996f2c1b6b3698caf05f1f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/basic.vue",
											"sourceSha256": "0fab514013225b4b83fa2b658a3cf504b35408ba31fb87bc9d9586914e96d3e6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-non-modal",
					"title": "无遮罩引导",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-non-modal/ts/Demo.vue",
									"sha256": "1467f5ba11c945bebae23893031ec9cc93f77688d5d9998a52cb1ecf4df89584",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\" type=\"primary\" :mask=\"false\">\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\" description=\"将文件放在这里。\" />\n\t\t<AsamTourStep :target=\"ref2?.$el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"ref3?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t</AsamTour>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\ntype ButtonInstance = InstanceType<typeof AsamButton>;\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\n\nconst ref1 = ref<ButtonInstance>();\nconst ref2 = ref<ButtonInstance>();\nconst ref3 = ref<ButtonInstance>();\n\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "506f77ef45ebae87a9d5ada8c5d6c8c70e6d7fa4bcb635a0bee14a893fd6698d",
									"notice": {
										"id": "3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a",
										"url": "/licenses/source-notices/3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt",
										"licenseFilename": "LICENSE-3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/non-modal.vue",
											"sourceSha256": "63ef81057b12b9732cc5186971aae3d2450444502071f17fc36e28129e70ca15",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-non-modal/js/Demo.vue",
									"sha256": "8637b59e8b3c8156012abdc7538e337cb53571e683502d211b32151da34bb898",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\" type=\"primary\" :mask=\"false\">\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\" description=\"将文件放在这里。\" />\n\t\t<AsamTourStep :target=\"ref2?.$el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"ref3?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t</AsamTour>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\nconst ref1 = ref();\nconst ref2 = ref();\nconst ref3 = ref();\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "0c5ffba89c054cc48bca23feef08b5ce0fc1d9d5604b12af865edde7df041b53",
									"notice": {
										"id": "3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a",
										"url": "/licenses/source-notices/3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt",
										"licenseFilename": "LICENSE-3fa05a6253c6b442e95e9fdd60882eb9420da75570aa22396f961e148cbeae7a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/non-modal.vue",
											"sourceSha256": "63ef81057b12b9732cc5186971aae3d2450444502071f17fc36e28129e70ca15",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-placement",
					"title": "定位方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-placement/ts/Demo.vue",
									"sha256": "252c50cfeb9216ef157ae475ab349ed52f8b80d7a355f3ad40f927a7d7fdfbd4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt\n-->\n<template>\n\t<AsamButton ref=\"btnRef\" type=\"default\" @click=\"open = true\"> 开始导览 </AsamButton>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep title=\"居中\" description=\"显示在屏幕中央。\" />\n\t\t<AsamTourStep\n\t\t\ttitle=\"右侧\"\n\t\t\tdescription=\"位于目标右侧。\"\n\t\t\tplacement=\"right\"\n\t\t\t:target=\"btnRef?.$el\"\n\t\t/>\n\t\t<AsamTourStep\n\t\t\ttitle=\"顶部\"\n\t\t\tdescription=\"位于目标上方。\"\n\t\t\tplacement=\"top\"\n\t\t\t:target=\"btnRef?.$el\"\n\t\t/>\n\t</AsamTour>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\ntype ButtonInstance = InstanceType<typeof AsamButton>;\nimport { ref } from 'vue';\n\nconst btnRef = ref<ButtonInstance>();\n\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "8dd90ed542552cccf6b41880df9ded544562a7e085ea175cb19a98e00b2da847",
									"notice": {
										"id": "ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba",
										"url": "/licenses/source-notices/ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt",
										"licenseFilename": "LICENSE-ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/placement.vue",
											"sourceSha256": "ff47e10bc4b1e3cc7ff6e065f8b5f9ca3f7e3d5cf365ce89b61f6d6401bd7cdf",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-placement/js/Demo.vue",
									"sha256": "dd244554419ecc1ae4f8b877e040985eb1630d2db75a51eeaea66bf83221d8ca",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt\n-->\n<template>\n\t<AsamButton ref=\"btnRef\" type=\"default\" @click=\"open = true\"> 开始导览 </AsamButton>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep title=\"居中\" description=\"显示在屏幕中央。\" />\n\t\t<AsamTourStep\n\t\t\ttitle=\"右侧\"\n\t\t\tdescription=\"位于目标右侧。\"\n\t\t\tplacement=\"right\"\n\t\t\t:target=\"btnRef?.$el\"\n\t\t/>\n\t\t<AsamTourStep\n\t\t\ttitle=\"顶部\"\n\t\t\tdescription=\"位于目标上方。\"\n\t\t\tplacement=\"top\"\n\t\t\t:target=\"btnRef?.$el\"\n\t\t/>\n\t</AsamTour>\n</template>\n\n<script setup>\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\nimport { ref } from 'vue';\nconst btnRef = ref();\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "607296aa15ecba260fc9c4fdbc71f9b74a68457541b66bbf06f6a02b668a2c32",
									"notice": {
										"id": "ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba",
										"url": "/licenses/source-notices/ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt",
										"licenseFilename": "LICENSE-ee86e3d6d81131c319e473bf58ced5feef760d96662f1e3eaa37c2592e7a7dba.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/placement.vue",
											"sourceSha256": "ff47e10bc4b1e3cc7ff6e065f8b5f9ca3f7e3d5cf365ce89b61f6d6401bd7cdf",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-mask",
					"title": "遮罩与点击区域",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-mask/ts/Demo.vue",
									"sha256": "43dd16b2c1e27360144cb2251f74e68b863c8af4c5027e1df8dda41a13b2d882",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour\n\t\tv-model=\"open\"\n\t\t:mask=\"{\n\t\t\tstyle: {\n\t\t\t\tboxShadow: 'inset 0 0 15px #333'\n\t\t\t},\n\t\t\tcolor: 'rgba(80, 255, 255, .4)'\n\t\t}\"\n\t>\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\">\n\t\t\t<AsamImage\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\talt=\"tour.png\"\n\t\t\t/>\n\t\t\t<div>将文件放在这里。</div>\n\t\t</AsamTourStep>\n\t\t<AsamTourStep\n\t\t\t:target=\"ref2?.$el\"\n\t\t\ttitle=\"保存\"\n\t\t\tdescription=\"保存修改\"\n\t\t\t:mask=\"{\n\t\t\t\tstyle: {\n\t\t\t\t\tboxShadow: 'inset 0 0 15px #fff'\n\t\t\t\t},\n\t\t\t\tcolor: 'rgba(40, 0, 255, .4)'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamTourStep\n\t\t\t:target=\"ref3?.$el\"\n\t\t\ttitle=\"其他操作\"\n\t\t\tdescription=\"点击查看其他内容\"\n\t\t\t:mask=\"false\"\n\t\t/>\n\t</AsamTour>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamImage, AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\ntype ButtonInstance = InstanceType<typeof AsamButton>;\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\n\nconst ref1 = ref<ButtonInstance>();\nconst ref2 = ref<ButtonInstance>();\nconst ref3 = ref<ButtonInstance>();\n\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "5453cc171156cfb1b8b0e59db0ed8032f43a2acc33b2af90dca2de46269ef637",
									"notice": {
										"id": "ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538",
										"url": "/licenses/source-notices/ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt",
										"licenseFilename": "LICENSE-ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/mask.vue",
											"sourceSha256": "4ef6a1673937238f134c8e9053652a049852e5fd2fa2ee590d79c896ee89503f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-mask/js/Demo.vue",
									"sha256": "a0a8bbf5696dca7f7b0362f9cf2e8a5b1684c2d79bea5e30591f74933c5d1eed",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour\n\t\tv-model=\"open\"\n\t\t:mask=\"{\n\t\t\tstyle: {\n\t\t\t\tboxShadow: 'inset 0 0 15px #333'\n\t\t\t},\n\t\t\tcolor: 'rgba(80, 255, 255, .4)'\n\t\t}\"\n\t>\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\">\n\t\t\t<AsamImage\n\t\t\t\tsrc=\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2248%22%20viewBox%3D%220%200%20120%2048%22%3E%3Crect%20width%3D%22120%22%20height%3D%2248%22%20fill%3D%22%23e8edf3%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2231%22%20fill%3D%22%23345%22%20font-size%3D%2224%22%3EASAM%3C%2Ftext%3E%3C%2Fsvg%3E\"\n\t\t\t\talt=\"tour.png\"\n\t\t\t/>\n\t\t\t<div>将文件放在这里。</div>\n\t\t</AsamTourStep>\n\t\t<AsamTourStep\n\t\t\t:target=\"ref2?.$el\"\n\t\t\ttitle=\"保存\"\n\t\t\tdescription=\"保存修改\"\n\t\t\t:mask=\"{\n\t\t\t\tstyle: {\n\t\t\t\t\tboxShadow: 'inset 0 0 15px #fff'\n\t\t\t\t},\n\t\t\t\tcolor: 'rgba(40, 0, 255, .4)'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamTourStep\n\t\t\t:target=\"ref3?.$el\"\n\t\t\ttitle=\"其他操作\"\n\t\t\tdescription=\"点击查看其他内容\"\n\t\t\t:mask=\"false\"\n\t\t/>\n\t</AsamTour>\n</template>\n\n<script setup>\nimport { AsamImage, AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\nconst ref1 = ref();\nconst ref2 = ref();\nconst ref3 = ref();\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "6aa167bce191f701fae96a99b60d7c7fb4135ec598b73e4de00a691586ae4c75",
									"notice": {
										"id": "ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538",
										"url": "/licenses/source-notices/ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt",
										"licenseFilename": "LICENSE-ad4e3582dbd72d671469cb2994ffb5b9a4bc49f1e12615d246cf979ebdab3538.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/mask.vue",
											"sourceSha256": "4ef6a1673937238f134c8e9053652a049852e5fd2fa2ee590d79c896ee89503f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-indicator",
					"title": "自定义进度指示",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-indicator/ts/Demo.vue",
									"sha256": "246e1a313027dfc81291d1995e213541338646f199f77e6ded97a56b8e69f9f9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\" description=\"将文件放在这里。\" />\n\t\t<AsamTourStep :target=\"ref2?.$el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"ref3?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t\t<template #indicators=\"{ current, total }\">\n\t\t\t<span>{{ current + 1 }} / {{ total }}</span>\n\t\t</template>\n\t</AsamTour>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\ntype ButtonInstance = InstanceType<typeof AsamButton>;\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\n\nconst ref1 = ref<ButtonInstance>();\nconst ref2 = ref<ButtonInstance>();\nconst ref3 = ref<ButtonInstance>();\n\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "ca061d5a554b51bf25c3acfa30301285ee8d50be383f752b1bff7ae52a4e5542",
									"notice": {
										"id": "91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b",
										"url": "/licenses/source-notices/91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt",
										"licenseFilename": "LICENSE-91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/indicator.vue",
											"sourceSha256": "c80bcfbd42175ca2f0f45a7ea6bde9b2dd88edfbcd59c53379934b4561312e7a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-indicator/js/Demo.vue",
									"sha256": "bb8170b052c5d5f689eca02891dedbb2ee64e98a3eda9ba4fef75af135ae79dd",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<AsamButton type=\"default\" ref=\"ref1\">上传</AsamButton>\n\t\t<AsamButton ref=\"ref2\" type=\"default\">保存</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"ref3\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep :target=\"ref1?.$el\" title=\"上传文件\" description=\"将文件放在这里。\" />\n\t\t<AsamTourStep :target=\"ref2?.$el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"ref3?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t\t<template #indicators=\"{ current, total }\">\n\t\t\t<span>{{ current + 1 }} / {{ total }}</span>\n\t\t</template>\n\t</AsamTour>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\nconst ref1 = ref();\nconst ref2 = ref();\nconst ref3 = ref();\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "8676f8001cd91c6889032484807a526484a1a47aef9f1c3360226bbb280a2301",
									"notice": {
										"id": "91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b",
										"url": "/licenses/source-notices/91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt",
										"licenseFilename": "LICENSE-91564ec4c54d57d9be713dd6c97ce36d872990c7259fe70dcc40b06a0fe5fb2b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/indicator.vue",
											"sourceSha256": "c80bcfbd42175ca2f0f45a7ea6bde9b2dd88edfbcd59c53379934b4561312e7a",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "ep2147-target",
					"title": "动态目标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-target/ts/Demo.vue",
									"sha256": "33e2af2af7c9d41d8fb7d5af8fad37689da28f9b25ed5218d1ac61888f43b7fa",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<span id=\"btn1\"><AsamButton type=\"default\">上传</AsamButton></span>\n\t\t<span id=\"btn2\"><AsamButton type=\"default\">保存</AsamButton></span>\n\t\t<AsamButton type=\"default\" ref=\"btnRef\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep target=\"#btn1\" title=\"上传文件\" description=\"将文件放在这里。\" />\n\t\t<AsamTourStep :target=\"el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"btnRef?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t</AsamTour>\n</template>\n\n<script lang=\"ts\" setup>\nimport { AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\ntype ButtonInstance = InstanceType<typeof AsamButton>;\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\n\nconst el = () => document.querySelector<HTMLElement>('#btn2');\nconst btnRef = ref<ButtonInstance>();\n\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "ff709d27cc3947c21566336597241666505deaf2e697b705a63fc3eecc907ce2",
									"notice": {
										"id": "d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d",
										"url": "/licenses/source-notices/d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt",
										"licenseFilename": "LICENSE-d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/target.vue",
											"sourceSha256": "f440934af7ab755cf8e94ff042dffd55f8f217279af31e5eaa61a43984189227",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/ep2147-target/js/Demo.vue",
									"sha256": "1e2c0003277d965655f52e8002d529c2a18932dd404d1a2f93e77c30b8e3b48d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt\n-->\n<template>\n\t<AsamButton type=\"default\" @click=\"open = true\">开始导览</AsamButton>\n\n\t<AsamDivider />\n\n\t<AsamSpace>\n\t\t<span id=\"btn1\"><AsamButton type=\"default\">上传</AsamButton></span>\n\t\t<span id=\"btn2\"><AsamButton type=\"default\">保存</AsamButton></span>\n\t\t<AsamButton type=\"default\" ref=\"btnRef\" :icon=\"MoreFilled\" />\n\t</AsamSpace>\n\n\t<AsamTour v-model=\"open\">\n\t\t<AsamTourStep target=\"#btn1\" title=\"上传文件\" description=\"将文件放在这里。\" />\n\t\t<AsamTourStep :target=\"el\" title=\"保存\" description=\"保存修改\" />\n\t\t<AsamTourStep :target=\"btnRef?.$el\" title=\"其他操作\" description=\"点击查看其他内容\" />\n\t</AsamTour>\n</template>\n\n<script setup>\nimport { AsamButton, AsamDivider, AsamSpace, AsamTour, AsamTourStep } from '@asam-ui/ui';\nimport { ref } from 'vue';\nimport { MoreFilled } from '@asam-ui/icons-vue';\nconst el = () => document.querySelector('#btn2');\nconst btnRef = ref();\nconst open = ref(false);\n</script>\n",
									"originalSourceSha256": "91be29b9a4c27bcb7894323dec36ee7bc871f8add07c151d4d65ad99d5d85faa",
									"notice": {
										"id": "d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d",
										"url": "/licenses/source-notices/d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt",
										"licenseFilename": "LICENSE-d05023b2fb4ee45b3059ee6e66e9cba365f243ca896806b413c662fec5c3bc3d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/tour/target.vue",
											"sourceSha256": "f440934af7ab755cf8e94ff042dffd55f8f217279af31e5eaa61a43984189227",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "step-composition",
					"title": "步骤组合与原生限制",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/step-composition/ts/Demo.vue",
									"sha256": "b84d91a1ac140d44126ba4efe38cbdc93e74679d64d221afef3d05f4c6549cca",
									"source": "<template>\n\t<div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"begin('fragment')\"\n\t\t\t>查看 Fragment 两步</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"begin('functional')\"\n\t\t\t>查看纯函数两步</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"begin('stateful')\"\n\t\t\t>查看有状态包装限制</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\">Fragment 和无 props 纯函数各有两步；有状态包装模式只枚举直接声明的一步。</p>\n\t<AsamTour :key=\"mode\" v-model=\"open\" @finish=\"finished++\">\n\t\t<template v-if=\"mode === 'fragment'\">\n\t\t\t<AsamTourStep\n\t\t\t\ttitle=\"Fragment 第一步\"\n\t\t\t\tdescription=\"直接声明的步骤可以放在 Fragment 中。\"\n\t\t\t/>\n\t\t\t<AsamTourStep title=\"Fragment 第二步\" description=\"两步都会计入 total。\" />\n\t\t</template>\n\t\t<FunctionalSteps v-else-if=\"mode === 'functional'\" />\n\t\t<template v-else>\n\t\t\t<StatefulStep />\n\t\t\t<AsamTourStep\n\t\t\t\ttitle=\"仅枚举直接步骤\"\n\t\t\t\tdescription=\"包装后的步骤没有计入 total；当前只有一步。\"\n\t\t\t/>\n\t\t</template>\n\t\t<template #indicators=\"{ current: index, total }\">\n\t\t\t<span data-tour-composition-indicator>{{ index + 1 }} / {{ total }}</span>\n\t\t</template>\n\t</AsamTour>\n\t<p class=\"example-paragraph\" role=\"status\">完成 {{ finished }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\nimport { defineComponent, h, ref } from 'vue';\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamTourStepCompositionDemo' });\ntype Mode = 'fragment' | 'functional' | 'stateful';\nconst mode = ref<Mode>('fragment');\nconst open = ref(false);\nconst finished = ref(0);\n\n// 纯函数没有 props、slots 或组件实例依赖，只返回公开步骤。\nconst FunctionalSteps = () => [\n\th(AsamTourStep, { title: '纯函数第一步', description: '无 props 的纯函数返回步骤。' }),\n\th(AsamTourStep, { title: '纯函数第二步', description: '两步都会计入 total。' })\n];\n\n// 反例：有状态包装返回步骤，但不会被原生枚举为一个步骤。\nconst StatefulStep = defineComponent({\n\tname: 'TourStatefulStep',\n\tsetup: () => () => h(AsamTourStep, { title: '不会被枚举的包装步骤' })\n});\n\nfunction begin(nextMode: Mode) {\n\tmode.value = nextMode;\n\tfinished.value = 0;\n\topen.value = true;\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/step-composition/js/Demo.vue",
									"sha256": "0ce2055521191e5c4ed4e48596fa229ad9436140bec7d48cc67d294473ed59bf",
									"source": "<template>\n\t<div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"begin('fragment')\"\n\t\t\t>查看 Fragment 两步</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"begin('functional')\"\n\t\t\t>查看纯函数两步</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"begin('stateful')\"\n\t\t\t>查看有状态包装限制</AsamButton\n\t\t>\n\t</div>\n\t<p class=\"example-paragraph\">Fragment 和无 props 纯函数各有两步；有状态包装模式只枚举直接声明的一步。</p>\n\t<AsamTour :key=\"mode\" v-model=\"open\" @finish=\"finished++\">\n\t\t<template v-if=\"mode === 'fragment'\">\n\t\t\t<AsamTourStep\n\t\t\t\ttitle=\"Fragment 第一步\"\n\t\t\t\tdescription=\"直接声明的步骤可以放在 Fragment 中。\"\n\t\t\t/>\n\t\t\t<AsamTourStep title=\"Fragment 第二步\" description=\"两步都会计入 total。\" />\n\t\t</template>\n\t\t<FunctionalSteps v-else-if=\"mode === 'functional'\" />\n\t\t<template v-else>\n\t\t\t<StatefulStep />\n\t\t\t<AsamTourStep\n\t\t\t\ttitle=\"仅枚举直接步骤\"\n\t\t\t\tdescription=\"包装后的步骤没有计入 total；当前只有一步。\"\n\t\t\t/>\n\t\t</template>\n\t\t<template #indicators=\"{ current: index, total }\">\n\t\t\t<span data-tour-composition-indicator>{{ index + 1 }} / {{ total }}</span>\n\t\t</template>\n\t</AsamTour>\n\t<p class=\"example-paragraph\" role=\"status\">完成 {{ finished }} 次</p>\n</template>\n\n<script setup>\nimport { defineComponent, h, ref } from 'vue';\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamTourStepCompositionDemo' });\nconst mode = ref('fragment');\nconst open = ref(false);\nconst finished = ref(0);\n\n// 纯函数没有 props、slots 或组件实例依赖，只返回公开步骤。\nconst FunctionalSteps = () => [\n\th(AsamTourStep, { title: '纯函数第一步', description: '无 props 的纯函数返回步骤。' }),\n\th(AsamTourStep, { title: '纯函数第二步', description: '两步都会计入 total。' })\n];\n\n// 反例：有状态包装返回步骤，但不会被原生枚举为一个步骤。\nconst StatefulStep = defineComponent({\n\tname: 'TourStatefulStep',\n\tsetup: () => () => h(AsamTourStep, { title: '不会被枚举的包装步骤' })\n});\n\nfunction begin(nextMode) {\n\tmode.value = nextMode;\n\tfinished.value = 0;\n\topen.value = true;\n}\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/popup-container/ts/Demo.vue",
									"sha256": "0e8f8482230bdc95f37a3af10f1641cc5945be48080688636a1d344269f9b3aa",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">开始导览</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"target\" native-type=\"button\">导览目标</AsamButton>\n\t\t<AsamTour\n\t\t\tv-model=\"open\"\n\t\t\tv-model:current=\"current\"\n\t\t\t@finish=\"finished++\"\n\t\t\t:append-to=\"globalPopup ? 'body' : mountTarget || 'body'\"\n\t\t>\n\t\t\t<AsamTourStep :target=\"target?.ref\" title=\"第一步\" description=\"这里展示目标说明。\" />\n\t\t\t<AsamTourStep title=\"完成导览\">\n\t\t\t\t<template #header>下一步操作</template>\n\t\t\t\t<p class=\"example-paragraph\">没有目标的步骤使用居中展示。</p>\n\t\t\t</AsamTourStep>\n\t\t\t<template #indicators=\"{ current: index, total }\"\n\t\t\t\t>{{ index + 1 }} / {{ total }}</template\n\t\t\t>\n\t\t</AsamTour>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTourBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, type AsamButtonExpose, AsamTour, AsamTourStep } from '@asam-ui/ui';\nconst open = ref(false);\nconst current = ref(0);\nconst finished = ref(0);\nconst target = ref<AsamButtonExpose>();\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTour/popup-container/js/Demo.vue",
									"sha256": "2cbfacf1e9e3121ba5120755533f5565253fd9c6621f637f7ae435b8f4967b9b",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">开始导览</AsamButton>\n\t\t<AsamButton type=\"default\" ref=\"target\" native-type=\"button\">导览目标</AsamButton>\n\t\t<AsamTour\n\t\t\tv-model=\"open\"\n\t\t\tv-model:current=\"current\"\n\t\t\t@finish=\"finished++\"\n\t\t\t:append-to=\"globalPopup ? 'body' : mountTarget || 'body'\"\n\t\t>\n\t\t\t<AsamTourStep :target=\"target?.ref\" title=\"第一步\" description=\"这里展示目标说明。\" />\n\t\t\t<AsamTourStep title=\"完成导览\">\n\t\t\t\t<template #header>下一步操作</template>\n\t\t\t\t<p class=\"example-paragraph\">没有目标的步骤使用居中展示。</p>\n\t\t\t</AsamTourStep>\n\t\t\t<template #indicators=\"{ current: index, total }\"\n\t\t\t\t>{{ index + 1 }} / {{ total }}</template\n\t\t\t>\n\t\t</AsamTour>\n\t\t<p class=\"example-paragraph\" role=\"status\">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTourBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\nconst open = ref(false);\nconst current = ref(0);\nconst finished = ref(0);\nconst target = ref();\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 340px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTourStep",
			"documentation": "/component-AsamTourStep.html",
			"demos": [
				{
					"id": "basic",
					"title": "步骤内容与局部目标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTourStep/basic/ts/Demo.vue",
									"sha256": "64283aed9a97f0acba729fa752720314c498ad4833f94444d59c94f637bc9cc0",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">开始导览</AsamButton>\n\t<AsamButton type=\"default\" ref=\"target\" native-type=\"button\">导览目标</AsamButton>\n\t<AsamTour v-model=\"open\" v-model:current=\"current\" @finish=\"finished++\">\n\t\t<AsamTourStep :target=\"target?.ref\" title=\"第一步\" description=\"这里展示目标说明。\" />\n\t\t<AsamTourStep title=\"完成导览\">\n\t\t\t<template #header>下一步操作</template>\n\t\t\t<p class=\"example-paragraph\">没有目标的步骤使用居中展示。</p>\n\t\t</AsamTourStep>\n\t\t<template #indicators=\"{ current: index, total }\">{{ index + 1 }} / {{ total }}</template>\n\t</AsamTour>\n\t<p class=\"example-paragraph\" role=\"status\">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTourStepBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, type AsamButtonExpose, AsamTour, AsamTourStep } from '@asam-ui/ui';\nconst open = ref(false);\nconst current = ref(0);\nconst finished = ref(0);\nconst target = ref<AsamButtonExpose>();\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTourStep/basic/js/Demo.vue",
									"sha256": "0db8fa452ab582f7257cba1bd9525727553013f50aff94e566dca222f1e7816c",
									"source": "<template>\n\t<AsamButton type=\"default\" native-type=\"button\" @click=\"open = true\">开始导览</AsamButton>\n\t<AsamButton type=\"default\" ref=\"target\" native-type=\"button\">导览目标</AsamButton>\n\t<AsamTour v-model=\"open\" v-model:current=\"current\" @finish=\"finished++\">\n\t\t<AsamTourStep :target=\"target?.ref\" title=\"第一步\" description=\"这里展示目标说明。\" />\n\t\t<AsamTourStep title=\"完成导览\">\n\t\t\t<template #header>下一步操作</template>\n\t\t\t<p class=\"example-paragraph\">没有目标的步骤使用居中展示。</p>\n\t\t</AsamTourStep>\n\t\t<template #indicators=\"{ current: index, total }\">{{ index + 1 }} / {{ total }}</template>\n\t</AsamTour>\n\t<p class=\"example-paragraph\" role=\"status\">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTourStepBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';\nconst open = ref(false);\nconst current = ref(0);\nconst finished = ref(0);\nconst target = ref();\n</script>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamMousewheel",
			"documentation": "/component-AsamMousewheel.html",
			"demos": [
				{
					"id": "basic",
					"title": "读取归一化滚轮位移",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMousewheel/basic/ts/Demo.vue",
									"sha256": "a1468b425601c8465fd4610ba514b1b34bbeb966612ef5fca661ef024d53a43c",
									"source": "<template>\n\t<div v-asam-mousewheel=\"track\" class=\"panel\">\n\t\t<p class=\"example-paragraph\">在这里滚动滚轮</p>\n\t\t<p class=\"example-paragraph\" role=\"status\">累计垂直位移 {{ pixels }} px</p>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamMousewheelBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMousewheel as vAsamMousewheel } from '@asam-ui/ui';\nimport type { AsamMousewheelBinding } from '@asam-ui/ui';\nconst pixels = ref(0);\nconst track: AsamMousewheelBinding = (_event, normalized) => {\n\tpixels.value += normalized.pixelY;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamMousewheel/basic/js/Demo.vue",
									"sha256": "b2fa8d5e084f9403ad9f35478cd9a4f424da5ea0e273a35dda5f9f7f7bafd3d3",
									"source": "<template>\n\t<div v-asam-mousewheel=\"track\" class=\"panel\">\n\t\t<p class=\"example-paragraph\">在这里滚动滚轮</p>\n\t\t<p class=\"example-paragraph\" role=\"status\">累计垂直位移 {{ pixels }} px</p>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamMousewheelBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamMousewheel as vAsamMousewheel } from '@asam-ui/ui';\nconst pixels = ref(0);\nconst track = (_event, normalized) => {\n\tpixels.value += normalized.pixelY;\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTrapFocus",
			"documentation": "/component-AsamTrapFocus.html",
			"demos": [
				{
					"id": "basic",
					"title": "挂载焦点循环并释放",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTrapFocus/basic/ts/Demo.vue",
									"sha256": "f8fa0780c9c7254435bac8026787eac655881db77af2767f6da20c5534181c2a",
									"source": "<template>\n\t<AsamButton type=\"default\" ref=\"opener\" native-type=\"button\" @click=\"enable\"\n\t\t>启用焦点循环</AsamButton\n\t>\n\t<div\n\t\tv-if=\"open\"\n\t\tv-asam-trap-focus\n\t\tv-bind=\"{ 'data-focus-generation': generation, class: 'panel' }\"\n\t>\n\t\t<AsamButton type=\"default\" ref=\"first\" native-type=\"button\">第一个按钮</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disable\">结束焦点循环</AsamButton>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTrapFocusBasicDemo' });\nimport { ref, nextTick } from 'vue';\nimport { AsamButton, type AsamButtonExpose, AsamTrapFocus as vAsamTrapFocus } from '@asam-ui/ui';\nconst open = ref(false);\nconst generation = ref(0);\nconst first = ref<AsamButtonExpose>();\nconst opener = ref<AsamButtonExpose>();\nconst enable = async () => {\n\topen.value = true;\n\tawait nextTick();\n\tgeneration.value++;\n\tawait nextTick();\n\tfirst.value?.ref?.focus();\n};\nconst disable = async () => {\n\topen.value = false;\n\tawait nextTick();\n\topener.value?.ref?.focus();\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTrapFocus/basic/js/Demo.vue",
									"sha256": "d8b82824de3173b166a222008714cb6cf5ed2f8b526e15e75b62171f1377b148",
									"source": "<template>\n\t<AsamButton type=\"default\" ref=\"opener\" native-type=\"button\" @click=\"enable\"\n\t\t>启用焦点循环</AsamButton\n\t>\n\t<div\n\t\tv-if=\"open\"\n\t\tv-asam-trap-focus\n\t\tv-bind=\"{ 'data-focus-generation': generation, class: 'panel' }\"\n\t>\n\t\t<AsamButton type=\"default\" ref=\"first\" native-type=\"button\">第一个按钮</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disable\">结束焦点循环</AsamButton>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTrapFocusBasicDemo' });\nimport { ref, nextTick } from 'vue';\nimport { AsamButton, AsamTrapFocus as vAsamTrapFocus } from '@asam-ui/ui';\nconst open = ref(false);\nconst generation = ref(0);\nconst first = ref();\nconst opener = ref();\nconst enable = async () => {\n\topen.value = true;\n\tawait nextTick();\n\tgeneration.value++;\n\tawait nextTick();\n\tfirst.value?.ref?.focus();\n};\nconst disable = async () => {\n\topen.value = false;\n\tawait nextTick();\n\topener.value?.ref?.focus();\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "vAsamLoading",
			"documentation": "/component-vAsamLoading.html",
			"demos": [
				{
					"id": "basic",
					"title": "状态、动态文字与卸载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/vAsamLoading/basic/ts/Demo.vue",
									"sha256": "1d9111eb71bb3c13fc96953ebdbb930cbc5b35bd5ebb0aa7a0ed7cf7e2a4a347",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载</AsamButton\n\t\t>\n\t\t<label>\n\t\t\t<span>提示文字</span>\n\t\t\t<AsamInput v-model=\"text\" />\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mounted = !mounted\"\n\t\t\t>卸载/恢复区域</AsamButton\n\t\t>\n\t</div>\n\t<div\n\t\tv-if=\"mounted\"\n\t\tv-asam-loading=\"loading\"\n\t\tv-bind=\"{ 'element-loading-text': text, class: 'loading-target' }\"\n\t>\n\t\t<p class=\"example-paragraph\">局部内容区域</p>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '加载中' : '加载已结束' }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'vAsamLoadingBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton, vAsamLoading as vAsamLoading } from '@asam-ui/ui';\nconst loading = ref(false);\nconst text = ref('正在加载');\nconst mounted = ref(true);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tmin-height: 140px;\n\tposition: relative;\n\tpadding: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/vAsamLoading/basic/js/Demo.vue",
									"sha256": "6f28a3b3e75a769b6121382115474cde4c35c163a47dcf9222d6dddbcaf40d14",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"loading = !loading\"\n\t\t\t>切换加载</AsamButton\n\t\t>\n\t\t<label>\n\t\t\t<span>提示文字</span>\n\t\t\t<AsamInput v-model=\"text\" />\n\t\t</label>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"mounted = !mounted\"\n\t\t\t>卸载/恢复区域</AsamButton\n\t\t>\n\t</div>\n\t<div\n\t\tv-if=\"mounted\"\n\t\tv-asam-loading=\"loading\"\n\t\tv-bind=\"{ 'element-loading-text': text, class: 'loading-target' }\"\n\t>\n\t\t<p class=\"example-paragraph\">局部内容区域</p>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">{{ loading ? '加载中' : '加载已结束' }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'vAsamLoadingBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamInput, AsamButton, vAsamLoading as vAsamLoading } from '@asam-ui/ui';\nconst loading = ref(false);\nconst text = ref('正在加载');\nconst mounted = ref(true);\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n\n.loading-target {\n\tmin-height: 140px;\n\tposition: relative;\n\tpadding: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "vAsamRepeatClick",
			"documentation": "/component-vAsamRepeatClick.html",
			"demos": [
				{
					"id": "basic",
					"title": "延迟重复与数量上限",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/vAsamRepeatClick/basic/ts/Demo.vue",
									"sha256": "fe880a2505404f6c145778e5cc62a1a7491186cd7ba1f30a9333a34acb28b9e9",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" v-asam-repeat-click=\"options\" native-type=\"button\"\n\t\t\t>按住增加（最多20）</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count = 0\">重置计数</AsamButton>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">数量 {{ count }}</p>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'vAsamRepeatClickBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, vAsamRepeatClick } from '@asam-ui/ui';\nimport type { AsamRepeatClickOptions } from '@asam-ui/ui';\nconst count = ref(0);\nconst options: AsamRepeatClickOptions = {\n\tdelay: 400,\n\tinterval: 120,\n\thandler: () => {\n\t\tcount.value = Math.min(count.value + 1, 20);\n\t}\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/vAsamRepeatClick/basic/js/Demo.vue",
									"sha256": "aa2b8e42d7dd4d6bd9e30b4abfe15ad3452b79b1c6d17424776f9ae1b419de63",
									"source": "<template>\n\t<div class=\"actions\">\n\t\t<AsamButton type=\"default\" v-asam-repeat-click=\"options\" native-type=\"button\"\n\t\t\t>按住增加（最多20）</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"count = 0\">重置计数</AsamButton>\n\t</div>\n\t<p class=\"example-paragraph\" role=\"status\">数量 {{ count }}</p>\n</template>\n\n<script setup>\ndefineOptions({ name: 'vAsamRepeatClickBasicDemo' });\nimport { ref } from 'vue';\nimport { AsamButton, vAsamRepeatClick } from '@asam-ui/ui';\nconst count = ref(0);\nconst options = {\n\tdelay: 400,\n\tinterval: 120,\n\thandler: () => {\n\t\tcount.value = Math.min(count.value + 1, 20);\n\t}\n};\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n\talign-items: center;\n}\n\n.panel {\n\tpadding: var(--asam-space-lg);\n\tborder: 1px solid var(--asam-color-border);\n\tborder-radius: var(--asam-radius-control);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRadioItem",
			"documentation": "/component-AsamRadioItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioItem/basic/ts/Demo.vue",
									"sha256": "0e2b13085b22959eaa8b5a28d333248ddb8db42c34b16d8061b719e0bea17959",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioItemBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioItem/basic/js/Demo.vue",
									"sha256": "6d4d20009045d7a3f0f87637680d16bc38760f97ffbf7eed9d9048741963f35c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioItemBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "禁用与组内覆盖",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioItem/states/ts/Demo.vue",
									"sha256": "fdd324173f28b251a1e62d0741ef125a53ee3780848089d80fad43f7979a82e4",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\" size=\"big\" :disabled=\"disabled\">\n\t\t\t<AsamRadioItem value=\"design\" border> 继承 big </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\" size=\"small\" border> 覆盖 small </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换组禁用 </AsamButton>\n\t\t<output>选中：{{ value }}；组禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioItemStatesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamButton } from '@asam-ui/ui';\nconst value = ref('design');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioItem/states/js/Demo.vue",
									"sha256": "7de2f46b850deee380ced28677737aef3a684a4c84deabc14da2f73663e87a87",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\" size=\"big\" :disabled=\"disabled\">\n\t\t\t<AsamRadioItem value=\"design\" border> 继承 big </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\" size=\"small\" border> 覆盖 small </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换组禁用 </AsamButton>\n\t\t<output>选中：{{ value }}；组禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioItemStatesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamButton } from '@asam-ui/ui';\nconst value = ref('design');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioItem/sizes/ts/Demo.vue",
									"sha256": "b9cfff27b4ca87fc854397d4b8c5d32889aef8a4960e7018f88d8b1bb192ff52",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioItemSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioItem/sizes/js/Demo.vue",
									"sha256": "0b68f891fc897f9698b479305a0d119dd76308554a18da5e2e654ca11993c75b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioItemSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRadioButton",
			"documentation": "/component-AsamRadioButton.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioButton/basic/ts/Demo.vue",
									"sha256": "aed94c80ad8aaf4c56f7ef4cb0143b35a69684260fb73710d497264cca67b467",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioButtonBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioButton } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioButton/basic/js/Demo.vue",
									"sha256": "f2169da56393b0017f598e890f3c7ab8ae4c6a88f8e4b2da7596b507ad4f6930",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioButtonBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioButton } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "禁用与组内覆盖",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioButton/states/ts/Demo.vue",
									"sha256": "a2328d743be12150ced89fddce4754fbdb9f1be34088194facc73b594f491aa5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\" size=\"big\" :disabled=\"disabled\">\n\t\t\t<AsamRadioButton value=\"design\"> 继承 big </AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"dev\" size=\"small\"> 覆盖 small </AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换组禁用 </AsamButton>\n\t\t<output>选中：{{ value }}；组禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioButtonStatesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioButton, AsamButton } from '@asam-ui/ui';\nconst value = ref('design');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioButton/states/js/Demo.vue",
									"sha256": "45b52ca7094b4e6f3b831854e95c397135913df9c8372e09c793be3bd654494f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\" size=\"big\" :disabled=\"disabled\">\n\t\t\t<AsamRadioButton value=\"design\"> 继承 big </AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"dev\" size=\"small\"> 覆盖 small </AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换组禁用 </AsamButton>\n\t\t<output>选中：{{ value }}；组禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioButtonStatesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioButton, AsamButton } from '@asam-ui/ui';\nconst value = ref('design');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioButton/sizes/ts/Demo.vue",
									"sha256": "96b43190a741ab3763e3ae81dedb8d4f69bd3e41994b5b001bc9ccd9d20cc050",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioButtonSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioButton, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioButton/sizes/js/Demo.vue",
									"sha256": "201620979fe7bc2a7a5d972d1d3f8365d3527936bd60a28663931aff73a97fab",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t\t\t<AsamRadioButton value=\"design\"> 设计 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"dev\"> 开发 </AsamRadioButton>\n\t\t\t\t\t<AsamRadioButton value=\"off\" disabled> 停用 </AsamRadioButton>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioButtonSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioButton, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRadioGroup",
			"documentation": "/component-AsamRadioGroup.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/basic/ts/Demo.vue",
									"sha256": "b8cdb0361b437a295478055a64b9b82b0db504df82201a4809a88239f10425ab",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/basic/js/Demo.vue",
									"sha256": "4c66826d961ead69fa5d44c1a23692f6e97d8e11f8ba75647cfa57a022bec13c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "禁用与组内覆盖",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/states/ts/Demo.vue",
									"sha256": "7cddfc37bf69f6f7d8aa648a51d8c8ac012808ba662414862fc72e1d2357550f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\" size=\"big\" :disabled=\"disabled\">\n\t\t\t<AsamRadioItem value=\"design\"> 继承 big </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\" size=\"small\"> 覆盖 small </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换组禁用 </AsamButton>\n\t\t<output>选中：{{ value }}；组禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioGroupStatesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamButton } from '@asam-ui/ui';\nconst value = ref('design');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/states/js/Demo.vue",
									"sha256": "5ec50eec41cea5012af82bf2bf21c43cf4667abac2789fe235ce279cefd6dc1a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup v-model=\"value\" size=\"big\" :disabled=\"disabled\">\n\t\t\t<AsamRadioItem value=\"design\"> 继承 big </AsamRadioItem>\n\t\t\t<AsamRadioItem value=\"dev\" size=\"small\"> 覆盖 small </AsamRadioItem>\n\t\t</AsamRadioGroup>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换组禁用 </AsamButton>\n\t\t<output>选中：{{ value }}；组禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioGroupStatesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamButton } from '@asam-ui/ui';\nconst value = ref('design');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/sizes/ts/Demo.vue",
									"sha256": "406e4cdcabc652316233f94b8b2228121dbd4a197e475a284f7682b3a76eb22e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioGroupSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/sizes/js/Demo.vue",
									"sha256": "dabcd6cf0a23d9e1215b513eee6b424ac581a909e85a24729e959ae6277c03dc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadioGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadioGroup v-model=\"value\">\n\t\t\t\t\t<AsamRadioItem value=\"design\"> 设计 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"dev\"> 开发 </AsamRadioItem>\n\t\t\t\t\t<AsamRadioItem value=\"off\" disabled> 停用 </AsamRadioItem>\n\t\t\t\t</AsamRadioGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioGroupSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadioGroup, AsamRadioItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "mapping",
					"title": "原始字段映射与按钮选项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/mapping/ts/Demo.vue",
									"sha256": "f9ae70b40d07d2dbc8b2aa8af2aca0c8079e8796cc42f268775966dd763b9c5b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive' }\"\n\t\t\ttype=\"button\"\n\t\t\tname=\"mapped-radio\"\n\t\t\taria-label=\"自定义字段单选\"\n\t\t/>\n\t\t<output>当前 code：{{ value }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamRadioGroup } from '@asam-ui/ui';\nconst value = ref('design');\nconst options = [\n\t{ code: 'design', title: '设计' },\n\t{ code: 'develop', title: '开发' },\n\t{ code: 'off', title: '停用', inactive: true }\n];\ndefineOptions({ name: 'AsamRadioGroupMappingDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadioGroup/mapping/js/Demo.vue",
									"sha256": "3d095ccad8dfea03aaf31c0f5d0c9c80e677d3c93ead4514180f84486c0092ce",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadioGroup\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive' }\"\n\t\t\ttype=\"button\"\n\t\t\tname=\"mapped-radio\"\n\t\t\taria-label=\"自定义字段单选\"\n\t\t/>\n\t\t<output>当前 code：{{ value }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamRadioGroup } from '@asam-ui/ui';\nconst value = ref('design');\nconst options = [\n\t{ code: 'design', title: '设计' },\n\t{ code: 'develop', title: '开发' },\n\t{ code: 'off', title: '停用', inactive: true }\n];\ndefineOptions({ name: 'AsamRadioGroupMappingDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCheckboxItem",
			"documentation": "/component-AsamCheckboxItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/basic/ts/Demo.vue",
									"sha256": "5b687df3e9c691539d43385a4f71b6ac385ae5d9846b2c2a1ba1472c58747ce0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxItemBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/basic/js/Demo.vue",
									"sha256": "28a1200d83bd5d21cde0dadd0ce7bad2a9c06f0e3e7230459568f28a654bcbbf",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxItemBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "选择限制与独立状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/states/ts/Demo.vue",
									"sha256": "1cbd2ef3b7347e975a349b40fe710ca270fe2c04c3a5b3556309598bd776c4c6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\" :min=\"1\" :max=\"2\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"ops\"> 运维 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem v-model=\"checked\" :indeterminate=\"!checked\">\n\t\t\t独立勾选项\n\t\t</AsamCheckboxItem>\n\t\t<output>集合：{{ value }}；独立：{{ checked }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxItemStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref<string[]>(['design']);\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/states/js/Demo.vue",
									"sha256": "10fcc11bbdeed231314e62d4b0ab3998174090f9d369d1229cedcdf97f466428",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\" :min=\"1\" :max=\"2\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"ops\"> 运维 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem v-model=\"checked\" :indeterminate=\"!checked\">\n\t\t\t独立勾选项\n\t\t</AsamCheckboxItem>\n\t\t<output>集合：{{ value }}；独立：{{ checked }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxItemStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref(['design']);\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/sizes/ts/Demo.vue",
									"sha256": "851337c93585b13f9a00af8a57e6897c4be3f99ad6ed7e477f9c830e65939067",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxItemSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst value = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/sizes/js/Demo.vue",
									"sha256": "e47822ffee55af4a936baf63843981ff81cf8b40fb634396c0a902ba8cf23830",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxItemSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst value = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "check-all",
					"title": "全选、半选、边框与扩展值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/check-all/ts/Demo.vue",
									"sha256": "cff9aee5c6c15550874784e5a3a09f60f3806503448d1bf375f4aa5f8752e7f1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\t:model-value=\"all\"\n\t\t\t:indeterminate=\"indeterminate\"\n\t\t\tborder\n\t\t\t@change=\"toggleAll\"\n\t\t\t>全选</AsamCheckboxItem\n\t\t>\n\t\t<AsamCheckboxGroup v-model=\"selected\" aria-label=\"团队集合\">\n\t\t\t<AsamCheckboxItem v-for=\"item in options\" :key=\"item\" :value=\"item\" border>{{\n\t\t\t\titem\n\t\t\t}}</AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"state\"\n\t\t\ttrue-value=\"enabled\"\n\t\t\tfalse-value=\"disabled\"\n\t\t\tname=\"independent-state\"\n\t\t\t>字符串状态</AsamCheckboxItem\n\t\t>\n\t\t<output>团队：{{ selected }}；独立值：{{ state }}；半选：{{ indeterminate }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamCheckboxItem, AsamCheckboxGroup } from '@asam-ui/ui';\nconst options = ['设计', '开发', '运维'];\nconst selected = ref<string[]>(['设计']);\nconst state = ref('disabled');\nconst all = computed(() => selected.value.length === options.length);\nconst indeterminate = computed(\n\t() => selected.value.length > 0 && selected.value.length < options.length\n);\nconst toggleAll = (value: string | number | boolean) => {\n\tselected.value = value === true ? [...options] : [];\n};\ndefineOptions({ name: 'AsamCheckboxItemCheckAllDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxItem/check-all/js/Demo.vue",
									"sha256": "b5bfd57535fb943827557567ddda6b5e91bebd433ad8d2a08980d7833f87078e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxItem\n\t\t\t:model-value=\"all\"\n\t\t\t:indeterminate=\"indeterminate\"\n\t\t\tborder\n\t\t\t@change=\"toggleAll\"\n\t\t\t>全选</AsamCheckboxItem\n\t\t>\n\t\t<AsamCheckboxGroup v-model=\"selected\" aria-label=\"团队集合\">\n\t\t\t<AsamCheckboxItem v-for=\"item in options\" :key=\"item\" :value=\"item\" border>{{\n\t\t\t\titem\n\t\t\t}}</AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem\n\t\t\tv-model=\"state\"\n\t\t\ttrue-value=\"enabled\"\n\t\t\tfalse-value=\"disabled\"\n\t\t\tname=\"independent-state\"\n\t\t\t>字符串状态</AsamCheckboxItem\n\t\t>\n\t\t<output>团队：{{ selected }}；独立值：{{ state }}；半选：{{ indeterminate }}</output>\n\t</div>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamCheckboxItem, AsamCheckboxGroup } from '@asam-ui/ui';\nconst options = ['设计', '开发', '运维'];\nconst selected = ref(['设计']);\nconst state = ref('disabled');\nconst all = computed(() => selected.value.length === options.length);\nconst indeterminate = computed(\n\t() => selected.value.length > 0 && selected.value.length < options.length\n);\nconst toggleAll = (value) => {\n\tselected.value = value === true ? [...options] : [];\n};\ndefineOptions({ name: 'AsamCheckboxItemCheckAllDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCheckboxButton",
			"documentation": "/component-AsamCheckboxButton.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxButton/basic/ts/Demo.vue",
									"sha256": "4ded7114c07f99d80581a0b1913601cb5a5b36c047c6dcb9f8ff9c6fd66da14c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t</AsamCheckboxGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxButtonBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxButton } from '@asam-ui/ui';\nconst value = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxButton/basic/js/Demo.vue",
									"sha256": "fcd2122773458ff1e7e38823455b6758e840508dcd90f16542ddda58063ac25a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t</AsamCheckboxGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxButtonBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxButton } from '@asam-ui/ui';\nconst value = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "选择限制与独立状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxButton/states/ts/Demo.vue",
									"sha256": "a2e0830682302369a638eebfa222cf235c2c4a56c7381253b3d611857b78d2b4",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\" :min=\"1\" :max=\"2\">\n\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"ops\"> 运维 </AsamCheckboxButton>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem v-model=\"checked\" :indeterminate=\"!checked\">\n\t\t\t独立勾选项\n\t\t</AsamCheckboxItem>\n\t\t<output>集合：{{ value }}；独立：{{ checked }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxButtonStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxButton, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref<string[]>(['design']);\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxButton/states/js/Demo.vue",
									"sha256": "56e2e8b8fd9d90c23ad6b4bb4c228340f9f44b37ba355a5c5e40362434b5cb94",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\" :min=\"1\" :max=\"2\">\n\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t<AsamCheckboxButton value=\"ops\"> 运维 </AsamCheckboxButton>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem v-model=\"checked\" :indeterminate=\"!checked\">\n\t\t\t独立勾选项\n\t\t</AsamCheckboxItem>\n\t\t<output>集合：{{ value }}；独立：{{ checked }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxButtonStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxButton, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref(['design']);\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxButton/sizes/ts/Demo.vue",
									"sha256": "722f22918308d139b512237cb3419522d41d71cf31ad718c69a9fc55215d5ec9",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxButtonSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxButton, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst value = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxButton/sizes/js/Demo.vue",
									"sha256": "70ae33da15033d10372213d32658ef45063f2fe66f45c8fc9e44906e605a6b59",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t\t\t<AsamCheckboxButton value=\"design\"> 设计 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"dev\"> 开发 </AsamCheckboxButton>\n\t\t\t\t\t<AsamCheckboxButton value=\"off\" disabled> 停用 </AsamCheckboxButton>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxButtonSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxButton, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst value = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCheckboxGroup",
			"documentation": "/component-AsamCheckboxGroup.html",
			"demos": [
				{
					"id": "basic",
					"title": "组合与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/basic/ts/Demo.vue",
									"sha256": "eff4b25219261a4737c86b3f4ceca707cc5d17e5b026cb923eaf4edab92b3279",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/basic/js/Demo.vue",
									"sha256": "be37fa9ca05bca8eecf836efa927054e9d77b01f8f5b719171539ebc12e9c08b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<output>选择：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "states",
					"title": "选择限制与独立状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/states/ts/Demo.vue",
									"sha256": "d27f396bb399b6bd62114472704fadf34b4a1dd6c0bee9e78df83f2c4f2c7cc7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\" :min=\"1\" :max=\"2\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"ops\"> 运维 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem v-model=\"checked\" :indeterminate=\"!checked\">\n\t\t\t独立勾选项\n\t\t</AsamCheckboxItem>\n\t\t<output>集合：{{ value }}；独立：{{ checked }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxGroupStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref<string[]>(['design']);\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/states/js/Demo.vue",
									"sha256": "bdcd474c5ba2d0838aea495b7d21af2e50d63977efd933c6542ce2af2374939d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup v-model=\"value\" :min=\"1\" :max=\"2\">\n\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem value=\"ops\"> 运维 </AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<AsamCheckboxItem v-model=\"checked\" :indeterminate=\"!checked\">\n\t\t\t独立勾选项\n\t\t</AsamCheckboxItem>\n\t\t<output>集合：{{ value }}；独立：{{ checked }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxGroupStatesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst value = ref(['design']);\nconst checked = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/sizes/ts/Demo.vue",
									"sha256": "6dcdebbff6b8bfd34ea6e931fc17e207b65b4eab73097998901068f5aaae2a79",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxGroupSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst value = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/sizes/js/Demo.vue",
									"sha256": "429b20dc58cf330c16bfe51410948efe054f452e82b4e4cf19968f220c223efa",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"large\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"big\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"default\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\" size=\"small\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckboxGroup v-model=\"value\">\n\t\t\t\t\t<AsamCheckboxItem value=\"design\"> 设计 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"dev\"> 开发 </AsamCheckboxItem>\n\t\t\t\t\t<AsamCheckboxItem value=\"off\" disabled> 停用 </AsamCheckboxItem>\n\t\t\t\t</AsamCheckboxGroup>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxGroupSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup, AsamCheckboxItem, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst value = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "mapping",
					"title": "原始字段映射与数量边界",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/mapping/ts/Demo.vue",
									"sha256": "2e4670e06381d8dc74455ab0b5cb9f3427932af28e30b8030f8e29727581baf0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup\n\t\t\tv-model=\"values\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive' }\"\n\t\t\ttype=\"button\"\n\t\t\t:min=\"1\"\n\t\t\t:max=\"2\"\n\t\t\taria-label=\"自定义字段多选\"\n\t\t/>\n\t\t<output>当前 codes：{{ values }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup } from '@asam-ui/ui';\nconst values = ref<string[]>(['design']);\nconst options = [\n\t{ code: 'design', title: '设计' },\n\t{ code: 'develop', title: '开发' },\n\t{ code: 'off', title: '停用', inactive: true }\n];\ndefineOptions({ name: 'AsamCheckboxGroupMappingDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckboxGroup/mapping/js/Demo.vue",
									"sha256": "5196b351da884dbe2a8f3114ad2ad921f648765391ce2f079ec8c5b22302e815",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckboxGroup\n\t\t\tv-model=\"values\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive' }\"\n\t\t\ttype=\"button\"\n\t\t\t:min=\"1\"\n\t\t\t:max=\"2\"\n\t\t\taria-label=\"自定义字段多选\"\n\t\t/>\n\t\t<output>当前 codes：{{ values }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxGroup } from '@asam-ui/ui';\nconst values = ref(['design']);\nconst options = [\n\t{ code: 'design', title: '设计' },\n\t{ code: 'develop', title: '开发' },\n\t{ code: 'off', title: '停用', inactive: true }\n];\ndefineOptions({ name: 'AsamCheckboxGroupMappingDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamOptionGroup",
			"documentation": "/component-AsamOptionGroup.html",
			"demos": [
				{
					"id": "basic",
					"title": "分组与显示内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOptionGroup/basic/ts/Demo.vue",
									"sha256": "180d24627d58147a565eb87aa67251e5776aedfcd5a9e3fe734b04dc0a1415be",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tclearable: true,\n\t\t\t\tfilterable: true,\n\t\t\t\t'aria-label': '团队'\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamOptionGroup label=\"可用团队\">\n\t\t\t\t<AsamOption label=\"设计\" value=\"design\">\n\t\t\t\t\t<span> 设计团队 · 视觉 </span>\n\t\t\t\t</AsamOption>\n\t\t\t\t<AsamOption label=\"开发\" value=\"dev\">\n\t\t\t\t\t<span> 开发团队 · 工程 </span>\n\t\t\t\t</AsamOption>\n\t\t\t</AsamOptionGroup>\n\t\t\t<AsamOptionGroup label=\"停用团队\" disabled>\n\t\t\t\t<AsamOption label=\"停用\" value=\"off\" />\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>原始值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOptionGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nconst value = ref<string | null>('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOptionGroup/basic/js/Demo.vue",
									"sha256": "25bf50f90e782d9ff836008462767980dc736ef007251d800ae58b503d66446b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tclearable: true,\n\t\t\t\tfilterable: true,\n\t\t\t\t'aria-label': '团队'\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamOptionGroup label=\"可用团队\">\n\t\t\t\t<AsamOption label=\"设计\" value=\"design\">\n\t\t\t\t\t<span> 设计团队 · 视觉 </span>\n\t\t\t\t</AsamOption>\n\t\t\t\t<AsamOption label=\"开发\" value=\"dev\">\n\t\t\t\t\t<span> 开发团队 · 工程 </span>\n\t\t\t\t</AsamOption>\n\t\t\t</AsamOptionGroup>\n\t\t\t<AsamOptionGroup label=\"停用团队\" disabled>\n\t\t\t\t<AsamOption label=\"停用\" value=\"off\" />\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>原始值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOptionGroupBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "objects",
					"title": "原始对象与唯一键",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOptionGroup/objects/ts/Demo.vue",
									"sha256": "f8f4db1ad62e323a30938e5611e4ac8e5b5aba3d63db508a47b03266e6994247",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect v-model=\"value\" value-mode=\"native\" value-key=\"id\">\n\t\t\t<AsamOptionGroup label=\"对象选项\">\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"item in teams\"\n\t\t\t\t\t:key=\"item.id\"\n\t\t\t\t\tv-bind=\"{ label: item.name, value: item }\"\n\t\t\t\t/>\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>对象：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOptionGroupObjectsExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nimport { teams } from './data.js';\nconst value = ref<(typeof teams)[number] | null>(teams[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "data.ts",
									"sourcePath": "apps/website/examples/AsamOptionGroup/objects/ts/data.ts",
									"sha256": "7a054a39a10d4392341027baf3750b7a457e1f5b9af650c54285d70db2b28576",
									"source": "export const teams = [\n\t{ id: 'design', name: '设计' },\n\t{ id: 'dev', name: '开发' }\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOptionGroup/objects/js/Demo.vue",
									"sha256": "e72f316424661e11535e0a0196e019dc68e88abb7d36078792778d1792c6ace5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect v-model=\"value\" value-mode=\"native\" value-key=\"id\">\n\t\t\t<AsamOptionGroup label=\"对象选项\">\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"item in teams\"\n\t\t\t\t\t:key=\"item.id\"\n\t\t\t\t\tv-bind=\"{ label: item.name, value: item }\"\n\t\t\t\t/>\n\t\t\t</AsamOptionGroup>\n\t\t</AsamSelect>\n\t\t<output>对象：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOptionGroupObjectsExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nimport { teams } from './data.js';\nconst value = ref(teams[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "data.js",
									"sourcePath": "apps/website/examples/AsamOptionGroup/objects/js/data.js",
									"sha256": "7a054a39a10d4392341027baf3750b7a457e1f5b9af650c54285d70db2b28576",
									"source": "export const teams = [\n\t{ id: 'design', name: '设计' },\n\t{ id: 'dev', name: '开发' }\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOptionGroup/sizes/ts/Demo.vue",
									"sha256": "4eab97acaf274eb542343c716f8447d5cf5ab327ad854ac2b628208e75a03506",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelect size=\"large\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelect size=\"big\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelect size=\"default\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelect size=\"small\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelect model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamOptionGroupSizesExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamOptionGroup,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamOptionGroup/sizes/js/Demo.vue",
									"sha256": "9d28657872fe742a1c3289658296f4fa03c41c07b087c78b5605a0d741ff2d12",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelect size=\"large\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelect size=\"big\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelect size=\"default\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelect size=\"small\" model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelect model-value=\"design\" value-mode=\"native\">\n\t\t\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t\t\t</AsamOptionGroup>\n\t\t\t\t</AsamSelect>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamOptionGroupSizesExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamOptionGroup,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCascaderPanel",
			"documentation": "/component-AsamCascaderPanel.html",
			"demos": [
				{
					"id": "basic",
					"title": "路径与节点插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascaderPanel/basic/ts/Demo.vue",
									"sha256": "ddaa3de3348cd1f9ec016560605a609918fc3a3b0361ba17b044735f0222729c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascaderPanel ref=\"panel\" v-model=\"value\" :options=\"options\">\n\t\t\t<template #default=\"{ data }\">\n\t\t\t\t{{ data.label }}\n\t\t\t</template>\n\t\t\t<template #empty> 暂无节点 </template>\n\t\t</AsamCascaderPanel>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"inspect\"> 读取选中节点 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"clear\"> 清空 </AsamButton>\n\t\t</div>\n\t\t<output>路径：{{ value }}；节点：{{ selected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderPanelBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCascaderPanel, AsamButton } from '@asam-ui/ui';\nimport type { AsamCascaderPanelExpose, AsamCascaderPanelProps } from '@asam-ui/ui';\nconst panel = ref<AsamCascaderPanelExpose>();\nconst value = ref<AsamCascaderPanelProps['modelValue']>([]);\nconst options = [\n\t{\n\t\tvalue: 'team',\n\t\tlabel: '团队',\n\t\tchildren: [\n\t\t\t{ value: 'design', label: '设计' },\n\t\t\t{ value: 'dev', label: '开发' }\n\t\t]\n\t}\n];\nconst selected = ref('');\nfunction inspect() {\n\tselected.value = JSON.stringify(panel.value?.getCheckedNodes(true).map((node) => node.value));\n}\nfunction clear() {\n\tpanel.value?.clearCheckedNodes();\n\tvalue.value = [];\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascaderPanel/basic/js/Demo.vue",
									"sha256": "50b9d0246270a22b9dc759946ea048a78f044cee0648d14c77ae3107d7531c11",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascaderPanel ref=\"panel\" v-model=\"value\" :options=\"options\">\n\t\t\t<template #default=\"{ data }\">\n\t\t\t\t{{ data.label }}\n\t\t\t</template>\n\t\t\t<template #empty> 暂无节点 </template>\n\t\t</AsamCascaderPanel>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"inspect\"> 读取选中节点 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"clear\"> 清空 </AsamButton>\n\t\t</div>\n\t\t<output>路径：{{ value }}；节点：{{ selected }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderPanelBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCascaderPanel, AsamButton } from '@asam-ui/ui';\nconst panel = ref();\nconst value = ref([]);\nconst options = [\n\t{\n\t\tvalue: 'team',\n\t\tlabel: '团队',\n\t\tchildren: [\n\t\t\t{ value: 'design', label: '设计' },\n\t\t\t{ value: 'dev', label: '开发' }\n\t\t]\n\t}\n];\nconst selected = ref('');\nfunction inspect() {\n\tselected.value = JSON.stringify(panel.value?.getCheckedNodes(true).map((node) => node.value));\n}\nfunction clear() {\n\tpanel.value?.clearCheckedNodes();\n\tvalue.value = [];\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "multiple",
					"title": "多选与非叶节点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascaderPanel/multiple/ts/Demo.vue",
									"sha256": "5ca5df1d7719f05fb4dc60c6a4e61fbf30a42e948002c04934a4a36f62525e27",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascaderPanel\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ multiple: true, checkStrictly: true, emitPath: false }\"\n\t\t/>\n\t\t<output>节点值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderPanelMultipleExample' });\nimport { ref } from 'vue';\nimport { AsamCascaderPanel } from '@asam-ui/ui';\nimport type { AsamCascaderPanelProps } from '@asam-ui/ui';\nconst value = ref<AsamCascaderPanelProps['modelValue']>([]);\nconst options = [\n\t{\n\t\tvalue: 'team',\n\t\tlabel: '团队',\n\t\tchildren: [\n\t\t\t{ value: 'design', label: '设计' },\n\t\t\t{ value: 'dev', label: '开发' }\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascaderPanel/multiple/js/Demo.vue",
									"sha256": "6cd70ca9d665b5510037e79d5fcba3e10a777334bcb2c2aa70beda84a9381cb6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascaderPanel\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ multiple: true, checkStrictly: true, emitPath: false }\"\n\t\t/>\n\t\t<output>节点值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderPanelMultipleExample' });\nimport { ref } from 'vue';\nimport { AsamCascaderPanel } from '@asam-ui/ui';\nconst value = ref([]);\nconst options = [\n\t{\n\t\tvalue: 'team',\n\t\tlabel: '团队',\n\t\tchildren: [\n\t\t\t{ value: 'design', label: '设计' },\n\t\t\t{ value: 'dev', label: '开发' }\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-panel",
					"title": "级联面板",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascaderPanel/native-panel/ts/Demo.vue",
									"sha256": "f5fc5fd390d0bc5bc2a5059d84a6d3f801ed5c856f7f4c509bd9af49cac730ef",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascaderPanel :options=\"options\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascaderPanel } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/panel.vue\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "d499e25d1cd339fbdeaad0079ace7ac4a7d57fc764a0d38c29a5016ecefe5091",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascaderPanel/native-panel/js/Demo.vue",
									"sha256": "66417daec23b55509e7f426583a8e3902f8ede0516db35c4669d85700b2a60a4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascaderPanel :options=\"options\" />\n</template>\n\n<script setup>\n\n\nimport { AsamCascaderPanel } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/panel.vue\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "0b08803589a515703d341524d63e03a9eb400934019e2bfc13baf59a8e4f1851",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamColorPickerPanel",
			"documentation": "/component-AsamColorPickerPanel.html",
			"demos": [
				{
					"id": "basic",
					"title": "格式、透明度与预设",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPickerPanel/basic/ts/Demo.vue",
									"sha256": "b381bd2500458ff302a95485fff673e44aa2910e9e063f0ce6fda6b1bdbde0c5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPickerPanel\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'show-alpha': true, 'color-format': 'hex' }\"\n\t\t\tv-model=\"color\"\n\t\t\t:predefine=\"['#526d82', '#18a058', '#d03050']\"\n\t\t>\n\t\t\t<template #footer> 颜色实时更新 </template>\n\t\t</AsamColorPickerPanel>\n\t\t<output>颜色：{{ color }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColorPickerPanelBasicExample' });\nimport { ref } from 'vue';\nimport { AsamColorPickerPanel } from '@asam-ui/ui';\nconst color = ref<string | null>('#526d82');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPickerPanel/basic/js/Demo.vue",
									"sha256": "f8acfee87d5293e8fe30946d4cc1bfd366d6a738001c9b8c184c1e2327799e88",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPickerPanel\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'show-alpha': true, 'color-format': 'hex' }\"\n\t\t\tv-model=\"color\"\n\t\t\t:predefine=\"['#526d82', '#18a058', '#d03050']\"\n\t\t>\n\t\t\t<template #footer> 颜色实时更新 </template>\n\t\t</AsamColorPickerPanel>\n\t\t<output>颜色：{{ color }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColorPickerPanelBasicExample' });\nimport { ref } from 'vue';\nimport { AsamColorPickerPanel } from '@asam-ui/ui';\nconst color = ref('#526d82');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "实例与禁用状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPickerPanel/instance/ts/Demo.vue",
									"sha256": "190e271dd7b3fba332771314b6ded5439474ee26a3abda35d2a3d869961e1307",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPickerPanel ref=\"control\" v-model=\"color\" :disabled=\"disabled\" />\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.update()\"> 同步颜色 </AsamButton>\n\t\t</div>\n\t\t<output>颜色：{{ color }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColorPickerPanelInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamColorPickerPanel, AsamButton } from '@asam-ui/ui';\nimport type { AsamColorPickerPanelExpose } from '@asam-ui/ui';\nconst control = ref<AsamColorPickerPanelExpose>();\nconst color = ref<string | null>('#526d82');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPickerPanel/instance/js/Demo.vue",
									"sha256": "9bc29c34bc0e09a6d98979a08fc54ca469c63caaca937f71a63bd4713185b047",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPickerPanel ref=\"control\" v-model=\"color\" :disabled=\"disabled\" />\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.update()\"> 同步颜色 </AsamButton>\n\t\t</div>\n\t\t<output>颜色：{{ color }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColorPickerPanelInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamColorPickerPanel, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst color = ref('#526d82');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "appearance",
					"title": "边框、透明色、色相样式与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPickerPanel/appearance/ts/Demo.vue",
									"sha256": "00048da91a250d5b67773c00b0b04c7944c2d5920e6cc74d95bc80bfce2b95e0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPickerPanel\n\t\t\tv-model=\"color\"\n\t\t\t:border=\"bordered\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tshow-alpha\n\t\t\tcolor-format=\"hex8\"\n\t\t\t:predefine=\"['#18a05880', '#d03050ff']\"\n\t\t\thue-slider-class=\"example-hue\"\n\t\t\t:hue-slider-style=\"{ borderRadius: '6px' }\"\n\t\t>\n\t\t\t<template #footer>透明色：{{ color }}</template>\n\t\t</AsamColorPickerPanel>\n\t\t<AsamCheckboxItem v-model=\"bordered\">显示边框</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用面板</AsamCheckboxItem>\n\t\t<output>{{ color }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamColorPickerPanel, AsamCheckboxItem } from '@asam-ui/ui';\nconst color = ref<string | null>('#18a05880');\nconst bordered = ref(true);\nconst disabled = ref(false);\ndefineOptions({ name: 'AsamColorPickerPanelAppearanceDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPickerPanel/appearance/js/Demo.vue",
									"sha256": "68f8fe8350b83867e0596d7c202d2c98173632e53cfe956b0706a065ff8b7374",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPickerPanel\n\t\t\tv-model=\"color\"\n\t\t\t:border=\"bordered\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tshow-alpha\n\t\t\tcolor-format=\"hex8\"\n\t\t\t:predefine=\"['#18a05880', '#d03050ff']\"\n\t\t\thue-slider-class=\"example-hue\"\n\t\t\t:hue-slider-style=\"{ borderRadius: '6px' }\"\n\t\t>\n\t\t\t<template #footer>透明色：{{ color }}</template>\n\t\t</AsamColorPickerPanel>\n\t\t<AsamCheckboxItem v-model=\"bordered\">显示边框</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用面板</AsamCheckboxItem>\n\t\t<output>{{ color }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamColorPickerPanel, AsamCheckboxItem } from '@asam-ui/ui';\nconst color = ref('#18a05880');\nconst bordered = ref(true);\nconst disabled = ref(false);\ndefineOptions({ name: 'AsamColorPickerPanelAppearanceDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDatePickerPanel",
			"documentation": "/component-AsamDatePickerPanel.html",
			"demos": [
				{
					"id": "native-values",
					"title": "原生默认模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/native-values/ts/Demo.vue",
									"sha256": "8566a42c342f03f485287253c0a8da79e2437b9b8fbb0bb181f7deb5f52473ce",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>\n\t\t<AsamDatePickerPanel v-model=\"value\" @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelNativeValuesExample' });\nconst value = ref<AsamDatePickerPanelValue>();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/native-values/js/Demo.vue",
									"sha256": "f22f9a32f7600881fa83c3891423bba526b3480db77d8493a3e46f685b574865",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>\n\t\t<AsamDatePickerPanel v-model=\"value\" @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelNativeValuesExample' });\nconst value = ref();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "格式、清空与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/basic/ts/Demo.vue",
									"sha256": "36fa8d5d43509e9000794415f67733955ca96d15d763fa6e1fbebf6e2a826bed",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePickerPanel v-model=\"value\" value-format=\"YYYY-MM-DD\" :disabled=\"disabled\" />\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"value = null\"> 重置为空 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel, AsamButton } from '@asam-ui/ui';\nconst value = ref<AsamDatePickerPanelValue>(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/basic/js/Demo.vue",
									"sha256": "62a64bc944bdc01c6d07d1adcf55e767285b5925c7ebad004a3c2fc009da6d31",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePickerPanel v-model=\"value\" value-format=\"YYYY-MM-DD\" :disabled=\"disabled\" />\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"value = null\"> 重置为空 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerPanelBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel, AsamButton } from '@asam-ui/ui';\nconst value = ref(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "range",
					"title": "范围与约束",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/range/ts/Demo.vue",
									"sha256": "c3cc89e5717e54ad0d46e736b819cc3120e37b9cf36aa86f5b917c2d753157cb",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div\n\t\t\tclass=\"calendar-scroll\"\n\t\t\trole=\"region\"\n\t\t\taria-label=\"日期范围面板，窄屏时可横向滚动查看两个月并选择起止日期\"\n\t\t\ttabindex=\"0\"\n\t\t>\n\t\t\t<AsamDatePickerPanel\n\t\t\t\tv-model=\"range\"\n\t\t\t\tv-bind=\"{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }\"\n\t\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t/>\n\t\t</div>\n\t\t<output>范围：{{ range }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelRangeExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel } from '@asam-ui/ui';\nconst range = ref<AsamDatePickerPanelValue>(null);\nfunction disabledDate(value: Date) {\n\treturn value.getFullYear() < 2025;\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.calendar-scroll {\n\tmin-width: 0;\n\tmax-width: 100%;\n\toverflow-x: auto;\n\toverscroll-behavior-x: contain;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/range/js/Demo.vue",
									"sha256": "cd5a74f9095071cf482d50c6bca43247d4bd8b21bcb4cc63ff424029c1798e3b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div\n\t\t\tclass=\"calendar-scroll\"\n\t\t\trole=\"region\"\n\t\t\taria-label=\"日期范围面板，窄屏时可横向滚动查看两个月并选择起止日期\"\n\t\t\ttabindex=\"0\"\n\t\t>\n\t\t\t<AsamDatePickerPanel\n\t\t\t\tv-model=\"range\"\n\t\t\t\tv-bind=\"{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }\"\n\t\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t/>\n\t\t</div>\n\t\t<output>范围：{{ range }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerPanelRangeExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel } from '@asam-ui/ui';\nconst range = ref(null);\nfunction disabledDate(value) {\n\treturn value.getFullYear() < 2025;\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.calendar-scroll {\n\tmin-width: 0;\n\tmax-width: 100%;\n\toverflow-x: auto;\n\toverscroll-behavior-x: contain;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cells",
					"title": "日期单元格插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/cells/ts/Demo.vue",
									"sha256": "c57c75db17e29f9117ec841917734bf1e497b8f54311708c44e844a52147a500",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePickerPanel v-model=\"value\" value-format=\"YYYY-MM-DD\">\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<span :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t{{ cell.text }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #prev-month> ‹ </template>\n\t\t\t<template #next-month> › </template>\n\t\t\t<template #prev-year> « </template>\n\t\t\t<template #next-year> » </template>\n\t\t</AsamDatePickerPanel>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelCellsExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel } from '@asam-ui/ui';\nconst value = ref<AsamDatePickerPanelValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/cells/js/Demo.vue",
									"sha256": "3cba716397173c5472fc5b0afb7e0910c4293c49bbd795794da91f03bfbcc068",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePickerPanel v-model=\"value\" value-format=\"YYYY-MM-DD\">\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<span :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t{{ cell.text }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #prev-month> ‹ </template>\n\t\t\t<template #next-month> › </template>\n\t\t\t<template #prev-year> « </template>\n\t\t\t<template #next-year> » </template>\n\t\t</AsamDatePickerPanel>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerPanelCellsExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel } from '@asam-ui/ui';\nconst value = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/sizes/ts/Demo.vue",
									"sha256": "8fce14e982cd86d12b5c9ca1ba26ccb03743e22920dfa7942d8d9af17aef7d90",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"large\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"big\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"default\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"small\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamDatePickerPanel value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDatePickerPanelSizesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/sizes/js/Demo.vue",
									"sha256": "58e618dab21a254e50956e298d48fe58c95fab33c17e38f961abf061668ad5ff",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"large\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"big\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"default\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamDatePickerPanel size=\"small\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamDatePickerPanel value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerPanelSizesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePickerPanel, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "quarter-contract",
					"title": "常驻季度与原生日期时间单面板范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/quarter-contract/ts/Demo.vue",
									"sha256": "515fecd93636e00a97cdab2c2e754d2d994ad34275da53945a229088b117ff0f",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamSelect v-model=\"type\">\n\t\t\t<AsamOption value=\"quarter\" :label=\"'单季度'\">单季度</AsamOption>\n\t\t\t<AsamOption value=\"quarters\" :label=\"'多季度'\">多季度</AsamOption>\n\t\t\t<AsamOption value=\"quarterrange\" :label=\"'季度范围'\">季度范围</AsamOption>\n\t\t\t<AsamOption value=\"datetimerange\" :label=\"'原生日期时间范围'\"\n\t\t\t\t>原生日期时间范围</AsamOption\n\t\t\t>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"border = !border\">边框 {{ border }}</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"disabled = !disabled\"\n\t\t\t>禁用 {{ disabled }}</AsamButton\n\t\t>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePickerPanel\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:single-panel=\"true\"\n\t\t\t:border=\"border\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:show-footer=\"true\"\n\t\t\t:show-confirm=\"true\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t@panel-change=\"recordPanel\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"value = null\">null 重置</AsamButton\n\t\t><output>{{ value }} {{ panelChanges }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDatePickerPanelquartercontractExample' });\n\nimport { ref, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';\nimport type { AsamDatePickerPanelProps, AsamDatePickerPanelValue } from '@asam-ui/ui';\nconst type = ref<AsamDatePickerPanelProps['type']>('quarter');\nconst value = ref<AsamDatePickerPanelValue>(null);\nconst disabled = ref(false);\nconst border = ref(true);\nconst panelChanges = ref(0);\nconst recordPanel = () => {\n\tpanelChanges.value++;\n};\nwatch(type, () => {\n\tvalue.value = null;\n});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/quarter-contract/js/Demo.vue",
									"sha256": "c8396ec31bdf023c483e0c9e84d92cca1a9a7f9e4c3a4b0568515006187c1e66",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamSelect v-model=\"type\">\n\t\t\t<AsamOption value=\"quarter\" :label=\"'单季度'\">单季度</AsamOption>\n\t\t\t<AsamOption value=\"quarters\" :label=\"'多季度'\">多季度</AsamOption>\n\t\t\t<AsamOption value=\"quarterrange\" :label=\"'季度范围'\">季度范围</AsamOption>\n\t\t\t<AsamOption value=\"datetimerange\" :label=\"'原生日期时间范围'\"\n\t\t\t\t>原生日期时间范围</AsamOption\n\t\t\t>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"border = !border\">边框 {{ border }}</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"disabled = !disabled\"\n\t\t\t>禁用 {{ disabled }}</AsamButton\n\t\t>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePickerPanel\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"type\"\n\t\t\t:single-panel=\"true\"\n\t\t\t:border=\"border\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:show-footer=\"true\"\n\t\t\t:show-confirm=\"true\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t@panel-change=\"recordPanel\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"value = null\">null 重置</AsamButton\n\t\t><output>{{ value }} {{ panelChanges }}</output>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDatePickerPanelquartercontractExample' });\nimport { ref, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';\nconst type = ref('quarter');\nconst value = ref(null);\nconst disabled = ref(false);\nconst border = ref(true);\nconst panelChanges = ref(0);\nconst recordPanel = () => {\n\tpanelChanges.value++;\n};\nwatch(type, () => {\n\tvalue.value = null;\n});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-panel-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-basic/ts/Demo.vue",
									"sha256": "a8146450af9a1248348fbc95d4451ff9fdada8568e90692eb17ca70ecbcaf6b2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt\n-->\n<template>\n\t<div class=\"flex justify-center\">\n\t\t<AsamDatePickerPanel v-model=\"value\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\nimport { AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelbasicExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamDatePickerPanelValue>();\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "a4b2fd7952851996dde15bc5d06b3b78cdad1968fa21d94833b68e9cb7f6fe77",
									"notice": {
										"id": "8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6",
										"url": "/licenses/source-notices/8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt",
										"licenseFilename": "LICENSE-8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/basic.vue",
											"sourceSha256": "9de2b21dc4fd964cb7e5785aa94932ffa70e6a53dbb8b3d462b0baeb138cc2e7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-basic/js/Demo.vue",
									"sha256": "69069e1d907662dafc63f81f157b3fdf4fd01b7cc3a12ac5459c8095c5222696",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt\n-->\n<template>\n\t<div class=\"flex justify-center\">\n\t\t<AsamDatePickerPanel v-model=\"value\" />\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelbasicExample' });\nimport { ref } from 'vue';\nconst value = ref();\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.justify-center {\n\tjustify-content: center;\n}\n</style>\n",
									"originalSourceSha256": "bd74484835751daff122e6418e26db856c27cc9db905ff7c1995d3e062dd038f",
									"notice": {
										"id": "8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6",
										"url": "/licenses/source-notices/8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt",
										"licenseFilename": "LICENSE-8a73ffac061290414d9c46cf288a9f2e92e5d0e089b09439d0a5470d0a95e6a6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/basic.vue",
											"sourceSha256": "9de2b21dc4fd964cb7e5785aa94932ffa70e6a53dbb8b3d462b0baeb138cc2e7",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-panel-border",
					"title": "边框",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-border/ts/Demo.vue",
									"sha256": "eea98262c324acb3f2e074d105c263afe12842b3cda1e955f1768c20c375a90b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"border = !border\">切换边框</AsamButton\n\t\t><AsamDatePickerPanel v-model=\"value\" :border=\"border\" />\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\nimport { AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelborderExample' });\nimport { ref } from 'vue';\nconst border = ref(true);\nconst value = ref<AsamDatePickerPanelValue>();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "85c6805ddd0e4940ca3617d48cc4e4ffd47c918c88faa0fec31aa4f659e0c228",
									"notice": {
										"id": "1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065",
										"url": "/licenses/source-notices/1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt",
										"licenseFilename": "LICENSE-1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/border.vue",
											"sourceSha256": "2a4df02dc44689bd236ec20424d59812426922e60eb6aee17f7cc812630a61b9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-border/js/Demo.vue",
									"sha256": "d4286a178779141f65cdfeaa5280a71acec45fcc93f6f671b978b3f16ed7cb40",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt\n-->\n<template>\n\t<div class=\"demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"border = !border\">切换边框</AsamButton\n\t\t><AsamDatePickerPanel v-model=\"value\" :border=\"border\" />\n\t</div>\n</template>\n<script setup>\nimport { AsamButton, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelborderExample' });\nimport { ref } from 'vue';\nconst border = ref(true);\nconst value = ref();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "add087426021e305315f456e93d1751a6244ff394eeff194953dc88170c9706f",
									"notice": {
										"id": "1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065",
										"url": "/licenses/source-notices/1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt",
										"licenseFilename": "LICENSE-1cf9ac1cdab509f650666d092832d8cd5e55ea4ce330be4c64834f1abdb55065.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/border.vue",
											"sourceSha256": "2a4df02dc44689bd236ec20424d59812426922e60eb6aee17f7cc812630a61b9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-panel-disabled",
					"title": "禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-disabled/ts/Demo.vue",
									"sha256": "094e8d9fa8b1499f749aa33bf4bc855d6aabe070988df10edbf85fc505ffbb6a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt\n-->\n<template>\n\t<div class=\"flex flex-col items-center demo-layout-1\">\n\t\t<AsamSwitch\n\t\t\t:model-value=\"disabled\"\n\t\t\tactive-text=\"Disabled\"\n\t\t\tinactive-text=\"已启用\"\n\t\t\t@update:model-value=\"disabled = $event === true\"\n\t\t/>\n\t\t<AsamDatePickerPanel v-model=\"value\" :disabled=\"disabled\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\nimport { AsamSwitch, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpaneldisabledExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamDatePickerPanelValue>();\nconst disabled = ref(true);\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.items-center {\n\talign-items: center;\n}\n.flex-col {\n\tflex-direction: column;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "ed0e015d31443eb340a4c3999410c702973660fc7a701c142acac6fc2844bc07",
									"notice": {
										"id": "71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980",
										"url": "/licenses/source-notices/71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt",
										"licenseFilename": "LICENSE-71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/disabled.vue",
											"sourceSha256": "d0a49ffe97f662c721e505484caa480f8998c11a9e458c68b82bc207cd2476b6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-disabled/js/Demo.vue",
									"sha256": "ad735c9ab12229421fbf616e1deea8513bea656c40614c97898b5ecfbfc8bdb0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt\n-->\n<template>\n\t<div class=\"flex flex-col items-center demo-layout-1\">\n\t\t<AsamSwitch\n\t\t\t:model-value=\"disabled\"\n\t\t\tactive-text=\"Disabled\"\n\t\t\tinactive-text=\"已启用\"\n\t\t\t@update:model-value=\"disabled = $event === true\"\n\t\t/>\n\t\t<AsamDatePickerPanel v-model=\"value\" :disabled=\"disabled\" />\n\t</div>\n</template>\n\n<script setup>\nimport { AsamSwitch, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpaneldisabledExample' });\nimport { ref } from 'vue';\nconst value = ref();\nconst disabled = ref(true);\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.items-center {\n\talign-items: center;\n}\n.flex-col {\n\tflex-direction: column;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "99fbc3feeebc917aa94b1e983ab75c576f3849ef11050c017d7de35f0a433be6",
									"notice": {
										"id": "71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980",
										"url": "/licenses/source-notices/71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt",
										"licenseFilename": "LICENSE-71f75b376e0a5203836a73bed5dd357b219d0830a0524e31c4307cf1f3a1b980.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/disabled.vue",
											"sourceSha256": "d0a49ffe97f662c721e505484caa480f8998c11a9e458c68b82bc207cd2476b6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-panel-all-types",
					"title": "全部日期类型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-all-types/ts/Demo.vue",
									"sha256": "76323e72a942f9da09d8044ea520946a43860a0e781efdbe6e32493139c797e5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt\n-->\n<template>\n\t<div>\n\t\t<div class=\"flex gap-4\">\n\t\t\t<div class=\"flex flex-col basis-150px demo-gap\">\n\t\t\t\t<span>类型：</span>\n\t\t\t\t<AsamSelect :model-value=\"type\" @update:model-value=\"updateType\">\n\t\t\t\t\t<AsamOption v-for=\"optionType in types\" :key=\"optionType\" :value=\"optionType\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<div class=\"flex justify-center\">\n\t\t\t<AsamDatePickerPanel v-model=\"date\" :type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDatePickerPanelValue } from '@asam-ui/ui';\nimport { AsamSelect, AsamOption, AsamDivider, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelalltypesExample' });\n\nimport { ref, watch } from 'vue';\n\nimport type { AsamDatePickerPanelProps } from '@asam-ui/ui';\ntype DatePickerType = NonNullable<AsamDatePickerPanelProps['type']>;\n\nconst date = ref<AsamDatePickerPanelValue>();\nconst type = ref<DatePickerType>('date');\n\nwatch(type, () => {\n\tdate.value = undefined;\n});\n\nconst types: DatePickerType[] = [\n\t'year',\n\t'years',\n\t'month',\n\t'months',\n\t'date',\n\t'dates',\n\t'week',\n\t'quarter',\n\t'quarters',\n\t'quarterrange',\n\t'datetime',\n\t'datetimerange',\n\t'daterange',\n\t'monthrange',\n\t'yearrange'\n];\nfunction updateType(value: unknown) {\n\tconst next = types.find((type) => type === value);\n\tif (next) type.value = next;\n}\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n.justify-center {\n\tjustify-content: center;\n}\n.flex-col {\n\tflex-direction: column;\n}\n</style>\n",
									"originalSourceSha256": "fb4b12369e104e9cdf57fa7e45f1879d9cfa82f1ca634770126a16db460e300b",
									"notice": {
										"id": "2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc",
										"url": "/licenses/source-notices/2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt",
										"licenseFilename": "LICENSE-2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/all-types.vue",
											"sourceSha256": "750a7a1a8cf6c5b35cdd77937f5f4911c7259566adc53a97e73e348420e28ffa",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/official-date-picker-panel-all-types/js/Demo.vue",
									"sha256": "52476f00b2d3aecb27b241fa0590283954b0affd9fe9f6af1bf8e25ff533c291",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt\n-->\n<template>\n\t<div>\n\t\t<div class=\"flex gap-4\">\n\t\t\t<div class=\"flex flex-col basis-150px demo-gap\">\n\t\t\t\t<span>类型：</span>\n\t\t\t\t<AsamSelect :model-value=\"type\" @update:model-value=\"updateType\">\n\t\t\t\t\t<AsamOption v-for=\"optionType in types\" :key=\"optionType\" :value=\"optionType\" />\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t</div>\n\t\t<AsamDivider />\n\t\t<div class=\"flex justify-center\">\n\t\t\t<AsamDatePickerPanel v-model=\"date\" :type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamSelect, AsamOption, AsamDivider, AsamDatePickerPanel } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelofficialdatepickerpanelalltypesExample' });\nimport { ref, watch } from 'vue';\nconst date = ref();\nconst type = ref('date');\nwatch(type, () => {\n\tdate.value = undefined;\n});\nconst types = [\n\t'year',\n\t'years',\n\t'month',\n\t'months',\n\t'date',\n\t'dates',\n\t'week',\n\t'quarter',\n\t'quarters',\n\t'quarterrange',\n\t'datetime',\n\t'datetimerange',\n\t'daterange',\n\t'monthrange',\n\t'yearrange'\n];\nfunction updateType(value) {\n\tconst next = types.find((type) => type === value);\n\tif (next) type.value = next;\n}\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.demo-gap {\n\tgap: var(--asam-space-sm);\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n.justify-center {\n\tjustify-content: center;\n}\n.flex-col {\n\tflex-direction: column;\n}\n</style>\n",
									"originalSourceSha256": "ba98f3b1dd06de1c03e575b139ce2f7590bdb6b3dd3803c23da1f63b6ca2b737",
									"notice": {
										"id": "2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc",
										"url": "/licenses/source-notices/2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt",
										"licenseFilename": "LICENSE-2dee5018dd42dad6a9c0be8ec2bf060a529710cd927ffb986f7a5efb157f2bfc.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker-panel/all-types.vue",
											"sourceSha256": "750a7a1a8cf6c5b35cdd77937f5f4911c7259566adc53a97e73e348420e28ffa",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "advanced-contract",
					"title": "本地化与高级配置的完整 SFC",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/advanced-contract/ts/Demo.vue",
									"sha256": "e1a00b092634991d3531418fc9f89aca0d016e072fa3826afbab1e961c789a36",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamDatePickerPanel\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"changes++\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t>\n\t\t\t\t<template #default=\"cell\">\n\t\t\t\t\t<!-- Scoped cell data stays typed through the public slot. -->\n\t\t\t\t\t<span>{{ cell.text }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-month><CaretLeft /></template>\n\t\t\t\t<template #next-month><CaretRight /></template>\n\t\t\t\t<template #prev-year><CaretLeft /></template>\n\t\t\t\t<template #next-year><CaretRight /></template>\n\t\t\t</AsamDatePickerPanel>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；模型更新次数 {{ changes }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamDatePickerPanel, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamDatePickerPanelProps, AsamDatePickerPanelValue } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamDatePickerPanelAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref<AsamDatePickerPanelValue>(null);\nconst configuration: AsamDatePickerPanelProps = {\n\ttype: 'datetime',\n\tborder: true,\n\tsinglePanel: true,\n\tvalueFormat: 'YYYY-MM-DD HH:mm:ss',\n\tclearable: true,\n\teditable: true,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tdefaultTime: new Date(2000, 0, 1, 9, 30),\n\tdateFormat: 'YYYY/MM/DD',\n\ttimeFormat: 'HH:mm',\n\tshowFooter: true,\n\tshowConfirm: true,\n\tshowWeekNumber: true,\n\tdisabledDate: (date: Date) => date.getFullYear() < 2026,\n\tshortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],\n\tcellClassName: (date: Date) => (date.getDate() === 1 ? 'advanced-cell' : ''),\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.ts",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/advanced-contract/ts/locale.ts",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/advanced-contract/js/Demo.vue",
									"sha256": "155831d8585fe14f7d152c7dcb822b17970de0905e137f633ef41eb7dd983f86",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamDatePickerPanel\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"changes++\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t>\n\t\t\t\t<template #default=\"cell\">\n\t\t\t\t\t<!-- Scoped cell data stays typed through the public slot. -->\n\t\t\t\t\t<span>{{ cell.text }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-month><CaretLeft /></template>\n\t\t\t\t<template #next-month><CaretRight /></template>\n\t\t\t\t<template #prev-year><CaretLeft /></template>\n\t\t\t\t<template #next-year><CaretRight /></template>\n\t\t\t</AsamDatePickerPanel>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；模型更新次数 {{ changes }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamDatePickerPanel, AsamConfigProvider } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamDatePickerPanelAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref(null);\nconst configuration = {\n\ttype: 'datetime',\n\tborder: true,\n\tsinglePanel: true,\n\tvalueFormat: 'YYYY-MM-DD HH:mm:ss',\n\tclearable: true,\n\teditable: true,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tdefaultTime: new Date(2000, 0, 1, 9, 30),\n\tdateFormat: 'YYYY/MM/DD',\n\ttimeFormat: 'HH:mm',\n\tshowFooter: true,\n\tshowConfirm: true,\n\tshowWeekNumber: true,\n\tdisabledDate: (date) => date.getFullYear() < 2026,\n\tshortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],\n\tcellClassName: (date) => (date.getDate() === 1 ? 'advanced-cell' : ''),\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.js",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/advanced-contract/js/locale.js",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "sidebar",
					"title": "公开侧栏与快捷项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/sidebar/ts/Demo.vue",
									"sha256": "3bcffa8420cf06c35c15838dc9bbe022e2fea5a1851dadf2fd9cf4228b087026",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Mode choice uses the public finite picker type. -->\n\t\t\t<span>模式</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption v-for=\"item in modes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\t\titem\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"singlePanel\">范围单面板</AsamCheckboxItem>\n\n\t\t<AsamCheckboxItem v-model=\"withShortcut\">快捷项</AsamCheckboxItem>\n\t\t<AsamDatePickerPanel\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"mode\"\n\t\t\t:single-panel=\"singlePanel\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:shortcuts=\"withShortcut ? shortcuts : []\"\n\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t>\n\t\t\t<template #sidebar=\"scope\">\n\t\t\t\t<!-- Apply the public native class to a block sidebar root. -->\n\t\t\t\t<aside :class=\"scope.class\" v-bind=\"{ 'data-sidebar-example': '' }\">\n\t\t\t\t\t<p class=\"example-paragraph\">日期侧栏</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t\t\t>清空模型</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</aside></template\n\t\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<!-- Preserve the existing public cell slot. -->\n\t\t\t\t<span>{{ cell.text }}</span></template\n\t\t\t>\n\t\t\t<template #prev-year><span aria-hidden=\"true\">«</span></template>\n\t\t\t<template #next-year><span aria-hidden=\"true\">»</span></template>\n\t\t</AsamDatePickerPanel>\n\t\t<output>模型 {{ value }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamDatePickerPanel\n} from '@asam-ui/ui';\nimport type { AsamDatePickerPanelValue, AsamDatePickerPanelProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerPanelSidebarExample' });\nconst value = ref<AsamDatePickerPanelValue>(null);\nconst modes: NonNullable<AsamDatePickerPanelProps['type']>[] = [\n\t'date',\n\t'datetime',\n\t'week',\n\t'month',\n\t'year',\n\t'dates',\n\t'months',\n\t'years',\n\t'quarter',\n\t'quarters',\n\t'daterange',\n\t'datetimerange',\n\t'monthrange',\n\t'yearrange',\n\t'quarterrange'\n];\nconst mode = ref<NonNullable<AsamDatePickerPanelProps['type']>>('daterange');\nconst singlePanel = ref(false);\nwatch(mode, () => {\n\tvalue.value = null;\n});\n\nconst withShortcut = ref(false);\nconst shortcuts = [\n\t{\n\t\ttext: '固定日期',\n\t\tvalue: () =>\n\t\t\tmode.value.endsWith('range')\n\t\t\t\t? [new Date(2026, 0, 12), new Date(2026, 0, 14)]\n\t\t\t\t: ['dates', 'months', 'years', 'quarters'].includes(mode.value)\n\t\t\t\t\t? [new Date(2026, 0, 12)]\n\t\t\t\t\t: new Date(2026, 0, 12)\n\t}\n];\nfunction reset() {\n\tvalue.value = null;\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePickerPanel/sidebar/js/Demo.vue",
									"sha256": "bc8daf1bd1dc410d8ccb39e0b9afda50956b536b0bf6a126d02e04f0bac17544",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Mode choice uses the public finite picker type. -->\n\t\t\t<span>模式</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption v-for=\"item in modes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\t\titem\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"singlePanel\">范围单面板</AsamCheckboxItem>\n\n\t\t<AsamCheckboxItem v-model=\"withShortcut\">快捷项</AsamCheckboxItem>\n\t\t<AsamDatePickerPanel\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"mode\"\n\t\t\t:single-panel=\"singlePanel\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:shortcuts=\"withShortcut ? shortcuts : []\"\n\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t>\n\t\t\t<template #sidebar=\"scope\">\n\t\t\t\t<!-- Apply the public native class to a block sidebar root. -->\n\t\t\t\t<aside :class=\"scope.class\" v-bind=\"{ 'data-sidebar-example': '' }\">\n\t\t\t\t\t<p class=\"example-paragraph\">日期侧栏</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t\t\t>清空模型</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</aside></template\n\t\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<!-- Preserve the existing public cell slot. -->\n\t\t\t\t<span>{{ cell.text }}</span></template\n\t\t\t>\n\t\t\t<template #prev-year><span aria-hidden=\"true\">«</span></template>\n\t\t\t<template #next-year><span aria-hidden=\"true\">»</span></template>\n\t\t</AsamDatePickerPanel>\n\t\t<output>模型 {{ value }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref, watch } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamDatePickerPanel\n} from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDatePickerPanelSidebarExample' });\nconst value = ref(null);\nconst modes = [\n\t'date',\n\t'datetime',\n\t'week',\n\t'month',\n\t'year',\n\t'dates',\n\t'months',\n\t'years',\n\t'quarter',\n\t'quarters',\n\t'daterange',\n\t'datetimerange',\n\t'monthrange',\n\t'yearrange',\n\t'quarterrange'\n];\nconst mode = ref('daterange');\nconst singlePanel = ref(false);\nwatch(mode, () => {\n\tvalue.value = null;\n});\n\nconst withShortcut = ref(false);\nconst shortcuts = [\n\t{\n\t\ttext: '固定日期',\n\t\tvalue: () =>\n\t\t\tmode.value.endsWith('range')\n\t\t\t\t? [new Date(2026, 0, 12), new Date(2026, 0, 14)]\n\t\t\t\t: ['dates', 'months', 'years', 'quarters'].includes(mode.value)\n\t\t\t\t\t? [new Date(2026, 0, 12)]\n\t\t\t\t\t: new Date(2026, 0, 12)\n\t}\n];\nfunction reset() {\n\tvalue.value = null;\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamBaseForm",
			"documentation": "/component-AsamBaseForm.html",
			"demos": [
				{
					"id": "basic",
					"title": "校验、原生提交与重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/basic/ts/Demo.vue",
									"sha256": "43fe1faaa3569b41b8532f66a3d6c4c3c5a90e21b57f950b9ca13d4f6d283324",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{ ...{ 'label-position': 'top' }, ...{ model: model, rules: rules } }\"\n\t\t\t@submit.prevent=\"submit\"\n\t\t>\n\t\t\t<AsamFormItem label=\"项目名称\" prop=\"name\" help=\"使用团队易于辨认的名称\">\n\t\t\t\t<AsamInput v-model=\"model.name\" aria-label=\"项目名称\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"团队\" prop=\"team\">\n\t\t\t\t<AsamSelect v-model=\"model.team\" :options=\"options\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormActions submit-native-type=\"submit\" @cancel=\"form?.resetFields()\" />\n\t\t</AsamBaseForm>\n\t\t<output>{{ result }}；{{ model }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBaseFormBasicExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamSelect, AsamFormActions } from '@asam-ui/ui';\nimport type { AsamBaseFormExpose, AsamBaseFormProps } from '@asam-ui/ui';\nconst form = ref<AsamBaseFormExpose>();\nconst model = reactive({ name: '', team: '' });\nconst rules: AsamBaseFormProps['rules'] = {\n\tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],\n\tteam: [{ required: true, message: '请选择团队', trigger: 'change' }]\n};\nconst result = ref('尚未提交');\nasync function submit() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '请检查必填项';\n\t}\n}\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/basic/js/Demo.vue",
									"sha256": "6b023e6a5d59e5f4dbec1289d7aa2e61775d9c7ac712ed313e1221f3d20a68b3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{ ...{ 'label-position': 'top' }, ...{ model: model, rules: rules } }\"\n\t\t\t@submit.prevent=\"submit\"\n\t\t>\n\t\t\t<AsamFormItem label=\"项目名称\" prop=\"name\" help=\"使用团队易于辨认的名称\">\n\t\t\t\t<AsamInput v-model=\"model.name\" aria-label=\"项目名称\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"团队\" prop=\"team\">\n\t\t\t\t<AsamSelect v-model=\"model.team\" :options=\"options\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormActions submit-native-type=\"submit\" @cancel=\"form?.resetFields()\" />\n\t\t</AsamBaseForm>\n\t\t<output>{{ result }}；{{ model }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBaseFormBasicExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamSelect, AsamFormActions } from '@asam-ui/ui';\nconst form = ref();\nconst model = reactive({ name: '', team: '' });\nconst rules = {\n\tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],\n\tteam: [{ required: true, message: '请选择团队', trigger: 'change' }]\n};\nconst result = ref('尚未提交');\nasync function submit() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '请检查必填项';\n\t}\n}\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "字段校验与动态禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/instance/ts/Demo.vue",
									"sha256": "3e16a929b87e772d65f5645c2b5fde1a542dca440ebfcaeff89e836e46a978a6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ 'label-width': '100px' },\n\t\t\t\t...{ model: model, rules: rules, disabled: disabled }\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamFormItem label=\"项目名称\" prop=\"name\">\n\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"显式启用控件\" prop=\"team\">\n\t\t\t\t<AsamInput v-model=\"model.team\" :disabled=\"false\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"validateName\"> 校验名称 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.clearValidate('name')\"> 清除提示 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.scrollToField('name')\"> 定位字段 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t</div>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBaseFormInstanceExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nimport type { AsamBaseFormExpose, AsamBaseFormProps } from '@asam-ui/ui';\nconst form = ref<AsamBaseFormExpose>();\nconst model = reactive({ name: '', team: '' });\nconst rules: AsamBaseFormProps['rules'] = {\n\tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],\n\tteam: [{ required: true, message: '请选择团队', trigger: 'change' }]\n};\nconst result = ref('尚未提交');\nconst disabled = ref(false);\nasync function validateName() {\n\ttry {\n\t\tawait form.value?.validateField('name');\n\t\tresult.value = '名称有效';\n\t} catch {\n\t\tresult.value = '名称必填';\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/instance/js/Demo.vue",
									"sha256": "7a4e7bc2d3c9c6032e804a8b47b5636e86ca9b49084a457d42f4b91a7564b13b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ 'label-width': '100px' },\n\t\t\t\t...{ model: model, rules: rules, disabled: disabled }\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamFormItem label=\"项目名称\" prop=\"name\">\n\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"显式启用控件\" prop=\"team\">\n\t\t\t\t<AsamInput v-model=\"model.team\" :disabled=\"false\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"validateName\"> 校验名称 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.clearValidate('name')\"> 清除提示 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.scrollToField('name')\"> 定位字段 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t</div>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBaseFormInstanceExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nconst form = ref();\nconst model = reactive({ name: '', team: '' });\nconst rules = {\n\tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],\n\tteam: [{ required: true, message: '请选择团队', trigger: 'change' }]\n};\nconst result = ref('尚未提交');\nconst disabled = ref(false);\nasync function validateName() {\n\ttry {\n\t\tawait form.value?.validateField('name');\n\t\tresult.value = '名称有效';\n\t} catch {\n\t\tresult.value = '名称必填';\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/sizes/ts/Demo.vue",
									"sha256": "909dfcdfd1d383ac2b712e778aa87140de3961c3415c887a04c0a41bb1df9696",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamBaseForm size=\"large\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamBaseForm size=\"big\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamBaseForm size=\"default\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamBaseForm size=\"small\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBaseFormSizesExample' });\nimport { ref, reactive } from 'vue';\nimport {\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamFormActions,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst model = reactive({ name: 'ASAM' });\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/sizes/js/Demo.vue",
									"sha256": "f5bc005346e90fa7b61b243fe6daf088898eb4a40e812a4e5d7408fedfffae50",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamBaseForm size=\"large\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamBaseForm size=\"big\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamBaseForm size=\"default\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamBaseForm size=\"small\" :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"名称\" prop=\"name\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormActions />\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBaseFormSizesExample' });\nimport { ref, reactive } from 'vue';\nimport {\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamFormActions,\n\tAsamConfigProvider,\n\tAsamButton\n} from '@asam-ui/ui';\nconst density = ref('big');\nconst model = reactive({ name: 'ASAM' });\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "advanced",
					"title": "异步校验、布局与全部实例方法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/advanced/ts/Demo.vue",
									"sha256": "3ace01b784266b6417e351882116781fe2baf8735718bde29ea9969d066d446f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-position\">标签位置</label>\n\t\t\t\t<AsamSelect id=\"control-position\" v-model=\"position\">\n\t\t\t\t\t<AsamOption :label=\"'left'\" :value=\"'left'\">left</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'right'\" :value=\"'right'\">right</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'top'\" :value=\"'top'\">top</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<AsamCheckboxItem v-model=\"inline\"> 行内布局</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用表单</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"showMessage\"> 显示校验消息</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:label-position=\"position\"\n\t\t\t:label-width=\"position === 'top' ? 0 : '110px'\"\n\t\t\tlabel-suffix=\"：\"\n\t\t\t:inline=\"inline\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:show-message=\"showMessage\"\n\t\t\tstatus-icon\n\t\t\tscroll-to-error\n\t\t\t:scroll-into-view-options=\"{ behavior: 'smooth', block: 'center' }\"\n\t\t\t@validate=\"(prop, valid, message) => events.push(`${prop}:${valid}:${message}`)\"\n\t\t\t@submit.prevent=\"validate\"\n\t\t>\n\t\t\t<AsamFormSection title=\"基础资料\" description=\"异步规则与布局组合由使用方定义\">\n\t\t\t\t<AsamFormGrid :columns=\"2\" :tablet-columns=\"2\" :mobile-columns=\"1\">\n\t\t\t\t\t<AsamFormItem label=\"账号\" prop=\"account\" help=\"输入 taken 将触发异步占用检查\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.account\" aria-label=\"账号\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem label=\"确认账号\" prop=\"confirm\" label-position=\"top\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.confirm\" aria-label=\"确认账号\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamFormGrid>\n\t\t\t</AsamFormSection>\n\t\t\t<AsamFormActions\n\t\t\t\t:saving=\"saving\"\n\t\t\t\tsubmit-native-type=\"submit\"\n\t\t\t\t@cancel=\"form?.resetFields()\"\n\t\t\t>\n\t\t\t\t<template #leading><span>原生 submit 只在表单处理一次</span></template>\n\t\t\t</AsamFormActions>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"setInitial\">设置新的初始值</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.resetFields()\">恢复初始值</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.clearValidate()\">清除全部提示</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"inspect\">查看注册字段</AsamButton>\n\t\t</div>\n\t\t<output>{{ result }}</output>\n\t\t<pre>{{ JSON.stringify(model) }}</pre>\n\t\t<AsamCollapse\n\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t<template #title><span>校验事件</span></template>\n\t\t\t\t<pre>{{ events.join('\\n') }}</pre>\n\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBaseFormAdvancedExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamFormActions,\n\tAsamFormSection,\n\tAsamFormGrid,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose, AsamBaseFormProps } from '@asam-ui/ui';\nconst form = ref<AsamBaseFormExpose>();\nconst model = reactive({ account: '', confirm: '' });\nconst position = ref<'left' | 'right' | 'top'>('right');\nconst inline = ref(false);\nconst disabled = ref(false);\nconst showMessage = ref(true);\nconst saving = ref(false);\nconst result = ref('尚未校验');\nconst events = ref<string[]>([]);\nconst rules: AsamBaseFormProps['rules'] = {\n\taccount: [\n\t\t{ required: true, message: '请输入账号', trigger: 'blur' },\n\t\t{\n\t\t\tasync validator(_rule, value) {\n\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\t\t\tif (value === 'taken') throw new Error('账号已占用');\n\t\t\t},\n\t\t\ttrigger: 'blur'\n\t\t}\n\t],\n\tconfirm: [\n\t\t{\n\t\t\tvalidator(_rule, value, callback) {\n\t\t\t\tcallback(\n\t\t\t\t\tvalue === model.account && value ? undefined : new Error('两次账号需一致')\n\t\t\t\t);\n\t\t\t},\n\t\t\ttrigger: 'blur'\n\t\t}\n\t]\n};\nasync function validate(): Promise<void> {\n\tsaving.value = true;\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '校验失败';\n\t} finally {\n\t\tsaving.value = false;\n\t}\n}\nfunction setInitial(): void {\n\tform.value?.setInitialValues({ account: 'seed', confirm: 'seed' });\n\tresult.value = '新的初始值已保存；点击恢复初始值';\n}\nfunction inspect(): void {\n\tresult.value = `字段数 ${form.value?.fields.length}；账号 ${form.value?.getField('account')?.validateState}`;\n}\n</script>\n\n<style scoped>\n.control-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/advanced/js/Demo.vue",
									"sha256": "0a60b7d1096dfa2e738dbd00caaf397f1e8d9695912443620cee705ca0e76be1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-position\">标签位置</label>\n\t\t\t\t<AsamSelect id=\"control-position\" v-model=\"position\">\n\t\t\t\t\t<AsamOption :label=\"'left'\" :value=\"'left'\">left</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'right'\" :value=\"'right'\">right</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'top'\" :value=\"'top'\">top</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<AsamCheckboxItem v-model=\"inline\"> 行内布局</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用表单</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"showMessage\"> 显示校验消息</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:label-position=\"position\"\n\t\t\t:label-width=\"position === 'top' ? 0 : '110px'\"\n\t\t\tlabel-suffix=\"：\"\n\t\t\t:inline=\"inline\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:show-message=\"showMessage\"\n\t\t\tstatus-icon\n\t\t\tscroll-to-error\n\t\t\t:scroll-into-view-options=\"{ behavior: 'smooth', block: 'center' }\"\n\t\t\t@validate=\"(prop, valid, message) => events.push(`${prop}:${valid}:${message}`)\"\n\t\t\t@submit.prevent=\"validate\"\n\t\t>\n\t\t\t<AsamFormSection title=\"基础资料\" description=\"异步规则与布局组合由使用方定义\">\n\t\t\t\t<AsamFormGrid :columns=\"2\" :tablet-columns=\"2\" :mobile-columns=\"1\">\n\t\t\t\t\t<AsamFormItem label=\"账号\" prop=\"account\" help=\"输入 taken 将触发异步占用检查\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.account\" aria-label=\"账号\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem label=\"确认账号\" prop=\"confirm\" label-position=\"top\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.confirm\" aria-label=\"确认账号\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamFormGrid>\n\t\t\t</AsamFormSection>\n\t\t\t<AsamFormActions\n\t\t\t\t:saving=\"saving\"\n\t\t\t\tsubmit-native-type=\"submit\"\n\t\t\t\t@cancel=\"form?.resetFields()\"\n\t\t\t>\n\t\t\t\t<template #leading><span>原生 submit 只在表单处理一次</span></template>\n\t\t\t</AsamFormActions>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"setInitial\">设置新的初始值</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.resetFields()\">恢复初始值</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.clearValidate()\">清除全部提示</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"inspect\">查看注册字段</AsamButton>\n\t\t</div>\n\t\t<output>{{ result }}</output>\n\t\t<pre>{{ JSON.stringify(model) }}</pre>\n\t\t<AsamCollapse\n\t\t\t><AsamCollapseItem name=\"auxiliary-content\">\n\t\t\t\t<template #title><span>校验事件</span></template>\n\t\t\t\t<pre>{{ events.join('\\n') }}</pre>\n\t\t\t</AsamCollapseItem></AsamCollapse\n\t\t>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBaseFormAdvancedExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamCollapse,\n\tAsamCollapseItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamFormActions,\n\tAsamFormSection,\n\tAsamFormGrid,\n\tAsamButton\n} from '@asam-ui/ui';\nconst form = ref();\nconst model = reactive({ account: '', confirm: '' });\nconst position = ref('right');\nconst inline = ref(false);\nconst disabled = ref(false);\nconst showMessage = ref(true);\nconst saving = ref(false);\nconst result = ref('尚未校验');\nconst events = ref([]);\nconst rules = {\n\taccount: [\n\t\t{ required: true, message: '请输入账号', trigger: 'blur' },\n\t\t{\n\t\t\tasync validator(_rule, value) {\n\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\t\t\tif (value === 'taken') throw new Error('账号已占用');\n\t\t\t},\n\t\t\ttrigger: 'blur'\n\t\t}\n\t],\n\tconfirm: [\n\t\t{\n\t\t\tvalidator(_rule, value, callback) {\n\t\t\t\tcallback(\n\t\t\t\t\tvalue === model.account && value ? undefined : new Error('两次账号需一致')\n\t\t\t\t);\n\t\t\t},\n\t\t\ttrigger: 'blur'\n\t\t}\n\t]\n};\nasync function validate() {\n\tsaving.value = true;\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '校验失败';\n\t} finally {\n\t\tsaving.value = false;\n\t}\n}\nfunction setInitial() {\n\tform.value?.setInitialValues({ account: 'seed', confirm: 'seed' });\n\tresult.value = '新的初始值已保存；点击恢复初始值';\n}\nfunction inspect() {\n\tresult.value = `字段数 ${form.value?.fields.length}；账号 ${form.value?.getField('account')?.validateState}`;\n}\n</script>\n\n<style scoped>\n.control-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dynamic",
					"title": "动态字段、嵌套路径与数字校验",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/dynamic/ts/Demo.vue",
									"sha256": "0d61472d0b2252c629f067485a34d8e2651b30b8f2ec430a1c30945c6883ef3c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{ model, labelPosition: 'top' }\"\n\t\t\t@submit.prevent=\"validate\"\n\t\t>\n\t\t\t<AsamFormItem label=\"联系信息\">\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"邮箱\"\n\t\t\t\t\t\tprop=\"contact.email\"\n\t\t\t\t\t\t:rules=\"[{ type: 'email', required: true, message: '请输入有效邮箱' }]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.contact.email\" aria-label=\"邮箱\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"数量\"\n\t\t\t\t\t\t:prop=\"['contact', 'quantity']\"\n\t\t\t\t\t\t:rules=\"[{ type: 'number', min: 1, message: '数量至少为 1' }]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t\tv-model.number=\"model.contact.quantity\"\n\t\t\t\t\t\t\taria-label=\"数量\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tv-for=\"(row, index) in model.rows\"\n\t\t\t\t:key=\"row.id\"\n\t\t\t\t:label=\"`条目 ${index + 1}`\"\n\t\t\t\t:prop=\"['rows', String(index), 'value']\"\n\t\t\t\t:rules=\"[{ required: true, message: '条目不能为空' }]\"\n\t\t\t>\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamInput v-model=\"row.value\" :aria-label=\"`条目 ${index + 1}`\" />\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"model.rows.splice(index, 1)\">\n\t\t\t\t\t\t删除条目 {{ index + 1 }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamButton type=\"default\" @click=\"add\">添加条目</AsamButton>\n\t\t\t<AsamFormActions submit-native-type=\"submit\" @cancel=\"form?.resetFields()\" />\n\t\t</AsamBaseForm>\n\t\t<output>{{ result }}；{{ model }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBaseFormDynamicExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamInputNumber,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamButton,\n\tAsamFormActions\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose } from '@asam-ui/ui';\nconst form = ref<AsamBaseFormExpose>();\nconst model = reactive({ contact: { email: '', quantity: 0 }, rows: [{ id: 1, value: '' }] });\nlet id = 1;\nconst result = ref('动态字段由使用方维护；不使用 DATA 层 AsamForm schema');\nfunction add(): void {\n\tmodel.rows.push({ id: ++id, value: '' });\n}\nasync function validate(): Promise<void> {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '全部字段有效';\n\t} catch {\n\t\tresult.value = '请检查动态字段';\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/dynamic/js/Demo.vue",
									"sha256": "bfc0a4b720b1cf3327e4455bdeb9b9692c0bee3efc5d6a4047b75dcec92c7376",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{ model, labelPosition: 'top' }\"\n\t\t\t@submit.prevent=\"validate\"\n\t\t>\n\t\t\t<AsamFormItem label=\"联系信息\">\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"邮箱\"\n\t\t\t\t\t\tprop=\"contact.email\"\n\t\t\t\t\t\t:rules=\"[{ type: 'email', required: true, message: '请输入有效邮箱' }]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.contact.email\" aria-label=\"邮箱\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tlabel=\"数量\"\n\t\t\t\t\t\t:prop=\"['contact', 'quantity']\"\n\t\t\t\t\t\t:rules=\"[{ type: 'number', min: 1, message: '数量至少为 1' }]\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInputNumber\n\t\t\t\t\t\t\tv-model.number=\"model.contact.quantity\"\n\t\t\t\t\t\t\taria-label=\"数量\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tv-for=\"(row, index) in model.rows\"\n\t\t\t\t:key=\"row.id\"\n\t\t\t\t:label=\"`条目 ${index + 1}`\"\n\t\t\t\t:prop=\"['rows', String(index), 'value']\"\n\t\t\t\t:rules=\"[{ required: true, message: '条目不能为空' }]\"\n\t\t\t>\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamInput v-model=\"row.value\" :aria-label=\"`条目 ${index + 1}`\" />\n\t\t\t\t\t<AsamButton type=\"default\" @click=\"model.rows.splice(index, 1)\">\n\t\t\t\t\t\t删除条目 {{ index + 1 }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamButton type=\"default\" @click=\"add\">添加条目</AsamButton>\n\t\t\t<AsamFormActions submit-native-type=\"submit\" @cancel=\"form?.resetFields()\" />\n\t\t</AsamBaseForm>\n\t\t<output>{{ result }}；{{ model }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBaseFormDynamicExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamInputNumber,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamButton,\n\tAsamFormActions\n} from '@asam-ui/ui';\nconst form = ref();\nconst model = reactive({ contact: { email: '', quantity: 0 }, rows: [{ id: 1, value: '' }] });\nlet id = 1;\nconst result = ref('动态字段由使用方维护；不使用 DATA 层 AsamForm schema');\nfunction add() {\n\tmodel.rows.push({ id: ++id, value: '' });\n}\nasync function validate() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '全部字段有效';\n\t} catch {\n\t\tresult.value = '请检查动态字段';\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "presentation",
					"title": "标签提示、规则变化与 callback",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/presentation/ts/Demo.vue",
									"sha256": "6d25c49cec0309f3ee6d533d8cf9fac0836583a9e7fd15899a94a24b6df1fdef",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamCheckboxItem v-model=\"hideStar\"> 隐藏必填星号</AsamCheckboxItem>\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-star\">星号位置</label>\n\t\t\t\t<AsamSelect id=\"control-star\" v-model=\"star\">\n\t\t\t\t\t<AsamOption :label=\"'left'\" :value=\"'left'\">left</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'right'\" :value=\"'right'\">right</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<AsamCheckboxItem v-model=\"showMessage\"> 显示消息</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"inlineMessage\"> 行内错误</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"validateOnRuleChange\"> 规则改变时校验</AsamCheckboxItem>\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-labelWidth\">标签宽度</label>\n\t\t\t\t<AsamSelect id=\"control-labelWidth\" v-model=\"labelWidth\">\n\t\t\t\t\t<AsamOption value=\"auto\" :label=\"'auto'\">auto</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"0\" :label=\"'0'\">0</AsamOption>\n\t\t\t\t\t<AsamOption value=\"120px\" :label=\"'120px'\">120px</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t</div>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:label-width=\"labelWidth\"\n\t\t\tlabel-suffix=\"：\"\n\t\t\t:hide-required-asterisk=\"hideStar\"\n\t\t\t:require-asterisk-position=\"star\"\n\t\t\t:show-message=\"showMessage\"\n\t\t\t:inline-message=\"inlineMessage\"\n\t\t\tstatus-icon\n\t\t\t:validate-on-rule-change=\"validateOnRuleChange\"\n\t\t>\n\t\t\t<AsamFormItem label=\"必填项\" prop=\"name\">\n\t\t\t\t<AsamInput v-model=\"model.name\" aria-label=\"必填项\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"外部状态\" :validate-status=\"status\" :error=\"externalError\">\n\t\t\t\t<AsamInput v-model=\"model.other\" aria-label=\"外部状态\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"validateCallback\">callback 校验</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"changeRules\">改变规则消息</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.validateField('name', callback)\">\n\t\t\t\tcallback 字段校验\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.clearValidate('name')\"\n\t\t\t\t>清除指定字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\t@click=\"status = status === 'validating' ? 'success' : 'validating'\"\n\t\t\t>\n\t\t\t\t切换外部状态\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"externalError = externalError ? '' : '服务端提示'\">\n\t\t\t\t切换外部消息\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamBaseFormPresentationExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamBaseFormExpose, AsamBaseFormProps, AsamFormItemProps } from '@asam-ui/ui';\nconst form = ref<AsamBaseFormExpose>();\nconst model = reactive({ name: '', other: '' });\nconst hideStar = ref(false);\nconst star = ref<'left' | 'right'>('left');\nconst showMessage = ref(true);\nconst inlineMessage = ref(false);\nconst validateOnRuleChange = ref(true);\nconst labelWidth = ref<string | number>('auto');\nconst status = ref<AsamFormItemProps['validateStatus']>('');\nconst externalError = ref('');\nconst result = ref('callback 尚未执行');\nconst rules = ref<AsamBaseFormProps['rules']>({\n\tname: [{ required: true, message: '原规则消息' }]\n});\nconst callback: NonNullable<Parameters<AsamBaseFormExpose['validate']>[0]> = (valid, fields) => {\n\tresult.value = `${valid ? '有效' : '无效'}；错误字段 ${Object.keys(fields ?? {}).join(',')}`;\n};\nfunction validateCallback(): void {\n\tvoid form.value?.validate(callback);\n}\nfunction changeRules(): void {\n\trules.value = { name: [{ required: true, message: '新规则消息' }] };\n}\n</script>\n\n<style scoped>\n.control-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamBaseForm/presentation/js/Demo.vue",
									"sha256": "ec9f143ad648ee81e037f32b747f647e98caa55c926788ef9e9cac55478c04fc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamCheckboxItem v-model=\"hideStar\"> 隐藏必填星号</AsamCheckboxItem>\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-star\">星号位置</label>\n\t\t\t\t<AsamSelect id=\"control-star\" v-model=\"star\">\n\t\t\t\t\t<AsamOption :label=\"'left'\" :value=\"'left'\">left</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'right'\" :value=\"'right'\">right</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<AsamCheckboxItem v-model=\"showMessage\"> 显示消息</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"inlineMessage\"> 行内错误</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"validateOnRuleChange\"> 规则改变时校验</AsamCheckboxItem>\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-labelWidth\">标签宽度</label>\n\t\t\t\t<AsamSelect id=\"control-labelWidth\" v-model=\"labelWidth\">\n\t\t\t\t\t<AsamOption value=\"auto\" :label=\"'auto'\">auto</AsamOption>\n\t\t\t\t\t<AsamOption :value=\"0\" :label=\"'0'\">0</AsamOption>\n\t\t\t\t\t<AsamOption value=\"120px\" :label=\"'120px'\">120px</AsamOption>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t</div>\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\t:model=\"model\"\n\t\t\t:rules=\"rules\"\n\t\t\t:label-width=\"labelWidth\"\n\t\t\tlabel-suffix=\"：\"\n\t\t\t:hide-required-asterisk=\"hideStar\"\n\t\t\t:require-asterisk-position=\"star\"\n\t\t\t:show-message=\"showMessage\"\n\t\t\t:inline-message=\"inlineMessage\"\n\t\t\tstatus-icon\n\t\t\t:validate-on-rule-change=\"validateOnRuleChange\"\n\t\t>\n\t\t\t<AsamFormItem label=\"必填项\" prop=\"name\">\n\t\t\t\t<AsamInput v-model=\"model.name\" aria-label=\"必填项\" />\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"外部状态\" :validate-status=\"status\" :error=\"externalError\">\n\t\t\t\t<AsamInput v-model=\"model.other\" aria-label=\"外部状态\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"validateCallback\">callback 校验</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"changeRules\">改变规则消息</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.validateField('name', callback)\">\n\t\t\t\tcallback 字段校验\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"form?.clearValidate('name')\"\n\t\t\t\t>清除指定字段</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\t@click=\"status = status === 'validating' ? 'success' : 'validating'\"\n\t\t\t>\n\t\t\t\t切换外部状态\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"externalError = externalError ? '' : '服务端提示'\">\n\t\t\t\t切换外部消息\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamBaseFormPresentationExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamButton\n} from '@asam-ui/ui';\nconst form = ref();\nconst model = reactive({ name: '', other: '' });\nconst hideStar = ref(false);\nconst star = ref('left');\nconst showMessage = ref(true);\nconst inlineMessage = ref(false);\nconst validateOnRuleChange = ref(true);\nconst labelWidth = ref('auto');\nconst status = ref('');\nconst externalError = ref('');\nconst result = ref('callback 尚未执行');\nconst rules = ref({\n\tname: [{ required: true, message: '原规则消息' }]\n});\nconst callback = (valid, fields) => {\n\tresult.value = `${valid ? '有效' : '无效'}；错误字段 ${Object.keys(fields ?? {}).join(',')}`;\n};\nfunction validateCallback() {\n\tvoid form.value?.validate(callback);\n}\nfunction changeRules() {\n\trules.value = { name: [{ required: true, message: '新规则消息' }] };\n}\n</script>\n\n<style scoped>\n.control-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSegmented",
			"documentation": "/component-AsamSegmented.html",
			"demos": [
				{
					"id": "basic",
					"title": "选项与方向",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/basic/ts/Demo.vue",
									"sha256": "1c0157dacec51c49848cdf1ec679c88ab7e734825bceaf33800ec953fe3fe7f5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSegmented\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ options: options, block: true }\"\n\t\t\t@change=\"event = String($event)\"\n\t\t/>\n\t\t<AsamSegmented v-model=\"value\" :options=\"options\" direction=\"vertical\" />\n\t\t<AsamSegmented :model-value=\"value\" :options=\"options\" disabled aria-label=\"禁用分段\" />\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSegmentedBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSegmented } from '@asam-ui/ui';\nconst value = ref('day');\nconst options = [\n\t{ label: '日', value: 'day' },\n\t{ label: '周', value: 'week' },\n\t{ label: '月', value: 'month', disabled: true }\n];\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/basic/js/Demo.vue",
									"sha256": "f38b371c08765fc844534fc8bacb04ac7c804a5f632fe3a87959395eaeeb62a2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSegmented\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ options: options, block: true }\"\n\t\t\t@change=\"event = String($event)\"\n\t\t/>\n\t\t<AsamSegmented v-model=\"value\" :options=\"options\" direction=\"vertical\" />\n\t\t<AsamSegmented :model-value=\"value\" :options=\"options\" disabled aria-label=\"禁用分段\" />\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSegmentedBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSegmented } from '@asam-ui/ui';\nconst value = ref('day');\nconst options = [\n\t{ label: '日', value: 'day' },\n\t{ label: '周', value: 'week' },\n\t{ label: '月', value: 'month', disabled: true }\n];\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "自定义选项与字段",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/slots/ts/Demo.vue",
									"sha256": "15e365ceaf6b90700f2c499966f57bae3f8b5d3b1e93df97b996c5a2820cc7a8",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSegmented\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ label: 'name', value: 'id', disabled: 'locked' }\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t{{ typeof item === 'object' ? item.name : item }}视图\n\t\t\t</template>\n\t\t</AsamSegmented>\n\t\t<output>值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSegmentedSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamSegmented } from '@asam-ui/ui';\nconst value = ref('list');\nconst options = [\n\t{ id: 'list', name: '列表', locked: false },\n\t{ id: 'grid', name: '网格', locked: false }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/slots/js/Demo.vue",
									"sha256": "eb1ac2a02a0a20ec0e82462da7ca68083d1d749c372767081c6f811bb5e5e1b0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSegmented\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ label: 'name', value: 'id', disabled: 'locked' }\"\n\t\t>\n\t\t\t<template #default=\"{ item }\">\n\t\t\t\t{{ typeof item === 'object' ? item.name : item }}视图\n\t\t\t</template>\n\t\t</AsamSegmented>\n\t\t<output>值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSegmentedSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamSegmented } from '@asam-ui/ui';\nconst value = ref('list');\nconst options = [\n\t{ id: 'list', name: '列表', locked: false },\n\t{ id: 'grid', name: '网格', locked: false }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/sizes/ts/Demo.vue",
									"sha256": "85e0bbdbf15ec8752d642311c8b4bd36a4d16ad116239f82d7bc59016697e524",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSegmented size=\"large\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSegmented size=\"big\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSegmented size=\"default\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSegmented size=\"small\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSegmented model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSegmentedSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSegmented, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/sizes/js/Demo.vue",
									"sha256": "4140cf5ed0822dbae3a067973172da7258024f307b7ccf445b038600c8a19fc4",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSegmented size=\"large\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSegmented size=\"big\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSegmented size=\"default\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSegmented size=\"small\" model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSegmented model-value=\"日\" :options=\"['日', '周', '月']\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSegmentedSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSegmented, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "style",
					"title": "分段控件主题变量",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/style/ts/Demo.vue",
									"sha256": "96ffd0f00613a5ec3316531b36b79fc6b6bb2dac580c4f5af21ac4e3d5c34dfc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSegmented v-model=\"value\" class=\"segmented-theme\" :options=\"options\" />\n\t\t<output>视图：{{ value }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSegmented } from '@asam-ui/ui';\nconst value = ref('list');\nconst options = [\n\t{ label: '列表', value: 'list' },\n\t{ label: '网格', value: 'grid' },\n\t{ label: '停用', value: 'disabled', disabled: true }\n];\ndefineOptions({ name: 'AsamSegmentedStyleDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\n.segmented-theme {\n\t--el-segmented-item-selected-color: var(--asam-color-text-primary, #18212b);\n\t--el-segmented-item-selected-bg-color: var(--asam-color-primary-light, #cbdce7);\n\t--el-border-radius-base: var(--asam-radius-large, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSegmented/style/js/Demo.vue",
									"sha256": "533102667d9036fb36870f4e57528c1274212a5abf41ae6fabbd203bc380034a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSegmented v-model=\"value\" class=\"segmented-theme\" :options=\"options\" />\n\t\t<output>视图：{{ value }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSegmented } from '@asam-ui/ui';\nconst value = ref('list');\nconst options = [\n\t{ label: '列表', value: 'list' },\n\t{ label: '网格', value: 'grid' },\n\t{ label: '停用', value: 'disabled', disabled: true }\n];\ndefineOptions({ name: 'AsamSegmentedStyleDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\n.segmented-theme {\n\t--el-segmented-item-selected-color: var(--asam-color-text-primary, #18212b);\n\t--el-segmented-item-selected-bg-color: var(--asam-color-primary-light, #cbdce7);\n\t--el-border-radius-base: var(--asam-radius-large, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamFormItem",
			"documentation": "/component-AsamFormItem.html",
			"demos": [
				{
					"id": "basic",
					"title": "帮助、标签与错误插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/basic/ts/Demo.vue",
									"sha256": "156eda3a6abeb5be4b4288ee3652bc59e91d70b641baaef1c89c5e33516248cb",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{ ...{ 'label-position': 'top' }, model: model, rules: rules }\"\n\t\t>\n\t\t\t<AsamFormItem ref=\"item\" v-bind=\"{ label: '项目名称', prop: 'name', help: '名称必填' }\">\n\t\t\t\t<template #label=\"{ label }\"> {{ label }} * </template>\n\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t<template #help> 用于团队列表展示 </template>\n\t\t\t\t<template #error=\"{ error }\">\n\t\t\t\t\t<span role=\"alert\">\n\t\t\t\t\t\t{{ error }}\n\t\t\t\t\t</span>\n\t\t\t\t</template>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" @click=\"submit\"> 校验 </AsamButton>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormItemBasicExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nimport type { AsamBaseFormExpose, AsamBaseFormProps } from '@asam-ui/ui';\nconst form = ref<AsamBaseFormExpose>();\nconst model = reactive({ name: '', team: '' });\nconst rules: AsamBaseFormProps['rules'] = {\n\tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],\n\tteam: [{ required: true, message: '请选择团队', trigger: 'change' }]\n};\nconst result = ref('尚未提交');\nasync function submit() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '请检查必填项';\n\t}\n}\nimport type { AsamFormItemExpose } from '@asam-ui/ui';\nconst item = ref<AsamFormItemExpose>();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/basic/js/Demo.vue",
									"sha256": "dc0a14e6a9864a3e6739116ffb6b58a06c73f8253dc523480df301cdcf9f1115",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm\n\t\t\tref=\"form\"\n\t\t\tv-bind=\"{ ...{ 'label-position': 'top' }, model: model, rules: rules }\"\n\t\t>\n\t\t\t<AsamFormItem ref=\"item\" v-bind=\"{ label: '项目名称', prop: 'name', help: '名称必填' }\">\n\t\t\t\t<template #label=\"{ label }\"> {{ label }} * </template>\n\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t<template #help> 用于团队列表展示 </template>\n\t\t\t\t<template #error=\"{ error }\">\n\t\t\t\t\t<span role=\"alert\">\n\t\t\t\t\t\t{{ error }}\n\t\t\t\t\t</span>\n\t\t\t\t</template>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" @click=\"submit\"> 校验 </AsamButton>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormItemBasicExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nconst form = ref();\nconst model = reactive({ name: '', team: '' });\nconst rules = {\n\tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],\n\tteam: [{ required: true, message: '请选择团队', trigger: 'change' }]\n};\nconst result = ref('尚未提交');\nasync function submit() {\n\ttry {\n\t\tawait form.value?.validate();\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '请检查必填项';\n\t}\n}\nconst item = ref();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "单项清除与重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/instance/ts/Demo.vue",
									"sha256": "35ed6d2435d68d3ec0fdf8ee6a0017f67e95c292ade02cc26e359a46870c4756",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm :model=\"model\">\n\t\t\t<AsamFormItem\n\t\t\t\tref=\"item\"\n\t\t\t\tv-bind=\"{ label: '名称', prop: 'name' }\"\n\t\t\t\t:rules=\"[{ required: true, message: '名称必填', trigger: 'blur' }]\"\n\t\t\t>\n\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"item?.clearValidate()\"> 清除提示 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"item?.resetField()\"> 重置字段 </AsamButton>\n\t\t</div>\n\t\t<output>{{ item?.validateState }}：{{ item?.validateMessage }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormItemInstanceExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nimport type { AsamFormItemExpose } from '@asam-ui/ui';\nconst item = ref<AsamFormItemExpose>();\nconst model = reactive({ name: 'ASAM' });\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/instance/js/Demo.vue",
									"sha256": "91e4d765d085d46c1c43c4200822ad0e2464cefc89750943b9fb39df1b076da5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm :model=\"model\">\n\t\t\t<AsamFormItem\n\t\t\t\tref=\"item\"\n\t\t\t\tv-bind=\"{ label: '名称', prop: 'name' }\"\n\t\t\t\t:rules=\"[{ required: true, message: '名称必填', trigger: 'blur' }]\"\n\t\t\t>\n\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"item?.clearValidate()\"> 清除提示 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"item?.resetField()\"> 重置字段 </AsamButton>\n\t\t</div>\n\t\t<output>{{ item?.validateState }}：{{ item?.validateMessage }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormItemInstanceExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nconst item = ref();\nconst model = reactive({ name: 'ASAM' });\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/sizes/ts/Demo.vue",
									"sha256": "01f4d431def774165a08fe4d999c4a964c91d60ebf667b886b38e7e9ba2f7838",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\tsize: 'large',\n\t\t\t\t\t\t\tlabel: '项目名称',\n\t\t\t\t\t\t\tprop: 'name',\n\t\t\t\t\t\t\thelp: '辅助说明'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{ size: 'big', label: '项目名称', prop: 'name', help: '辅助说明' }\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\tsize: 'default',\n\t\t\t\t\t\t\tlabel: '项目名称',\n\t\t\t\t\t\t\tprop: 'name',\n\t\t\t\t\t\t\thelp: '辅助说明'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\tlabel: '项目名称',\n\t\t\t\t\t\t\tprop: 'name',\n\t\t\t\t\t\t\thelp: '辅助说明'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"项目名称\" prop=\"name\" help=\"辅助说明\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormItemSizesExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst model = reactive({ name: 'ASAM' });\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/sizes/js/Demo.vue",
									"sha256": "8211fb17baee31f5cb22782d213e16b80b8146d076362c307aff413c206b3503",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\tsize: 'large',\n\t\t\t\t\t\t\tlabel: '项目名称',\n\t\t\t\t\t\t\tprop: 'name',\n\t\t\t\t\t\t\thelp: '辅助说明'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{ size: 'big', label: '项目名称', prop: 'name', help: '辅助说明' }\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\tsize: 'default',\n\t\t\t\t\t\t\tlabel: '项目名称',\n\t\t\t\t\t\t\tprop: 'name',\n\t\t\t\t\t\t\thelp: '辅助说明'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem\n\t\t\t\t\t\tv-bind=\"{\n\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\tlabel: '项目名称',\n\t\t\t\t\t\t\tprop: 'name',\n\t\t\t\t\t\t\thelp: '辅助说明'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t\t\t<AsamFormItem label=\"项目名称\" prop=\"name\" help=\"辅助说明\">\n\t\t\t\t\t\t<AsamInput v-model=\"model.name\" />\n\t\t\t\t\t</AsamFormItem>\n\t\t\t\t</AsamBaseForm>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormItemSizesExample' });\nimport { ref, reactive } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst model = reactive({ name: 'ASAM' });\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "accessibility",
					"title": "可访问标签、错误插槽与单项初始值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/accessibility/ts/Demo.vue",
									"sha256": "14ee3aa23154a455931580e1122acd3b57807fa2e94c9d5a1ce4e4907c4e817c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm :model=\"model\" label-width=\"120px\" status-icon>\n\t\t\t<AsamFormItem\n\t\t\t\tref=\"single\"\n\t\t\t\tlabel=\"单一控件\"\n\t\t\t\tprop=\"single\"\n\t\t\t\thelp=\"help 属性\"\n\t\t\t\t:rules=\"[{ required: true, message: '请填写单一控件' }]\"\n\t\t\t>\n\t\t\t\t<template #label=\"{ label }\">\n\t\t\t\t\t<strong>{{ label }}</strong>\n\t\t\t\t</template>\n\t\t\t\t<AsamInput v-model=\"model.single\" />\n\t\t\t\t<template #help>help 插槽覆盖属性，并独立于校验消息</template>\n\t\t\t\t<template #error=\"{ error }\">\n\t\t\t\t\t<span role=\"alert\">自定义错误：{{ error }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"控件组\" label-position=\"top\" required>\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamInput v-model=\"model.first\" aria-label=\"名字\" />\n\t\t\t\t\t<AsamInput v-model=\"model.last\" aria-label=\"姓氏\" />\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"指定关联\"\n\t\t\t\tfor=\"explicit-input\"\n\t\t\t\t:label-width=\"0\"\n\t\t\t\t:error=\"externalError\"\n\t\t\t>\n\t\t\t\t<AsamInput id=\"explicit-input\" aria-label=\"指定关联\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"validate\">单项校验</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.clearValidate()\">清除单项</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.setInitialValue('新的单项初始值')\">\n\t\t\t\t设置单项初始值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.resetField()\">恢复单项</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"externalError = externalError ? '' : '服务端错误'\">\n\t\t\t\t切换外部错误\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<output>{{ single?.validateState }}；{{ single?.validateMessage }}；{{ result }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormItemAccessibilityExample' });\nimport { reactive, ref } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nimport type { AsamFormItemExpose } from '@asam-ui/ui';\nconst model = reactive({ single: '', first: '', last: '' });\nconst single = ref<AsamFormItemExpose>();\nconst externalError = ref('');\nconst result = ref('');\nasync function validate(): Promise<void> {\n\ttry {\n\t\tawait single.value?.validate('');\n\t\tresult.value = '单项有效';\n\t} catch {\n\t\tresult.value = '单项无效';\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/accessibility/js/Demo.vue",
									"sha256": "90ef2473cb635825bf8639f2c644539c30116ab7899b82559057b854c30f9d2e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamBaseForm :model=\"model\" label-width=\"120px\" status-icon>\n\t\t\t<AsamFormItem\n\t\t\t\tref=\"single\"\n\t\t\t\tlabel=\"单一控件\"\n\t\t\t\tprop=\"single\"\n\t\t\t\thelp=\"help 属性\"\n\t\t\t\t:rules=\"[{ required: true, message: '请填写单一控件' }]\"\n\t\t\t>\n\t\t\t\t<template #label=\"{ label }\">\n\t\t\t\t\t<strong>{{ label }}</strong>\n\t\t\t\t</template>\n\t\t\t\t<AsamInput v-model=\"model.single\" />\n\t\t\t\t<template #help>help 插槽覆盖属性，并独立于校验消息</template>\n\t\t\t\t<template #error=\"{ error }\">\n\t\t\t\t\t<span role=\"alert\">自定义错误：{{ error }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem label=\"控件组\" label-position=\"top\" required>\n\t\t\t\t<div class=\"demo-slot-layout\">\n\t\t\t\t\t<AsamInput v-model=\"model.first\" aria-label=\"名字\" />\n\t\t\t\t\t<AsamInput v-model=\"model.last\" aria-label=\"姓氏\" />\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t\t<AsamFormItem\n\t\t\t\tlabel=\"指定关联\"\n\t\t\t\tfor=\"explicit-input\"\n\t\t\t\t:label-width=\"0\"\n\t\t\t\t:error=\"externalError\"\n\t\t\t>\n\t\t\t\t<AsamInput id=\"explicit-input\" aria-label=\"指定关联\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"validate\">单项校验</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.clearValidate()\">清除单项</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.setInitialValue('新的单项初始值')\">\n\t\t\t\t设置单项初始值\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"single?.resetField()\">恢复单项</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"externalError = externalError ? '' : '服务端错误'\">\n\t\t\t\t切换外部错误\n\t\t\t</AsamButton>\n\t\t</div>\n\t\t<output>{{ single?.validateState }}；{{ single?.validateMessage }}；{{ result }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormItemAccessibilityExample' });\nimport { reactive, ref } from 'vue';\nimport { AsamBaseForm, AsamFormItem, AsamInput, AsamButton } from '@asam-ui/ui';\nconst model = reactive({ single: '', first: '', last: '' });\nconst single = ref();\nconst externalError = ref('');\nconst result = ref('');\nasync function validate() {\n\ttry {\n\t\tawait single.value?.validate('');\n\t\tresult.value = '单项有效';\n\t} catch {\n\t\tresult.value = '单项无效';\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n</style>\n\n<style scoped>\n.demo-slot-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\twidth: 100%;\n\tmin-width: 0;\n}\n.demo-slot-layout > .el-button {\n\tjustify-self: start;\n}\n.demo-slot-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n.demo-slot-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n.demo-slot-actions > .el-button + .el-button {\n\tmargin-left: 0;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "status",
					"title": "初始与动态状态、外部错误和重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/status/ts/Demo.vue",
									"sha256": "f72f1ce18029eadd3763989170527ce61ae3c094283914bedccc8fb548e36e0b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<label for=\"initial-status\">下次挂载的初始状态</label>\n\t\t\t<AsamSelect id=\"initial-status\" v-model=\"initialStatus\">\n\t\t\t\t<AsamOption value=\"\" :label=\"'空'\">空</AsamOption>\n\t\t\t\t<AsamOption value=\"error\" :label=\"'error'\">error</AsamOption>\n\t\t\t\t<AsamOption value=\"validating\" :label=\"'validating'\">validating</AsamOption>\n\t\t\t\t<AsamOption value=\"success\" :label=\"'success'\">success</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamCheckboxItem v-model=\"initialError\"> 初始外部错误</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" @click=\"revision++\">按初始设置重新挂载</AsamButton>\n\t\t</div>\n\t\t<StateField\n\t\t\t:key=\"revision\"\n\t\t\t:initial-status=\"initialStatus\"\n\t\t\t:initial-error=\"initialError ? '初始服务端提示' : ''\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormItemStatusExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\nimport type { AsamFormItemProps } from '@asam-ui/ui';\nimport StateField from './StateField.vue';\nconst initialStatus = ref<AsamFormItemProps['validateStatus']>('success');\nconst initialError = ref(false);\nconst revision = ref(0);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								},
								{
									"name": "StateField.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/status/ts/StateField.vue",
									"sha256": "4dc29061ac5540de70582f5f4aa99b7bc79b1581726a6800b06e19c1ffdd510e",
									"source": "<template>\n\t<div class=\"state-example\">\n\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t<AsamFormItem\n\t\t\t\tref=\"field\"\n\t\t\t\tlabel=\"状态示例字段\"\n\t\t\t\tprop=\"value\"\n\t\t\t\t:validate-status=\"status\"\n\t\t\t\t:error=\"error\"\n\t\t\t\t:rules=\"[{ required: true, message: '字段不能为空' }]\"\n\t\t\t>\n\t\t\t\t<AsamInput v-model=\"model.value\" :validate-event=\"false\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<label for=\"dynamic-status\">动态传入状态</label>\n\t\t\t<AsamSelect id=\"dynamic-status\" v-model=\"status\">\n\t\t\t\t<AsamOption value=\"\" :label=\"'空'\">空</AsamOption>\n\t\t\t\t<AsamOption value=\"error\" :label=\"'error'\">error</AsamOption>\n\t\t\t\t<AsamOption value=\"validating\" :label=\"'validating'\">validating</AsamOption>\n\t\t\t\t<AsamOption value=\"success\" :label=\"'success'\">success</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" @click=\"toggleError\">切换外部错误</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"error = ''\">清空外部错误</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"validate\">校验字段</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"field?.clearValidate()\">清除校验状态</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"field?.resetField()\">重置字段</AsamButton>\n\t\t</div>\n\t\t<output data-field-props>\n\t\t\t{{ '传入状态：' + (status || '空') + '；传入错误：' + (error || '空') }}\n\t\t</output>\n\t\t<output data-field-state>内部状态：{{ field?.validateState || '空' }}</output>\n\t\t<output data-field-message>内部消息：{{ field?.validateMessage || '空' }}</output>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamFormItemStateFieldExample' });\nimport { reactive, ref } from 'vue';\nimport type { PropType } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamFormItemExpose, AsamFormItemProps } from '@asam-ui/ui';\nconst props = defineProps({\n\tinitialStatus: { type: String as PropType<AsamFormItemProps['validateStatus']>, default: '' },\n\tinitialError: { type: String, default: '' }\n});\nconst model = reactive({ value: '初始值' });\nconst field = ref<AsamFormItemExpose>();\nconst status = ref(props.initialStatus);\nconst error = ref(props.initialError);\nconst result = ref('初始状态参数与内部状态分别显示；修改动态状态后观察结果。');\nfunction toggleError(): void {\n\terror.value = error.value === '服务端提示' ? '更新服务端提示' : '服务端提示';\n}\nasync function validate(): Promise<void> {\n\ttry {\n\t\tawait field.value?.validate('');\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '校验失败';\n\t}\n}\n</script>\n\n<style scoped>\n.state-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/status/js/Demo.vue",
									"sha256": "8eade5960841f1ce2b6f6097b30deeb6bda4ce31a4ea3d067560a295f6742b52",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<label for=\"initial-status\">下次挂载的初始状态</label>\n\t\t\t<AsamSelect id=\"initial-status\" v-model=\"initialStatus\">\n\t\t\t\t<AsamOption value=\"\" :label=\"'空'\">空</AsamOption>\n\t\t\t\t<AsamOption value=\"error\" :label=\"'error'\">error</AsamOption>\n\t\t\t\t<AsamOption value=\"validating\" :label=\"'validating'\">validating</AsamOption>\n\t\t\t\t<AsamOption value=\"success\" :label=\"'success'\">success</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamCheckboxItem v-model=\"initialError\"> 初始外部错误</AsamCheckboxItem>\n\t\t\t<AsamButton type=\"default\" @click=\"revision++\">按初始设置重新挂载</AsamButton>\n\t\t</div>\n\t\t<StateField\n\t\t\t:key=\"revision\"\n\t\t\t:initial-status=\"initialStatus\"\n\t\t\t:initial-error=\"initialError ? '初始服务端提示' : ''\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormItemStatusExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\nimport StateField from './StateField.vue';\nconst initialStatus = ref('success');\nconst initialError = ref(false);\nconst revision = ref(0);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								},
								{
									"name": "StateField.vue",
									"sourcePath": "apps/website/examples/AsamFormItem/status/js/StateField.vue",
									"sha256": "870c05826e0a70241a4b1bb824c9b083def3c95e905cdac7567b48e948a56779",
									"source": "<template>\n\t<div class=\"state-example\">\n\t\t<AsamBaseForm :model=\"model\" label-position=\"top\">\n\t\t\t<AsamFormItem\n\t\t\t\tref=\"field\"\n\t\t\t\tlabel=\"状态示例字段\"\n\t\t\t\tprop=\"value\"\n\t\t\t\t:validate-status=\"status\"\n\t\t\t\t:error=\"error\"\n\t\t\t\t:rules=\"[{ required: true, message: '字段不能为空' }]\"\n\t\t\t>\n\t\t\t\t<AsamInput v-model=\"model.value\" :validate-event=\"false\" />\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<div class=\"controls\">\n\t\t\t<label for=\"dynamic-status\">动态传入状态</label>\n\t\t\t<AsamSelect id=\"dynamic-status\" v-model=\"status\">\n\t\t\t\t<AsamOption value=\"\" :label=\"'空'\">空</AsamOption>\n\t\t\t\t<AsamOption value=\"error\" :label=\"'error'\">error</AsamOption>\n\t\t\t\t<AsamOption value=\"validating\" :label=\"'validating'\">validating</AsamOption>\n\t\t\t\t<AsamOption value=\"success\" :label=\"'success'\">success</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamButton type=\"default\" @click=\"toggleError\">切换外部错误</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"error = ''\">清空外部错误</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"validate\">校验字段</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"field?.clearValidate()\">清除校验状态</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"field?.resetField()\">重置字段</AsamButton>\n\t\t</div>\n\t\t<output data-field-props>\n\t\t\t{{ '传入状态：' + (status || '空') + '；传入错误：' + (error || '空') }}\n\t\t</output>\n\t\t<output data-field-state>内部状态：{{ field?.validateState || '空' }}</output>\n\t\t<output data-field-message>内部消息：{{ field?.validateMessage || '空' }}</output>\n\t\t<output>{{ result }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamFormItemStateFieldExample' });\nimport { reactive, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamBaseForm,\n\tAsamFormItem,\n\tAsamInput,\n\tAsamButton\n} from '@asam-ui/ui';\nconst props = defineProps({\n\tinitialStatus: { type: String, default: '' },\n\tinitialError: { type: String, default: '' }\n});\nconst model = reactive({ value: '初始值' });\nconst field = ref();\nconst status = ref(props.initialStatus);\nconst error = ref(props.initialError);\nconst result = ref('初始状态参数与内部状态分别显示；修改动态状态后观察结果。');\nfunction toggleError() {\n\terror.value = error.value === '服务端提示' ? '更新服务端提示' : '服务端提示';\n}\nasync function validate() {\n\ttry {\n\t\tawait field.value?.validate('');\n\t\tresult.value = '校验通过';\n\t} catch {\n\t\tresult.value = '校验失败';\n\t}\n}\n</script>\n\n<style scoped>\n.state-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSlider",
			"documentation": "/component-AsamSlider.html",
			"demos": [
				{
					"id": "basic",
					"title": "输入、步进与事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/basic/ts/Demo.vue",
									"sha256": "4f6d46b9dcafd9c886e3c408bc9b535fe60e735096979feac18f1aefef00a0a0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSlider\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ 'show-input': true, 'input-size': 'small' },\n\t\t\t\t...{ min: 0, max: 100, step: 5 }\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t\t@input=\"event = 'input: ' + $event\"\n\t\t\t@change=\"event = 'change: ' + $event\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦滑块 </AsamButton>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSliderBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSlider, AsamButton } from '@asam-ui/ui';\nimport type { AsamSliderExpose } from '@asam-ui/ui';\nconst control = ref<AsamSliderExpose>();\nconst value = ref(30);\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/basic/js/Demo.vue",
									"sha256": "7867a4703f6728bf5efb67d7b82679e69697a3ecade127391af21ee82c147e52",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSlider\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ 'show-input': true, 'input-size': 'small' },\n\t\t\t\t...{ min: 0, max: 100, step: 5 }\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t\t@input=\"event = 'input: ' + $event\"\n\t\t\t@change=\"event = 'change: ' + $event\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦滑块 </AsamButton>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSliderBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSlider, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref(30);\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "range",
					"title": "区间、标记与提示",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/range/ts/Demo.vue",
									"sha256": "926277e82f8021ecbff8adbc5d0f06ac642994faf8d6cd64c906e371eb12848b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSlider\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{\n\t\t\t\trange: true,\n\t\t\t\tmarks: { 0: '最低', 50: '建议', 100: '最高' },\n\t\t\t\t'format-tooltip': format\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSlider :model-value=\"30\" disabled />\n\t\t<output>区间：{{ range }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSliderRangeExample' });\nimport { ref } from 'vue';\nimport { AsamSlider } from '@asam-ui/ui';\nconst range = ref<number[]>([20, 80]);\nfunction format(value: number) {\n\treturn value + '%';\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/range/js/Demo.vue",
									"sha256": "9fc83ad4b087416043273903089aa37cf21d3675529290bab261e9342df38523",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSlider\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{\n\t\t\t\trange: true,\n\t\t\t\tmarks: { 0: '最低', 50: '建议', 100: '最高' },\n\t\t\t\t'format-tooltip': format\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSlider :model-value=\"30\" disabled />\n\t\t<output>区间：{{ range }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSliderRangeExample' });\nimport { ref } from 'vue';\nimport { AsamSlider } from '@asam-ui/ui';\nconst range = ref([20, 80]);\nfunction format(value) {\n\treturn value + '%';\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/sizes/ts/Demo.vue",
									"sha256": "b514163587d558242008c31d5976caad1d79d8e32b1e3d417656f96052bf9a2c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSlider size=\"large\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSlider size=\"big\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSlider size=\"default\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSlider size=\"small\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSlider :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSliderSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSlider, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/sizes/js/Demo.vue",
									"sha256": "f86a6a4a73a3e6db81c241bd3389c2c917abd20df5489e637b95baf68a2f4a94",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSlider size=\"large\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSlider size=\"big\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSlider size=\"default\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSlider size=\"small\" :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSlider :model-value=\"30\" show-input />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSliderSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSlider, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "modes",
					"title": "离散、标记限制与垂直模式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/modes/ts/Demo.vue",
									"sha256": "404f01c18e935abbba98d0784d1cdab7e6b92ae67edd19f8011388acf5ccf2ab",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSlider\n\t\t\tv-model=\"discrete\"\n\t\t\t:step=\"20\"\n\t\t\tshow-stops\n\t\t\t:show-tooltip=\"false\"\n\t\t\taria-label=\"离散刻度\"\n\t\t/>\n\t\t<AsamSlider\n\t\t\tv-model=\"marked\"\n\t\t\tstep=\"mark\"\n\t\t\t:marks=\"marks\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:format-tooltip=\"format\"\n\t\t\taria-label=\"只选标记\"\n\t\t/>\n\t\t<AsamSlider\n\t\t\tv-model=\"vertical\"\n\t\t\tvertical\n\t\t\theight=\"180px\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"100\"\n\t\t\t:step=\"10\"\n\t\t\taria-label=\"垂直滑块\"\n\t\t/>\n\t\t<output>离散：{{ discrete }}；标记：{{ marked }}；垂直：{{ vertical }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSlider } from '@asam-ui/ui';\nconst discrete = ref(20);\nconst marked = ref(25);\nconst vertical = ref(40);\nconst marks = { 0: '0', 25: '25', 60: '60', 100: '100' };\nconst format = (value: number) => `当前 ${value}%`;\ndefineOptions({ name: 'AsamSliderModesDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSlider/modes/js/Demo.vue",
									"sha256": "5c5b6dec963fb1ca59d582507dd6b35b53c7c8494dc39a6481d6b52a3717c70a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSlider\n\t\t\tv-model=\"discrete\"\n\t\t\t:step=\"20\"\n\t\t\tshow-stops\n\t\t\t:show-tooltip=\"false\"\n\t\t\taria-label=\"离散刻度\"\n\t\t/>\n\t\t<AsamSlider\n\t\t\tv-model=\"marked\"\n\t\t\tstep=\"mark\"\n\t\t\t:marks=\"marks\"\n\t\t\tplacement=\"bottom\"\n\t\t\t:format-tooltip=\"format\"\n\t\t\taria-label=\"只选标记\"\n\t\t/>\n\t\t<AsamSlider\n\t\t\tv-model=\"vertical\"\n\t\t\tvertical\n\t\t\theight=\"180px\"\n\t\t\t:min=\"0\"\n\t\t\t:max=\"100\"\n\t\t\t:step=\"10\"\n\t\t\taria-label=\"垂直滑块\"\n\t\t/>\n\t\t<output>离散：{{ discrete }}；标记：{{ marked }}；垂直：{{ vertical }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSlider } from '@asam-ui/ui';\nconst discrete = ref(20);\nconst marked = ref(25);\nconst vertical = ref(40);\nconst marks = { 0: '0', 25: '25', 60: '60', 100: '100' };\nconst format = (value) => `当前 ${value}%`;\ndefineOptions({ name: 'AsamSliderModesDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRate",
			"documentation": "/component-AsamRate.html",
			"demos": [
				{
					"id": "basic",
					"title": "半星、文字与只读",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/basic/ts/Demo.vue",
									"sha256": "e9f50d909d80cb5549a47e27b6eeaba2851e14a4772fcabbc10e6699526bb250",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'allow-half': true, 'show-text': true }\"\n\t\t\tv-model=\"value\"\n\t\t\t:texts=\"['很差', '较差', '一般', '满意', '很好']\"\n\t\t\t@change=\"event = $event\"\n\t\t/>\n\t\t<AsamRate\n\t\t\t:model-value=\"value\"\n\t\t\tv-bind=\"{ disabled: true, 'show-score': true, 'score-template': '{value} 分' }\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦评分 </AsamButton>\n\t\t<output>评分：{{ value }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRateBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRate, AsamButton } from '@asam-ui/ui';\nimport type { AsamRateExpose } from '@asam-ui/ui';\nconst control = ref<AsamRateExpose>();\nconst value = ref(3.5);\nconst event = ref(0);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/basic/js/Demo.vue",
									"sha256": "4513209918634dece55eaa49c96ace8822eba95b30d234bba16995b6d828df69",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'allow-half': true, 'show-text': true }\"\n\t\t\tv-model=\"value\"\n\t\t\t:texts=\"['很差', '较差', '一般', '满意', '很好']\"\n\t\t\t@change=\"event = $event\"\n\t\t/>\n\t\t<AsamRate\n\t\t\t:model-value=\"value\"\n\t\t\tv-bind=\"{ disabled: true, 'show-score': true, 'score-template': '{value} 分' }\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦评分 </AsamButton>\n\t\t<output>评分：{{ value }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRateBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRate, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref(3.5);\nconst event = ref(0);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "appearance",
					"title": "颜色与图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/appearance/ts/Demo.vue",
									"sha256": "2b476f946f02540df8f33772edc33c80c536d44945fdafe1dd90617ad9960ee7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\tclearable: true,\n\t\t\t\tmax: 5,\n\t\t\t\ticons: [StarFilled, StarFilled, StarFilled],\n\t\t\t\t'void-icon': Star,\n\t\t\t\tcolors: ['#d03050', '#e6a23c', '#18a058']\n\t\t\t}\"\n\t\t/>\n\t\t<output>评分：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRateAppearanceExample' });\nimport { ref } from 'vue';\nimport { AsamRate } from '@asam-ui/ui';\nimport { Star, StarFilled } from '@asam-ui/icons-vue';\nconst value = ref(3);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/appearance/js/Demo.vue",
									"sha256": "c57a6b0a723e2512deb4ffa42997d82ebd50107febc4ced35b32839bead000e7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\tclearable: true,\n\t\t\t\tmax: 5,\n\t\t\t\ticons: [StarFilled, StarFilled, StarFilled],\n\t\t\t\t'void-icon': Star,\n\t\t\t\tcolors: ['#d03050', '#e6a23c', '#18a058']\n\t\t\t}\"\n\t\t/>\n\t\t<output>评分：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRateAppearanceExample' });\nimport { ref } from 'vue';\nimport { AsamRate } from '@asam-ui/ui';\nimport { Star, StarFilled } from '@asam-ui/icons-vue';\nconst value = ref(3);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/sizes/ts/Demo.vue",
									"sha256": "61cd4008f85525ec27083b14287948511e69f4b6c1ab3afa6293ef913f92a1c7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRate size=\"large\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRate size=\"big\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRate size=\"default\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRate size=\"small\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRate :model-value=\"3\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRateSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRate, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/sizes/js/Demo.vue",
									"sha256": "3de0213b306e2e38b6e897ca65f9701bf5abb6a2637881fde99651034d6d49f5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRate size=\"large\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRate size=\"big\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRate size=\"default\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRate size=\"small\" :model-value=\"3\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRate :model-value=\"3\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRateSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRate, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "公开评分预览、恢复与聚焦",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/instance/ts/Demo.vue",
									"sha256": "ed9f62ebfbd6525b33f99e16f5039208a19de4f31b6e9a2fe8affee0ddd7b249",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tref=\"control\"\n\t\t\tv-model=\"rating\"\n\t\t\tshow-text\n\t\t\t:texts=\"['很差', '较差', '一般', '满意', '很好']\"\n\t\t\t:low-threshold=\"2\"\n\t\t\t:high-threshold=\"4\"\n\t\t\tclearable\n\t\t\taria-label=\"公开评分预览\"\n\t\t/>\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.setCurrentValue(4)\">预览 4 星</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.resetCurrentValue()\">结束预览</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\">聚焦评分</AsamButton>\n\t\t</div>\n\t\t<output>已提交评分：{{ rating }}；预览不会修改模型</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamRate, AsamButton } from '@asam-ui/ui';\nimport type { AsamRateExpose } from '@asam-ui/ui';\nconst control = ref<AsamRateExpose>();\nconst rating = ref(3);\ndefineOptions({ name: 'AsamRateInstanceDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-sm, 8px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/instance/js/Demo.vue",
									"sha256": "101c4c2bde99be19cc9af34c9c2e385ea7c2725f0af43e94b4cd1f8478737ae1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tref=\"control\"\n\t\t\tv-model=\"rating\"\n\t\t\tshow-text\n\t\t\t:texts=\"['很差', '较差', '一般', '满意', '很好']\"\n\t\t\t:low-threshold=\"2\"\n\t\t\t:high-threshold=\"4\"\n\t\t\tclearable\n\t\t\taria-label=\"公开评分预览\"\n\t\t/>\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.setCurrentValue(4)\">预览 4 星</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.resetCurrentValue()\">结束预览</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\">聚焦评分</AsamButton>\n\t\t</div>\n\t\t<output>已提交评分：{{ rating }}；预览不会修改模型</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamRate, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst rating = ref(3);\ndefineOptions({ name: 'AsamRateInstanceDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\n.actions {\n\tdisplay: flex;\n\tgap: var(--asam-space-sm, 8px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "style",
					"title": "评分主题变量",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/style/ts/Demo.vue",
									"sha256": "ec72bac7ae3531dcd29b92a2c90bfa5be03c14fd028fe05ef82d3daa6057573a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tv-model=\"value\"\n\t\t\tclass=\"rating-theme\"\n\t\t\tshow-text\n\t\t\t:texts=\"['很差', '较差', '一般', '满意', '很好']\"\n\t\t/>\n\t\t<AsamRate\n\t\t\t:model-value=\"value\"\n\t\t\tclass=\"rating-theme\"\n\t\t\tdisabled\n\t\t\tshow-score\n\t\t\tscore-template=\"{value} 分\"\n\t\t/>\n\t\t<output>评分：{{ value }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamRate } from '@asam-ui/ui';\nconst value = ref(3);\ndefineOptions({ name: 'AsamRateStyleDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\n.rating-theme {\n\t--el-rate-void-color: var(--asam-color-text-secondary, #64748b);\n\t--el-rate-fill-color: var(--asam-color-primary, #526d82);\n\t--el-rate-disabled-void-color: var(--asam-color-text-disabled, #94a3b8);\n\t--el-rate-text-color: var(--asam-color-text-primary, #18212b);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRate/style/js/Demo.vue",
									"sha256": "9ac308dbf1c8be03817608393c39318e75b1d70b40e0230b20f0633bc151939a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRate\n\t\t\tv-model=\"value\"\n\t\t\tclass=\"rating-theme\"\n\t\t\tshow-text\n\t\t\t:texts=\"['很差', '较差', '一般', '满意', '很好']\"\n\t\t/>\n\t\t<AsamRate\n\t\t\t:model-value=\"value\"\n\t\t\tclass=\"rating-theme\"\n\t\t\tdisabled\n\t\t\tshow-score\n\t\t\tscore-template=\"{value} 分\"\n\t\t/>\n\t\t<output>评分：{{ value }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamRate } from '@asam-ui/ui';\nconst value = ref(3);\ndefineOptions({ name: 'AsamRateStyleDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\n.rating-theme {\n\t--el-rate-void-color: var(--asam-color-text-secondary, #64748b);\n\t--el-rate-fill-color: var(--asam-color-primary, #526d82);\n\t--el-rate-disabled-void-color: var(--asam-color-text-disabled, #94a3b8);\n\t--el-rate-text-color: var(--asam-color-text-primary, #18212b);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamColorPicker",
			"documentation": "/component-AsamColorPicker.html",
			"demos": [
				{
					"id": "basic",
					"title": "格式、透明度与预设",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/basic/ts/Demo.vue",
									"sha256": "489ce8774f03011883a572fb759e8d7b44343e98f72954e9396ee7e7f20eb532",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPicker\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'show-alpha': true, 'color-format': 'hex' }\"\n\t\t\tv-model=\"color\"\n\t\t\t:predefine=\"['#526d82', '#18a058', '#d03050']\"\n\t\t\t@change=\"event = String($event)\"\n\t\t/>\n\t\t<output>颜色：{{ color }}；change：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColorPickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker } from '@asam-ui/ui';\nconst color = ref<string | null>('#526d82');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/basic/js/Demo.vue",
									"sha256": "007ad76e20de512f6930f73dc4c459ded062d569df6ea4a257dd0088f727ba0c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPicker\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'show-alpha': true, 'color-format': 'hex' }\"\n\t\t\tv-model=\"color\"\n\t\t\t:predefine=\"['#526d82', '#18a058', '#d03050']\"\n\t\t\t@change=\"event = String($event)\"\n\t\t/>\n\t\t<output>颜色：{{ color }}；change：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColorPickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker } from '@asam-ui/ui';\nconst color = ref('#526d82');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "实例与禁用状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/instance/ts/Demo.vue",
									"sha256": "cb1f444b6ebd5d36e3048dfa6db8486082ae135ac7b7e3e4c8cf847ffb045c5e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPicker ref=\"control\" v-model=\"color\" :disabled=\"disabled\" />\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.show()\"> 打开 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.hide()\"> 关闭 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t</div>\n\t\t<output>颜色：{{ color }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColorPickerInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker, AsamButton } from '@asam-ui/ui';\nimport type { AsamColorPickerExpose } from '@asam-ui/ui';\nconst control = ref<AsamColorPickerExpose>();\nconst color = ref<string | null>('#526d82');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/instance/js/Demo.vue",
									"sha256": "54483f7a82d7998bbbb484897a4ad33493d64d7061a07c5d2d1390481d0ea747",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamColorPicker ref=\"control\" v-model=\"color\" :disabled=\"disabled\" />\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.show()\"> 打开 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.hide()\"> 关闭 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t</div>\n\t\t<output>颜色：{{ color }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColorPickerInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst color = ref('#526d82');\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/sizes/ts/Demo.vue",
									"sha256": "040a043a5ea9a964e5f6109c80ace9a72fe7c0577204fb6c826ded2ef7ac07f3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamColorPicker size=\"large\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamColorPicker size=\"big\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamColorPicker size=\"default\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamColorPicker size=\"small\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamColorPicker model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColorPickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/sizes/js/Demo.vue",
									"sha256": "82cfa87a987e540a4e27d3d3fd93a0d301fcfc8dec6d557dd9fdf7f8ac327773",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamColorPicker size=\"large\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamColorPicker size=\"big\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamColorPicker size=\"default\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamColorPicker size=\"small\" model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamColorPicker model-value=\"#526d82\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColorPickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/popup-container/ts/Demo.vue",
									"sha256": "b7b439feeb66da1fd05c23c2f969d777c68aa5acb196b6d27e796fb6fc251ff5",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamColorPicker\n\t\t\t\tref=\"control\"\n\t\t\t\tv-bind=\"{ 'show-alpha': true, 'color-format': 'hex' }\"\n\t\t\t\tv-model=\"color\"\n\t\t\t\t:predefine=\"['#526d82', '#18a058', '#d03050']\"\n\t\t\t\t@change=\"event = String($event)\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t/>\n\t\t\t<output>颜色：{{ color }}；change：{{ event }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamColorPickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker } from '@asam-ui/ui';\nconst color = ref<string | null>('#526d82');\nconst event = ref('尚未更改');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamColorPicker/popup-container/js/Demo.vue",
									"sha256": "07df766b4a4e807dfa53a6f3d7d40f27fcb4ebae3a75a0a8ab321b9543676ecf",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamColorPicker\n\t\t\t\tref=\"control\"\n\t\t\t\tv-bind=\"{ 'show-alpha': true, 'color-format': 'hex' }\"\n\t\t\t\tv-model=\"color\"\n\t\t\t\t:predefine=\"['#526d82', '#18a058', '#d03050']\"\n\t\t\t\t@change=\"event = String($event)\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t/>\n\t\t\t<output>颜色：{{ color }}；change：{{ event }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamColorPickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamColorPicker } from '@asam-ui/ui';\nconst color = ref('#526d82');\nconst event = ref('尚未更改');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDatePicker",
			"documentation": "/component-AsamDatePicker.html",
			"demos": [
				{
					"id": "native-values",
					"title": "原生默认模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/native-values/ts/Demo.vue",
									"sha256": "8ba6a6b136f1495b17a1452d90ce83f2edafd4820cd171c29659589103618d86",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>\n\t\t<AsamDatePicker v-model=\"value\" clearable @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamDatePicker } from '@asam-ui/ui';\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerNativeValuesExample' });\nconst value = ref<AsamDateValue>();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/native-values/js/Demo.vue",
									"sha256": "dcd267a034750023d742db05b7a6675f46954ff2d2f8e2145aa6ec72440d48ba",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>\n\t\t<AsamDatePicker v-model=\"value\" clearable @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerNativeValuesExample' });\nconst value = ref();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "格式、清空与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/basic/ts/Demo.vue",
									"sha256": "f7e108326d6ee1a6042f4eb05657373d22fabb5e62b1bd1e02f6c8b5a49b2065",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ 'value-format': 'YYYY-MM-DD', clearable: true, 'aria-label': '选择时间' }\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker, AsamButton } from '@asam-ui/ui';\nconst value = ref<AsamDateValue>(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/basic/js/Demo.vue",
									"sha256": "167e3b94092d93f70057acba5c88a7f8e192f5e336a419ae4559591f764a6cf8",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ 'value-format': 'YYYY-MM-DD', clearable: true, 'aria-label': '选择时间' }\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker, AsamButton } from '@asam-ui/ui';\nconst value = ref(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "range",
					"title": "范围与约束",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/range/ts/Demo.vue",
									"sha256": "269306783a64168d1215027cbd700e7ed1e003c1d662f48cd73aae62eb214c23",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }\"\n\t\t\t:disabled-date=\"disabledDate\"\n\t\t/>\n\t\t<output>范围：{{ range }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerRangeExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst range = ref<AsamDateValue>(null);\nfunction disabledDate(value: Date) {\n\treturn value.getFullYear() < 2025;\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/range/js/Demo.vue",
									"sha256": "6323a20aa5ecf1e74ec3e9abd5e14bf2c5126e16fa48addeb50b8c67608441f2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{ type: 'daterange', 'value-format': 'YYYY-MM-DD' }\"\n\t\t\t:disabled-date=\"disabledDate\"\n\t\t/>\n\t\t<output>范围：{{ range }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerRangeExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst range = ref(null);\nfunction disabledDate(value) {\n\treturn value.getFullYear() < 2025;\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "cells",
					"title": "日期单元格插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/cells/ts/Demo.vue",
									"sha256": "d10e581cf87caf472de78457085430640f828e1d883cb0d29c892a95bf2271fb",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker v-model=\"value\" value-format=\"YYYY-MM-DD\">\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<span :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t{{ cell.text }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #prev-month> ‹ </template>\n\t\t\t<template #next-month> › </template>\n\t\t\t<template #prev-year> « </template>\n\t\t\t<template #next-year> » </template>\n\t\t</AsamDatePicker>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerCellsExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst value = ref<AsamDateValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/cells/js/Demo.vue",
									"sha256": "620c6df4d77a51fabc93c83ed12cbb03932df7d3cf6d95ee3d3801beedb196e9",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker v-model=\"value\" value-format=\"YYYY-MM-DD\">\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<span :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t{{ cell.text }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #prev-month> ‹ </template>\n\t\t\t<template #next-month> › </template>\n\t\t\t<template #prev-year> « </template>\n\t\t\t<template #next-year> » </template>\n\t\t</AsamDatePicker>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerCellsExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst value = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "公开实例操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/instance/ts/Demo.vue",
									"sha256": "20858d563092bea8ed9fb2dedae9d3037ac69d38a5490cac7798f032c96b0408",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker ref=\"control\" v-model=\"value\" value-format=\"YYYY-MM-DD\" />\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleOpen()\"> 打开 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleClose()\"> 关闭 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker, AsamButton } from '@asam-ui/ui';\nimport type { AsamDatePickerExpose } from '@asam-ui/ui';\nconst control = ref<AsamDatePickerExpose>();\nconst value = ref<AsamDateValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/instance/js/Demo.vue",
									"sha256": "4fb08066a4de048b2f3713abe193060c09b9a7e3eef858415bed0ee87e5fedb5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker ref=\"control\" v-model=\"value\" value-format=\"YYYY-MM-DD\" />\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleOpen()\"> 打开 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleClose()\"> 关闭 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "modes",
					"title": "日期单位与单点日期时间",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/modes/ts/Demo.vue",
									"sha256": "3e8536545831ca6bab55aeb2ab4a9dd0792f1a1c840d1352b7b4e1ffa87a2400",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"year\"\n\t\t\tv-bind=\"{ type: 'year', 'value-format': 'YYYY', placeholder: '年份' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"month\"\n\t\t\tv-bind=\"{ type: 'month', 'value-format': 'YYYY-MM', placeholder: '月份' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"week\"\n\t\t\tv-bind=\"{ type: 'week', format: 'YYYY [第] ww [周]', placeholder: '周' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"dates\"\n\t\t\tv-bind=\"{ type: 'dates', 'value-format': 'YYYY-MM-DD', placeholder: '多个日期' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"datetime\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'datetime',\n\t\t\t\tformat: 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\tplaceholder: '单点日期时间'\n\t\t\t}\"\n\t\t/>\n\t\t<output>\n\t\t\t年：{{ year }}；月：{{ month }}；周：{{ week }}；日期：{{ dates }}；日期时间：{{\n\t\t\t\tdatetime\n\t\t\t}}\n\t\t</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickermodesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst year = ref<AsamDateValue>(null);\nconst month = ref<AsamDateValue>(null);\nconst week = ref<AsamDateValue>(null);\nconst dates = ref<AsamDateValue>([]);\nconst datetime = ref<AsamDateValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/modes/js/Demo.vue",
									"sha256": "05f1ea5af07353b9ace11926ff679f10d9e611f6a5de69081ade0c7767500e4e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"year\"\n\t\t\tv-bind=\"{ type: 'year', 'value-format': 'YYYY', placeholder: '年份' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"month\"\n\t\t\tv-bind=\"{ type: 'month', 'value-format': 'YYYY-MM', placeholder: '月份' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"week\"\n\t\t\tv-bind=\"{ type: 'week', format: 'YYYY [第] ww [周]', placeholder: '周' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"dates\"\n\t\t\tv-bind=\"{ type: 'dates', 'value-format': 'YYYY-MM-DD', placeholder: '多个日期' }\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"datetime\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'datetime',\n\t\t\t\tformat: 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\tplaceholder: '单点日期时间'\n\t\t\t}\"\n\t\t/>\n\t\t<output>\n\t\t\t年：{{ year }}；月：{{ month }}；周：{{ week }}；日期：{{ dates }}；日期时间：{{\n\t\t\t\tdatetime\n\t\t\t}}\n\t\t</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickermodesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst year = ref(null);\nconst month = ref(null);\nconst week = ref(null);\nconst dates = ref([]);\nconst datetime = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "range-modes",
					"title": "月份、年份和日期时间范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/range-modes/ts/Demo.vue",
									"sha256": "ac11ae6e9dd652f8994f94f0540b687438b763fafe15f88192f335607c637e12",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"months\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'monthrange',\n\t\t\t\t'value-format': 'YYYY-MM',\n\t\t\t\t'start-placeholder': '开始月份',\n\t\t\t\t'end-placeholder': '结束月份'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"years\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'yearrange',\n\t\t\t\t'value-format': 'YYYY',\n\t\t\t\t'start-placeholder': '开始年份',\n\t\t\t\t'end-placeholder': '结束年份'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"times\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'datetimerange',\n\t\t\t\tformat: 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'default-time': defaultTime\n\t\t\t}\"\n\t\t/>\n\t\t<output>月份：{{ months }}；年份：{{ years }}；日期时间：{{ times }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerrangemodesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst months = ref<AsamDateValue>(null);\nconst years = ref<AsamDateValue>(null);\nconst times = ref<AsamDateValue>(null);\nconst defaultTime = [new Date(2000, 0, 1, 9, 0, 0), new Date(2000, 0, 1, 18, 0, 0)];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/range-modes/js/Demo.vue",
									"sha256": "3f00fe909ef4b447d4140118974ea45f5df01a0a808e6a07275e89cf190de6c7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"months\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'monthrange',\n\t\t\t\t'value-format': 'YYYY-MM',\n\t\t\t\t'start-placeholder': '开始月份',\n\t\t\t\t'end-placeholder': '结束月份'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"years\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'yearrange',\n\t\t\t\t'value-format': 'YYYY',\n\t\t\t\t'start-placeholder': '开始年份',\n\t\t\t\t'end-placeholder': '结束年份'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"times\"\n\t\t\tv-bind=\"{\n\t\t\t\ttype: 'datetimerange',\n\t\t\t\tformat: 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'default-time': defaultTime\n\t\t\t}\"\n\t\t/>\n\t\t<output>月份：{{ months }}；年份：{{ years }}；日期时间：{{ times }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerrangemodesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker } from '@asam-ui/ui';\nconst months = ref(null);\nconst years = ref(null);\nconst times = ref(null);\nconst defaultTime = [new Date(2000, 0, 1, 9, 0, 0), new Date(2000, 0, 1, 18, 0, 0)];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/sizes/ts/Demo.vue",
									"sha256": "e486072e38d4c7408f4c46453e978aba901ef7b61e5f82e7b6d7bff00046db84",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamDatePicker size=\"large\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamDatePicker size=\"big\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamDatePicker size=\"default\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamDatePicker size=\"small\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamDatePicker value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDatePickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/sizes/js/Demo.vue",
									"sha256": "fc47d813cc262decad2fc6ea9c29f220e7e63b64dffd0670115b8a110071355f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamDatePicker size=\"large\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamDatePicker size=\"big\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamDatePicker size=\"default\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamDatePicker size=\"small\" value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamDatePicker value-format=\"YYYY-MM-DD\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDatePickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamDatePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "quarter-contract",
					"title": "季度、回填与动态跨年约束",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/quarter-contract/ts/Demo.vue",
									"sha256": "c37fc5873cc94661d656654b9bb6dde8c72c9907b583ba2ccd4ff68bca32056c",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"quarter\"\n\t\t\ttype=\"quarter\"\n\t\t\tformat=\"YYYY [年第] Q [季度]\"\n\t\t\tvalue-format=\"YYYY-[Q]Q\"\n\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:teleported=\"false\"\n\t\t\t@change=\"events.push('change: ' + $event)\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"quarters\"\n\t\t\ttype=\"quarters\"\n\t\t\tvalue-format=\"YYYY-[Q]Q\"\n\t\t\t:show-footer=\"true\"\n\t\t\t:show-confirm=\"true\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"range\"\n\t\t\ttype=\"quarterrange\"\n\t\t\tvalue-format=\"YYYY-[Q]Q\"\n\t\t\t:single-panel=\"singlePanel\"\n\t\t\t:unlink-panels=\"true\"\n\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t:default-value=\"[new Date(2026, 0, 1), new Date(2027, 0, 1)]\"\n\t\t/>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"limitYear = limitYear === 2026 ? 2027 : 2026\"\n\t\t>\n\t\t\t切换禁用年份 {{ limitYear }}\n\t\t</AsamButton>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"singlePanel = !singlePanel\"\n\t\t\t>单面板 {{ singlePanel }}</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tquarter = '2026-Q2';\n\t\t\t\tquarters = ['2026-Q1', '2026-Q3'];\n\t\t\t\trange = ['2026-Q4', '2027-Q2'];\n\t\t\t\"\n\t\t>\n\t\t\t回填跨年季度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tquarter = null;\n\t\t\t\tquarters = null;\n\t\t\t\trange = null;\n\t\t\t\"\n\t\t>\n\t\t\t重置为空\n\t\t</AsamButton>\n\t\t<output>{{ { quarter, quarters, range, events } }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerquartercontractExample' });\n\nimport { ref } from 'vue';\nimport { AsamButton, AsamDatePicker } from '@asam-ui/ui';\nconst quarter = ref<AsamDateValue>(null);\nconst quarters = ref<AsamDateValue>(null);\nconst range = ref<AsamDateValue>(null);\nconst limitYear = ref(2026);\nconst singlePanel = ref(true);\nconst events = ref<string[]>([]);\nconst disabledDate = (date: Date) => date.getFullYear() < limitYear.value;\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/quarter-contract/js/Demo.vue",
									"sha256": "439e0bc9ee64db077bf1a58e4c41fa71142e06030e3a799bf92cd1784289644a",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamDatePicker\n\t\t\tv-model=\"quarter\"\n\t\t\ttype=\"quarter\"\n\t\t\tformat=\"YYYY [年第] Q [季度]\"\n\t\t\tvalue-format=\"YYYY-[Q]Q\"\n\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:teleported=\"false\"\n\t\t\t@change=\"events.push('change: ' + $event)\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"quarters\"\n\t\t\ttype=\"quarters\"\n\t\t\tvalue-format=\"YYYY-[Q]Q\"\n\t\t\t:show-footer=\"true\"\n\t\t\t:show-confirm=\"true\"\n\t\t/>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"range\"\n\t\t\ttype=\"quarterrange\"\n\t\t\tvalue-format=\"YYYY-[Q]Q\"\n\t\t\t:single-panel=\"singlePanel\"\n\t\t\t:unlink-panels=\"true\"\n\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t:default-value=\"[new Date(2026, 0, 1), new Date(2027, 0, 1)]\"\n\t\t/>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"limitYear = limitYear === 2026 ? 2027 : 2026\"\n\t\t>\n\t\t\t切换禁用年份 {{ limitYear }}\n\t\t</AsamButton>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"singlePanel = !singlePanel\"\n\t\t\t>单面板 {{ singlePanel }}</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tquarter = '2026-Q2';\n\t\t\t\tquarters = ['2026-Q1', '2026-Q3'];\n\t\t\t\trange = ['2026-Q4', '2027-Q2'];\n\t\t\t\"\n\t\t>\n\t\t\t回填跨年季度\n\t\t</AsamButton>\n\t\t<AsamButton\n\t\t\tnative-type=\"submit\"\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tquarter = null;\n\t\t\t\tquarters = null;\n\t\t\t\trange = null;\n\t\t\t\"\n\t\t>\n\t\t\t重置为空\n\t\t</AsamButton>\n\t\t<output>{{ { quarter, quarters, range, events } }}</output>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDatePickerquartercontractExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDatePicker } from '@asam-ui/ui';\nconst quarter = ref(null);\nconst quarters = ref(null);\nconst range = ref(null);\nconst limitYear = ref(2026);\nconst singlePanel = ref(true);\nconst events = ref([]);\nconst disabledDate = (date) => date.getFullYear() < limitYear.value;\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-enter-date",
					"title": "选择日期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-enter-date/ts/Demo.vue",
									"sha256": "de436d2cdd2388092814cf3e33ba8cef8c40b2ab523f063dad133d34a430b450",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\tv-bind=\"{ 'aria-label': 'size control' }\"\n\t\t\tclass=\"mb-4\"\n\t\t\t@update:model-value=\"updatesize\"\n\t\t>\n\t\t\t<AsamRadioButton value=\"large\">large</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"default\">default</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"small\">small</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value1\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">带快捷选项的选择器</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerenterdateExample' });\n\nimport { ref } from 'vue';\n\nconst size = ref<'default' | 'large' | 'small'>('default');\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n\nconst shortcuts = [\n\t{\n\t\ttext: 'Today',\n\t\tvalue: new Date()\n\t},\n\t{\n\t\ttext: 'Yesterday',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setTime(date.getTime() - 3600 * 1000 * 24);\n\t\t\treturn date;\n\t\t}\n\t},\n\t{\n\t\ttext: '一周前',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n\t\t\treturn date;\n\t\t}\n\t}\n];\n\nconst disabledDate = (time: Date) => {\n\treturn time.getTime() > Date.now();\n};\nfunction updatesize(value: unknown) {\n\tif (value === 'large' || value === 'default' || value === 'small') size.value = value;\n}\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-4 {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "c5343405bd02087eb210697d9d88b5265c955d5d019fd09b0f67f6a2a1f31b24",
									"notice": {
										"id": "376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0",
										"url": "/licenses/source-notices/376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt",
										"licenseFilename": "LICENSE-376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/enter-date.vue",
											"sourceSha256": "1d78d5edafe456b63b2792016089d1b2ca67e081f5e2fa37a24dac4618ad7d9f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-enter-date/js/Demo.vue",
									"sha256": "4ee518af1479cea539224470b48335e45218e804508b84aa725c98e2c39f6405",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\tv-bind=\"{ 'aria-label': 'size control' }\"\n\t\t\tclass=\"mb-4\"\n\t\t\t@update:model-value=\"updatesize\"\n\t\t>\n\t\t\t<AsamRadioButton value=\"large\">large</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"default\">default</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"small\">small</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value1\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">带快捷选项的选择器</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t\t:disabled-date=\"disabledDate\"\n\t\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerenterdateExample' });\nimport { ref } from 'vue';\nconst size = ref('default');\nconst value1 = ref('');\nconst value2 = ref('');\nconst shortcuts = [\n\t{\n\t\ttext: 'Today',\n\t\tvalue: new Date()\n\t},\n\t{\n\t\ttext: 'Yesterday',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setTime(date.getTime() - 3600 * 1000 * 24);\n\t\t\treturn date;\n\t\t}\n\t},\n\t{\n\t\ttext: '一周前',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n\t\t\treturn date;\n\t\t}\n\t}\n];\nconst disabledDate = (time) => {\n\treturn time.getTime() > Date.now();\n};\nfunction updatesize(value) {\n\tif (value === 'large' || value === 'default' || value === 'small') size.value = value;\n}\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-4 {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "0a81f72b200924cdec42969eeade43665070f8fa49e84446518877a6dc89f027",
									"notice": {
										"id": "376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0",
										"url": "/licenses/source-notices/376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt",
										"licenseFilename": "LICENSE-376ec04aaefa0458a8e95fd8697cd628eb4e27c534071e7c88e63524806a41d0.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/enter-date.vue",
											"sourceSha256": "1d78d5edafe456b63b2792016089d1b2ca67e081f5e2fa37a24dac4618ad7d9f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-other-measurements",
					"title": "其他日期单位",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-other-measurements/ts/Demo.vue",
									"sha256": "8ee25aa0e4bc15cbc7064ea6ba9fc19e5cf87011eba21ccc4ae2cfa4f5c72f93",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"container demo-layout-2\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">周</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value1\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"week\"\n\t\t\t\t\tformat=\"[Week] ww\"\n\t\t\t\t\tplaceholder=\"选择周\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">年份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value3\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"year\"\n\t\t\t\t\tplaceholder=\"选择年份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">月份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value5\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"month\"\n\t\t\t\t\tplaceholder=\"选择月份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">季度</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value7\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"quarter\"\n\t\t\t\t\tplaceholder=\"选择季度\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"container demo-layout-3\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个日期</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"dates\"\n\t\t\t\t\tplaceholder=\"选择一个或多个日期\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个年份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value4\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"years\"\n\t\t\t\t\tplaceholder=\"选择一个或多个年份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个月份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value6\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"months\"\n\t\t\t\t\tplaceholder=\"选择一个或多个月份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个季度</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value8\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"quarters\"\n\t\t\t\t\tplaceholder=\"选择一个或多个季度\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerothermeasurementsExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\nconst value3 = ref<AsamDateValue>('');\nconst value4 = ref<AsamDateValue>('');\nconst value5 = ref<AsamDateValue>('');\nconst value6 = ref<AsamDateValue>('');\nconst value7 = ref<AsamDateValue>('');\nconst value8 = ref<AsamDateValue>([]);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .container {\n\tflex: 1;\n\tmin-width: 300px;\n\tborder-right: solid 1px var(--el-border-color);\n}\n\n.demo-date-picker .container:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n}\n\n.demo-date-picker .container .block:not(:first-child) {\n\tborder-top: solid 1px var(--el-border-color);\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .container {\n\t\tflex: 0 0 100%;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .container:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-date-picker .block {\n\t\tpadding: 1rem 0;\n\t}\n\n\t.demo-date-picker .container .block:not(:first-child) {\n\t\tborder-top: solid 1px var(--el-border-color);\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "2649e20dafadae06cf85a6a688658031d8d6c0a90a419886b2de96ca400ce0a2",
									"notice": {
										"id": "f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98",
										"url": "/licenses/source-notices/f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt",
										"licenseFilename": "LICENSE-f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/other-measurements.vue",
											"sourceSha256": "52cbc0b3616b57fed7cd348759199af3f3689a23d8e4d20385003a74c2c88d27",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-other-measurements/js/Demo.vue",
									"sha256": "d52e5f54917cdd2da027037971df1756f6e39e0e6d3cb9d3dda66638b43aa3e3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"container demo-layout-2\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">周</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value1\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"week\"\n\t\t\t\t\tformat=\"[Week] ww\"\n\t\t\t\t\tplaceholder=\"选择周\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">年份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value3\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"year\"\n\t\t\t\t\tplaceholder=\"选择年份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">月份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value5\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"month\"\n\t\t\t\t\tplaceholder=\"选择月份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">季度</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value7\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"quarter\"\n\t\t\t\t\tplaceholder=\"选择季度\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"container demo-layout-3\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个日期</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"dates\"\n\t\t\t\t\tplaceholder=\"选择一个或多个日期\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个年份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value4\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"years\"\n\t\t\t\t\tplaceholder=\"选择一个或多个年份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个月份</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value6\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"months\"\n\t\t\t\t\tplaceholder=\"选择一个或多个月份\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">多个季度</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value8\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"quarters\"\n\t\t\t\t\tplaceholder=\"选择一个或多个季度\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerothermeasurementsExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst value3 = ref('');\nconst value4 = ref('');\nconst value5 = ref('');\nconst value6 = ref('');\nconst value7 = ref('');\nconst value8 = ref([]);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .container {\n\tflex: 1;\n\tmin-width: 300px;\n\tborder-right: solid 1px var(--el-border-color);\n}\n\n.demo-date-picker .container:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n}\n\n.demo-date-picker .container .block:not(:first-child) {\n\tborder-top: solid 1px var(--el-border-color);\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .container {\n\t\tflex: 0 0 100%;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .container:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-date-picker .block {\n\t\tpadding: 1rem 0;\n\t}\n\n\t.demo-date-picker .container .block:not(:first-child) {\n\t\tborder-top: solid 1px var(--el-border-color);\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "702566b38983a4e9524e1f276d532f10baa522d0da09bba38479ebcc2b3f172f",
									"notice": {
										"id": "f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98",
										"url": "/licenses/source-notices/f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt",
										"licenseFilename": "LICENSE-f0f62c75188cf16f50b91236be898b3d5f6690814168f8fa37a972d7aaaddb98.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/other-measurements.vue",
											"sourceSha256": "52cbc0b3616b57fed7cd348759199af3f3689a23d8e4d20385003a74c2c88d27",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-date-range",
					"title": "日期范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-date-range/ts/Demo.vue",
									"sha256": "f65e3b0c1ff1fbf07edf3d986418276cb5edaf910e0e353b5f1277e1e7182d32",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\tv-bind=\"{ 'aria-label': 'size control' }\"\n\t\t\tclass=\"mb-4\"\n\t\t\t@update:model-value=\"updatesize\"\n\t\t>\n\t\t\t<AsamRadioButton value=\"large\">large</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"default\">default</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"small\">small</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value1\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"daterange\"\n\t\t\t\t\trange-separator=\"To\"\n\t\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"daterange\"\n\t\t\t\t\tunlink-panels\n\t\t\t\t\trange-separator=\"To\"\n\t\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdaterangeExample' });\n\nimport { ref } from 'vue';\n\nconst size = ref<'default' | 'large' | 'small'>('default');\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n\nconst shortcuts = [\n\t{\n\t\ttext: '最近一周',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: '最近一个月',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 3 months',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\nfunction updatesize(value: unknown) {\n\tif (value === 'large' || value === 'default' || value === 'small') size.value = value;\n}\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 400px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 1200px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-4 {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "2b595c438ec471794a048fec1d3a8039cedb2362e40d4ac7d82fbc3238a530cc",
									"notice": {
										"id": "560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea",
										"url": "/licenses/source-notices/560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt",
										"licenseFilename": "LICENSE-560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/date-range.vue",
											"sourceSha256": "b6473d7f73f0022244b329a712fbd099965303ab4d45cd9317f962964d9c4199",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-date-range/js/Demo.vue",
									"sha256": "6f11205e80babb257da57acdef69fe00a100c4b37aa72efb6ed2749402debf63",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt\n-->\n<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamRadioGroup\n\t\t\t:model-value=\"size\"\n\t\t\tv-bind=\"{ 'aria-label': 'size control' }\"\n\t\t\tclass=\"mb-4\"\n\t\t\t@update:model-value=\"updatesize\"\n\t\t>\n\t\t\t<AsamRadioButton value=\"large\">large</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"default\">default</AsamRadioButton>\n\t\t\t<AsamRadioButton value=\"small\">small</AsamRadioButton>\n\t\t</AsamRadioGroup>\n\t\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value1\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"daterange\"\n\t\t\t\t\trange-separator=\"To\"\n\t\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"block\">\n\t\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t\t<AsamDatePicker\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tvalue-format=\"\"\n\t\t\t\t\ttype=\"daterange\"\n\t\t\t\t\tunlink-panels\n\t\t\t\t\trange-separator=\"To\"\n\t\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t\t\t:size=\"size\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamRadioGroup, AsamRadioButton, AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdaterangeExample' });\nimport { ref } from 'vue';\nconst size = ref('default');\nconst value1 = ref('');\nconst value2 = ref('');\nconst shortcuts = [\n\t{\n\t\ttext: '最近一周',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: '最近一个月',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 3 months',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\nfunction updatesize(value) {\n\tif (value === 'large' || value === 'default' || value === 'small') size.value = value;\n}\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 400px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 1200px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.mb-4 {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: flex;\n\tgap: var(--asam-space-md);\n\tflex-wrap: wrap;\n\talign-items: center;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n",
									"originalSourceSha256": "ed5748b7716c1a280e96dd2a2590951288886a35bd2b1e1a88701fe0ceca425a",
									"notice": {
										"id": "560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea",
										"url": "/licenses/source-notices/560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt",
										"licenseFilename": "LICENSE-560185ddb66cb2d13a841358a6858588f71f88dcfab81544430b9659e1501aea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/date-range.vue",
											"sourceSha256": "b6473d7f73f0022244b329a712fbd099965303ab4d45cd9317f962964d9c4199",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-month-range",
					"title": "月份范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-month-range/ts/Demo.vue",
									"sha256": "3b4b3958c1e7347fb9a930039fc1784438ace33b2628f5f1618bbcd73ad79664",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start month\"\n\t\t\t\tend-placeholder=\"End month\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\tunlink-panels\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start month\"\n\t\t\t\tend-placeholder=\"End month\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickermonthrangeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n\nconst shortcuts = [\n\t{\n\t\ttext: '本月',\n\t\tvalue: [new Date(), new Date()]\n\t},\n\t{\n\t\ttext: '今年',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date(new Date().getFullYear(), 0);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 6 months',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 6);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "3d85c6e6c6ff85c6942144e1b632dcce4cadcef7bfc44fa97c697499df96d274",
									"notice": {
										"id": "47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7",
										"url": "/licenses/source-notices/47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt",
										"licenseFilename": "LICENSE-47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/month-range.vue",
											"sourceSha256": "c9bee9ae160e0d3e5df179d7cd8242bd58df9b7211e096598a42a0a4357e3461",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-month-range/js/Demo.vue",
									"sha256": "4367242576333932c11f7a2855a5238160fbd732ec0b0dc4dd2c0bc3c083b08c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start month\"\n\t\t\t\tend-placeholder=\"End month\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\tunlink-panels\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start month\"\n\t\t\t\tend-placeholder=\"End month\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickermonthrangeExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst shortcuts = [\n\t{\n\t\ttext: '本月',\n\t\tvalue: [new Date(), new Date()]\n\t},\n\t{\n\t\ttext: '今年',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date(new Date().getFullYear(), 0);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 6 months',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 6);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "525e198b92ae71a3d954a49119bcfc6d053f4a398b36bcaf9c8926f59a777b87",
									"notice": {
										"id": "47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7",
										"url": "/licenses/source-notices/47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt",
										"licenseFilename": "LICENSE-47cc4ae51b78367c907178bb0edf84fa06d20ab39bd7dbc9ce9ac194f3d6c5e7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/month-range.vue",
											"sourceSha256": "c9bee9ae160e0d3e5df179d7cd8242bd58df9b7211e096598a42a0a4357e3461",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-year-range",
					"title": "年份范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-year-range/ts/Demo.vue",
									"sha256": "0cf452f156a197ad131c771d50e076c5abc9102f70b2e56a35669868de2e2d5c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start Year\"\n\t\t\t\tend-placeholder=\"End Year\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\tunlink-panels\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start Year\"\n\t\t\t\tend-placeholder=\"End Year\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickeryearrangeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>();\nconst value2 = ref<AsamDateValue>();\n\nconst shortcuts = [\n\t{\n\t\ttext: '今年',\n\t\tvalue: [new Date(), new Date()]\n\t},\n\t{\n\t\ttext: 'Last 10 years',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date(new Date().setFullYear(new Date().getFullYear() - 10));\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Next 50 years',\n\t\tvalue: () => {\n\t\t\tconst start = new Date();\n\t\t\tconst end = new Date(new Date().setFullYear(new Date().getFullYear() + 50));\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "c0e9612eb948d10d80146c88ca50e5a74d13e774a0479ad1a98d4595713488fe",
									"notice": {
										"id": "b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b",
										"url": "/licenses/source-notices/b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt",
										"licenseFilename": "LICENSE-b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/year-range.vue",
											"sourceSha256": "2f0b904cc955a44dc829317856839d87f48222794ac2764f7dc95ccbab8134b8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-year-range/js/Demo.vue",
									"sha256": "c5eb69e594d5fd065cecf695df2433487a28647de67ca235d6c2cbe7ac159a33",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start Year\"\n\t\t\t\tend-placeholder=\"End Year\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\tunlink-panels\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start Year\"\n\t\t\t\tend-placeholder=\"End Year\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickeryearrangeExample' });\nimport { ref } from 'vue';\nconst value1 = ref();\nconst value2 = ref();\nconst shortcuts = [\n\t{\n\t\ttext: '今年',\n\t\tvalue: [new Date(), new Date()]\n\t},\n\t{\n\t\ttext: 'Last 10 years',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date(new Date().setFullYear(new Date().getFullYear() - 10));\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Next 50 years',\n\t\tvalue: () => {\n\t\t\tconst start = new Date();\n\t\t\tconst end = new Date(new Date().setFullYear(new Date().getFullYear() + 50));\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "bd93b0b844dc1d32e8f763c5ba1583b6fe53e1b0c588f19313d47703187808d0",
									"notice": {
										"id": "b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b",
										"url": "/licenses/source-notices/b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt",
										"licenseFilename": "LICENSE-b3d472ff7065ee70592e3de9945804d78390e20a85c0f04f340cb91b303d4d3b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/year-range.vue",
											"sourceSha256": "2f0b904cc955a44dc829317856839d87f48222794ac2764f7dc95ccbab8134b8",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-quarter-range",
					"title": "季度范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-quarter-range/ts/Demo.vue",
									"sha256": "e9ab840c915f6f01a10b14191a55bdbdb30b19b192cd9430f239d8a05de59053",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start quarter\"\n\t\t\t\tend-placeholder=\"End quarter\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\tunlink-panels\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start quarter\"\n\t\t\t\tend-placeholder=\"End quarter\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerquarterrangeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>();\nconst value2 = ref<AsamDateValue>();\n\nconst shortcuts = [\n\t{\n\t\ttext: '本季度',\n\t\tvalue: () => {\n\t\t\tconst now = new Date();\n\t\t\tconst quarter = Math.floor(now.getMonth() / 3);\n\t\t\tconst start = new Date(now.getFullYear(), quarter * 3, 1);\n\t\t\treturn [start, now];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 4 quarters',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 12);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Next 8 quarters',\n\t\tvalue: () => {\n\t\t\tconst start = new Date();\n\t\t\tconst end = new Date();\n\t\t\tend.setMonth(end.getMonth() + 24);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "b6431ab1087faf16b0b902d4bfbf12f81d27c29aeb2a17ae6f94e0367d4126df",
									"notice": {
										"id": "42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a",
										"url": "/licenses/source-notices/42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt",
										"licenseFilename": "LICENSE-42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/quarter-range.vue",
											"sourceSha256": "d79684566c9123fe0c4f2aa20bb6c8dfcbda0668ed03acb32cb4286c1f9034a5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-quarter-range/js/Demo.vue",
									"sha256": "71f0b6e1c430c1b9290842055942959360a8101e9c0775dd358c06c5d52de2c8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start quarter\"\n\t\t\t\tend-placeholder=\"End quarter\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷选项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\tunlink-panels\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start quarter\"\n\t\t\t\tend-placeholder=\"End quarter\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerquarterrangeExample' });\nimport { ref } from 'vue';\nconst value1 = ref();\nconst value2 = ref();\nconst shortcuts = [\n\t{\n\t\ttext: '本季度',\n\t\tvalue: () => {\n\t\t\tconst now = new Date();\n\t\t\tconst quarter = Math.floor(now.getMonth() / 3);\n\t\t\tconst start = new Date(now.getFullYear(), quarter * 3, 1);\n\t\t\treturn [start, now];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 4 quarters',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 12);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Next 8 quarters',\n\t\tvalue: () => {\n\t\t\tconst start = new Date();\n\t\t\tconst end = new Date();\n\t\t\tend.setMonth(end.getMonth() + 24);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "3c791ca76fa0256415164823ebc765614cb9557f950439bac33ae76990316b75",
									"notice": {
										"id": "42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a",
										"url": "/licenses/source-notices/42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt",
										"licenseFilename": "LICENSE-42b4cedb76387d1de427cfe9c55f51756e835a7ae8eb6778e40a045e6cf2d84a.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/quarter-range.vue",
											"sourceSha256": "d79684566c9123fe0c4f2aa20bb6c8dfcbda0668ed03acb32cb4286c1f9034a5",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-single-panel",
					"title": "单面板",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-single-panel/ts/Demo.vue",
									"sha256": "b5ff807399160c8ded470d94542654cbe426a076b2b60f7ca23ed608e20b6b5f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">日期范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">月份范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">年份范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">季度范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value4\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickersinglepanelExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>();\nconst value2 = ref<AsamDateValue>();\nconst value3 = ref<AsamDateValue>();\nconst value4 = ref<AsamDateValue>();\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .block :deep(.el-date-editor) {\n\twidth: 300px;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n\twidth: 100%;\n}\n\n@media screen and (width <= 1200px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 50%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:nth-child(2n) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "e713e27aff763610a2cefb6e363dc7231c8c2aec6914e82635961b78128ea4a7",
									"notice": {
										"id": "bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea",
										"url": "/licenses/source-notices/bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt",
										"licenseFilename": "LICENSE-bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/single-panel.vue",
											"sourceSha256": "99742595cb14b546f0b961d00fa6dcba7db00713f0e5dfc708457b6751e6b7bf",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-single-panel/js/Demo.vue",
									"sha256": "878cb8e74af6ebcfe15e7dba61538f2f1b19e5212c470ef5abcf5552a61e786b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">日期范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">月份范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">年份范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">季度范围</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value4\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickersinglepanelExample' });\nimport { ref } from 'vue';\nconst value1 = ref();\nconst value2 = ref();\nconst value3 = ref();\nconst value4 = ref();\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .block :deep(.el-date-editor) {\n\twidth: 300px;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n\twidth: 100%;\n}\n\n@media screen and (width <= 1200px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 50%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:nth-child(2n) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "6663c9d23d55028155aa39542cd6a989cddd1f0f093917ae58fa642849438dbd",
									"notice": {
										"id": "bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea",
										"url": "/licenses/source-notices/bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt",
										"licenseFilename": "LICENSE-bf69a85d42be4a427f97bd4e96cd24616d003ed3cc1f70b86f401be4008b5bea.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/single-panel.vue",
											"sourceSha256": "99742595cb14b546f0b961d00fa6dcba7db00713f0e5dfc708457b6751e6b7bf",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-default-value",
					"title": "默认面板日期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-default-value/ts/Demo.vue",
									"sha256": "24af66a23b8725b11101d5760f9f0ff170ef4facb7e571873dbaee3c687a42f4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">date</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t:default-value=\"new Date(2010, 9, 1)\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">daterange</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tstart-placeholder=\"Start Date\"\n\t\t\t\tend-placeholder=\"End Date\"\n\t\t\t\t:default-value=\"[new Date(2010, 9, 1), new Date(2010, 10, 1)]\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdefaultvalueExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "3028cb55a450e728c915110cd94cd61c60473feefb251f3944ee252bdd0f0138",
									"notice": {
										"id": "a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9",
										"url": "/licenses/source-notices/a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt",
										"licenseFilename": "LICENSE-a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/default-value.vue",
											"sourceSha256": "44777feaed32905a2a19d9d49d93f95fb0afe7ab8ec5661f8d624f9328a738a9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-default-value/js/Demo.vue",
									"sha256": "8d162cf0f7e6b7fb450afa5a6493f6f09adf9a7a05bc97391520c859d9bfc11f",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">date</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t:default-value=\"new Date(2010, 9, 1)\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">daterange</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tstart-placeholder=\"Start Date\"\n\t\t\t\tend-placeholder=\"End Date\"\n\t\t\t\t:default-value=\"[new Date(2010, 9, 1), new Date(2010, 10, 1)]\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdefaultvalueExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "8b30b76b73648ca15e49065ef0d2e0b1bab6a679c0663382a558c409962511db",
									"notice": {
										"id": "a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9",
										"url": "/licenses/source-notices/a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt",
										"licenseFilename": "LICENSE-a465e38ab462e13c9deab4b70625b82106bac56ed86b29f7085124daac462aa9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/default-value.vue",
											"sourceSha256": "44777feaed32905a2a19d9d49d93f95fb0afe7ab8ec5661f8d624f9328a738a9",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-date-formats",
					"title": "日期格式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-date-formats/ts/Demo.vue",
									"sha256": "bdde29a8cc1806428dac0f01400421daae48312df70bab346ac8dc726e234532",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">返回 Date 对象</span>\n\t\t\t<div class=\"demonstration\">值： {{ value1 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">使用 value-format</span>\n\t\t\t<div class=\"demonstration\">值：{{ value2 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">时间戳</span>\n\t\t\t<div class=\"demonstration\">值：{{ value3 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"x\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdateformatsExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\nconst value3 = ref<AsamDateValue>('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n\twidth: 100%;\n}\n\n@media screen and (width <= 1200px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 50%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:nth-child(2n) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "58268a30420c844029a409cb686341954c61df1649e35d263ce3a603d5d7b2af",
									"notice": {
										"id": "1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6",
										"url": "/licenses/source-notices/1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt",
										"licenseFilename": "LICENSE-1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/date-formats.vue",
											"sourceSha256": "d29b3cc5895702d72f0838ee4d99ee844e2843e8fa6f1fca1882958224c852e4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-date-formats/js/Demo.vue",
									"sha256": "aaf70342e578b6178e261eb6bd1941ec11fcb33372bcd52addf2e49a26b17224",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt\n-->\n<template>\n\t<div class=\"demo-date-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">返回 Date 对象</span>\n\t\t\t<div class=\"demonstration\">值： {{ value1 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">使用 value-format</span>\n\t\t\t<div class=\"demonstration\">值：{{ value2 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">时间戳</span>\n\t\t\t<div class=\"demonstration\">值：{{ value3 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"x\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdateformatsExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst value3 = ref('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 1.5rem 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n\twidth: 100%;\n}\n\n@media screen and (width <= 1200px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 50%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:nth-child(2n) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker .block {\n\t\tflex: 0 0 100%;\n\t\tpadding: 1rem 0;\n\t\tmin-width: auto;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "d6ef71c34390dd6960947616ad772fa6dbce2fa9afca85564c846aa0082f1c43",
									"notice": {
										"id": "1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6",
										"url": "/licenses/source-notices/1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt",
										"licenseFilename": "LICENSE-1420abdead077ae6a927d08879d034102b2f479d0dfa815c75b22e4eb9e0b9f6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/date-formats.vue",
											"sourceSha256": "d29b3cc5895702d72f0838ee4d99ee844e2843e8fa6f1fca1882958224c852e4",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-default-time",
					"title": "默认时间",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-default-time/ts/Demo.vue",
									"sha256": "72b8f7d13a9b960ba8d7a4f77820d640281624ac387c05bf0514ab9d00dea06d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<div class=\"block\">\n\t\t\t<p class=\"example-paragraph\">组件值：{{ value }}</p>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\t:default-time=\"defaultTime\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdefaulttimeExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamDateValue>('');\nconst defaultTime = ref<[Date, Date]>([\n\tnew Date(2000, 1, 1, 0, 0, 0),\n\tnew Date(2000, 2, 1, 23, 59, 59)\n]);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "3ccb1521f3c5a03e83077940d9d217ff7c462a8a79bca3760e3fd19c6eefe06e",
									"notice": {
										"id": "22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7",
										"url": "/licenses/source-notices/22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt",
										"licenseFilename": "LICENSE-22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/default-time.vue",
											"sourceSha256": "2685bbcd0b38a3753aa8ee4b0d97d519325e379449c73b2aed419561865da275",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-default-time/js/Demo.vue",
									"sha256": "9de2b857ecc85ff7bc7e9ea152ee83858aa6830883f3ca4134b2ae0061bba5b1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<div class=\"block\">\n\t\t\t<p class=\"example-paragraph\">组件值：{{ value }}</p>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\t:default-time=\"defaultTime\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickerdefaulttimeExample' });\nimport { ref } from 'vue';\nconst value = ref('');\nconst defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "533a14000258bde746b3d181775c4ff0b2e391edaf9394d1084bd680aeab7e1a",
									"notice": {
										"id": "22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7",
										"url": "/licenses/source-notices/22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt",
										"licenseFilename": "LICENSE-22cd5ff0edbca051983e456620f1b9e0325441b54c63aa08770b7b1b22c447f7.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/default-time.vue",
											"sourceSha256": "2685bbcd0b38a3753aa8ee4b0d97d519325e379449c73b2aed419561865da275",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-custom-prefix-icon",
					"title": "自定义前缀图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-custom-prefix-icon/ts/Demo.vue",
									"sha256": "768cd1df6a7081cd122df0f3b75c3f5f33c58c80c3253c39b0b4252756dbde9b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">设置 prefix-icon</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t:prefix-icon=\"customPrefix\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickercustomprefixiconExample' });\n\nimport { h, ref, shallowRef } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\n\nconst customPrefix = shallowRef({\n\trender() {\n\t\treturn h('p', 'pre');\n\t}\n});\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n</style>\n",
									"originalSourceSha256": "231e89960e31b98bea36325b888c61178959f83edf9e99c8f3f0e606a5f446e0",
									"notice": {
										"id": "3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f",
										"url": "/licenses/source-notices/3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt",
										"licenseFilename": "LICENSE-3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/custom-prefix-icon.vue",
											"sourceSha256": "da0ce4cfcebf76b1ae8ba1c9951c548c7b923601c3c0e0d4b4b8d07b3fc93ba6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-custom-prefix-icon/js/Demo.vue",
									"sha256": "898e48867f2de356a893778237f85dbc4e432c8b1d176595a6d7861e137bfd8a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">设置 prefix-icon</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\t:prefix-icon=\"customPrefix\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickercustomprefixiconExample' });\nimport { h, ref, shallowRef } from 'vue';\nconst value1 = ref('');\nconst customPrefix = shallowRef({\n\trender() {\n\t\treturn h('p', 'pre');\n\t}\n});\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n</style>\n",
									"originalSourceSha256": "805db42d8ed0ebbafbfab7a2def4b010a9976eead8e7639b386be608d1211e02",
									"notice": {
										"id": "3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f",
										"url": "/licenses/source-notices/3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt",
										"licenseFilename": "LICENSE-3e0e7116d863577ae0b7605924caefd7b85b02234614ed10273a35ef7c3b361f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/custom-prefix-icon.vue",
											"sourceSha256": "da0ce4cfcebf76b1ae8ba1c9951c548c7b923601c3c0e0d4b4b8d07b3fc93ba6",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-custom-content",
					"title": "自定义内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-custom-content/ts/Demo.vue",
									"sha256": "d5e8d9d951621e86691d7f13c75617d8283de218ce6ffbd83620df499e9e89b2",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"value\"\n\t\t\ttype=\"date\"\n\t\t\tplaceholder=\"选择日期\"\n\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"text\">{{ cell.text }}</span>\n\t\t\t\t\t<span v-if=\"isHoliday(cell)\" class=\"holiday\" />\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"month\"\n\t\t\tvalue-format=\"\"\n\t\t\ttype=\"month\"\n\t\t\tplaceholder=\"选择月份\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"el-date-table-cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"el-date-table-cell__text\">{{ (cell.text ?? 0) + 1 }}期</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"year\"\n\t\t\tvalue-format=\"\"\n\t\t\ttype=\"year\"\n\t\t\tplaceholder=\"选择年份\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"el-date-table-cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"el-date-table-cell__text\">{{ (cell.text ?? 0) + 1 }}y</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"quarter\"\n\t\t\tvalue-format=\"\"\n\t\t\ttype=\"quarter\"\n\t\t\tplaceholder=\"选择季度\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"el-date-table-cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"el-date-table-cell__text\">Q{{ +(cell.text ?? 0) + 1 }}</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\nimport type { AsamDatePickerSlots } from '@asam-ui/ui';\ntype DateCell = Parameters<NonNullable<AsamDatePickerSlots['default']>>[0];\ndefineOptions({ name: 'AsamDatePickerofficialdatepickercustomcontentExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamDateValue>('2021-10-29');\nconst month = ref<AsamDateValue>('');\nconst year = ref<AsamDateValue>('');\nconst quarter = ref<AsamDateValue>('');\nconst holidays = [\n\t'2021-10-01',\n\t'2021-10-02',\n\t'2021-10-03',\n\t'2021-10-04',\n\t'2021-10-05',\n\t'2021-10-06',\n\t'2021-10-07'\n];\n\nconst isHoliday = ({ dayjs }: DateCell) => {\n\treturn dayjs ? holidays.includes(dayjs.format('YYYY-MM-DD')) : false;\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 1rem;\n}\n\n.demo-date-picker > * {\n\tmargin: 0 !important;\n}\n\n.cell {\n\theight: 30px;\n\tpadding: 3px 0;\n\tbox-sizing: border-box;\n}\n\n.cell .text {\n\twidth: 24px;\n\theight: 24px;\n\tdisplay: block;\n\tmargin: 0 auto;\n\tline-height: 24px;\n\tposition: absolute;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tborder-radius: 50%;\n}\n\n.cell.current .text {\n\tbackground: #626aef;\n\tcolor: #fff;\n}\n\n.cell .holiday {\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tbackground: var(--el-color-danger);\n\tborder-radius: 50%;\n\tbottom: 0;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker {\n\t\tgap: 1.5rem;\n\t}\n}\n</style>\n",
									"originalSourceSha256": "73c815e87fd5d80f483f7729650be7ee8d85456ac1988304764588a19983aa31",
									"notice": {
										"id": "681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35",
										"url": "/licenses/source-notices/681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt",
										"licenseFilename": "LICENSE-681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/custom-content.vue",
											"sourceSha256": "8bb30d8e5d76f0123244175c407f36ad16ba4644f25547e72884d1b6ff7dd6ea",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-custom-content/js/Demo.vue",
									"sha256": "fa7e215ad238c8f23574b84b1afc26fb82fde50ee3fbbab219f8492d1cd409a5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"value\"\n\t\t\ttype=\"date\"\n\t\t\tplaceholder=\"选择日期\"\n\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"text\">{{ cell.text }}</span>\n\t\t\t\t\t<span v-if=\"isHoliday(cell)\" class=\"holiday\" />\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"month\"\n\t\t\tvalue-format=\"\"\n\t\t\ttype=\"month\"\n\t\t\tplaceholder=\"选择月份\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"el-date-table-cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"el-date-table-cell__text\">{{ (cell.text ?? 0) + 1 }}期</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"year\"\n\t\t\tvalue-format=\"\"\n\t\t\ttype=\"year\"\n\t\t\tplaceholder=\"选择年份\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"el-date-table-cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"el-date-table-cell__text\">{{ (cell.text ?? 0) + 1 }}y</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDatePicker\n\t\t\tv-model=\"quarter\"\n\t\t\tvalue-format=\"\"\n\t\t\ttype=\"quarter\"\n\t\t\tplaceholder=\"选择季度\"\n\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<div class=\"el-date-table-cell\" :class=\"{ current: cell.isCurrent }\">\n\t\t\t\t\t<span class=\"el-date-table-cell__text\">Q{{ +(cell.text ?? 0) + 1 }}</span>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDatePicker>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickercustomcontentExample' });\nimport { ref } from 'vue';\nconst value = ref('2021-10-29');\nconst month = ref('');\nconst year = ref('');\nconst quarter = ref('');\nconst holidays = [\n\t'2021-10-01',\n\t'2021-10-02',\n\t'2021-10-03',\n\t'2021-10-04',\n\t'2021-10-05',\n\t'2021-10-06',\n\t'2021-10-07'\n];\nconst isHoliday = ({ dayjs }) => {\n\treturn dayjs ? holidays.includes(dayjs.format('YYYY-MM-DD')) : false;\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 1rem;\n}\n\n.demo-date-picker > * {\n\tmargin: 0 !important;\n}\n\n.cell {\n\theight: 30px;\n\tpadding: 3px 0;\n\tbox-sizing: border-box;\n}\n\n.cell .text {\n\twidth: 24px;\n\theight: 24px;\n\tdisplay: block;\n\tmargin: 0 auto;\n\tline-height: 24px;\n\tposition: absolute;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tborder-radius: 50%;\n}\n\n.cell.current .text {\n\tbackground: #626aef;\n\tcolor: #fff;\n}\n\n.cell .holiday {\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tbackground: var(--el-color-danger);\n\tborder-radius: 50%;\n\tbottom: 0;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker {\n\t\tgap: 1.5rem;\n\t}\n}\n</style>\n",
									"originalSourceSha256": "ff1ecb9a29461dcdd5d6d2cb7a9582cb2aa83ae3a06d96dc157025e5c9bc2bce",
									"notice": {
										"id": "681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35",
										"url": "/licenses/source-notices/681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt",
										"licenseFilename": "LICENSE-681c260d827d0fd5d27620cc8c6cbddf8fac699346431183291634bd4c28bd35.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/custom-content.vue",
											"sourceSha256": "8bb30d8e5d76f0123244175c407f36ad16ba4644f25547e72884d1b6ff7dd6ea",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-date-picker-custom-icon",
					"title": "自定义图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-custom-icon/ts/Demo.vue",
									"sha256": "57b5e3e7ba5d9f8904a071e56c5c2adde195348a6b7c22a9493fa96d74447612",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt\n-->\n<template>\n\t<div class=\"demo-date-picker-icon demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">date</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">日期范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t\tunlink-panels\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">月份范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t\tunlink-panels\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">年份范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value4\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start Year\"\n\t\t\t\tend-placeholder=\"End Year\"\n\t\t\t>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">季度范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value5\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start quarter\"\n\t\t\t\tend-placeholder=\"End quarter\"\n\t\t\t>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker, AsamIcon } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickercustomiconExample' });\n\nimport { ref } from 'vue';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\nconst value3 = ref<AsamDateValue>('');\nconst value4 = ref<AsamDateValue>('');\nconst value5 = ref<AsamDateValue>('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker-icon {\n\tdisplay: grid;\n\twidth: 100%;\n}\n\n.demo-date-picker-icon .block {\n\tpadding: 1.5rem 1rem;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker-icon .block :deep(.el-date-editor) {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\n.demo-date-picker-icon .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n\twidth: 100%;\n}\n\n@media screen and (width >= 1201px) {\n\t.demo-date-picker-icon {\n\t\tgrid-template-columns: repeat(6, 1fr);\n\t}\n\n\t.demo-date-picker-icon .block {\n\t\tborder-right: solid 1px var(--el-border-color);\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(1),\n\t.demo-date-picker-icon .block:nth-child(2) {\n\t\tgrid-column: span 3;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(2) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(3),\n\t.demo-date-picker-icon .block:nth-child(4),\n\t.demo-date-picker-icon .block:nth-child(5) {\n\t\tgrid-column: span 2;\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(5) {\n\t\tborder-right: none;\n\t}\n}\n\n@media screen and (width >= 769px) and (width <= 1200px) {\n\t.demo-date-picker-icon {\n\t\tgrid-template-columns: repeat(2, 1fr);\n\t}\n\n\t.demo-date-picker-icon .block {\n\t\tgrid-column: span 1;\n\t\tborder-right: solid 1px var(--el-border-color);\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(2n) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(5) {\n\t\tgrid-column: span 2;\n\t\tborder-right: none;\n\t\tborder-bottom: none;\n\t}\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker-icon {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t.demo-date-picker-icon .block {\n\t\tgrid-column: 1 / -1;\n\t\tpadding: 1rem 0;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker-icon .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "2b25fb4418c4ba6cc849eae196794ea768dc43d06a44d85e3c2997441719aeaa",
									"notice": {
										"id": "7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c",
										"url": "/licenses/source-notices/7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt",
										"licenseFilename": "LICENSE-7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/custom-icon.vue",
											"sourceSha256": "e3d6950ae167ec5109ff2ff01a5e2bc5a9a3542219d8a8da2a7bba94158ae6d3",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-date-picker-custom-icon/js/Demo.vue",
									"sha256": "b076d9a48ad659f602df3c3f9bebc540ffb550cfed2445f707b5d4e1648e1cee",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt\n-->\n<template>\n\t<div class=\"demo-date-picker-icon demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">date</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\ttype=\"date\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">日期范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\ttype=\"daterange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t\tunlink-panels\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">月份范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\ttype=\"monthrange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY/MM/DD\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t\t\tunlink-panels\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">年份范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value4\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"yearrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start Year\"\n\t\t\t\tend-placeholder=\"End Year\"\n\t\t\t>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<div class=\"demonstration\">季度范围</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value5\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"quarterrange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start quarter\"\n\t\t\t\tend-placeholder=\"End quarter\"\n\t\t\t>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker, AsamIcon } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatepickercustomiconExample' });\nimport { ref } from 'vue';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst value3 = ref('');\nconst value4 = ref('');\nconst value5 = ref('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker-icon {\n\tdisplay: grid;\n\twidth: 100%;\n}\n\n.demo-date-picker-icon .block {\n\tpadding: 1.5rem 1rem;\n\ttext-align: center;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.demo-date-picker-icon .block :deep(.el-date-editor) {\n\twidth: 100%;\n\tmax-width: 360px;\n}\n\n.demo-date-picker-icon .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 1rem;\n\twidth: 100%;\n}\n\n@media screen and (width >= 1201px) {\n\t.demo-date-picker-icon {\n\t\tgrid-template-columns: repeat(6, 1fr);\n\t}\n\n\t.demo-date-picker-icon .block {\n\t\tborder-right: solid 1px var(--el-border-color);\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(1),\n\t.demo-date-picker-icon .block:nth-child(2) {\n\t\tgrid-column: span 3;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(2) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(3),\n\t.demo-date-picker-icon .block:nth-child(4),\n\t.demo-date-picker-icon .block:nth-child(5) {\n\t\tgrid-column: span 2;\n\t\tborder-bottom: none;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(5) {\n\t\tborder-right: none;\n\t}\n}\n\n@media screen and (width >= 769px) and (width <= 1200px) {\n\t.demo-date-picker-icon {\n\t\tgrid-template-columns: repeat(2, 1fr);\n\t}\n\n\t.demo-date-picker-icon .block {\n\t\tgrid-column: span 1;\n\t\tborder-right: solid 1px var(--el-border-color);\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(2n) {\n\t\tborder-right: none;\n\t}\n\n\t.demo-date-picker-icon .block:nth-child(5) {\n\t\tgrid-column: span 2;\n\t\tborder-right: none;\n\t\tborder-bottom: none;\n\t}\n}\n\n@media screen and (width <= 768px) {\n\t.demo-date-picker-icon {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t.demo-date-picker-icon .block {\n\t\tgrid-column: 1 / -1;\n\t\tpadding: 1rem 0;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-date-picker-icon .block:last-child {\n\t\tborder-bottom: none;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "f6fb932ca0f092188a558621ac4cae5e4a74c19c08073b4ff628a59738b77bd8",
									"notice": {
										"id": "7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c",
										"url": "/licenses/source-notices/7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt",
										"licenseFilename": "LICENSE-7fa861746f13fc8acbb10a2b9f21f2d43ea29d3bd4349bd4396e562e3746a61c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/date-picker/custom-icon.vue",
											"sourceSha256": "e3d6950ae167ec5109ff2ff01a5e2bc5a9a3542219d8a8da2a7bba94158ae6d3",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-date-and-time",
					"title": "日期与时间",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time/ts/Demo.vue",
									"sha256": "4a0079964844f98c4814ddafd65c8101f41974df1000075142619d1a2b56648b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期和时间\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期和时间\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带默认时间</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期和时间\"\n\t\t\t\t:default-time=\"defaultTime\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\nconst value3 = ref<AsamDateValue>('');\nconst defaultTime = new Date(2000, 1, 1, 12, 0, 0);\n\nconst shortcuts = [\n\t{\n\t\ttext: 'Today',\n\t\tvalue: new Date()\n\t},\n\t{\n\t\ttext: 'Yesterday',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setDate(date.getDate() - 1);\n\t\t\treturn date;\n\t\t}\n\t},\n\t{\n\t\ttext: '一周前',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setDate(date.getDate() - 7);\n\t\t\treturn date;\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-datetime-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-datetime-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-datetime-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker .block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "4eef757c07f2faaf37155857fc8520388ce8a2db88a1ff1f1bce57cae8a44ee3",
									"notice": {
										"id": "b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed",
										"url": "/licenses/source-notices/b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt",
										"licenseFilename": "LICENSE-b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time.vue",
											"sourceSha256": "0587d003daa627cb600fd00f638937760f7a81893cf397d9a4a7e541c1c2c023",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time/js/Demo.vue",
									"sha256": "8a2137f2471435caa7ea5d67018fea5b5625fb10cb4dc7ee19b4e28590960434",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期和时间\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期和时间\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带默认时间</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期和时间\"\n\t\t\t\t:default-time=\"defaultTime\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst value3 = ref('');\nconst defaultTime = new Date(2000, 1, 1, 12, 0, 0);\nconst shortcuts = [\n\t{\n\t\ttext: 'Today',\n\t\tvalue: new Date()\n\t},\n\t{\n\t\ttext: 'Yesterday',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setDate(date.getDate() - 1);\n\t\t\treturn date;\n\t\t}\n\t},\n\t{\n\t\ttext: '一周前',\n\t\tvalue: () => {\n\t\t\tconst date = new Date();\n\t\t\tdate.setDate(date.getDate() - 7);\n\t\t\treturn date;\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-datetime-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-datetime-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-datetime-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker .block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "8bb12c8a590407b3fd479a1f9420bb3b6aa249b958fe151e55bb66f6e5ac793c",
									"notice": {
										"id": "b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed",
										"url": "/licenses/source-notices/b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt",
										"licenseFilename": "LICENSE-b32e23a8ea7a2055f870682b5e3e575be02f6a78ae010f33f6adb52c8b6aa8ed.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time.vue",
											"sourceSha256": "0587d003daa627cb600fd00f638937760f7a81893cf397d9a4a7e541c1c2c023",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-date-and-time-formats",
					"title": "日期与时间格式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time-formats/ts/Demo.vue",
									"sha256": "dcaf8c795896402d220d0583bd608f50138d751734d1e01eab812ef39ffe77d3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">返回 Date 对象</span>\n\t\t\t<div class=\"demonstration\">值： {{ value1 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD HH:mm:ss\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">使用 value-format</span>\n\t\t\t<div class=\"demonstration\">值：{{ value2 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD hh:mm:ss\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD h:m:s a\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">时间戳</span>\n\t\t\t<div class=\"demonstration\">值：{{ value3 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD hh:mm:ss\"\n\t\t\t\tvalue-format=\"x\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatsExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\nconst value3 = ref<AsamDateValue>('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-datetime-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-datetime-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-datetime-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker .block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "dd7fc031f11da625628796b4cfa8858ef1c4215fab9911e5cd45328bb9a609e6",
									"notice": {
										"id": "d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9",
										"url": "/licenses/source-notices/d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt",
										"licenseFilename": "LICENSE-d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time-formats.vue",
											"sourceSha256": "65d8b6a42e760f7eb844b2c4b8a03ad78551e4bb48428c24466f279c244eff44",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time-formats/js/Demo.vue",
									"sha256": "7195d35d3643dec7df27942a17a374b837bf27f6ef8440fa62be1b4cf2dce714",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">返回 Date 对象</span>\n\t\t\t<div class=\"demonstration\">值： {{ value1 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD HH:mm:ss\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">使用 value-format</span>\n\t\t\t<div class=\"demonstration\">值：{{ value2 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD hh:mm:ss\"\n\t\t\t\tvalue-format=\"YYYY-MM-DD h:m:s a\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">时间戳</span>\n\t\t\t<div class=\"demonstration\">值：{{ value3 }}</div>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value3\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY/MM/DD hh:mm:ss\"\n\t\t\t\tvalue-format=\"x\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatsExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst value3 = ref('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-datetime-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.demo-datetime-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-datetime-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker .block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "c4469306a57e1346e88e6e4d11004d2cc8f6e83ccc6781a8e991651a19f0845c",
									"notice": {
										"id": "d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9",
										"url": "/licenses/source-notices/d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt",
										"licenseFilename": "LICENSE-d506e3b4e856eba886e222d5382f2d0343f0ff6b20486c3baad501d5ce03c8f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time-formats.vue",
											"sourceSha256": "65d8b6a42e760f7eb844b2c4b8a03ad78551e4bb48428c24466f279c244eff44",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-date-and-time-formats-panel",
					"title": "面板日期与时间格式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time-formats-panel/ts/Demo.vue",
									"sha256": "ea0e7e0f01752ec2d4fe1162d57c2e701acb8eb0d0e87dfbd6e51537ac160d2a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"MMM DD, YYYY\"\n\t\t\t\ttime-format=\"HH:mm\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"line\" />\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"YYYY/MM/DD ddd\"\n\t\t\t\ttime-format=\"A hh:mm:ss\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatspanelExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n\tjustify-content: space-around;\n\talign-items: stretch;\n}\n\n.demo-datetime-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tmin-width: 300px;\n\tflex: 1;\n}\n\n.line {\n\twidth: 1px;\n\tbackground-color: var(--el-border-color);\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker .block {\n\t\tflex: 100%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.line {\n\t\tdisplay: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "58681defe2e37a837b1aa374f48b08a79d27af70cadac2aa4f34de7ed330c7d1",
									"notice": {
										"id": "0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c",
										"url": "/licenses/source-notices/0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt",
										"licenseFilename": "LICENSE-0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time-formats-panel.vue",
											"sourceSha256": "8842f87744011802f1d7c037621db2f8fa981908dc968af5bf2c051a34efd706",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time-formats-panel/js/Demo.vue",
									"sha256": "276673492b552726cea047311c9197f123c46be83245747788281b2bce26ea5e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"MMM DD, YYYY\"\n\t\t\t\ttime-format=\"HH:mm\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"line\" />\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"YYYY/MM/DD ddd\"\n\t\t\t\ttime-format=\"A hh:mm:ss\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimeformatspanelExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n\tjustify-content: space-around;\n\talign-items: stretch;\n}\n\n.demo-datetime-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tmin-width: 300px;\n\tflex: 1;\n}\n\n.line {\n\twidth: 1px;\n\tbackground-color: var(--el-border-color);\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker .block {\n\t\tflex: 100%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.line {\n\t\tdisplay: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "9d77ddead28e57d2b78039502cd3825ec0cc16ab4fec16ba84487ac2a756f032",
									"notice": {
										"id": "0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c",
										"url": "/licenses/source-notices/0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt",
										"licenseFilename": "LICENSE-0853d27c9bec56d424d9eba63703e18dd7defed697fa0701c75be57fc956b02c.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time-formats-panel.vue",
											"sourceSha256": "8842f87744011802f1d7c037621db2f8fa981908dc968af5bf2c051a34efd706",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-date-and-time-range",
					"title": "日期与时间范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time-range/ts/Demo.vue",
									"sha256": "1b706d096ce1a36948d48f54261866d7824ef0194b337a6100bacf9bcfc994b4",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimerangeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]);\nconst value2 = ref<AsamDateValue>('');\n\nconst shortcuts = [\n\t{\n\t\ttext: '最近一周',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setDate(start.getDate() - 7);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: '最近一个月',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 1);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 3 months',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 3);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.block:last-child {\n\tborder-right: none;\n}\n\n.block .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "75e01747eab0cb5b036c4ce13f936aa83f932870dd56bd2b4bcaddf514fd406b",
									"notice": {
										"id": "41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f",
										"url": "/licenses/source-notices/41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt",
										"licenseFilename": "LICENSE-41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time-range.vue",
											"sourceSha256": "972fb9449bc34a5cde1b3b2b2b6aa746fa2ff4b2b0098da875f762bbbdf952ab",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-date-and-time-range/js/Demo.vue",
									"sha256": "344f19f318c7bd6a2df2c4af3df4305c3315f4e3a908abe0fb23c058e077dceb",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">默认</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">带快捷项</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\t:shortcuts=\"shortcuts\"\n\t\t\t\trange-separator=\"To\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdateandtimerangeExample' });\nimport { ref } from 'vue';\nconst value1 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]);\nconst value2 = ref('');\nconst shortcuts = [\n\t{\n\t\ttext: '最近一周',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setDate(start.getDate() - 7);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: '最近一个月',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 1);\n\t\t\treturn [start, end];\n\t\t}\n\t},\n\t{\n\t\ttext: 'Last 3 months',\n\t\tvalue: () => {\n\t\t\tconst end = new Date();\n\t\t\tconst start = new Date();\n\t\t\tstart.setMonth(start.getMonth() - 3);\n\t\t\treturn [start, end];\n\t\t}\n\t}\n];\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.block:last-child {\n\tborder-right: none;\n}\n\n.block .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "bff94d075029fc00ea9eafe7c697c7a2f95bd5c0ba37ed86f1474e561f20d858",
									"notice": {
										"id": "41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f",
										"url": "/licenses/source-notices/41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt",
										"licenseFilename": "LICENSE-41d3c62a7bd03f0a3d35ca477b16e61eb96b6297382c00107480c8a49e03fc2f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/date-and-time-range.vue",
											"sourceSha256": "972fb9449bc34a5cde1b3b2b2b6aa746fa2ff4b2b0098da875f762bbbdf952ab",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-single-panel",
					"title": "单面板",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-single-panel/ts/Demo.vue",
									"sha256": "4793f65d0138c46f4b821e07a1b2933b7edbb4f63e1868fb5de78f8e703e3dad",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">single-panel</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickersinglepanelExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>();\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n</style>\n",
									"originalSourceSha256": "ace218cf4ce45fb533439d1d6660e716f5f35bfb6403ec725dccac131be201ab",
									"notice": {
										"id": "065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624",
										"url": "/licenses/source-notices/065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt",
										"licenseFilename": "LICENSE-065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/single-panel.vue",
											"sourceSha256": "da57d8aeb780e2d5b8d3afeb0ef6c5fc714e3201065ad84d006c403ef39a4423",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-single-panel/js/Demo.vue",
									"sha256": "34059f8567257cf700f36fe6d4d3f276212e6e576ed03de77f4a8d01acafcd85",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt\n-->\n<template>\n\t<div class=\"demo-date-picker\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">single-panel</span>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tsingle-panel\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickersinglepanelExample' });\nimport { ref } from 'vue';\nconst value1 = ref();\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-date-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.demo-date-picker .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n}\n\n.demo-date-picker .block:last-child {\n\tborder-right: none;\n}\n\n.demo-date-picker .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n</style>\n",
									"originalSourceSha256": "1034e17ea2ab46f09c2ed313e563cbdf068c8273027728727660b8e36aa33c8b",
									"notice": {
										"id": "065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624",
										"url": "/licenses/source-notices/065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt",
										"licenseFilename": "LICENSE-065a6d0188c7b4feadca8576a510035b83acccdbdb5000e140116ec31b55f624.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/single-panel.vue",
											"sourceSha256": "da57d8aeb780e2d5b8d3afeb0ef6c5fc714e3201065ad84d006c403ef39a4423",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-default-time",
					"title": "默认时间",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-default-time/ts/Demo.vue",
									"sha256": "5ee78385d8a405b769525918bd2047f1c9933b1cc5887dd532bf49eb180b3b7a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">起止日期的默认时间均为 12:00:00</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start Date\"\n\t\t\t\tend-placeholder=\"End Date\"\n\t\t\t\t:default-time=\"defaultTime1\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\"> 开始默认时间为 12:00:00，结束为 08:00:00 </span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start Date\"\n\t\t\t\tend-placeholder=\"End Date\"\n\t\t\t\t:default-time=\"defaultTime2\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdefaulttimeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n\nconst defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'\nconst defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]; // '12:00:00', '08:00:00'\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.block:last-child {\n\tborder-right: none;\n}\n\n.block .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "bf1dbdca15e3ac37c3d7d572e5f59a1b07540ef204ade5268da52cedacaaead5",
									"notice": {
										"id": "2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8",
										"url": "/licenses/source-notices/2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt",
										"licenseFilename": "LICENSE-2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/default-time.vue",
											"sourceSha256": "5ece01e759e8a2af3136a6c34062577dbbd056adcc33bdb89f90f0a9475b6159",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-default-time/js/Demo.vue",
									"sha256": "1c9c595d54003dce5ccd8651834ba0c84d6b39272de3b99cee7eb5c5cb414848",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\">起止日期的默认时间均为 12:00:00</span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start Date\"\n\t\t\t\tend-placeholder=\"End Date\"\n\t\t\t\t:default-time=\"defaultTime1\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"block\">\n\t\t\t<span class=\"demonstration\"> 开始默认时间为 12:00:00，结束为 08:00:00 </span>\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start Date\"\n\t\t\t\tend-placeholder=\"End Date\"\n\t\t\t\t:default-time=\"defaultTime2\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickerdefaulttimeExample' });\nimport { ref } from 'vue';\nconst value1 = ref('');\nconst value2 = ref('');\nconst defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'\nconst defaultTime2 = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]; // '12:00:00', '08:00:00'\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n}\n\n.block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tborder-right: solid 1px var(--el-border-color);\n\tflex: 1;\n\tmin-width: 300px;\n}\n\n.block:last-child {\n\tborder-right: none;\n}\n\n.block .demonstration {\n\tdisplay: block;\n\tcolor: var(--el-text-color-secondary);\n\tfont-size: 14px;\n\tmargin-bottom: 20px;\n}\n\n@media (width <= 768px) {\n\t.block {\n\t\tflex: 100%;\n\t\tborder-right: none;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "43fc6b96e1ff44a21b075d74e7c48af18cbdf3a94e79269c552959d5ef630421",
									"notice": {
										"id": "2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8",
										"url": "/licenses/source-notices/2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt",
										"licenseFilename": "LICENSE-2eaee4629676781cb54bfd744c7cc792aaa77461864c6427fe650819d0fc8ff8.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/default-time.vue",
											"sourceSha256": "5ece01e759e8a2af3136a6c34062577dbbd056adcc33bdb89f90f0a9475b6159",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-datetime-picker-custom-icon",
					"title": "自定义图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-custom-icon/ts/Demo.vue",
									"sha256": "54c75ffdfcdba59b17a2f63b6a60605e6679ab9debb0de8cee42825ab22ce2e1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker-icon demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"MMM DD, YYYY\"\n\t\t\t\ttime-format=\"HH:mm\"\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"line\" />\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"YYYY/MM/DD ddd\"\n\t\t\t\ttime-format=\"A hh:mm:ss\"\n\t\t\t\tunlink-panels\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamDateValue } from '@asam-ui/ui';\nimport { AsamDatePicker, AsamIcon } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickercustomiconExample' });\n\nimport { ref } from 'vue';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\n\nconst value1 = ref<AsamDateValue>('');\nconst value2 = ref<AsamDateValue>('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker-icon {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n\tjustify-content: space-around;\n\talign-items: stretch;\n}\n\n.demo-datetime-picker-icon .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tmin-width: 300px;\n\tflex: 1;\n}\n\n.line {\n\twidth: 1px;\n\tbackground-color: var(--el-border-color);\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker-icon .block {\n\t\tflex: 100%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker-icon .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.line {\n\t\tdisplay: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "2ab7f91a5db11043db5a7de257c59a6484e7214c89aad887565f0c7caed1c442",
									"notice": {
										"id": "cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9",
										"url": "/licenses/source-notices/cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt",
										"licenseFilename": "LICENSE-cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/custom-icon.vue",
											"sourceSha256": "cb188384344fa24104847a9ff5361d801d3822709f7d0442f21ccdbfc92c5047",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/official-datetime-picker-custom-icon/js/Demo.vue",
									"sha256": "4c558b30e7eceb298e32c7d387c10bb5cfd3144c633b672788020335aef6ee14",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt\n-->\n<template>\n\t<div class=\"demo-datetime-picker-icon demo-layout-1\">\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value1\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetime\"\n\t\t\t\tplaceholder=\"选择日期\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"MMM DD, YYYY\"\n\t\t\t\ttime-format=\"HH:mm\"\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t\t<div class=\"line\" />\n\t\t<div class=\"block\">\n\t\t\t<AsamDatePicker\n\t\t\t\tv-model=\"value2\"\n\t\t\t\tvalue-format=\"\"\n\t\t\t\ttype=\"datetimerange\"\n\t\t\t\tstart-placeholder=\"Start date\"\n\t\t\t\tend-placeholder=\"End date\"\n\t\t\t\tformat=\"YYYY-MM-DD HH:mm:ss\"\n\t\t\t\tdate-format=\"YYYY/MM/DD ddd\"\n\t\t\t\ttime-format=\"A hh:mm:ss\"\n\t\t\t\tunlink-panels\n\t\t\t>\n\t\t\t\t<template #prev-month>\n\t\t\t\t\t<AsamIcon><CaretLeft /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-month>\n\t\t\t\t\t<AsamIcon><CaretRight /></AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t\t<template #next-year>\n\t\t\t\t\t<AsamIcon>\n\t\t\t\t\t\t<svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<g stroke-width=\"1\" fill-rule=\"evenodd\">\n\t\t\t\t\t\t\t\t<g fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</AsamIcon>\n\t\t\t\t</template>\n\t\t\t</AsamDatePicker>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamDatePicker, AsamIcon } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerofficialdatetimepickercustomiconExample' });\nimport { ref } from 'vue';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\nconst value1 = ref('');\nconst value2 = ref('');\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-datetime-picker-icon {\n\tdisplay: flex;\n\twidth: 100%;\n\tpadding: 0;\n\tflex-wrap: wrap;\n\tjustify-content: space-around;\n\talign-items: stretch;\n}\n\n.demo-datetime-picker-icon .block {\n\tpadding: 30px 0;\n\ttext-align: center;\n\tmin-width: 300px;\n\tflex: 1;\n}\n\n.line {\n\twidth: 1px;\n\tbackground-color: var(--el-border-color);\n}\n\n@media (width <= 768px) {\n\t.demo-datetime-picker-icon .block {\n\t\tflex: 100%;\n\t\tborder-bottom: solid 1px var(--el-border-color);\n\t}\n\n\t.demo-datetime-picker-icon .block:last-child {\n\t\tborder-bottom: none;\n\t}\n\n\t.line {\n\t\tdisplay: none;\n\t}\n\n\t:deep(.el-date-editor.el-input) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.el-date-editor.el-input__wrapper) {\n\t\twidth: 100%;\n\t\tmax-width: 300px;\n\t}\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "34947588166a9812c39414178693ba485dbebf58421d907a21b3be8c3cdcc790",
									"notice": {
										"id": "cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9",
										"url": "/licenses/source-notices/cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt",
										"licenseFilename": "LICENSE-cbe78a7d35a0d5e26a7c24acd0d8d3d99706049c2990951533b1e60ffa72e5f9.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/datetime-picker/custom-icon.vue",
											"sourceSha256": "cb188384344fa24104847a9ff5361d801d3822709f7d0442f21ccdbfc92c5047",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "advanced-contract",
					"title": "本地化与高级配置的完整 SFC",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/advanced-contract/ts/Demo.vue",
									"sha256": "34f07cf2efcd5591705e7e38789a7cd8f169a1ad4c9e9132f5b265996082eb61",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamDatePicker\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t>\n\t\t\t\t<template #default=\"cell\">\n\t\t\t\t\t<!-- Scoped cell data stays typed through the public slot. -->\n\t\t\t\t\t<span>{{ cell.text }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-month><CaretLeft /></template>\n\t\t\t\t<template #next-month><CaretRight /></template>\n\t\t\t\t<template #prev-year><CaretLeft /></template>\n\t\t\t\t<template #next-year><CaretRight /></template>\n\t\t\t\t<template #range-separator>→</template>\n\t\t\t</AsamDatePicker>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamDatePicker, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamDatePickerProps, AsamDateValue } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamDatePickerAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref<AsamDateValue>(null);\nconst configuration: AsamDatePickerProps = {\n\ttype: 'datetimerange',\n\tsinglePanel: true,\n\tunlinkPanels: true,\n\tautomaticDropdown: false,\n\tvalueFormat: 'YYYY-MM-DD HH:mm:ss',\n\tformat: 'YYYY/MM/DD HH:mm',\n\tteleported: false,\n\treadonly: false,\n\tclearable: true,\n\teditable: true,\n\tplaceholder: '日期时间',\n\tstartPlaceholder: '起点',\n\tendPlaceholder: '终点',\n\trangeSeparator: '到',\n\tpopperClass: 'advanced-date-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tpopperOptions: { strategy: 'absolute' },\n\tplacement: 'bottom',\n\tfallbackPlacements: ['top', 'bottom'],\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight,\n\temptyValues: ['', null, undefined],\n\tvalueOnClear: null,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tdefaultTime: new Date(2000, 0, 1, 9, 30),\n\tdateFormat: 'YYYY/MM/DD',\n\ttimeFormat: 'HH:mm',\n\tshowFooter: true,\n\tshowConfirm: true,\n\tshowWeekNumber: true,\n\tdisabledDate: (date: Date) => date.getFullYear() < 2026,\n\tshortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],\n\tcellClassName: (date: Date) => (date.getDate() === 1 ? 'advanced-cell' : ''),\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.ts",
									"sourcePath": "apps/website/examples/AsamDatePicker/advanced-contract/ts/locale.ts",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/advanced-contract/js/Demo.vue",
									"sha256": "e51cb0a0592ca38dba8e49f7341b1cb2a05ed7fdea6af975d0949686a5773086",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamDatePicker\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t>\n\t\t\t\t<template #default=\"cell\">\n\t\t\t\t\t<!-- Scoped cell data stays typed through the public slot. -->\n\t\t\t\t\t<span>{{ cell.text }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-month><CaretLeft /></template>\n\t\t\t\t<template #next-month><CaretRight /></template>\n\t\t\t\t<template #prev-year><CaretLeft /></template>\n\t\t\t\t<template #next-year><CaretRight /></template>\n\t\t\t\t<template #range-separator>→</template>\n\t\t\t</AsamDatePicker>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamDatePicker, AsamConfigProvider } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamDatePickerAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref(null);\nconst configuration = {\n\ttype: 'datetimerange',\n\tsinglePanel: true,\n\tunlinkPanels: true,\n\tautomaticDropdown: false,\n\tvalueFormat: 'YYYY-MM-DD HH:mm:ss',\n\tformat: 'YYYY/MM/DD HH:mm',\n\tteleported: false,\n\treadonly: false,\n\tclearable: true,\n\teditable: true,\n\tplaceholder: '日期时间',\n\tstartPlaceholder: '起点',\n\tendPlaceholder: '终点',\n\trangeSeparator: '到',\n\tpopperClass: 'advanced-date-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tpopperOptions: { strategy: 'absolute' },\n\tplacement: 'bottom',\n\tfallbackPlacements: ['top', 'bottom'],\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight,\n\temptyValues: ['', null, undefined],\n\tvalueOnClear: null,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tdefaultTime: new Date(2000, 0, 1, 9, 30),\n\tdateFormat: 'YYYY/MM/DD',\n\ttimeFormat: 'HH:mm',\n\tshowFooter: true,\n\tshowConfirm: true,\n\tshowWeekNumber: true,\n\tdisabledDate: (date) => date.getFullYear() < 2026,\n\tshortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],\n\tcellClassName: (date) => (date.getDate() === 1 ? 'advanced-cell' : ''),\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.js",
									"sourcePath": "apps/website/examples/AsamDatePicker/advanced-contract/js/locale.js",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "sidebar",
					"title": "公开侧栏与快捷项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/sidebar/ts/Demo.vue",
									"sha256": "48887250f47cff6804424e8562bbc3c3fbab1ba429dcc1421723516ede115a29",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Mode choice uses the public finite picker type. -->\n\t\t\t<span>模式</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption v-for=\"item in modes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\t\titem\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"singlePanel\">范围单面板</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"withShortcut\">快捷项</AsamCheckboxItem>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"mode\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:single-panel=\"singlePanel\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:shortcuts=\"withShortcut ? shortcuts : []\"\n\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t>\n\t\t\t<template #sidebar=\"scope\">\n\t\t\t\t<!-- Apply the public native class to a block sidebar root. -->\n\t\t\t\t<aside :class=\"scope.class\" v-bind=\"{ 'data-sidebar-example': '' }\">\n\t\t\t\t\t<p class=\"example-paragraph\">日期侧栏</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t\t\t>清空模型</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</aside></template\n\t\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<!-- Preserve the existing public cell slot. -->\n\t\t\t\t<span>{{ cell.text }}</span></template\n\t\t\t>\n\t\t\t<template #prev-year><span aria-hidden=\"true\">«</span></template>\n\t\t\t<template #next-year><span aria-hidden=\"true\">»</span></template>\n\t\t\t<template #range-separator>→</template>\n\t\t</AsamDatePicker>\n\t\t<output>模型 {{ value }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamButton, AsamDatePicker } from '@asam-ui/ui';\nimport type { AsamDateValue, AsamDatePickerProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerSidebarExample' });\nconst value = ref<AsamDateValue>(null);\nconst modes: NonNullable<AsamDatePickerProps['type']>[] = [\n\t'date',\n\t'datetime',\n\t'week',\n\t'month',\n\t'year',\n\t'dates',\n\t'months',\n\t'years',\n\t'quarter',\n\t'quarters',\n\t'daterange',\n\t'datetimerange',\n\t'monthrange',\n\t'yearrange',\n\t'quarterrange'\n];\nconst mode = ref<NonNullable<AsamDatePickerProps['type']>>('daterange');\nconst singlePanel = ref(false);\nwatch(mode, () => {\n\tvalue.value = null;\n});\nconst teleported = ref(true);\nconst withShortcut = ref(false);\nconst shortcuts = [\n\t{\n\t\ttext: '固定日期',\n\t\tvalue: () =>\n\t\t\tmode.value.endsWith('range')\n\t\t\t\t? [new Date(2026, 0, 12), new Date(2026, 0, 14)]\n\t\t\t\t: ['dates', 'months', 'years', 'quarters'].includes(mode.value)\n\t\t\t\t\t? [new Date(2026, 0, 12)]\n\t\t\t\t\t: new Date(2026, 0, 12)\n\t}\n];\nfunction reset() {\n\tvalue.value = null;\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/sidebar/js/Demo.vue",
									"sha256": "becfc40468770d1797a6b0cdcf1ccedeec9e91c69b1c4200c986781a70e01d1b",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Mode choice uses the public finite picker type. -->\n\t\t\t<span>模式</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption v-for=\"item in modes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\t\titem\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"singlePanel\">范围单面板</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"withShortcut\">快捷项</AsamCheckboxItem>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"value\"\n\t\t\t:type=\"mode\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:single-panel=\"singlePanel\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:shortcuts=\"withShortcut ? shortcuts : []\"\n\t\t\tvalue-format=\"YYYY-MM-DD\"\n\t\t>\n\t\t\t<template #sidebar=\"scope\">\n\t\t\t\t<!-- Apply the public native class to a block sidebar root. -->\n\t\t\t\t<aside :class=\"scope.class\" v-bind=\"{ 'data-sidebar-example': '' }\">\n\t\t\t\t\t<p class=\"example-paragraph\">日期侧栏</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t\t\t>清空模型</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</aside></template\n\t\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<!-- Preserve the existing public cell slot. -->\n\t\t\t\t<span>{{ cell.text }}</span></template\n\t\t\t>\n\t\t\t<template #prev-year><span aria-hidden=\"true\">«</span></template>\n\t\t\t<template #next-year><span aria-hidden=\"true\">»</span></template>\n\t\t\t<template #range-separator>→</template>\n\t\t</AsamDatePicker>\n\t\t<output>模型 {{ value }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamButton, AsamDatePicker } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDatePickerSidebarExample' });\nconst value = ref(null);\nconst modes = [\n\t'date',\n\t'datetime',\n\t'week',\n\t'month',\n\t'year',\n\t'dates',\n\t'months',\n\t'years',\n\t'quarter',\n\t'quarters',\n\t'daterange',\n\t'datetimerange',\n\t'monthrange',\n\t'yearrange',\n\t'quarterrange'\n];\nconst mode = ref('daterange');\nconst singlePanel = ref(false);\nwatch(mode, () => {\n\tvalue.value = null;\n});\nconst teleported = ref(true);\nconst withShortcut = ref(false);\nconst shortcuts = [\n\t{\n\t\ttext: '固定日期',\n\t\tvalue: () =>\n\t\t\tmode.value.endsWith('range')\n\t\t\t\t? [new Date(2026, 0, 12), new Date(2026, 0, 14)]\n\t\t\t\t: ['dates', 'months', 'years', 'quarters'].includes(mode.value)\n\t\t\t\t\t? [new Date(2026, 0, 12)]\n\t\t\t\t\t: new Date(2026, 0, 12)\n\t}\n];\nfunction reset() {\n\tvalue.value = null;\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "empty-values",
					"title": "原生清空配置与 nullable 模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/empty-values/ts/Demo.vue",
									"sha256": "95608a7e1e81b1d1975ebbc45224915e79916f48786ea8959df87db695e8a5e0",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div>\n\t\t\t<span>清空配置</span>\n\t\t\t<AsamSelect v-model=\"mode\" aria-label=\"清空配置\">\n\t\t\t\t<AsamOption value=\"default\" :label=\"'默认'\">默认</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption value=\"factory-false\" :label=\"'函数返回 false'\"\n\t\t\t\t\t>函数返回 false</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"undefined\" :label=\"'函数返回 undefined'\"\n\t\t\t\t\t>函数返回 undefined</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"array\" :label=\"'函数返回空数组端点'\"\n\t\t\t\t\t>函数返回空数组端点</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"zero\" :label=\"'0 为空'\">0 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"epoch\" :label=\"'0 为有效时间戳'\">0 为有效时间戳</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>配置来源</span>\n\t\t\t<AsamSelect v-model=\"scope\" aria-label=\"配置来源\">\n\t\t\t\t<AsamOption value=\"props\" :label=\"'属性'\">属性</AsamOption>\n\t\t\t\t<AsamOption value=\"provider\" :label=\"'配置提供器'\">配置提供器</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamCheckboxItem v-model=\"range\">原生范围</AsamCheckboxItem>\n\t\t<AsamConfigProvider v-bind=\"provider\">\n\t\t\t<AsamDatePicker\n\t\t\t\t:key=\"scope + ':' + mode + ':' + range\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"updates++\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t\t@clear=\"onClear\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restore\">回填有效值</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observedCalls = factoryCalls\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t>\n\t\t<output>{{ summary }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamDatePicker,\n\tAsamConfigProvider\n} from '@asam-ui/ui';\nimport type { AsamDateValue, AsamDatePickerProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerEmptyValuesExample' });\nconst mode = ref('default');\nconst scope = ref('props');\nconst range = ref(false);\nconst value = ref<AsamDateValue>(null);\nconst updates = ref(0);\nconst changes = ref(0);\nconst clears = ref(0);\nconst observedCalls = ref(0);\n// Keep the callback counter non-reactive: reading/incrementing a ref inside a native\n// computed factory would itself create a dependency and alter callback behavior.\nlet factoryCalls = 0;\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；update ' +\n\t\tupdates.value +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'factory-false'\n\t\t? false\n\t\t: mode.value === 'array'\n\t\t\t? [null, null]\n\t\t\t: undefined;\n}\ntype EmptyConfiguration = Pick<AsamDatePickerProps, 'emptyValues' | 'valueOnClear'>;\nconst emptyConfiguration = computed<EmptyConfiguration>(() => ({\n\temptyValues:\n\t\tmode.value === 'zero'\n\t\t\t? ['', undefined, null, 0]\n\t\t\t: ['', undefined, null, false, [null, null]],\n\tvalueOnClear: ['factory-false', 'undefined', 'array'].includes(mode.value)\n\t\t? clearFactory\n\t\t: mode.value === 'false'\n\t\t\t? false\n\t\t\t: mode.value === 'zero'\n\t\t\t\t? 0\n\t\t\t\t: null\n}));\nconst provider = computed<EmptyConfiguration>(() =>\n\tscope.value === 'provider' ? emptyConfiguration.value : {}\n);\nconst configuration = computed<AsamDatePickerProps>(() => ({\n\ttype: range.value ? 'datetimerange' : 'datetime',\n\tformat: 'YYYY-MM-DD HH:mm:ss',\n\tvalueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'YYYY-MM-DD HH:mm:ss',\n\t...(scope.value === 'props' ? emptyConfiguration.value : {})\n}));\nfunction restore() {\n\tvalue.value =\n\t\tmode.value === 'zero'\n\t\t\t? range.value\n\t\t\t\t? [86400000, 172800000]\n\t\t\t\t: 86400000\n\t\t\t: mode.value === 'epoch'\n\t\t\t\t? range.value\n\t\t\t\t\t? [0, 86400000]\n\t\t\t\t\t: 0\n\t\t\t\t: range.value\n\t\t\t\t\t? ['2026-01-12 09:30:00', '2026-01-14 17:30:00']\n\t\t\t\t\t: '2026-01-12 09:30:00';\n}\nfunction onClear() {\n\tclears.value++;\n\tobservedCalls.value = factoryCalls;\n}\nwatch([mode, scope, range], restore);\nrestore();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/empty-values/js/Demo.vue",
									"sha256": "5551ca93a7750c1b4e5198518f74920870f5f64cb0ad5c81058b5090351b70ec",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div>\n\t\t\t<span>清空配置</span>\n\t\t\t<AsamSelect v-model=\"mode\" aria-label=\"清空配置\">\n\t\t\t\t<AsamOption value=\"default\" :label=\"'默认'\">默认</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption value=\"factory-false\" :label=\"'函数返回 false'\"\n\t\t\t\t\t>函数返回 false</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"undefined\" :label=\"'函数返回 undefined'\"\n\t\t\t\t\t>函数返回 undefined</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"array\" :label=\"'函数返回空数组端点'\"\n\t\t\t\t\t>函数返回空数组端点</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"zero\" :label=\"'0 为空'\">0 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"epoch\" :label=\"'0 为有效时间戳'\">0 为有效时间戳</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>配置来源</span>\n\t\t\t<AsamSelect v-model=\"scope\" aria-label=\"配置来源\">\n\t\t\t\t<AsamOption value=\"props\" :label=\"'属性'\">属性</AsamOption>\n\t\t\t\t<AsamOption value=\"provider\" :label=\"'配置提供器'\">配置提供器</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamCheckboxItem v-model=\"range\">原生范围</AsamCheckboxItem>\n\t\t<AsamConfigProvider v-bind=\"provider\">\n\t\t\t<AsamDatePicker\n\t\t\t\t:key=\"scope + ':' + mode + ':' + range\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"updates++\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t\t@clear=\"onClear\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restore\">回填有效值</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observedCalls = factoryCalls\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t>\n\t\t<output>{{ summary }}</output>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamDatePicker,\n\tAsamConfigProvider\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDatePickerEmptyValuesExample' });\nconst mode = ref('default');\nconst scope = ref('props');\nconst range = ref(false);\nconst value = ref(null);\nconst updates = ref(0);\nconst changes = ref(0);\nconst clears = ref(0);\nconst observedCalls = ref(0);\n// Keep the callback counter non-reactive: reading/incrementing a ref inside a native\n// computed factory would itself create a dependency and alter callback behavior.\nlet factoryCalls = 0;\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；update ' +\n\t\tupdates.value +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'factory-false'\n\t\t? false\n\t\t: mode.value === 'array'\n\t\t\t? [null, null]\n\t\t\t: undefined;\n}\nconst emptyConfiguration = computed(() => ({\n\temptyValues:\n\t\tmode.value === 'zero'\n\t\t\t? ['', undefined, null, 0]\n\t\t\t: ['', undefined, null, false, [null, null]],\n\tvalueOnClear: ['factory-false', 'undefined', 'array'].includes(mode.value)\n\t\t? clearFactory\n\t\t: mode.value === 'false'\n\t\t\t? false\n\t\t\t: mode.value === 'zero'\n\t\t\t\t? 0\n\t\t\t\t: null\n}));\nconst provider = computed(() => (scope.value === 'provider' ? emptyConfiguration.value : {}));\nconst configuration = computed(() => ({\n\ttype: range.value ? 'datetimerange' : 'datetime',\n\tformat: 'YYYY-MM-DD HH:mm:ss',\n\tvalueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'YYYY-MM-DD HH:mm:ss',\n\t...(scope.value === 'props' ? emptyConfiguration.value : {})\n}));\nfunction restore() {\n\tvalue.value =\n\t\tmode.value === 'zero'\n\t\t\t? range.value\n\t\t\t\t? [86400000, 172800000]\n\t\t\t\t: 86400000\n\t\t\t: mode.value === 'epoch'\n\t\t\t\t? range.value\n\t\t\t\t\t? [0, 86400000]\n\t\t\t\t\t: 0\n\t\t\t\t: range.value\n\t\t\t\t\t? ['2026-01-12 09:30:00', '2026-01-14 17:30:00']\n\t\t\t\t\t: '2026-01-12 09:30:00';\n}\nfunction onClear() {\n\tclears.value++;\n\tobservedCalls.value = factoryCalls;\n}\nwatch([mode, scope, range], restore);\nrestore();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "class-values",
					"title": "弹层 ClassValue 与组合两端",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/class-values/ts/Demo.vue",
									"sha256": "0f89cde0da71355dcdf3580875a2350d5cd30b72470ef1fcb23c8fbaf5937473",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>类名形式</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption value=\"object\" :label=\"'对象'\">对象</AsamOption>\n\t\t\t\t<AsamOption value=\"array\" :label=\"'嵌套数组'\">嵌套数组</AsamOption>\n\t\t\t\t<AsamOption value=\"string\" :label=\"'字符串'\">字符串</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption value=\"null\" :label=\"'null'\">null</AsamOption>\n\t\t\t\t<AsamOption value=\"undefined\" :label=\"'undefined'\">undefined</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>尺寸</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"item in sizes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\t\titem\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"enabled\">启用自定义边框</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"date\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t\t<AsamTimePicker\n\t\t\tv-model=\"time\"\n\t\t\tvalue-format=\"HH:mm:ss\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t\t<AsamDateTimePicker\n\t\t\tv-model=\"legacy\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t\t<AsamDateTimeRangePicker\n\t\t\tv-model=\"range\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamDatePicker,\n\tAsamTimePicker,\n\tAsamDateTimePicker,\n\tAsamDateTimeRangePicker\n} from '@asam-ui/ui';\nimport type {\n\tAsamControlSize,\n\tAsamDatePickerProps,\n\tAsamDateValue,\n\tAsamTimeValue,\n\tDateTimeRangeValue\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPickerClassValuesExample' });\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst size = ref<AsamControlSize>('big');\nconst enabled = ref(true);\nconst teleported = ref(true);\nconst mode = ref('object');\nconst date = ref<AsamDateValue>('2026-01-12');\nconst time = ref<AsamTimeValue>('09:30:00');\nconst legacy = ref<DateTimeRangeValue>(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);\nconst range = ref<DateTimeRangeValue>(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);\nconst popperClass = computed<AsamDatePickerProps['popperClass']>(() => {\n\tconst object = { 'asam-example-popup': enabled.value, 'asam-example-hidden': false };\n\tif (mode.value === 'object') return object;\n\tif (mode.value === 'array') return ['asam-example-array', [object, false]];\n\tif (mode.value === 'string') return enabled.value ? 'asam-example-popup' : '';\n\tif (mode.value === 'false') return false;\n\tif (mode.value === 'null') return null;\n\treturn undefined;\n});\n</script>\n<style>\n.asam-example-popup {\n\toutline: 2px solid var(--asam-color-primary);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDatePicker/class-values/js/Demo.vue",
									"sha256": "82859b643d0605c45d65c9dbd9458401770aa2df5619b0cb7ce54325548c980b",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>类名形式</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption value=\"object\" :label=\"'对象'\">对象</AsamOption>\n\t\t\t\t<AsamOption value=\"array\" :label=\"'嵌套数组'\">嵌套数组</AsamOption>\n\t\t\t\t<AsamOption value=\"string\" :label=\"'字符串'\">字符串</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption value=\"null\" :label=\"'null'\">null</AsamOption>\n\t\t\t\t<AsamOption value=\"undefined\" :label=\"'undefined'\">undefined</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>尺寸</span>\n\t\t\t<AsamSelect v-model=\"size\">\n\t\t\t\t<AsamOption v-for=\"item in sizes\" :key=\"item\" :value=\"item\" :label=\"item\">{{\n\t\t\t\t\titem\n\t\t\t\t}}</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"enabled\">启用自定义边框</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t<AsamDatePicker\n\t\t\tv-model=\"date\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t\t<AsamTimePicker\n\t\t\tv-model=\"time\"\n\t\t\tvalue-format=\"HH:mm:ss\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t\t<AsamDateTimePicker\n\t\t\tv-model=\"legacy\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t\t<AsamDateTimeRangePicker\n\t\t\tv-model=\"range\"\n\t\t\t:popper-class=\"popperClass\"\n\t\t\t:size=\"size\"\n\t\t\t:teleported=\"teleported\"\n\t\t/>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamDatePicker,\n\tAsamTimePicker,\n\tAsamDateTimePicker,\n\tAsamDateTimeRangePicker\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamPickerClassValuesExample' });\nconst sizes = ['large', 'big', 'default', 'small'];\nconst size = ref('big');\nconst enabled = ref(true);\nconst teleported = ref(true);\nconst mode = ref('object');\nconst date = ref('2026-01-12');\nconst time = ref('09:30:00');\nconst legacy = ref(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);\nconst range = ref(['2026-01-12 09:30:00', '2026-01-14 17:30:00']);\nconst popperClass = computed(() => {\n\tconst object = { 'asam-example-popup': enabled.value, 'asam-example-hidden': false };\n\tif (mode.value === 'object') return object;\n\tif (mode.value === 'array') return ['asam-example-array', [object, false]];\n\tif (mode.value === 'string') return enabled.value ? 'asam-example-popup' : '';\n\tif (mode.value === 'false') return false;\n\tif (mode.value === 'null') return null;\n\treturn undefined;\n});\n</script>\n<style>\n.asam-example-popup {\n\toutline: 2px solid var(--asam-color-primary);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTimePicker",
			"documentation": "/component-AsamTimePicker.html",
			"demos": [
				{
					"id": "native-values",
					"title": "原生默认模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/native-values/ts/Demo.vue",
									"sha256": "4ff1563fe85216fa054c9743bd2a738b637cdb37659060ef078f57ec55f2f005",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>\n\t\t<AsamTimePicker v-model=\"value\" clearable @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamTimePicker } from '@asam-ui/ui';\nimport type { AsamTimeValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerNativeValuesExample' });\nconst value = ref<AsamTimeValue>();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/native-values/js/Demo.vue",
									"sha256": "cc30885d49a9638115ddb4583cfde10b281f575cbb8402099f8da06d0f70e119",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值；日期/时间未传 valueFormat，选择后保持 Date。</p>\n\t\t<AsamTimePicker v-model=\"value\" clearable @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerNativeValuesExample' });\nconst value = ref();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "格式、清空与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/basic/ts/Demo.vue",
									"sha256": "a9ab6d22424f30f5e7c1f64bea4f70f5b2faf5712b83b5c39b882bf6a28974b5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-format': 'HH:mm:ss',\n\t\t\t\tformat: 'HH:mm:ss',\n\t\t\t\tclearable: true,\n\t\t\t\t'aria-label': '选择时间'\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker, AsamButton } from '@asam-ui/ui';\nconst value = ref<AsamTimeValue>(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/basic/js/Demo.vue",
									"sha256": "36e6f630a242fbfde89855eb712af9447426526dcfc96fd450dbb49a6328fca0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-format': 'HH:mm:ss',\n\t\t\t\tformat: 'HH:mm:ss',\n\t\t\t\tclearable: true,\n\t\t\t\t'aria-label': '选择时间'\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker, AsamButton } from '@asam-ui/ui';\nconst value = ref(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "range",
					"title": "范围与约束",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/range/ts/Demo.vue",
									"sha256": "cc9a20606879892976ea7015880b2e3566deb20731e80f7bd3f219e1f1a39334",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{ 'is-range': true, 'value-format': 'HH:mm:ss' }\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t/>\n\t\t<output>范围：{{ range }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerRangeExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker } from '@asam-ui/ui';\nconst range = ref<AsamTimeValue>(null);\nfunction disabledHours() {\n\treturn [0, 1, 2, 3, 4, 5];\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/range/js/Demo.vue",
									"sha256": "a88904438d39a643ebd1ad4dca96e4383b0a0d9e0c566ea96b2108682a3641f0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{ 'is-range': true, 'value-format': 'HH:mm:ss' }\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t/>\n\t\t<output>范围：{{ range }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimePickerRangeExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker } from '@asam-ui/ui';\nconst range = ref(null);\nfunction disabledHours() {\n\treturn [0, 1, 2, 3, 4, 5];\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "公开实例操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/instance/ts/Demo.vue",
									"sha256": "4443c2eb404266dcc3eb510f5735c1ca5d4cdffb3e0c2c153c70de2f930cb934",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimePicker\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'value-format': 'HH:mm:ss', format: 'HH:mm:ss' }\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleOpen()\"> 打开 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleClose()\"> 关闭 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker, AsamButton } from '@asam-ui/ui';\nimport type { AsamTimePickerExpose } from '@asam-ui/ui';\nconst control = ref<AsamTimePickerExpose>();\nconst value = ref<AsamTimeValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/instance/js/Demo.vue",
									"sha256": "e9428e727dbae2260962ab97e93d852ae8c818942481975799335b1d7c577f2d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimePicker\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'value-format': 'HH:mm:ss', format: 'HH:mm:ss' }\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleOpen()\"> 打开 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleClose()\"> 关闭 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimePickerInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/sizes/ts/Demo.vue",
									"sha256": "f42697f6451cce539fa4d93de0aff767038197ad8fb4e27655002353a092bc42",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTimePicker size=\"large\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTimePicker size=\"big\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTimePicker size=\"default\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTimePicker size=\"small\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamTimePicker value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimePickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/sizes/js/Demo.vue",
									"sha256": "85044f4a4ebfcb53d578548522ac7b276321de54789881c4b0693e2dcd6ed11d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTimePicker size=\"large\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTimePicker size=\"big\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTimePicker size=\"default\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTimePicker size=\"small\" value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamTimePicker value-format=\"HH:mm:ss\" format=\"HH:mm:ss\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimePickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTimePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "constraints",
					"title": "禁用时分秒、箭头控制与范围角色",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/constraints/ts/Demo.vue",
									"sha256": "068a780a9defe4efd313d42f15dcdd8a78a6c904ffe53279d5747ad87fdba8b2",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value\"\n\t\t\t:arrow-control=\"arrows\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t\t:disabled-minutes=\"disabledMinutes\"\n\t\t\t:disabled-seconds=\"disabledSeconds\"\n\t\t\t:teleported=\"false\"\n\t\t\tformat=\"HH:mm:ss\"\n\t\t\tvalue-format=\"HH:mm:ss\"\n\t\t\t@change=\"changes++\"\n\t\t\t@keydown=\"keys++\"\n\t\t/>\n\t\t<AsamTimePicker\n\t\t\tv-model=\"range\"\n\t\t\tis-range\n\t\t\tvalue-format=\"HH:mm:ss\"\n\t\t\t:arrow-control=\"arrows\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t\t:disabled-minutes=\"disabledMinutes\"\n\t\t\t:disabled-seconds=\"disabledSeconds\"\n\t\t/>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"arrows = !arrows\"\n\t\t\t>箭头 {{ arrows }}</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"limit = limit === 9 ? 13 : 9\"\n\t\t\t>动态最早小时 {{ limit }}</AsamButton\n\t\t>\n\t\t<output>{{ { value, range, changes, keys } }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerconstraintsExample' });\n\nimport { ref } from 'vue';\nimport { AsamButton, AsamTimePicker } from '@asam-ui/ui';\nconst value = ref<AsamTimeValue>('09:30:10');\nconst range = ref<AsamTimeValue>(['09:30:10', '17:00:00']);\nconst arrows = ref(false);\nconst limit = ref(9);\nconst changes = ref(0);\nconst keys = ref(0);\nconst disabledHours = () => Array.from({ length: limit.value }, (_, index) => index);\nconst disabledMinutes = (hour: number) => (hour === limit.value ? [0, 1, 2] : []);\nconst disabledSeconds = (hour: number, minute: number) =>\n\thour === limit.value && minute === 30 ? [0, 1, 2] : [];\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/constraints/js/Demo.vue",
									"sha256": "be0fb82b5eeab7357db529b8f396f887eb64189a522104d06dc5e6fd80b3dc65",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value\"\n\t\t\t:arrow-control=\"arrows\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t\t:disabled-minutes=\"disabledMinutes\"\n\t\t\t:disabled-seconds=\"disabledSeconds\"\n\t\t\t:teleported=\"false\"\n\t\t\tformat=\"HH:mm:ss\"\n\t\t\tvalue-format=\"HH:mm:ss\"\n\t\t\t@change=\"changes++\"\n\t\t\t@keydown=\"keys++\"\n\t\t/>\n\t\t<AsamTimePicker\n\t\t\tv-model=\"range\"\n\t\t\tis-range\n\t\t\tvalue-format=\"HH:mm:ss\"\n\t\t\t:arrow-control=\"arrows\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t\t:disabled-minutes=\"disabledMinutes\"\n\t\t\t:disabled-seconds=\"disabledSeconds\"\n\t\t/>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"arrows = !arrows\"\n\t\t\t>箭头 {{ arrows }}</AsamButton\n\t\t>\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"limit = limit === 9 ? 13 : 9\"\n\t\t\t>动态最早小时 {{ limit }}</AsamButton\n\t\t>\n\t\t<output>{{ { value, range, changes, keys } }}</output>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTimePickerconstraintsExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTimePicker } from '@asam-ui/ui';\nconst value = ref('09:30:10');\nconst range = ref(['09:30:10', '17:00:00']);\nconst arrows = ref(false);\nconst limit = ref(9);\nconst changes = ref(0);\nconst keys = ref(0);\nconst disabledHours = () => Array.from({ length: limit.value }, (_, index) => index);\nconst disabledMinutes = (hour) => (hour === limit.value ? [0, 1, 2] : []);\nconst disabledSeconds = (hour, minute) => (hour === limit.value && minute === 30 ? [0, 1, 2] : []);\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "official-time-picker-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/official-time-picker-basic/ts/Demo.vue",
									"sha256": "465032bb3f379c9f2c5b43af1eb97b9713fab8358ed00b1cbc15ebddcd2b5e19",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt\n-->\n<template>\n\t<div class=\"example-basic demo-layout-1\">\n\t\t<AsamTimePicker v-model=\"value1\" value-format=\"\" placeholder=\"任意时间\" />\n\t\t<AsamTimePicker v-model=\"value2\" value-format=\"\" arrow-control placeholder=\"任意时间\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\nimport { AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerofficialtimepickerbasicExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamTimeValue>();\nconst value2 = ref<AsamTimeValue>();\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.example-basic .el-date-editor {\n\tmargin: 8px;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "c4b60cc5ee586ab8e94e971418cea6fb51d221843c0a8fd6d9e3ea547c63ef26",
									"notice": {
										"id": "68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d",
										"url": "/licenses/source-notices/68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt",
										"licenseFilename": "LICENSE-68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-picker/basic.vue",
											"sourceSha256": "8208fac8433e4d1eb1ab018f52a92e79de5a6e02e23a0f83ac8d26c53ebdd1ad",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/official-time-picker-basic/js/Demo.vue",
									"sha256": "b92abe0fd66392bdbab1b01a0581cebedfbf5ad75d0e6142ebeb2e2443624c6b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt\n-->\n<template>\n\t<div class=\"example-basic demo-layout-1\">\n\t\t<AsamTimePicker v-model=\"value1\" value-format=\"\" placeholder=\"任意时间\" />\n\t\t<AsamTimePicker v-model=\"value2\" value-format=\"\" arrow-control placeholder=\"任意时间\" />\n\t</div>\n</template>\n\n<script setup>\nimport { AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerofficialtimepickerbasicExample' });\nimport { ref } from 'vue';\nconst value1 = ref();\nconst value2 = ref();\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.example-basic .el-date-editor {\n\tmargin: 8px;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "fb476aed8d6d3d37c4c7ec6294e1488602c5c7300c73a51f862ba7866b90635b",
									"notice": {
										"id": "68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d",
										"url": "/licenses/source-notices/68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt",
										"licenseFilename": "LICENSE-68c21012452faf8f763960e4e467f0751250a7b8fad3fe89bb8ff588d878c40d.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-picker/basic.vue",
											"sourceSha256": "8208fac8433e4d1eb1ab018f52a92e79de5a6e02e23a0f83ac8d26c53ebdd1ad",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-time-picker-basic-range",
					"title": "基础时间范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/official-time-picker-basic-range/ts/Demo.vue",
									"sha256": "4677d2b8351efeec4f249d673821b46215d8b44dadaa4eb97b996c611ece74be",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt\n-->\n<template>\n\t<div class=\"example-basic\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value1\"\n\t\t\tvalue-format=\"\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t\t:disabled-minutes=\"disabledMinutes\"\n\t\t\t:disabled-seconds=\"disabledSeconds\"\n\t\t\tplaceholder=\"任意时间\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\nimport { AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerofficialtimepickerbasicrangeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamTimeValue>(new Date(2016, 9, 10, 18, 30));\n\nconst makeRange = (start: number, end: number) => {\n\tconst result: number[] = [];\n\tfor (let i = start; i <= end; i++) {\n\t\tresult.push(i);\n\t}\n\treturn result;\n};\nconst disabledHours = () => {\n\treturn makeRange(0, 16).concat(makeRange(19, 23));\n};\nconst disabledMinutes = (hour: number) => {\n\tif (hour === 17) {\n\t\treturn makeRange(0, 29);\n\t}\n\tif (hour === 18) {\n\t\treturn makeRange(31, 59);\n\t}\n\treturn [];\n};\nconst disabledSeconds = (hour: number, minute: number) => {\n\tif (hour === 18 && minute === 30) {\n\t\treturn makeRange(1, 59);\n\t}\n\treturn [];\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.example-basic .el-date-editor {\n\tmargin: 8px;\n}\n</style>\n",
									"originalSourceSha256": "e25fdf03828993daad11545fc106dc05ae89324cb920e46076ed5e2b783d373f",
									"notice": {
										"id": "d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f",
										"url": "/licenses/source-notices/d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt",
										"licenseFilename": "LICENSE-d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-picker/basic-range.vue",
											"sourceSha256": "b7d8b46a34d28350cecb9906fb35811f4337265506cca5e5e629e2d5df3e7542",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/official-time-picker-basic-range/js/Demo.vue",
									"sha256": "e44f86f57101078ec6585675c6d4b4c4290ae2a47b5b600f76e3c4142196e58e",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt\n-->\n<template>\n\t<div class=\"example-basic\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value1\"\n\t\t\tvalue-format=\"\"\n\t\t\t:disabled-hours=\"disabledHours\"\n\t\t\t:disabled-minutes=\"disabledMinutes\"\n\t\t\t:disabled-seconds=\"disabledSeconds\"\n\t\t\tplaceholder=\"任意时间\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerofficialtimepickerbasicrangeExample' });\nimport { ref } from 'vue';\nconst value1 = ref(new Date(2016, 9, 10, 18, 30));\nconst makeRange = (start, end) => {\n\tconst result = [];\n\tfor (let i = start; i <= end; i++) {\n\t\tresult.push(i);\n\t}\n\treturn result;\n};\nconst disabledHours = () => {\n\treturn makeRange(0, 16).concat(makeRange(19, 23));\n};\nconst disabledMinutes = (hour) => {\n\tif (hour === 17) {\n\t\treturn makeRange(0, 29);\n\t}\n\tif (hour === 18) {\n\t\treturn makeRange(31, 59);\n\t}\n\treturn [];\n};\nconst disabledSeconds = (hour, minute) => {\n\tif (hour === 18 && minute === 30) {\n\t\treturn makeRange(1, 59);\n\t}\n\treturn [];\n};\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.example-basic .el-date-editor {\n\tmargin: 8px;\n}\n</style>\n",
									"originalSourceSha256": "2726137a9ca25ae1a66b96027b4dbb8c6280c26bac16e64bf8de9eb0683d0b5a",
									"notice": {
										"id": "d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f",
										"url": "/licenses/source-notices/d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt",
										"licenseFilename": "LICENSE-d8b8f2faa738e22eb669aa8f402e92a00ab5569a0cbe3cd451d2985b8799e02f.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-picker/basic-range.vue",
											"sourceSha256": "b7d8b46a34d28350cecb9906fb35811f4337265506cca5e5e629e2d5df3e7542",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-time-picker-range",
					"title": "指定范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/official-time-picker-range/ts/Demo.vue",
									"sha256": "b3dcbe87cf2ff3566d58f5508318337a74031119cdd400db71843f6981325d0a",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt\n-->\n<template>\n\t<div class=\"demo-range demo-layout-1\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value1\"\n\t\t\tvalue-format=\"\"\n\t\t\tis-range\n\t\t\trange-separator=\"To\"\n\t\t\tstart-placeholder=\"Start time\"\n\t\t\tend-placeholder=\"End time\"\n\t\t/>\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value2\"\n\t\t\tvalue-format=\"\"\n\t\t\tis-range\n\t\t\tarrow-control\n\t\t\trange-separator=\"To\"\n\t\t\tstart-placeholder=\"Start time\"\n\t\t\tend-placeholder=\"End time\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeValue } from '@asam-ui/ui';\nimport { AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerofficialtimepickerrangeExample' });\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamTimeValue>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);\nconst value2 = ref<AsamTimeValue>([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-range .el-date-editor {\n\tmargin: 8px;\n}\n\n.demo-range .el-range-separator {\n\tbox-sizing: content-box;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "e8708bc7a25de94f76f76393c95104d6f598fdae9b1781ae858bbc0457f48ab4",
									"notice": {
										"id": "cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6",
										"url": "/licenses/source-notices/cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt",
										"licenseFilename": "LICENSE-cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-picker/range.vue",
											"sourceSha256": "06386a1cfae44973e1b8d60019d52a82535767d0021858ce7d54a6c56040436f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/official-time-picker-range/js/Demo.vue",
									"sha256": "6630990a204bc0aa043a227c61dee66faa5bc664b7c219f45246482fc5e18025",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt\n-->\n<template>\n\t<div class=\"demo-range demo-layout-1\">\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value1\"\n\t\t\tvalue-format=\"\"\n\t\t\tis-range\n\t\t\trange-separator=\"To\"\n\t\t\tstart-placeholder=\"Start time\"\n\t\t\tend-placeholder=\"End time\"\n\t\t/>\n\t\t<AsamTimePicker\n\t\t\tv-model=\"value2\"\n\t\t\tvalue-format=\"\"\n\t\t\tis-range\n\t\t\tarrow-control\n\t\t\trange-separator=\"To\"\n\t\t\tstart-placeholder=\"Start time\"\n\t\t\tend-placeholder=\"End time\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamTimePicker } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerofficialtimepickerrangeExample' });\nimport { ref } from 'vue';\nconst value1 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);\nconst value2 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]);\n</script>\n\n<style scoped>\n/* stylelint-disable selector-pseudo-class-no-unknown, selector-class-pattern, no-descending-specificity -- Vue deep/native BEM selectors and equivalent media selector groups retained from the fixed official example. */\n.demo-range .el-date-editor {\n\tmargin: 8px;\n}\n\n.demo-range .el-range-separator {\n\tbox-sizing: content-box;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n",
									"originalSourceSha256": "4fa0449a7680ee00d23fd20fc57091177d04ce670d6ce443c05b5afa05f65f3a",
									"notice": {
										"id": "cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6",
										"url": "/licenses/source-notices/cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt",
										"licenseFilename": "LICENSE-cdc2f6d951e8177190dea12004f7e7a8bbc7de3d86c50cb4328c52c868b946a6.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-picker/range.vue",
											"sourceSha256": "06386a1cfae44973e1b8d60019d52a82535767d0021858ce7d54a6c56040436f",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "advanced-contract",
					"title": "本地化与高级配置的完整 SFC",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/advanced-contract/ts/Demo.vue",
									"sha256": "0b1c03883695a69c59edbf2895f78be795736af97d70a6e7a128341618f05e5f",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamTimePicker\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamTimePicker, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamTimePickerProps, AsamTimeValue } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamTimePickerAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref<AsamTimeValue>(null);\nconst configuration: AsamTimePickerProps = {\n\tisRange: true,\n\tarrowControl: true,\n\tariaLabel: '时间范围',\n\tvalueFormat: 'HH:mm:ss',\n\tformat: 'HH:mm',\n\tteleported: false,\n\treadonly: false,\n\tclearable: true,\n\teditable: true,\n\tplaceholder: '日期时间',\n\tstartPlaceholder: '起点',\n\tendPlaceholder: '终点',\n\trangeSeparator: '到',\n\tpopperClass: 'advanced-date-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tpopperOptions: { strategy: 'absolute' },\n\tplacement: 'bottom',\n\tfallbackPlacements: ['top', 'bottom'],\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight,\n\temptyValues: ['', null, undefined],\n\tvalueOnClear: null,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tsaveOnBlur: false,\n\ttabindex: 0,\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.ts",
									"sourcePath": "apps/website/examples/AsamTimePicker/advanced-contract/ts/locale.ts",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/advanced-contract/js/Demo.vue",
									"sha256": "c0f5e09d24d8717969b1d2bce7209b52746b4fbc2798f3b64f3466bc8720cdb1",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamTimePicker\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamTimePicker, AsamConfigProvider } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamTimePickerAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref(null);\nconst configuration = {\n\tisRange: true,\n\tarrowControl: true,\n\tariaLabel: '时间范围',\n\tvalueFormat: 'HH:mm:ss',\n\tformat: 'HH:mm',\n\tteleported: false,\n\treadonly: false,\n\tclearable: true,\n\teditable: true,\n\tplaceholder: '日期时间',\n\tstartPlaceholder: '起点',\n\tendPlaceholder: '终点',\n\trangeSeparator: '到',\n\tpopperClass: 'advanced-date-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tpopperOptions: { strategy: 'absolute' },\n\tplacement: 'bottom',\n\tfallbackPlacements: ['top', 'bottom'],\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight,\n\temptyValues: ['', null, undefined],\n\tvalueOnClear: null,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tsaveOnBlur: false,\n\ttabindex: 0,\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.js",
									"sourcePath": "apps/website/examples/AsamTimePicker/advanced-contract/js/locale.js",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "empty-values",
					"title": "原生清空配置与 nullable 模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/empty-values/ts/Demo.vue",
									"sha256": "211aa868fe87ac59b58192c2f79fd08e69b27758e7b7ea9cd82d2ae983542390",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div>\n\t\t\t<span>清空配置</span>\n\t\t\t<AsamSelect v-model=\"mode\" aria-label=\"清空配置\">\n\t\t\t\t<AsamOption value=\"default\" :label=\"'默认'\">默认</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption value=\"factory-false\" :label=\"'函数返回 false'\"\n\t\t\t\t\t>函数返回 false</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"undefined\" :label=\"'函数返回 undefined'\"\n\t\t\t\t\t>函数返回 undefined</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"array\" :label=\"'函数返回空数组端点'\"\n\t\t\t\t\t>函数返回空数组端点</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"zero\" :label=\"'0 为空'\">0 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"epoch\" :label=\"'0 为有效时间戳'\">0 为有效时间戳</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>配置来源</span>\n\t\t\t<AsamSelect v-model=\"scope\" aria-label=\"配置来源\">\n\t\t\t\t<AsamOption value=\"props\" :label=\"'属性'\">属性</AsamOption>\n\t\t\t\t<AsamOption value=\"provider\" :label=\"'配置提供器'\">配置提供器</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamCheckboxItem v-model=\"range\">原生范围</AsamCheckboxItem>\n\t\t<AsamConfigProvider v-bind=\"provider\">\n\t\t\t<AsamTimePicker\n\t\t\t\t:key=\"scope + ':' + mode + ':' + range\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"updates++\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t\t@clear=\"onClear\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restore\">回填有效值</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observedCalls = factoryCalls\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t>\n\t\t<output>{{ summary }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamTimePicker,\n\tAsamConfigProvider\n} from '@asam-ui/ui';\nimport type { AsamTimeValue, AsamTimePickerProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerEmptyValuesExample' });\nconst mode = ref('default');\nconst scope = ref('props');\nconst range = ref(false);\nconst value = ref<AsamTimeValue>(null);\nconst updates = ref(0);\nconst changes = ref(0);\nconst clears = ref(0);\nconst observedCalls = ref(0);\n// Keep the callback counter non-reactive: reading/incrementing a ref inside a native\n// computed factory would itself create a dependency and alter callback behavior.\nlet factoryCalls = 0;\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；update ' +\n\t\tupdates.value +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'factory-false'\n\t\t? false\n\t\t: mode.value === 'array'\n\t\t\t? [null, null]\n\t\t\t: undefined;\n}\ntype EmptyConfiguration = Pick<AsamTimePickerProps, 'emptyValues' | 'valueOnClear'>;\nconst emptyConfiguration = computed<EmptyConfiguration>(() => ({\n\temptyValues:\n\t\tmode.value === 'zero'\n\t\t\t? ['', undefined, null, 0]\n\t\t\t: ['', undefined, null, false, [null, null]],\n\tvalueOnClear: ['factory-false', 'undefined', 'array'].includes(mode.value)\n\t\t? clearFactory\n\t\t: mode.value === 'false'\n\t\t\t? false\n\t\t\t: mode.value === 'zero'\n\t\t\t\t? 0\n\t\t\t\t: null\n}));\nconst provider = computed<EmptyConfiguration>(() =>\n\tscope.value === 'provider' ? emptyConfiguration.value : {}\n);\nconst configuration = computed<AsamTimePickerProps>(() => ({\n\tisRange: range.value,\n\tformat: 'HH:mm:ss',\n\tvalueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'HH:mm:ss',\n\t...(scope.value === 'props' ? emptyConfiguration.value : {})\n}));\nfunction restore() {\n\tvalue.value =\n\t\tmode.value === 'zero'\n\t\t\t? range.value\n\t\t\t\t? [86400000, 172800000]\n\t\t\t\t: 86400000\n\t\t\t: mode.value === 'epoch'\n\t\t\t\t? range.value\n\t\t\t\t\t? [0, 86400000]\n\t\t\t\t\t: 0\n\t\t\t\t: range.value\n\t\t\t\t\t? ['09:30:00', '17:30:00']\n\t\t\t\t\t: '09:30:00';\n}\nfunction onClear() {\n\tclears.value++;\n\tobservedCalls.value = factoryCalls;\n}\nwatch([mode, scope, range], restore);\nrestore();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimePicker/empty-values/js/Demo.vue",
									"sha256": "4219e0a36effe498e72ac6c24f7d1d14d50d82291a17d41ad911475a5db2d6c5",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div>\n\t\t\t<span>清空配置</span>\n\t\t\t<AsamSelect v-model=\"mode\" aria-label=\"清空配置\">\n\t\t\t\t<AsamOption value=\"default\" :label=\"'默认'\">默认</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false'\">false</AsamOption>\n\t\t\t\t<AsamOption value=\"factory-false\" :label=\"'函数返回 false'\"\n\t\t\t\t\t>函数返回 false</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"undefined\" :label=\"'函数返回 undefined'\"\n\t\t\t\t\t>函数返回 undefined</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"array\" :label=\"'函数返回空数组端点'\"\n\t\t\t\t\t>函数返回空数组端点</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"zero\" :label=\"'0 为空'\">0 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"epoch\" :label=\"'0 为有效时间戳'\">0 为有效时间戳</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>配置来源</span>\n\t\t\t<AsamSelect v-model=\"scope\" aria-label=\"配置来源\">\n\t\t\t\t<AsamOption value=\"props\" :label=\"'属性'\">属性</AsamOption>\n\t\t\t\t<AsamOption value=\"provider\" :label=\"'配置提供器'\">配置提供器</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</div>\n\t\t<AsamCheckboxItem v-model=\"range\">原生范围</AsamCheckboxItem>\n\t\t<AsamConfigProvider v-bind=\"provider\">\n\t\t\t<AsamTimePicker\n\t\t\t\t:key=\"scope + ':' + mode + ':' + range\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t@update:model-value=\"updates++\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t\t@clear=\"onClear\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restore\">回填有效值</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observedCalls = factoryCalls\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t>\n\t\t<output>{{ summary }}</output>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamTimePicker,\n\tAsamConfigProvider\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimePickerEmptyValuesExample' });\nconst mode = ref('default');\nconst scope = ref('props');\nconst range = ref(false);\nconst value = ref(null);\nconst updates = ref(0);\nconst changes = ref(0);\nconst clears = ref(0);\nconst observedCalls = ref(0);\n// Keep the callback counter non-reactive: reading/incrementing a ref inside a native\n// computed factory would itself create a dependency and alter callback behavior.\nlet factoryCalls = 0;\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；update ' +\n\t\tupdates.value +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'factory-false'\n\t\t? false\n\t\t: mode.value === 'array'\n\t\t\t? [null, null]\n\t\t\t: undefined;\n}\nconst emptyConfiguration = computed(() => ({\n\temptyValues:\n\t\tmode.value === 'zero'\n\t\t\t? ['', undefined, null, 0]\n\t\t\t: ['', undefined, null, false, [null, null]],\n\tvalueOnClear: ['factory-false', 'undefined', 'array'].includes(mode.value)\n\t\t? clearFactory\n\t\t: mode.value === 'false'\n\t\t\t? false\n\t\t\t: mode.value === 'zero'\n\t\t\t\t? 0\n\t\t\t\t: null\n}));\nconst provider = computed(() => (scope.value === 'provider' ? emptyConfiguration.value : {}));\nconst configuration = computed(() => ({\n\tisRange: range.value,\n\tformat: 'HH:mm:ss',\n\tvalueFormat: mode.value === 'epoch' || mode.value === 'zero' ? 'x' : 'HH:mm:ss',\n\t...(scope.value === 'props' ? emptyConfiguration.value : {})\n}));\nfunction restore() {\n\tvalue.value =\n\t\tmode.value === 'zero'\n\t\t\t? range.value\n\t\t\t\t? [86400000, 172800000]\n\t\t\t\t: 86400000\n\t\t\t: mode.value === 'epoch'\n\t\t\t\t? range.value\n\t\t\t\t\t? [0, 86400000]\n\t\t\t\t\t: 0\n\t\t\t\t: range.value\n\t\t\t\t\t? ['09:30:00', '17:30:00']\n\t\t\t\t\t: '09:30:00';\n}\nfunction onClear() {\n\tclears.value++;\n\tobservedCalls.value = factoryCalls;\n}\nwatch([mode, scope, range], restore);\nrestore();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTimeSelect",
			"documentation": "/component-AsamTimeSelect.html",
			"demos": [
				{
					"id": "native-values",
					"title": "原生默认模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/native-values/ts/Demo.vue",
									"sha256": "e91e95a02e0bd0815ce8e5c0cba445035f71842bacc0ba04d09a8efab1b70cc3",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值，选择提交格式化时间文本，清空输出原生配置值。</p>\n\t\t<AsamTimeSelect v-model=\"value\" clearable @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamTimeSelect } from '@asam-ui/ui';\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectNativeValuesExample' });\nconst value = ref<AsamTimeSelectValue>();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/native-values/js/Demo.vue",
									"sha256": "1fceb77b07f42607fadfdfe6213fa455f0854e2ee3a1fdc5c01457d0252a5150",
									"source": "<template>\n\t<section class=\"native-values-example\">\n\t\t<p class=\"example-paragraph\">使用原生模型和默认值，选择提交格式化时间文本，清空输出原生配置值。</p>\n\t\t<AsamTimeSelect v-model=\"value\" clearable @update:model-value=\"updates++\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = undefined\"\n\t\t\t>显式 undefined</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\">显式 null</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ''\"\n\t\t\t>显式空字符串</AsamButton\n\t\t>\n\t\t<output>{{ summary }}；更新次数 {{ updates }}</output>\n\t</section>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamButton, AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectNativeValuesExample' });\nconst value = ref();\nconst updates = ref(0);\nconst summary = computed(() =>\n\tvalue.value === undefined\n\t\t? 'undefined'\n\t\t: value.value instanceof Date\n\t\t\t? 'Date ' + value.value.toISOString()\n\t\t\t: JSON.stringify(value.value)\n);\n</script>\n\n<style scoped>\n.native-values-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "格式、清空与禁用",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/basic/ts/Demo.vue",
									"sha256": "431d1c63e01711e53c1e5d8ca5fdd9141cde8d5c6ceb6ca0982546f225853a6b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\tstart: '08:00',\n\t\t\t\tstep: '00:30',\n\t\t\t\tend: '18:00',\n\t\t\t\tclearable: true,\n\t\t\t\t'aria-label': '选择时间'\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect, AsamButton } from '@asam-ui/ui';\nconst value = ref<AsamTimeSelectValue>(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/basic/js/Demo.vue",
									"sha256": "3327978111a8ab154d5c4b4cf3980565bf43078d8e0c09f5cc718358bb5fef35",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\tstart: '08:00',\n\t\t\t\tstep: '00:30',\n\t\t\t\tend: '18:00',\n\t\t\t\tclearable: true,\n\t\t\t\t'aria-label': '选择时间'\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"disabled = !disabled\"> 切换禁用 </AsamButton>\n\t\t<output>模型：{{ value }}；禁用：{{ disabled }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimeSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect, AsamButton } from '@asam-ui/ui';\nconst value = ref(null);\nconst disabled = ref(false);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "bounds",
					"title": "动态最早时间",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/bounds/ts/Demo.vue",
									"sha256": "cd3a2ff7bf207becf73d04cc84c8f479a0df9c819e9156679e650d42915d4203",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimeSelect v-model=\"start\" v-bind=\"{ start: '08:00', step: '00:30', end: '18:00' }\" />\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"end\"\n\t\t\tv-bind=\"{ start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t:min-time=\"typeof start === 'string' ? start : undefined\"\n\t\t/>\n\t\t<output>预约：{{ start }} 至 {{ end }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectBoundsExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect } from '@asam-ui/ui';\nconst start = ref<AsamTimeSelectValue>(null);\nconst end = ref<AsamTimeSelectValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/bounds/js/Demo.vue",
									"sha256": "65c9875bc28ee1c086599e52b6a57544a5436d8436c1fe054bc86236a5bfcb8c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimeSelect v-model=\"start\" v-bind=\"{ start: '08:00', step: '00:30', end: '18:00' }\" />\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"end\"\n\t\t\tv-bind=\"{ start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t:min-time=\"typeof start === 'string' ? start : undefined\"\n\t\t/>\n\t\t<output>预约：{{ start }} 至 {{ end }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimeSelectBoundsExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect } from '@asam-ui/ui';\nconst start = ref(null);\nconst end = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "instance",
					"title": "公开实例操作",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/instance/ts/Demo.vue",
									"sha256": "a5f26a223c3a8876fe0cd61ea860f5c6f74746c65c0b4ee714a4db236ed01a5d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimeSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamTimeSelectExpose } from '@asam-ui/ui';\nconst control = ref<AsamTimeSelectExpose>();\nconst value = ref<AsamTimeSelectValue>(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/instance/js/Demo.vue",
									"sha256": "c110adb2b87a6e8512db6f61c0ecc16b67a1312cfeae40c8363a7fc55139cf52",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTimeSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimeSelectInstanceExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref(null);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/sizes/ts/Demo.vue",
									"sha256": "3c544ebfd87f4b68c7d0703991755f4b13ba65f884521cb82de418f29fd4924a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'large', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'big', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'default', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'small', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamTimeSelect start=\"08:00\" step=\"00:30\" end=\"18:00\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTimeSelectSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/sizes/js/Demo.vue",
									"sha256": "9d95ee4f708241ecc94d5d2f96796a3ee38d13c967fb051708d65ddadfa8fa07",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'large', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'big', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'default', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTimeSelect\n\t\t\t\t\tv-bind=\"{ size: 'small', start: '08:00', step: '00:30', end: '18:00' }\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamTimeSelect start=\"08:00\" step=\"00:30\" end=\"18:00\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTimeSelectSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTimeSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "invalid-config",
					"title": "非法时间配置与安全回退",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/invalid-config/ts/Demo.vue",
									"sha256": "bbfc68fdaf55a8cd6bb1856e36afbd49e02ca314313b40098bb50151d74cbeb2",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label for=\"ui028-scenario\">配置场景</label>\n\t\t<AsamSelect id=\"ui028-scenario\" v-model=\"scenario\">\n\t\t\t<AsamOption\n\t\t\t\tv-for=\"(config, name) in configurations\"\n\t\t\t\t:key=\"name\"\n\t\t\t\t:value=\"name\"\n\t\t\t\t:label=\"name\"\n\t\t\t>\n\t\t\t\t{{ name }}\n\t\t\t</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamCheckboxItem v-model=\"includeEndTime\">包含终点</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"boundEnd\">minTime 等于 end</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"configuration\"\n\t\t\t:min-time=\"boundEnd ? configuration.end : undefined\"\n\t\t\t:include-end-time=\"includeEndTime\"\n\t\t\t:teleported=\"false\"\n\t\t/>\n\t\t<output>输入配置 {{ configuration }}；显示格式 HH:mm；选择提交模型 {{ value }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectinvalidconfigExample' });\n\nimport { computed, ref, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamTimeSelect } from '@asam-ui/ui';\nconst value = ref<AsamTimeSelectValue>(null);\nconst configurations = {\n\t正常: { start: '09:00', end: '10:00', step: '00:15' },\n\t非法与零步长: { start: '-01:00', end: 'not-a-time', step: '00:00' },\n\t溢出: { start: '25:70', end: '26:40', step: '00:30' },\n\t跨午夜: { start: '23:45', end: '24:15', step: '00:30' },\n\t倒置范围: { start: '20:00', end: '10:00', step: '00:30' }\n};\nconst scenario = ref<keyof typeof configurations>('正常');\nconst configuration = computed(() => configurations[scenario.value]);\nconst includeEndTime = ref(false);\nconst boundEnd = ref(false);\nwatch(scenario, () => {\n\tvalue.value = null;\n});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/invalid-config/js/Demo.vue",
									"sha256": "8d6e5f34f6ac11653b0405bc52caacec32a89d389ee757dd3314688d2846a54c",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label for=\"ui028-scenario\">配置场景</label>\n\t\t<AsamSelect id=\"ui028-scenario\" v-model=\"scenario\">\n\t\t\t<AsamOption\n\t\t\t\tv-for=\"(config, name) in configurations\"\n\t\t\t\t:key=\"name\"\n\t\t\t\t:value=\"name\"\n\t\t\t\t:label=\"name\"\n\t\t\t>\n\t\t\t\t{{ name }}\n\t\t\t</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamCheckboxItem v-model=\"includeEndTime\">包含终点</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"boundEnd\">minTime 等于 end</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"configuration\"\n\t\t\t:min-time=\"boundEnd ? configuration.end : undefined\"\n\t\t\t:include-end-time=\"includeEndTime\"\n\t\t\t:teleported=\"false\"\n\t\t/>\n\t\t<output>输入配置 {{ configuration }}；显示格式 HH:mm；选择提交模型 {{ value }}</output>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamTimeSelectinvalidconfigExample' });\nimport { computed, ref, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamCheckboxItem, AsamTimeSelect } from '@asam-ui/ui';\nconst value = ref(null);\nconst configurations = {\n\t正常: { start: '09:00', end: '10:00', step: '00:15' },\n\t非法与零步长: { start: '-01:00', end: 'not-a-time', step: '00:00' },\n\t溢出: { start: '25:70', end: '26:40', step: '00:30' },\n\t跨午夜: { start: '23:45', end: '24:15', step: '00:30' },\n\t倒置范围: { start: '20:00', end: '10:00', step: '00:30' }\n};\nconst scenario = ref('正常');\nconst configuration = computed(() => configurations[scenario.value]);\nconst includeEndTime = ref(false);\nconst boundEnd = ref(false);\nwatch(scenario, () => {\n\tvalue.value = null;\n});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "official-time-select-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/official-time-select-basic/ts/Demo.vue",
									"sha256": "5177cb6ede0a15a1fa45744cce2477f376010a1f11ce0875a75e8018fab57976",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt\n-->\n<template>\n\t<AsamTimeSelect\n\t\tv-model=\"value\"\n\t\tstyle=\"width: 240px\"\n\t\tstart=\"08:30\"\n\t\tstep=\"00:15\"\n\t\tend=\"18:30\"\n\t\tplaceholder=\"选择时间\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\nimport { AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectofficialtimeselectbasicExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTimeSelectValue>('');\n</script>\n",
									"originalSourceSha256": "10845918ca3d2516e2060ae4a30036131494b74d8140e5d218994330bfc8f9a2",
									"notice": {
										"id": "8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b",
										"url": "/licenses/source-notices/8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt",
										"licenseFilename": "LICENSE-8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-select/basic.vue",
											"sourceSha256": "e635801821b1bd12a266f69dcd06c8c3089957955f2a508271cfe662b6866988",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/official-time-select-basic/js/Demo.vue",
									"sha256": "98f8cf244041b77d93aece68f6ac4f2abd06c0d0a90bb35eb07bc70a0151ff78",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt\n-->\n<template>\n\t<AsamTimeSelect\n\t\tv-model=\"value\"\n\t\tstyle=\"width: 240px\"\n\t\tstart=\"08:30\"\n\t\tstep=\"00:15\"\n\t\tend=\"18:30\"\n\t\tplaceholder=\"选择时间\"\n\t/>\n</template>\n\n<script setup>\nimport { AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectofficialtimeselectbasicExample' });\nimport { ref } from 'vue';\nconst value = ref('');\n</script>\n",
									"originalSourceSha256": "1490437a3deab0410f8b676bc78408bef6a75ef9317b69fe85bbb81e12714e5a",
									"notice": {
										"id": "8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b",
										"url": "/licenses/source-notices/8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt",
										"licenseFilename": "LICENSE-8150732b824c87cd2a6d15f2d200466f138ce1f6b026d04d12b290b2a02f600b.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-select/basic.vue",
											"sourceSha256": "e635801821b1bd12a266f69dcd06c8c3089957955f2a508271cfe662b6866988",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-time-select-time-formats",
					"title": "时间格式",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/official-time-select-time-formats/ts/Demo.vue",
									"sha256": "d5703c6e0cb78513f307982baedcad880192b4c253e8f8e1c76b459961bb8fd1",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt\n-->\n<template>\n\t<AsamTimeSelect\n\t\tv-model=\"value\"\n\t\tstyle=\"width: 240px\"\n\t\tstart=\"00:00\"\n\t\tstep=\"00:30\"\n\t\tend=\"23:59\"\n\t\tplaceholder=\"选择时间\"\n\t\tformat=\"hh:mm A\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\nimport { AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectofficialtimeselecttimeformatsExample' });\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTimeSelectValue>('');\n</script>\n",
									"originalSourceSha256": "c174a2eb91dea9ca8fb9f806253bd055eb52e9976f812286c3994350dc10656c",
									"notice": {
										"id": "68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41",
										"url": "/licenses/source-notices/68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt",
										"licenseFilename": "LICENSE-68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-select/time-formats.vue",
											"sourceSha256": "1ca1be388b117e5c781716943fdc07be1540440ae29386a0b2311a619fed4a2b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/official-time-select-time-formats/js/Demo.vue",
									"sha256": "fc2572c7acb29accd3f0894bdde32931049f0355f850c216286fa69147b96cc5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt\n-->\n<template>\n\t<AsamTimeSelect\n\t\tv-model=\"value\"\n\t\tstyle=\"width: 240px\"\n\t\tstart=\"00:00\"\n\t\tstep=\"00:30\"\n\t\tend=\"23:59\"\n\t\tplaceholder=\"选择时间\"\n\t\tformat=\"hh:mm A\"\n\t/>\n</template>\n\n<script setup>\nimport { AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectofficialtimeselecttimeformatsExample' });\nimport { ref } from 'vue';\nconst value = ref('');\n</script>\n",
									"originalSourceSha256": "7ac966695b3021a25c7ae57672e99eae2a41774cd1f71d37bb209e56469bf1fa",
									"notice": {
										"id": "68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41",
										"url": "/licenses/source-notices/68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt",
										"licenseFilename": "LICENSE-68bb7c6059957f9b71679cb329d7b27801b9b307934b7b453040fdeb2b1d6a41.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-select/time-formats.vue",
											"sourceSha256": "1ca1be388b117e5c781716943fdc07be1540440ae29386a0b2311a619fed4a2b",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "official-time-select-time-range",
					"title": "时间范围",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/official-time-select-time-range/ts/Demo.vue",
									"sha256": "2aaae13201137ec3a49ee5964c38cbbafe6a1277fbaf3e54da6a645ac350b8d9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt\n-->\n<template>\n\t<div class=\"demo-time-range flex flex-wrap gap-4\">\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"startTime\"\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:max-time=\"typeof endTime === 'string' ? endTime : undefined\"\n\t\t\tplaceholder=\"开始时间\"\n\t\t\tstart=\"08:30\"\n\t\t\tstep=\"00:15\"\n\t\t\tend=\"18:30\"\n\t\t/>\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"endTime\"\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:min-time=\"typeof startTime === 'string' ? startTime : undefined\"\n\t\t\tplaceholder=\"结束时间\"\n\t\t\tstart=\"08:30\"\n\t\t\tstep=\"00:15\"\n\t\t\tend=\"18:30\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { AsamTimeSelectValue } from '@asam-ui/ui';\nimport { AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectofficialtimeselecttimerangeExample' });\n\nimport { ref } from 'vue';\n\nconst startTime = ref<AsamTimeSelectValue>('');\nconst endTime = ref<AsamTimeSelectValue>('');\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "05812eb61631327fb5e03a4826dba4cfe817d96a563dbe674be780c16c8df202",
									"notice": {
										"id": "ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841",
										"url": "/licenses/source-notices/ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt",
										"licenseFilename": "LICENSE-ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-select/time-range.vue",
											"sourceSha256": "bb808c1688659ce128ec77eaaee968685358696e10aa7ef1409559d2f301ecb0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/official-time-select-time-range/js/Demo.vue",
									"sha256": "389d8afc0ddbb90748b8a2f5ba2cccfabc9b308b38e81974d6a59318a80a92f0",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt\nIncluded in the source bundle; notice resource: /licenses/source-notices/ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt\n-->\n<template>\n\t<div class=\"demo-time-range flex flex-wrap gap-4\">\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"startTime\"\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:max-time=\"typeof endTime === 'string' ? endTime : undefined\"\n\t\t\tplaceholder=\"开始时间\"\n\t\t\tstart=\"08:30\"\n\t\t\tstep=\"00:15\"\n\t\t\tend=\"18:30\"\n\t\t/>\n\t\t<AsamTimeSelect\n\t\t\tv-model=\"endTime\"\n\t\t\tstyle=\"width: 240px\"\n\t\t\t:min-time=\"typeof startTime === 'string' ? startTime : undefined\"\n\t\t\tplaceholder=\"结束时间\"\n\t\t\tstart=\"08:30\"\n\t\t\tstep=\"00:15\"\n\t\t\tend=\"18:30\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\nimport { AsamTimeSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectofficialtimeselecttimerangeExample' });\nimport { ref } from 'vue';\nconst startTime = ref('');\nconst endTime = ref('');\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "3432a0ef6602a8b4200a5a1c427aac9e5949213aee950a90270cac44105e5803",
									"notice": {
										"id": "ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841",
										"url": "/licenses/source-notices/ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt",
										"licenseFilename": "LICENSE-ef3b71c576537f65261710ff314dc4bec43ce398abac755f1e16ae951471c841.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0",
										"upstreamExampleSource": {
											"source": "docs/examples/time-select/time-range.vue",
											"sourceSha256": "bb808c1688659ce128ec77eaaee968685358696e10aa7ef1409559d2f301ecb0",
											"archiveSha256": "1d8d7f29379784e3e4eebe501673d449787815a9f4a93610b1205c17accb27dc"
										}
									}
								}
							]
						}
					]
				},
				{
					"id": "advanced-contract",
					"title": "本地化与高级配置的完整 SFC",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/advanced-contract/ts/Demo.vue",
									"sha256": "84f6b351773a2dd625498ef4855c1bf2c1aa1198b76715e791fbf415a4ffdd0f",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamTimeSelect\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue';\nimport { AsamCheckboxItem, AsamTimeSelect, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamTimeSelectProps, AsamTimeSelectValue } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamTimeSelectAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref<AsamTimeSelectValue>(null);\nwatch(chinese, () => {\n\tvalue.value = null;\n});\nconst configuration: AsamTimeSelectProps = {\n\tstart: '09:00',\n\tend: '10:00',\n\tstep: '00:15',\n\tformat: 'hh:mm A',\n\tincludeEndTime: true,\n\tminTime: '09:00',\n\tmaxTime: '10:00',\n\tplaceholder: '可选时间',\n\teffect: 'dark',\n\tteleported: false,\n\tvalidateEvent: false,\n\tclearable: true,\n\teditable: true,\n\tpopperClass: 'advanced-time-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tvalueOnClear: '',\n\temptyValues: ['', null, undefined],\n\tname: 'appointment',\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.ts",
									"sourcePath": "apps/website/examples/AsamTimeSelect/advanced-contract/ts/locale.ts",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/advanced-contract/js/Demo.vue",
									"sha256": "4bfe9be75344843acd7cf2a6fddfbac561bda83078a51403b1ed147bde50f40f",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamTimeSelect\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref, watch } from 'vue';\nimport { AsamCheckboxItem, AsamTimeSelect, AsamConfigProvider } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamTimeSelectAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref(null);\nwatch(chinese, () => {\n\tvalue.value = null;\n});\nconst configuration = {\n\tstart: '09:00',\n\tend: '10:00',\n\tstep: '00:15',\n\tformat: 'hh:mm A',\n\tincludeEndTime: true,\n\tminTime: '09:00',\n\tmaxTime: '10:00',\n\tplaceholder: '可选时间',\n\teffect: 'dark',\n\tteleported: false,\n\tvalidateEvent: false,\n\tclearable: true,\n\teditable: true,\n\tpopperClass: 'advanced-time-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tvalueOnClear: '',\n\temptyValues: ['', null, undefined],\n\tname: 'appointment',\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.js",
									"sourcePath": "apps/website/examples/AsamTimeSelect/advanced-contract/js/locale.js",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "empty-values",
					"title": "清空工厂与上下文配置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/empty-values/ts/Demo.vue",
									"sha256": "a26f77977735100f6d3b349690651f4b9f30b152fbf04c0314ec0084d25a1d8b",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>配置位置</span>\n\t\t\t<AsamSelect v-model=\"scope\">\n\t\t\t\t<AsamOption value=\"props\" :label=\"'当前控件'\">当前控件</AsamOption>\n\t\t\t\t<AsamOption value=\"provider\" :label=\"'ConfigProvider'\">ConfigProvider</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>清空值</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption value=\"array\" :label=\"'空数组'\">空数组</AsamOption>\n\t\t\t\t<AsamOption value=\"nulls\" :label=\"'两个 null'\">两个 null</AsamOption>\n\t\t\t\t<AsamOption value=\"undefineds\" :label=\"'两个 undefined'\">两个 undefined</AsamOption>\n\t\t\t\t<AsamOption value=\"null\" :label=\"'null'\">null</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamConfigProvider v-bind=\"scope === 'provider' ? configuration : {}\">\n\t\t\t<AsamTimeSelect\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"scope === 'props' ? configuration : {}\"\n\t\t\t\tstart=\"09:00\"\n\t\t\t\tend=\"11:00\"\n\t\t\t\tstep=\"00:30\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t\t@clear=\"clears++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = '09:30'\"\n\t\t\t>回填时间</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observeFactory\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t>\n\t\t<output>{{ summary }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamConfigProvider,\n\tAsamTimeSelect\n} from '@asam-ui/ui';\nimport type { AsamTimeSelectValue, AsamTimeSelectProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectEmptyValuesExample' });\nconst scope = ref('props');\nconst mode = ref('array');\nconst value = ref<AsamTimeSelectValue>('09:30');\nconst changes = ref(0);\nconst clears = ref(0);\nconst observedCalls = ref(0);\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nlet factoryCalls = 0;\nfunction observeFactory() {\n\tobservedCalls.value = factoryCalls;\n}\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'array'\n\t\t? []\n\t\t: mode.value === 'nulls'\n\t\t\t? [null, null]\n\t\t\t: mode.value === 'undefineds'\n\t\t\t\t? [undefined, undefined]\n\t\t\t\t: null;\n}\nconst configuration = computed<Pick<AsamTimeSelectProps, 'emptyValues' | 'valueOnClear'>>(() => ({\n\temptyValues: ['', null, undefined, [], [null, null], [undefined, undefined]],\n\tvalueOnClear: clearFactory\n}));\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTimeSelect/empty-values/js/Demo.vue",
									"sha256": "3db7af4301c25e93dc0b39f1c4fc518a0b8cc1af2f8d0d62d7458f9e6851470e",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>配置位置</span>\n\t\t\t<AsamSelect v-model=\"scope\">\n\t\t\t\t<AsamOption value=\"props\" :label=\"'当前控件'\">当前控件</AsamOption>\n\t\t\t\t<AsamOption value=\"provider\" :label=\"'ConfigProvider'\">ConfigProvider</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<label>\n\t\t\t<!-- Change the public configuration without recreating controls. -->\n\t\t\t<span>清空值</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption value=\"array\" :label=\"'空数组'\">空数组</AsamOption>\n\t\t\t\t<AsamOption value=\"nulls\" :label=\"'两个 null'\">两个 null</AsamOption>\n\t\t\t\t<AsamOption value=\"undefineds\" :label=\"'两个 undefined'\">两个 undefined</AsamOption>\n\t\t\t\t<AsamOption value=\"null\" :label=\"'null'\">null</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamConfigProvider v-bind=\"scope === 'provider' ? configuration : {}\">\n\t\t\t<AsamTimeSelect\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"scope === 'props' ? configuration : {}\"\n\t\t\t\tstart=\"09:00\"\n\t\t\t\tend=\"11:00\"\n\t\t\t\tstep=\"00:30\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t\t@clear=\"clears++\"\n\t\t\t/>\n\t\t</AsamConfigProvider>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = '09:30'\"\n\t\t\t>回填时间</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observeFactory\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t>\n\t\t<output>{{ summary }}</output>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport {\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamConfigProvider,\n\tAsamTimeSelect\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamTimeSelectEmptyValuesExample' });\nconst scope = ref('props');\nconst mode = ref('array');\nconst value = ref('09:30');\nconst changes = ref(0);\nconst clears = ref(0);\nconst observedCalls = ref(0);\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nlet factoryCalls = 0;\nfunction observeFactory() {\n\tobservedCalls.value = factoryCalls;\n}\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'array'\n\t\t? []\n\t\t: mode.value === 'nulls'\n\t\t\t? [null, null]\n\t\t\t: mode.value === 'undefineds'\n\t\t\t\t? [undefined, undefined]\n\t\t\t\t: null;\n}\nconst configuration = computed(() => ({\n\temptyValues: ['', null, undefined, [], [null, null], [undefined, undefined]],\n\tvalueOnClear: clearFactory\n}));\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDateTimePicker",
			"documentation": "/component-AsamDateTimePicker.html",
			"demos": [
				{
					"id": "basic",
					"title": "两个端点与完整模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimePicker/basic/ts/Demo.vue",
									"sha256": "e2b8526d609209a8c2355ccb9e4f31ffbeee621f48805befe214bc42f6d21a98",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDateTimePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'start-placeholder': '开始时间',\n\t\t\t\t'end-placeholder': '结束时间',\n\t\t\t\tclearable: true\n\t\t\t}\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t/>\n\t\t<output>范围：{{ range }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDateTimePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimePicker } from '@asam-ui/ui';\nimport type { DateTimeRangeValue } from '@asam-ui/ui';\nconst range = ref<DateTimeRangeValue>(null);\nconst event = ref('尚未提交');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimePicker/basic/js/Demo.vue",
									"sha256": "7611f325d9c143b4ed43cf369b1932e4c8fef093c6e5d5c12e1da15b5226522b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDateTimePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'start-placeholder': '开始时间',\n\t\t\t\t'end-placeholder': '结束时间',\n\t\t\t\tclearable: true\n\t\t\t}\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t/>\n\t\t<output>范围：{{ range }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDateTimePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimePicker } from '@asam-ui/ui';\nconst range = ref(null);\nconst event = ref('尚未提交');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDateTimeRangePicker",
			"documentation": "/component-AsamDateTimeRangePicker.html",
			"demos": [
				{
					"id": "basic",
					"title": "两个端点与完整模型",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/basic/ts/Demo.vue",
									"sha256": "5e29215b096f37a8029d80e885966052a99f321d2d63455e04b7acc2279dbdb8",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDateTimeRangePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'start-placeholder': '开始时间',\n\t\t\t\t'end-placeholder': '结束时间',\n\t\t\t\tclearable: true\n\t\t\t}\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t/>\n\t\t<output>范围：{{ range }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimeRangePicker } from '@asam-ui/ui';\nimport type { DateTimeRangeValue } from '@asam-ui/ui';\nconst range = ref<DateTimeRangeValue>(null);\nconst event = ref('尚未提交');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/basic/js/Demo.vue",
									"sha256": "289f3fc65b722f1867a33af22fa0af7d60c030674ac0bbf6a26355441c12b545",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDateTimeRangePicker\n\t\t\tv-model=\"range\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-format': 'YYYY-MM-DD HH:mm:ss',\n\t\t\t\t'start-placeholder': '开始时间',\n\t\t\t\t'end-placeholder': '结束时间',\n\t\t\t\tclearable: true\n\t\t\t}\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t/>\n\t\t<output>范围：{{ range }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerBasicExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimeRangePicker } from '@asam-ui/ui';\nconst range = ref(null);\nconst event = ref('尚未提交');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "endpoints",
					"title": "端点实例与插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/endpoints/ts/Demo.vue",
									"sha256": "27dada1633569f3cb59ac87744c45d251af0fb47da72b3f806945dc8b957d18c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDateTimeRangePicker\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'value-format': 'YYYY-MM-DD HH:mm:ss' }\"\n\t\t\tv-model=\"range\"\n\t\t\t@visible-change=\"(visible, endpoint) => (event = endpoint + ': ' + visible)\"\n\t\t>\n\t\t\t<template #range-separator> 至 </template>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<span>\n\t\t\t\t\t{{ cell.text }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDateTimeRangePicker>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus('start')\"> 聚焦开始 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleOpen('end')\"> 打开结束 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleClose('end')\"> 关闭结束 </AsamButton>\n\t\t</div>\n\t\t<output>{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerEndpointsExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimeRangePicker, AsamButton } from '@asam-ui/ui';\nimport type { AsamDateTimeRangePickerExpose, DateTimeRangeValue } from '@asam-ui/ui';\nconst control = ref<AsamDateTimeRangePickerExpose>();\nconst range = ref<DateTimeRangeValue>(null);\nconst event = ref('尚未打开');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/endpoints/js/Demo.vue",
									"sha256": "d1239de019da46ba8b2bdbd3d9a69322d467597083fc30eaf4f7a0172120a816",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamDateTimeRangePicker\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'value-format': 'YYYY-MM-DD HH:mm:ss' }\"\n\t\t\tv-model=\"range\"\n\t\t\t@visible-change=\"(visible, endpoint) => (event = endpoint + ': ' + visible)\"\n\t\t>\n\t\t\t<template #range-separator> 至 </template>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<span>\n\t\t\t\t\t{{ cell.text }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDateTimeRangePicker>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus('start')\"> 聚焦开始 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleOpen('end')\"> 打开结束 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.handleClose('end')\"> 关闭结束 </AsamButton>\n\t\t</div>\n\t\t<output>{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerEndpointsExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimeRangePicker, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst range = ref(null);\nconst event = ref('尚未打开');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/sizes/ts/Demo.vue",
									"sha256": "c22e6764903cf6e4bd4e05e7c3ff60dfcc89147bced8991d0f0aecf799a54ce6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"large\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"big\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"default\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"small\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamDateTimeRangePicker value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimeRangePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/sizes/js/Demo.vue",
									"sha256": "98f426a7ce3b2da70139751ff5835714dfcee7cc80246529a9c07508925d8459",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section>\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"large\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"big\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"default\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t\t<section>\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamDateTimeRangePicker size=\"small\" value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section>\n\t\t\t\t<AsamDateTimeRangePicker value-format=\"YYYY-MM-DD HH:mm:ss\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerSizesExample' });\nimport { ref } from 'vue';\nimport { AsamDateTimeRangePicker, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr);\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "attrs-contract",
					"title": "两端属性、弹层与清空事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/attrs-contract/ts/Demo.vue",
									"sha256": "93bc3aa3208a43568f7924cdce8144e203d874ef2cf6dc46d8fe8974d30137cf",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDateTimeRangePicker\n\t\t\t:id=\"['begin-at', 'finish-at']\"\n\t\t\tref=\"picker\"\n\t\t\tv-model=\"value\"\n\t\t\t:name=\"['beginAt', 'finishAt']\"\n\t\t\t:teleported=\"false\"\n\t\t\tv-bind=\"{ 'data-endpoint': 'reservation' }\"\n\t\t\t:tabindex=\"3\"\n\t\t\t:default-time=\"[new Date(2000, 0, 1, 9), new Date(2000, 0, 1, 17)]\"\n\t\t\t@clear=\"clears++\"\n\t\t\t@change=\"changes++\"\n\t\t\t@visible-change=\"recordVisibility\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"picker?.handleOpen('end')\">打开结束端</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"picker?.handleClose('end')\"\n\t\t\t>关闭结束端</AsamButton\n\t\t>\n\t\t<output>{{ { value, clears, changes, endpoint } }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerattrscontractExample' });\n\nimport { ref } from 'vue';\nimport { AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';\nimport type {\n\tDateTimeRangeValue,\n\tAsamDateTimeRangePickerExpose,\n\tAsamDateTimeEndpoint\n} from '@asam-ui/ui';\nconst value = ref<DateTimeRangeValue>(['2026-10-04 09:00:00', '2026-10-05 17:00:00']);\nconst picker = ref<AsamDateTimeRangePickerExpose>();\nconst clears = ref(0);\nconst changes = ref(0);\nconst endpoint = ref<AsamDateTimeEndpoint>('start');\nconst recordVisibility = (_visible: boolean, next: AsamDateTimeEndpoint) => {\n\tendpoint.value = next;\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/attrs-contract/js/Demo.vue",
									"sha256": "b16e7230ae8c7550ba503187ef7a13808146fd111d00d98d633148a7515ac50c",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamDateTimeRangePicker\n\t\t\t:id=\"['begin-at', 'finish-at']\"\n\t\t\tref=\"picker\"\n\t\t\tv-model=\"value\"\n\t\t\t:name=\"['beginAt', 'finishAt']\"\n\t\t\t:teleported=\"false\"\n\t\t\tv-bind=\"{ 'data-endpoint': 'reservation' }\"\n\t\t\t:tabindex=\"3\"\n\t\t\t:default-time=\"[new Date(2000, 0, 1, 9), new Date(2000, 0, 1, 17)]\"\n\t\t\t@clear=\"clears++\"\n\t\t\t@change=\"changes++\"\n\t\t\t@visible-change=\"recordVisibility\"\n\t\t/>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamButton native-type=\"submit\" type=\"default\" @click=\"picker?.handleOpen('end')\">打开结束端</AsamButton\n\t\t><AsamButton native-type=\"submit\" type=\"default\" @click=\"picker?.handleClose('end')\"\n\t\t\t>关闭结束端</AsamButton\n\t\t>\n\t\t<output>{{ { value, clears, changes, endpoint } }}</output>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDateTimeRangePickerattrscontractExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';\nconst value = ref(['2026-10-04 09:00:00', '2026-10-05 17:00:00']);\nconst picker = ref();\nconst clears = ref(0);\nconst changes = ref(0);\nconst endpoint = ref('start');\nconst recordVisibility = (_visible, next) => {\n\tendpoint.value = next;\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "advanced-contract",
					"title": "本地化与高级配置的完整 SFC",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/advanced-contract/ts/Demo.vue",
									"sha256": "4b78f2248fb5b95d392fe97425e84b0422995efdc8eb520915557ff96e482405",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamDateTimeRangePicker\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t>\n\t\t\t\t<template #default=\"cell\">\n\t\t\t\t\t<!-- Scoped cell data stays typed through the public slot. -->\n\t\t\t\t\t<span>{{ cell.text }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-month><CaretLeft /></template>\n\t\t\t\t<template #next-month><CaretRight /></template>\n\t\t\t\t<template #prev-year><CaretLeft /></template>\n\t\t\t\t<template #next-year><CaretRight /></template>\n\t\t\t\t<template #range-separator>→</template>\n\t\t\t</AsamDateTimeRangePicker>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamDateTimeRangePicker, AsamConfigProvider } from '@asam-ui/ui';\nimport type { AsamDateTimeRangePickerProps, DateTimeRangeValue } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamDateTimeRangePickerAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref<DateTimeRangeValue>(null);\nconst configuration: AsamDateTimeRangePickerProps = {\n\tname: ['starts', 'ends'],\n\tid: ['starts-id', 'ends-id'],\n\tvalueFormat: 'YYYY-MM-DD HH:mm:ss',\n\tformat: 'YYYY/MM/DD HH:mm',\n\tteleported: false,\n\treadonly: false,\n\tclearable: true,\n\teditable: true,\n\tplaceholder: '日期时间',\n\tstartPlaceholder: '起点',\n\tendPlaceholder: '终点',\n\trangeSeparator: '到',\n\tpopperClass: 'advanced-date-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tpopperOptions: { strategy: 'absolute' },\n\tplacement: 'bottom',\n\tfallbackPlacements: ['top', 'bottom'],\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight,\n\temptyValues: ['', null, undefined],\n\tvalueOnClear: null,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tdefaultTime: new Date(2000, 0, 1, 9, 30),\n\tdateFormat: 'YYYY/MM/DD',\n\ttimeFormat: 'HH:mm',\n\tshowFooter: true,\n\tshowConfirm: true,\n\tshowWeekNumber: true,\n\tdisabledDate: (date: Date) => date.getFullYear() < 2026,\n\tshortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],\n\tcellClassName: (date: Date) => (date.getDate() === 1 ? 'advanced-cell' : ''),\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.ts",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/advanced-contract/ts/locale.ts",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/advanced-contract/js/Demo.vue",
									"sha256": "b54d8267c993daa8cd767f63512c69b34c6b27c18247490bf7090b08665fa2a9",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"chinese\">中文本地化</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用</AsamCheckboxItem>\n\t\t<AsamConfigProvider :locale=\"chinese ? zhCn : en\">\n\t\t\t<AsamDateTimeRangePicker\n\t\t\t\t:key=\"chinese ? 'zh-cn' : 'en'\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tv-bind=\"configuration\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@change=\"changes++\"\n\t\t\t>\n\t\t\t\t<template #default=\"cell\">\n\t\t\t\t\t<!-- Scoped cell data stays typed through the public slot. -->\n\t\t\t\t\t<span>{{ cell.text }}</span>\n\t\t\t\t</template>\n\t\t\t\t<template #prev-month><CaretLeft /></template>\n\t\t\t\t<template #next-month><CaretRight /></template>\n\t\t\t\t<template #prev-year><CaretLeft /></template>\n\t\t\t\t<template #next-year><CaretRight /></template>\n\t\t\t\t<template #range-separator>→</template>\n\t\t\t</AsamDateTimeRangePicker>\n\t\t</AsamConfigProvider>\n\t\t<output>模型 {{ value }}；提交次数 {{ changes }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamDateTimeRangePicker, AsamConfigProvider } from '@asam-ui/ui';\nimport { zhCn, en } from './locale.js';\nimport { CaretLeft, CaretRight } from '@asam-ui/icons-vue';\ndefineOptions({ name: 'AsamDateTimeRangePickerAdvancedContractExample' });\nconst chinese = ref(true);\nconst disabled = ref(false);\nconst changes = ref(0);\nconst value = ref(null);\nconst configuration = {\n\tname: ['starts', 'ends'],\n\tid: ['starts-id', 'ends-id'],\n\tvalueFormat: 'YYYY-MM-DD HH:mm:ss',\n\tformat: 'YYYY/MM/DD HH:mm',\n\tteleported: false,\n\treadonly: false,\n\tclearable: true,\n\teditable: true,\n\tplaceholder: '日期时间',\n\tstartPlaceholder: '起点',\n\tendPlaceholder: '终点',\n\trangeSeparator: '到',\n\tpopperClass: 'advanced-date-popup',\n\tpopperStyle: { borderWidth: '2px' },\n\tpopperOptions: { strategy: 'absolute' },\n\tplacement: 'bottom',\n\tfallbackPlacements: ['top', 'bottom'],\n\tprefixIcon: CaretLeft,\n\tclearIcon: CaretRight,\n\temptyValues: ['', null, undefined],\n\tvalueOnClear: null,\n\tdefaultValue: new Date(2026, 0, 1, 9, 30),\n\tdefaultTime: new Date(2000, 0, 1, 9, 30),\n\tdateFormat: 'YYYY/MM/DD',\n\ttimeFormat: 'HH:mm',\n\tshowFooter: true,\n\tshowConfirm: true,\n\tshowWeekNumber: true,\n\tdisabledDate: (date) => date.getFullYear() < 2026,\n\tshortcuts: [{ text: '固定日期', value: new Date(2026, 0, 1, 9, 30) }],\n\tcellClassName: (date) => (date.getDate() === 1 ? 'advanced-cell' : ''),\n\tdisabledHours: () => [0, 1],\n\tdisabledMinutes: (hour) => (hour === 9 ? [0] : []),\n\tdisabledSeconds: () => [0]\n};\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "locale.js",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/advanced-contract/js/locale.js",
									"sha256": "03cd82776639d7c0b923d943c39794384139156c3ecf3809be224667dabf3ab0",
									"source": "import dayjs from 'dayjs';\nimport dateLocale from 'dayjs/locale/zh-cn.js';\n\n// Register date locale on the same public Day.js instance used by the components.\n// The third argument preserves the application default; the provider selects per component.\ndayjs.locale(dateLocale, undefined, true);\n\n/** Application-authored dictionary, supplied through the public provider. */\nexport const zhCn = {\n\tname: 'zh-cn',\n\tel: {\n\t\tdatepicker: {\n\t\t\tnow: '当前时刻',\n\t\t\ttoday: '当前日期',\n\t\t\tcancel: '取消选择',\n\t\t\tclear: '清除选择',\n\t\t\tconfirm: '应用选择',\n\t\t\tdateTablePrompt: '方向键选日期，回车确认',\n\t\t\tmonthTablePrompt: '方向键选月份',\n\t\t\tquarterTablePrompt: '方向键选季度',\n\t\t\tyearTablePrompt: '方向键选年份',\n\t\t\tselectedDate: '当前选择',\n\t\t\tselectDate: '选择日期',\n\t\t\tselectTime: '选择时间',\n\t\t\tstartDate: '起始日期',\n\t\t\tstartTime: '起始时间',\n\t\t\tendDate: '结束日期',\n\t\t\tendTime: '结束时间',\n\t\t\tprevYear: '上一年',\n\t\t\tnextYear: '下一年',\n\t\t\tprevMonth: '上一月',\n\t\t\tnextMonth: '下一月',\n\t\t\tyear: '年',\n\t\t\t...Object.fromEntries(\n\t\t\t\tArray.from({ length: 12 }, (_, index) => ['month' + (index + 1), index + 1 + '月'])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: '周日',\n\t\t\t\tmon: '周一',\n\t\t\t\ttue: '周二',\n\t\t\t\twed: '周三',\n\t\t\t\tthu: '周四',\n\t\t\t\tfri: '周五',\n\t\t\t\tsat: '周六'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: '一月',\n\t\t\t\tfeb: '二月',\n\t\t\t\tmar: '三月',\n\t\t\t\tapr: '四月',\n\t\t\t\tmay: '五月',\n\t\t\t\tjun: '六月',\n\t\t\t\tjul: '七月',\n\t\t\t\taug: '八月',\n\t\t\t\tsep: '九月',\n\t\t\t\toct: '十月',\n\t\t\t\tnov: '十一月',\n\t\t\t\tdec: '十二月'\n\t\t\t},\n\t\t\tquarters: { q1: '第一季度', q2: '第二季度', q3: '第三季度', q4: '第四季度' }\n\t\t},\n\t\tcalendar: { prevMonth: '上一月', nextMonth: '下一月', today: '当前日期' },\n\t\tselect: {\n\t\t\tloading: '正在读取',\n\t\t\tnoMatch: '没有匹配时间',\n\t\t\tnoData: '没有可选时间',\n\t\t\tplaceholder: '选择时间'\n\t\t}\n\t}\n};\nexport const en = {\n\tname: 'en',\n\tel: {\n\t\tdatepicker: {\n\t\t\t...zhCn.el.datepicker,\n\t\t\tnow: 'Now',\n\t\t\ttoday: 'Today',\n\t\t\tcancel: 'Cancel',\n\t\t\tclear: 'Clear',\n\t\t\tconfirm: 'OK',\n\t\t\tdateTablePrompt: 'Use arrows to select a date',\n\t\t\tmonthTablePrompt: 'Use arrows to select a month',\n\t\t\tquarterTablePrompt: 'Use arrows to select a quarter',\n\t\t\tyearTablePrompt: 'Use arrows to select a year',\n\t\t\tselectedDate: 'Selected date',\n\t\t\tselectDate: 'Select date',\n\t\t\tselectTime: 'Select time',\n\t\t\tstartDate: 'Start date',\n\t\t\tstartTime: 'Start time',\n\t\t\tendDate: 'End date',\n\t\t\tendTime: 'End time',\n\t\t\tprevYear: 'Previous year',\n\t\t\tnextYear: 'Next year',\n\t\t\tprevMonth: 'Previous month',\n\t\t\tnextMonth: 'Next month',\n\t\t\tyear: '',\n\t\t\t...Object.fromEntries(\n\t\t\t\t[\n\t\t\t\t\t'January',\n\t\t\t\t\t'February',\n\t\t\t\t\t'March',\n\t\t\t\t\t'April',\n\t\t\t\t\t'May',\n\t\t\t\t\t'June',\n\t\t\t\t\t'July',\n\t\t\t\t\t'August',\n\t\t\t\t\t'September',\n\t\t\t\t\t'October',\n\t\t\t\t\t'November',\n\t\t\t\t\t'December'\n\t\t\t\t].map((month, index) => ['month' + (index + 1), month])\n\t\t\t),\n\t\t\tweeks: {\n\t\t\t\tsun: 'Sun',\n\t\t\t\tmon: 'Mon',\n\t\t\t\ttue: 'Tue',\n\t\t\t\twed: 'Wed',\n\t\t\t\tthu: 'Thu',\n\t\t\t\tfri: 'Fri',\n\t\t\t\tsat: 'Sat'\n\t\t\t},\n\t\t\tmonths: {\n\t\t\t\tjan: 'Jan',\n\t\t\t\tfeb: 'Feb',\n\t\t\t\tmar: 'Mar',\n\t\t\t\tapr: 'Apr',\n\t\t\t\tmay: 'May',\n\t\t\t\tjun: 'Jun',\n\t\t\t\tjul: 'Jul',\n\t\t\t\taug: 'Aug',\n\t\t\t\tsep: 'Sep',\n\t\t\t\toct: 'Oct',\n\t\t\t\tnov: 'Nov',\n\t\t\t\tdec: 'Dec'\n\t\t\t},\n\t\t\tquarters: { q1: 'Q1', q2: 'Q2', q3: 'Q3', q4: 'Q4' }\n\t\t},\n\t\tcalendar: { prevMonth: 'Previous month', nextMonth: 'Next month', today: 'Today' },\n\t\tselect: {\n\t\t\tloading: 'Loading times',\n\t\t\tnoMatch: 'No matching time',\n\t\t\tnoData: 'No available time',\n\t\t\tplaceholder: 'Select a time'\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "sidebar",
					"title": "公开侧栏与快捷项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/sidebar/ts/Demo.vue",
									"sha256": "967c742f8a22b30f1b68d411aa3d2c5a82a95179a437ae58bfde0b43ae677c69",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"withShortcut\">快捷项</AsamCheckboxItem>\n\t\t<AsamDateTimeRangePicker\n\t\t\tv-model=\"value\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:shortcuts=\"withShortcut ? shortcuts : []\"\n\t\t\tvalue-format=\"YYYY-MM-DD HH:mm:ss\"\n\t\t>\n\t\t\t<template #sidebar=\"scope\">\n\t\t\t\t<!-- Apply the public native class to a block sidebar root. -->\n\t\t\t\t<aside :class=\"scope.class\" v-bind=\"{ 'data-sidebar-example': '' }\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ scope.endpoint }} 端点侧栏</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t\t\t>清空模型</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</aside></template\n\t\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<!-- Preserve the existing public cell slot. -->\n\t\t\t\t<span>{{ cell.text }}</span></template\n\t\t\t>\n\t\t\t<template #prev-year><span aria-hidden=\"true\">«</span></template>\n\t\t\t<template #next-year><span aria-hidden=\"true\">»</span></template>\n\t\t\t<template #range-separator>→</template>\n\t\t</AsamDateTimeRangePicker>\n\t\t<output>模型 {{ value }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';\nimport type { DateTimeRangeValue } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDateTimeRangePickerSidebarExample' });\nconst value = ref<DateTimeRangeValue>(null);\n\nconst teleported = ref(true);\nconst withShortcut = ref(false);\nconst shortcuts = [{ text: '固定日期', value: new Date(2026, 0, 12, 9, 30) }];\nfunction reset() {\n\tvalue.value = null;\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/sidebar/js/Demo.vue",
									"sha256": "6519fa5688bcc3987aec4211d457438ec71cb9db1827ac1e95293ae9501a4954",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<AsamCheckboxItem v-model=\"teleported\">挂载到 body</AsamCheckboxItem>\n\t\t<AsamCheckboxItem v-model=\"withShortcut\">快捷项</AsamCheckboxItem>\n\t\t<AsamDateTimeRangePicker\n\t\t\tv-model=\"value\"\n\t\t\t:teleported=\"teleported\"\n\t\t\t:default-value=\"new Date(2026, 0, 1)\"\n\t\t\t:shortcuts=\"withShortcut ? shortcuts : []\"\n\t\t\tvalue-format=\"YYYY-MM-DD HH:mm:ss\"\n\t\t>\n\t\t\t<template #sidebar=\"scope\">\n\t\t\t\t<!-- Apply the public native class to a block sidebar root. -->\n\t\t\t\t<aside :class=\"scope.class\" v-bind=\"{ 'data-sidebar-example': '' }\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ scope.endpoint }} 端点侧栏</p>\n\t\t\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reset\"\n\t\t\t\t\t\t>清空模型</AsamButton\n\t\t\t\t\t>\n\t\t\t\t</aside></template\n\t\t\t>\n\t\t\t<template #default=\"cell\">\n\t\t\t\t<!-- Preserve the existing public cell slot. -->\n\t\t\t\t<span>{{ cell.text }}</span></template\n\t\t\t>\n\t\t\t<template #prev-year><span aria-hidden=\"true\">«</span></template>\n\t\t\t<template #next-year><span aria-hidden=\"true\">»</span></template>\n\t\t\t<template #range-separator>→</template>\n\t\t</AsamDateTimeRangePicker>\n\t\t<output>模型 {{ value }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDateTimeRangePickerSidebarExample' });\nconst value = ref(null);\n\nconst teleported = ref(true);\nconst withShortcut = ref(false);\nconst shortcuts = [{ text: '固定日期', value: new Date(2026, 0, 12, 9, 30) }];\nfunction reset() {\n\tvalue.value = null;\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "empty-values",
					"title": "配置空值和有效零时间戳",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/empty-values/ts/Demo.vue",
									"sha256": "c79a9c6276b6347aef3e770905e95b10dcacba81b4be2c31e4b35444e8eeaada",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Switch only the public empty-value configuration. -->\n\t\t\t<span>清空约定</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption value=\"zero\" :label=\"'0 为空'\">0 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false 为空'\">false 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"factory\" :label=\"'函数返回 0'\">函数返回 0</AsamOption>\n\t\t\t\t<AsamOption value=\"factory-false\" :label=\"'函数返回 false'\"\n\t\t\t\t\t>函数返回 false</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"factory-undefined\" :label=\"'函数返回 undefined'\"\n\t\t\t\t\t>函数返回 undefined</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"factory-array\" :label=\"'函数返回空数组端点'\"\n\t\t\t\t\t>函数返回空数组端点</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"epoch\" :label=\"'0 为有效时间戳'\">0 为有效时间戳</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamDateTimeRangePicker\n\t\t\t:key=\"mode\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"configuration\"\n\t\t\t@clear=\"onClear\"\n\t\t\t@change=\"changes++\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restore\">回填两端</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observedCalls = factoryCalls\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t><output>{{ summary }}</output>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, computed, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';\nimport type { DateTimeRangeValue, AsamDateTimeRangePickerProps } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDateTimeRangePickerEmptyValuesExample' });\nconst mode = ref('zero');\nconst value = ref<DateTimeRangeValue>(null);\nconst clears = ref(0);\nconst changes = ref(0);\nconst observedCalls = ref(0);\nlet factoryCalls = 0;\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'factory-false'\n\t\t? false\n\t\t: mode.value === 'factory-undefined'\n\t\t\t? undefined\n\t\t\t: mode.value === 'factory-array'\n\t\t\t\t? [null, null]\n\t\t\t\t: 0;\n}\nfunction onClear() {\n\tclears.value++;\n\tobservedCalls.value = factoryCalls;\n}\nconst configuration = computed<AsamDateTimeRangePickerProps>(() => ({\n\tvalueFormat: mode.value === 'epoch' ? 'x' : 'YYYY-MM-DD HH:mm:ss',\n\temptyValues:\n\t\tmode.value === 'epoch'\n\t\t\t? ['', null, undefined]\n\t\t\t: ['', null, undefined, 0, false, [null, null]],\n\tvalueOnClear:\n\t\tmode.value === 'false'\n\t\t\t? false\n\t\t\t: mode.value.startsWith('factory')\n\t\t\t\t? clearFactory\n\t\t\t\t: mode.value === 'epoch'\n\t\t\t\t\t? null\n\t\t\t\t\t: 0\n}));\nfunction restore() {\n\tvalue.value =\n\t\tmode.value === 'epoch' ? [0, 86400000] : ['2026-01-12 09:30:00', '2026-01-14 17:30:00'];\n}\nwatch(mode, restore);\nrestore();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDateTimeRangePicker/empty-values/js/Demo.vue",
									"sha256": "3e79dc6707223525b927a9bfa0bda29da6e84832b6947e486b6c29e1a479caa7",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<label>\n\t\t\t<!-- Switch only the public empty-value configuration. -->\n\t\t\t<span>清空约定</span>\n\t\t\t<AsamSelect v-model=\"mode\">\n\t\t\t\t<AsamOption value=\"zero\" :label=\"'0 为空'\">0 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"false\" :label=\"'false 为空'\">false 为空</AsamOption>\n\t\t\t\t<AsamOption value=\"factory\" :label=\"'函数返回 0'\">函数返回 0</AsamOption>\n\t\t\t\t<AsamOption value=\"factory-false\" :label=\"'函数返回 false'\"\n\t\t\t\t\t>函数返回 false</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"factory-undefined\" :label=\"'函数返回 undefined'\"\n\t\t\t\t\t>函数返回 undefined</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"factory-array\" :label=\"'函数返回空数组端点'\"\n\t\t\t\t\t>函数返回空数组端点</AsamOption\n\t\t\t\t>\n\t\t\t\t<AsamOption value=\"epoch\" :label=\"'0 为有效时间戳'\">0 为有效时间戳</AsamOption>\n\t\t\t</AsamSelect></label\n\t\t>\n\t\t<AsamDateTimeRangePicker\n\t\t\t:key=\"mode\"\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"configuration\"\n\t\t\t@clear=\"onClear\"\n\t\t\t@change=\"changes++\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"restore\">回填两端</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"observedCalls = factoryCalls\"\n\t\t\t>读取工厂调用次数</AsamButton\n\t\t><output>{{ summary }}</output>\n\t</section>\n</template>\n<script setup>\nimport { ref, computed, watch } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamDateTimeRangePicker } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDateTimeRangePickerEmptyValuesExample' });\nconst mode = ref('zero');\nconst value = ref(null);\nconst clears = ref(0);\nconst changes = ref(0);\nconst observedCalls = ref(0);\nlet factoryCalls = 0;\nconst summary = computed(\n\t() =>\n\t\t'模型 ' +\n\t\tJSON.stringify(value.value) +\n\t\t'；clear ' +\n\t\tclears.value +\n\t\t'；change ' +\n\t\tchanges.value +\n\t\t'；工厂 ' +\n\t\tobservedCalls.value\n);\nfunction clearFactory() {\n\tfactoryCalls++;\n\treturn mode.value === 'factory-false'\n\t\t? false\n\t\t: mode.value === 'factory-undefined'\n\t\t\t? undefined\n\t\t\t: mode.value === 'factory-array'\n\t\t\t\t? [null, null]\n\t\t\t\t: 0;\n}\nfunction onClear() {\n\tclears.value++;\n\tobservedCalls.value = factoryCalls;\n}\nconst configuration = computed(() => ({\n\tvalueFormat: mode.value === 'epoch' ? 'x' : 'YYYY-MM-DD HH:mm:ss',\n\temptyValues:\n\t\tmode.value === 'epoch'\n\t\t\t? ['', null, undefined]\n\t\t\t: ['', null, undefined, 0, false, [null, null]],\n\tvalueOnClear:\n\t\tmode.value === 'false'\n\t\t\t? false\n\t\t\t: mode.value.startsWith('factory')\n\t\t\t\t? clearFactory\n\t\t\t\t: mode.value === 'epoch'\n\t\t\t\t\t? null\n\t\t\t\t\t: 0\n}));\nfunction restore() {\n\tvalue.value =\n\t\tmode.value === 'epoch' ? [0, 86400000] : ['2026-01-12 09:30:00', '2026-01-14 17:30:00'];\n}\nwatch(mode, restore);\nrestore();\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamUpload",
			"documentation": "/component-AsamUpload.html",
			"demos": [
				{
					"id": "resource",
					"title": "资源上传、校验与取消",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/resource/ts/Demo.vue",
									"sha256": "1aabe69e170b334e2722b9516aa8fea03d346472d0c7e6e5bb982fd4564f630c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ accept: '.txt' },\n\t\t\t\t...{\n\t\t\t\t\tupload: localUpload,\n\t\t\t\t\t'max-size-bytes': 1048576,\n\t\t\t\t\tvalidate: validate,\n\t\t\t\t\t'auto-upload': false\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t\t@success=\"event = 'success'\"\n\t\t\t@error=\"(error) => (event = error.message)\"\n\t\t\t@cancelled=\"event = 'cancelled'\"\n\t\t>\n\t\t\t<template #trigger>\n\t\t\t\t<AsamButton type=\"default\"> 选择文本文件 </AsamButton>\n\t\t\t</template>\n\t\t\t<template #tip> 本地演示，单个 TXT，最大 1 MiB </template>\n\t\t</AsamUpload>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\"> 上传 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.cancel()\"> 取消 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clear()\"> 清除 </AsamButton>\n\t\t</div>\n\t\t<output>资源：{{ JSON.stringify(value) }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadResourceExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nimport type { AsamUploadExpose, AsamUploadedResource } from '@asam-ui/ui';\nimport { localUpload } from './upload';\nconst control = ref<AsamUploadExpose>();\nconst value = ref<AsamUploadedResource | null>(null);\nconst event = ref('尚未上传');\nfunction validate(file: File) {\n\treturn file.name.endsWith('.txt') || '仅接受 TXT';\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "upload.ts",
									"sourcePath": "apps/website/examples/AsamUpload/resource/ts/upload.ts",
									"sha256": "2bfe4e69c7661bd3bb5468cc68caac7dec1c5b36ec57a7bfe460e0a8c8ae46e3",
									"source": "import type { AsamUploadHandler } from '@asam-ui/ui';\nexport const localUpload: AsamUploadHandler = async ({ file }, context) => {\n\tcontext.reportProgress({ loaded: 0, total: file.size });\n\tawait new Promise<void>((resolve, reject) => {\n\t\tconst timer = setTimeout(resolve, 250);\n\t\tcontext.signal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\treject(new Error('cancelled'));\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t});\n\tif (context.signal.aborted) throw new Error('cancelled');\n\tcontext.reportProgress({ loaded: file.size, total: file.size });\n\treturn {\n\t\tid: file.name + ':' + file.size,\n\t\tname: file.name,\n\t\turl: '/local-demo/' + encodeURIComponent(file.name),\n\t\tmimeType: file.type || 'application/octet-stream',\n\t\tsize: file.size\n\t};\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/resource/js/Demo.vue",
									"sha256": "25b539c0026023d78ce5b3e72086b8d344a048375d7ae8adfab3cd869dd44564",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ accept: '.txt' },\n\t\t\t\t...{\n\t\t\t\t\tupload: localUpload,\n\t\t\t\t\t'max-size-bytes': 1048576,\n\t\t\t\t\tvalidate: validate,\n\t\t\t\t\t'auto-upload': false\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t\t@success=\"event = 'success'\"\n\t\t\t@error=\"(error) => (event = error.message)\"\n\t\t\t@cancelled=\"event = 'cancelled'\"\n\t\t>\n\t\t\t<template #trigger>\n\t\t\t\t<AsamButton type=\"default\"> 选择文本文件 </AsamButton>\n\t\t\t</template>\n\t\t\t<template #tip> 本地演示，单个 TXT，最大 1 MiB </template>\n\t\t</AsamUpload>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\"> 上传 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.cancel()\"> 取消 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clear()\"> 清除 </AsamButton>\n\t\t</div>\n\t\t<output>资源：{{ JSON.stringify(value) }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadResourceExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nimport { localUpload } from './upload';\nconst control = ref();\nconst value = ref(null);\nconst event = ref('尚未上传');\nfunction validate(file) {\n\treturn file.name.endsWith('.txt') || '仅接受 TXT';\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "upload.js",
									"sourcePath": "apps/website/examples/AsamUpload/resource/js/upload.js",
									"sha256": "4e96b8e38bdadc6614e2497189a70b1f1e414c28724f244bd08f39913f6ca6fe",
									"source": "export const localUpload = async ({ file }, context) => {\n\tcontext.reportProgress({ loaded: 0, total: file.size });\n\tawait new Promise((resolve, reject) => {\n\t\tconst timer = setTimeout(resolve, 250);\n\t\tcontext.signal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\treject(new Error('cancelled'));\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t});\n\tif (context.signal.aborted) throw new Error('cancelled');\n\tcontext.reportProgress({ loaded: file.size, total: file.size });\n\treturn {\n\t\tid: file.name + ':' + file.size,\n\t\tname: file.name,\n\t\turl: '/local-demo/' + encodeURIComponent(file.name),\n\t\tmimeType: file.type || 'application/octet-stream',\n\t\tsize: file.size\n\t};\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "multiple",
					"title": "多文件与文件插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/multiple/ts/Demo.vue",
									"sha256": "13b0079fdd13400e39c102d4b0b670af0332eb331b7f2e8f188f7bfa40b9da98",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ ...{ upload: localUpload, limit: 3 }, ...{ multiple: true, drag: true } }\"\n\t\t>\n\t\t\t<template #trigger> 拖入文件或点击选择（最多三个） </template>\n\t\t\t<template #file=\"{ item, remove, cancel }\">\n\t\t\t\t<span> {{ item.name }} · {{ item.status }} · {{ item.percent ?? 0 }}% </span>\n\t\t\t\t<AsamButton type=\"default\" @click=\"remove\"> 移除 </AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"cancel\"> 取消 </AsamButton>\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<output>资源：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadMultipleExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nimport type { AsamUploadedResource } from '@asam-ui/ui';\nimport { localUpload } from './upload';\nconst value = ref<AsamUploadedResource[]>([]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "upload.ts",
									"sourcePath": "apps/website/examples/AsamUpload/multiple/ts/upload.ts",
									"sha256": "2bfe4e69c7661bd3bb5468cc68caac7dec1c5b36ec57a7bfe460e0a8c8ae46e3",
									"source": "import type { AsamUploadHandler } from '@asam-ui/ui';\nexport const localUpload: AsamUploadHandler = async ({ file }, context) => {\n\tcontext.reportProgress({ loaded: 0, total: file.size });\n\tawait new Promise<void>((resolve, reject) => {\n\t\tconst timer = setTimeout(resolve, 250);\n\t\tcontext.signal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\treject(new Error('cancelled'));\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t});\n\tif (context.signal.aborted) throw new Error('cancelled');\n\tcontext.reportProgress({ loaded: file.size, total: file.size });\n\treturn {\n\t\tid: file.name + ':' + file.size,\n\t\tname: file.name,\n\t\turl: '/local-demo/' + encodeURIComponent(file.name),\n\t\tmimeType: file.type || 'application/octet-stream',\n\t\tsize: file.size\n\t};\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/multiple/js/Demo.vue",
									"sha256": "26455dcebff3e6f2965110ddac3743279033cdc2e8916844695416c19408ac91",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{ ...{ upload: localUpload, limit: 3 }, ...{ multiple: true, drag: true } }\"\n\t\t>\n\t\t\t<template #trigger> 拖入文件或点击选择（最多三个） </template>\n\t\t\t<template #file=\"{ item, remove, cancel }\">\n\t\t\t\t<span> {{ item.name }} · {{ item.status }} · {{ item.percent ?? 0 }}% </span>\n\t\t\t\t<AsamButton type=\"default\" @click=\"remove\"> 移除 </AsamButton>\n\t\t\t\t<AsamButton type=\"default\" @click=\"cancel\"> 取消 </AsamButton>\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<output>资源：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadMultipleExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nimport { localUpload } from './upload';\nconst value = ref([]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "upload.js",
									"sourcePath": "apps/website/examples/AsamUpload/multiple/js/upload.js",
									"sha256": "4e96b8e38bdadc6614e2497189a70b1f1e414c28724f244bd08f39913f6ca6fe",
									"source": "export const localUpload = async ({ file }, context) => {\n\tcontext.reportProgress({ loaded: 0, total: file.size });\n\tawait new Promise((resolve, reject) => {\n\t\tconst timer = setTimeout(resolve, 250);\n\t\tcontext.signal.addEventListener(\n\t\t\t'abort',\n\t\t\t() => {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\treject(new Error('cancelled'));\n\t\t\t},\n\t\t\t{ once: true }\n\t\t);\n\t});\n\tif (context.signal.aborted) throw new Error('cancelled');\n\tcontext.reportProgress({ loaded: file.size, total: file.size });\n\treturn {\n\t\tid: file.name + ':' + file.size,\n\t\tname: file.name,\n\t\turl: '/local-demo/' + encodeURIComponent(file.name),\n\t\tmimeType: file.type || 'application/octet-stream',\n\t\tsize: file.size\n\t};\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原始文件列表与手动提交",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/native/ts/Demo.vue",
									"sha256": "2563b31b75cef5fc95e9f6a01383f782ee72d6b4ef9fa17866e4a2ec9cf2fa04",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ mode: 'native' },\n\t\t\t\t...{\n\t\t\t\t\t'http-request': upload,\n\t\t\t\t\t'auto-upload': false,\n\t\t\t\t\t'on-success': () => (event = 'native success')\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model:file-list=\"files\"\n\t\t>\n\t\t\t<template #trigger>\n\t\t\t\t<AsamButton type=\"default\"> 选择文件 </AsamButton>\n\t\t\t</template>\n\t\t\t<template #tip> 原始文件列表本地演示 </template>\n\t\t</AsamUpload>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\"> 提交列表 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.abort()\"> 取消原始请求 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clearFiles()\"> 清空列表 </AsamButton>\n\t\t</div>\n\t\t<output>数量：{{ files.length }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadNativeExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nimport type { AsamNativeUploadExpose, AsamNativeUploadProps } from '@asam-ui/ui';\nconst control = ref<AsamNativeUploadExpose>();\nconst files = ref<NonNullable<AsamNativeUploadProps['fileList']>>([]);\nconst event = ref('尚未上传');\nconst upload: NonNullable<AsamNativeUploadProps['httpRequest']> = (options) => {\n\toptions.onSuccess({ local: true });\n\treturn Promise.resolve({ local: true });\n};\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/native/js/Demo.vue",
									"sha256": "00fca42dbc720386b4f20c7d4010c276c37b8d5cb1f4e2c469c09685dfa2e21e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ mode: 'native' },\n\t\t\t\t...{\n\t\t\t\t\t'http-request': upload,\n\t\t\t\t\t'auto-upload': false,\n\t\t\t\t\t'on-success': () => (event = 'native success')\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model:file-list=\"files\"\n\t\t>\n\t\t\t<template #trigger>\n\t\t\t\t<AsamButton type=\"default\"> 选择文件 </AsamButton>\n\t\t\t</template>\n\t\t\t<template #tip> 原始文件列表本地演示 </template>\n\t\t</AsamUpload>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\"> 提交列表 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.abort()\"> 取消原始请求 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clearFiles()\"> 清空列表 </AsamButton>\n\t\t</div>\n\t\t<output>数量：{{ files.length }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadNativeExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst files = ref([]);\nconst event = ref('尚未上传');\nconst upload = (options) => {\n\toptions.onSuccess({ local: true });\n\treturn Promise.resolve({ local: true });\n};\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/sizes/ts/Demo.vue",
									"sha256": "85ffed16c2bc4e43f7b3db261143c87485ffbae7e609e17dfa4e04eee8eafb1f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"large\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.large\"\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"big\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.big\"\n\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"default\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.default\"\n\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"small\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.small\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<div data-mode=\"native\"><AsamUpload mode=\"native\" :auto-upload=\"false\" /></div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload v-model=\"inheritedModel\" :upload=\"upload\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"override\">\n\t\t\t\t\t<AsamUpload size=\"small\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'large'\">继承 large</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'default'\">继承 default</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadSizesExample' });\nimport { reactive, ref } from 'vue';\nimport { AsamUpload, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize, AsamUploadedResource, AsamUploadHandler } from '@asam-ui/ui';\nconst models = reactive<Record<AsamControlSize, AsamUploadedResource | null>>({\n\tlarge: null,\n\tbig: null,\n\tdefault: null,\n\tsmall: null\n});\nconst inheritedModel = ref<AsamUploadedResource | null>(null);\nconst upload: AsamUploadHandler = async ({ file }) => ({\n\tid: file.name,\n\tname: file.name,\n\turl: '/local-demo',\n\tmimeType: file.type,\n\tsize: file.size\n});\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/sizes/js/Demo.vue",
									"sha256": "c2702c78573584c0e70d787c160c97684eebf18d31150c92eefc64ef867982d3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"large\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.large\"\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"big\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.big\"\n\t\t\t\t\t\tsize=\"big\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"default\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.default\"\n\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<div data-mode=\"native\">\n\t\t\t\t\t<AsamUpload size=\"small\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload\n\t\t\t\t\t\tv-model=\"models.small\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t:upload=\"upload\"\n\t\t\t\t\t\t:auto-upload=\"false\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<div data-mode=\"native\"><AsamUpload mode=\"native\" :auto-upload=\"false\" /></div>\n\t\t\t\t<div data-mode=\"resource\">\n\t\t\t\t\t<AsamUpload v-model=\"inheritedModel\" :upload=\"upload\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t\t<div data-mode=\"override\">\n\t\t\t\t\t<AsamUpload size=\"small\" mode=\"native\" :auto-upload=\"false\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'large'\">继承 large</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'default'\">继承 default</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadSizesExample' });\nimport { reactive, ref } from 'vue';\nimport { AsamUpload, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst models = reactive({ large: null, big: null, default: null, small: null });\nconst inheritedModel = ref(null);\nconst upload = async ({ file }) => ({\n\tid: file.name,\n\tname: file.name,\n\turl: '/local-demo',\n\tmimeType: file.type,\n\tsize: file.size\n});\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "gallery",
					"title": "照片墙、缩略图、校验与重排",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/gallery/ts/Demo.vue",
									"sha256": "504863fd1cef69dfc7fe33c00811789d2ad2112115a896865f574e9069cddb1e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-listType\">列表类型</label>\n\t\t\t\t<AsamSelect id=\"control-listType\" v-model=\"listType\">\n\t\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'picture'\" :value=\"'picture'\">picture</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'picture-card'\" :value=\"'picture-card'\"\n\t\t\t\t\t\t>picture-card</AsamOption\n\t\t\t\t\t>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<AsamCheckboxItem v-model=\"allowRemoval\"> 允许移除</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"custom\"> 自定义缩略图</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-model:file-list=\"files\"\n\t\t\tmode=\"native\"\n\t\t\t:list-type=\"listType\"\n\t\t\t:auto-upload=\"false\"\n\t\t\t:http-request=\"upload\"\n\t\t\t:disabled=\"disabled\"\n\t\t\taccept=\"image/*\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\t:on-progress=\"(event) => progresses.push(event.percent)\"\n\t\t\t:on-change=\"() => changes++\"\n\t\t\t:before-remove=\"beforeRemove\"\n\t\t\t:before-upload=\"beforeUpload\"\n\t\t\t:on-preview=\"preview\"\n\t\t\t:on-success=\"(_response, file) => (result = `已上传 ${file.name}`)\"\n\t\t\t:on-error=\"(_error, file) => (result = `上传失败 ${file.name}`)\"\n\t\t\t:on-remove=\"(file) => (result = `已移除 ${file.name}`)\"\n\t\t>\n\t\t\t<template #tip>选择图片后可手动提交；移除由异步 beforeRemove 判定。</template>\n\t\t\t<template v-if=\"custom\" #file=\"{ file, index }\">\n\t\t\t\t<div class=\"thumbnail\">\n\t\t\t\t\t<AsamImage v-if=\"file.url\" :src=\"file.url\" :alt=\"file.name\" />\n\t\t\t\t\t<span>{{ index }}：{{ file.name }} / {{ file.status }}</span>\n\t\t\t\t\t<AsamButton type=\"default\" :disabled=\"disabled\" @click=\"preview(file)\">\n\t\t\t\t\t\t预览 {{ file.name }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t@click=\"control?.handleRemove(file)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t移除 {{ file.name }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" :disabled=\"disabled\" @click=\"control?.abort(file)\">\n\t\t\t\t\t\t取消 {{ file.name }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\">提交照片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"files.reverse()\">重排照片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clearFiles(['success'])\"\n\t\t\t\t>清除成功照片</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<output>\n\t\t\t{{ result }}；{{ files.map((file) => file.name).join(',') }}；进度\n\t\t\t{{ progresses.join(',') }}；change 次数 {{ changes }}\n\t\t</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadGalleryExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamImage,\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamUpload,\n\tAsamButton\n} from '@asam-ui/ui';\nimport type { AsamNativeUploadProps, AsamNativeUploadExpose } from '@asam-ui/ui';\nconst control = ref<AsamNativeUploadExpose>();\nconst files = ref<NonNullable<AsamNativeUploadProps['fileList']>>([]);\nconst listType = ref<'text' | 'picture' | 'picture-card'>('picture-card');\nconst custom = ref(false);\nconst disabled = ref(false);\nconst allowRemoval = ref(false);\nconst result = ref('照片墙与受控重排');\nconst progresses = ref<number[]>([]);\nconst changes = ref(0);\nconst upload: NonNullable<AsamNativeUploadProps['httpRequest']> = async (options) => {\n\toptions.onProgress(Object.assign(new ProgressEvent('progress'), { percent: 50 }));\n\tif (options.file.name.includes('fail')) throw new Error('本地失败演示');\n\treturn { local: true, name: options.file.name };\n};\nconst beforeUpload: NonNullable<AsamNativeUploadProps['beforeUpload']> = (file) => {\n\tconst valid = file.type.startsWith('image/') && file.size <= 1024 * 1024;\n\tif (!valid) result.value = '只接受 1MB 以内图片';\n\treturn valid;\n};\nconst beforeRemove: NonNullable<AsamNativeUploadProps['beforeRemove']> = async () => {\n\tawait new Promise((resolve) => setTimeout(resolve, 50));\n\tif (!allowRemoval.value) result.value = '移除被 beforeRemove 拒绝';\n\treturn allowRemoval.value;\n};\nconst preview: NonNullable<AsamNativeUploadProps['onPreview']> = (file) => {\n\tresult.value = `预览 ${file.name}`;\n};\n</script>\n\n<style scoped>\n.control-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\n.thumbnail {\n\tdisplay: grid;\n\tgap: var(--asam-space-xs);\n}\n\n.thumbnail img {\n\twidth: 80px;\n\theight: 60px;\n\tobject-fit: contain;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/gallery/js/Demo.vue",
									"sha256": "7902942f9c484c6c868ca020f1ebd9225c2e845d754eb8daf94f8669f722c72b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<div class=\"control-field\">\n\t\t\t\t<label for=\"control-listType\">列表类型</label>\n\t\t\t\t<AsamSelect id=\"control-listType\" v-model=\"listType\">\n\t\t\t\t\t<AsamOption :label=\"'text'\" :value=\"'text'\">text</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'picture'\" :value=\"'picture'\">picture</AsamOption>\n\t\t\t\t\t<AsamOption :label=\"'picture-card'\" :value=\"'picture-card'\"\n\t\t\t\t\t\t>picture-card</AsamOption\n\t\t\t\t\t>\n\t\t\t\t</AsamSelect>\n\t\t\t</div>\n\t\t\t<AsamCheckboxItem v-model=\"allowRemoval\"> 允许移除</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"custom\"> 自定义缩略图</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-model:file-list=\"files\"\n\t\t\tmode=\"native\"\n\t\t\t:list-type=\"listType\"\n\t\t\t:auto-upload=\"false\"\n\t\t\t:http-request=\"upload\"\n\t\t\t:disabled=\"disabled\"\n\t\t\taccept=\"image/*\"\n\t\t\tcrossorigin=\"anonymous\"\n\t\t\t:on-progress=\"(event) => progresses.push(event.percent)\"\n\t\t\t:on-change=\"() => changes++\"\n\t\t\t:before-remove=\"beforeRemove\"\n\t\t\t:before-upload=\"beforeUpload\"\n\t\t\t:on-preview=\"preview\"\n\t\t\t:on-success=\"(_response, file) => (result = `已上传 ${file.name}`)\"\n\t\t\t:on-error=\"(_error, file) => (result = `上传失败 ${file.name}`)\"\n\t\t\t:on-remove=\"(file) => (result = `已移除 ${file.name}`)\"\n\t\t>\n\t\t\t<template #tip>选择图片后可手动提交；移除由异步 beforeRemove 判定。</template>\n\t\t\t<template v-if=\"custom\" #file=\"{ file, index }\">\n\t\t\t\t<div class=\"thumbnail\">\n\t\t\t\t\t<AsamImage v-if=\"file.url\" :src=\"file.url\" :alt=\"file.name\" />\n\t\t\t\t\t<span>{{ index }}：{{ file.name }} / {{ file.status }}</span>\n\t\t\t\t\t<AsamButton type=\"default\" :disabled=\"disabled\" @click=\"preview(file)\">\n\t\t\t\t\t\t预览 {{ file.name }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t@click=\"control?.handleRemove(file)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t移除 {{ file.name }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t\t<AsamButton type=\"default\" :disabled=\"disabled\" @click=\"control?.abort(file)\">\n\t\t\t\t\t\t取消 {{ file.name }}\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\">提交照片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"files.reverse()\">重排照片</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clearFiles(['success'])\"\n\t\t\t\t>清除成功照片</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<output>\n\t\t\t{{ result }}；{{ files.map((file) => file.name).join(',') }}；进度\n\t\t\t{{ progresses.join(',') }}；change 次数 {{ changes }}\n\t\t</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadGalleryExample' });\nimport { ref } from 'vue';\nimport {\n\tAsamImage,\n\tAsamSelect,\n\tAsamOption,\n\tAsamCheckboxItem,\n\tAsamUpload,\n\tAsamButton\n} from '@asam-ui/ui';\nconst control = ref();\nconst files = ref([]);\nconst listType = ref('picture-card');\nconst custom = ref(false);\nconst disabled = ref(false);\nconst allowRemoval = ref(false);\nconst result = ref('照片墙与受控重排');\nconst progresses = ref([]);\nconst changes = ref(0);\nconst upload = async (options) => {\n\toptions.onProgress(Object.assign(new ProgressEvent('progress'), { percent: 50 }));\n\tif (options.file.name.includes('fail')) throw new Error('本地失败演示');\n\treturn { local: true, name: options.file.name };\n};\nconst beforeUpload = (file) => {\n\tconst valid = file.type.startsWith('image/') && file.size <= 1024 * 1024;\n\tif (!valid) result.value = '只接受 1MB 以内图片';\n\treturn valid;\n};\nconst beforeRemove = async () => {\n\tawait new Promise((resolve) => setTimeout(resolve, 50));\n\tif (!allowRemoval.value) result.value = '移除被 beforeRemove 拒绝';\n\treturn allowRemoval.value;\n};\nconst preview = (file) => {\n\tresult.value = `预览 ${file.name}`;\n};\n</script>\n\n<style scoped>\n.control-field {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\n.thumbnail {\n\tdisplay: grid;\n\tgap: var(--asam-space-xs);\n}\n\n.thumbnail img {\n\twidth: 80px;\n\theight: 60px;\n\tobject-fit: contain;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "directory",
					"title": "目录选择与拖放相对路径",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/directory/ts/Demo.vue",
									"sha256": "b99c5fa4ce211f7a957752a92ddc1b97314697723d6bec70ca1dc9a0616eca0c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tv-model:file-list=\"files\"\n\t\t\tmode=\"native\"\n\t\t\tdirectory\n\t\t\tdrag\n\t\t\tmultiple\n\t\t\t:http-request=\"upload\"\n\t\t\t:on-change=\"change\"\n\t\t\t:on-success=\"(_response, file) => completed.push(file.name)\"\n\t\t>\n\t\t\t<template #default>拖入目录，或点击选择目录</template>\n\t\t\t<template #tip>\n\t\t\t\t目录展开为文件；相对路径直接来自 UploadRawFile.webkitRelativePath。\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<output>路径：{{ paths.join(' | ') }}；完成：{{ completed.join(',') }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadDirectoryExample' });\nimport { ref } from 'vue';\nimport { AsamUpload } from '@asam-ui/ui';\nimport type { AsamNativeUploadProps } from '@asam-ui/ui';\nconst files = ref<NonNullable<AsamNativeUploadProps['fileList']>>([]);\nconst paths = ref<string[]>([]);\nconst completed = ref<string[]>([]);\nconst change: NonNullable<AsamNativeUploadProps['onChange']> = (_file, list) => {\n\tpaths.value = list.map((file) => file.raw?.webkitRelativePath || file.name);\n};\nconst upload: NonNullable<AsamNativeUploadProps['httpRequest']> = async (options) => {\n\treturn { local: true, path: options.file.webkitRelativePath };\n};\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/directory/js/Demo.vue",
									"sha256": "5faaec3da506cc135ad188f84f0e1eb1868a72fd6bd9e8c666b6750ef1eb06ea",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tv-model:file-list=\"files\"\n\t\t\tmode=\"native\"\n\t\t\tdirectory\n\t\t\tdrag\n\t\t\tmultiple\n\t\t\t:http-request=\"upload\"\n\t\t\t:on-change=\"change\"\n\t\t\t:on-success=\"(_response, file) => completed.push(file.name)\"\n\t\t>\n\t\t\t<template #default>拖入目录，或点击选择目录</template>\n\t\t\t<template #tip>\n\t\t\t\t目录展开为文件；相对路径直接来自 UploadRawFile.webkitRelativePath。\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<output>路径：{{ paths.join(' | ') }}；完成：{{ completed.join(',') }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadDirectoryExample' });\nimport { ref } from 'vue';\nimport { AsamUpload } from '@asam-ui/ui';\nconst files = ref([]);\nconst paths = ref([]);\nconst completed = ref([]);\nconst change = (_file, list) => {\n\tpaths.value = list.map((file) => file.raw?.webkitRelativePath || file.name);\n};\nconst upload = async (options) => {\n\treturn { local: true, path: options.file.webkitRelativePath };\n};\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "hooks",
					"title": "限制覆盖、原生请求与手动提交",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/hooks/ts/Demo.vue",
									"sha256": "c7766641bcd7492e71570a8834ee08205815d0577e42658d872641438799f624",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-model:file-list=\"files\"\n\t\t\tmode=\"native\"\n\t\t\t:limit=\"1\"\n\t\t\t:auto-upload=\"false\"\n\t\t\t:http-request=\"upload\"\n\t\t\t:on-exceed=\"replace\"\n\t\t\taction=\"/local-demonstration\"\n\t\t\tmethod=\"put\"\n\t\t\t:headers=\"{ 'X-Demo': 'local' }\"\n\t\t\t:data=\"data\"\n\t\t\tname=\"attachment\"\n\t\t\twith-credentials\n\t\t\t:show-file-list=\"true\"\n\t\t\t:on-change=\"(file) => (result = `已选择 ${file.name}`)\"\n\t\t>\n\t\t\t<template #trigger><AsamButton type=\"default\">选择或替换文件</AsamButton></template>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\">手动发送</AsamButton>\n\t\t\t<template #tip>\n\t\t\t\t超过 limit 后先 clearFiles，再 handleStart；本地 handler 显示实际请求参数。\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<AsamButton type=\"default\" @click=\"control?.abort()\">abort 实例</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"control?.clearFiles()\">清空原始文件</AsamButton>\n\t\t<output>{{ result }}</output>\n\t\t<pre>{{ request }}</pre>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadHooksExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nimport type { AsamNativeUploadProps, AsamNativeUploadExpose } from '@asam-ui/ui';\nconst control = ref<AsamNativeUploadExpose>();\nconst files = ref<NonNullable<AsamNativeUploadProps['fileList']>>([]);\nconst result = ref('原生请求参数与覆盖前一个文件');\nconst request = ref('');\nlet uid = Date.now();\nconst replace: NonNullable<AsamNativeUploadProps['onExceed']> = (selected) => {\n\tconst file = selected[0];\n\tif (!file) return;\n\tcontrol.value?.clearFiles();\n\tcontrol.value?.handleStart(Object.assign(file, { uid: ++uid }));\n};\nconst data: NonNullable<AsamNativeUploadProps['data']> = async (file) => ({\n\tcategory: 'demo',\n\toriginal: file.name\n});\nconst upload: NonNullable<AsamNativeUploadProps['httpRequest']> = async (options) => {\n\trequest.value = JSON.stringify({\n\t\taction: options.action,\n\t\tmethod: options.method,\n\t\theaders: options.headers,\n\t\tdata: options.data,\n\t\tname: options.filename,\n\t\twithCredentials: options.withCredentials,\n\t\tfile: options.file.name\n\t});\n\tresult.value = '本地请求已完成';\n\treturn { local: true };\n};\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/hooks/js/Demo.vue",
									"sha256": "2a7cc524385766b9201c9c8771aced863fe59abc284c0b133a73026b32a333b7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-model:file-list=\"files\"\n\t\t\tmode=\"native\"\n\t\t\t:limit=\"1\"\n\t\t\t:auto-upload=\"false\"\n\t\t\t:http-request=\"upload\"\n\t\t\t:on-exceed=\"replace\"\n\t\t\taction=\"/local-demonstration\"\n\t\t\tmethod=\"put\"\n\t\t\t:headers=\"{ 'X-Demo': 'local' }\"\n\t\t\t:data=\"data\"\n\t\t\tname=\"attachment\"\n\t\t\twith-credentials\n\t\t\t:show-file-list=\"true\"\n\t\t\t:on-change=\"(file) => (result = `已选择 ${file.name}`)\"\n\t\t>\n\t\t\t<template #trigger><AsamButton type=\"default\">选择或替换文件</AsamButton></template>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\">手动发送</AsamButton>\n\t\t\t<template #tip>\n\t\t\t\t超过 limit 后先 clearFiles，再 handleStart；本地 handler 显示实际请求参数。\n\t\t\t</template>\n\t\t</AsamUpload>\n\t\t<AsamButton type=\"default\" @click=\"control?.abort()\">abort 实例</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"control?.clearFiles()\">清空原始文件</AsamButton>\n\t\t<output>{{ result }}</output>\n\t\t<pre>{{ request }}</pre>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadHooksExample' });\nimport { ref } from 'vue';\nimport { AsamUpload, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst files = ref([]);\nconst result = ref('原生请求参数与覆盖前一个文件');\nconst request = ref('');\nlet uid = Date.now();\nconst replace = (selected) => {\n\tconst file = selected[0];\n\tif (!file) return;\n\tcontrol.value?.clearFiles();\n\tcontrol.value?.handleStart(Object.assign(file, { uid: ++uid }));\n};\nconst data = async (file) => ({\n\tcategory: 'demo',\n\toriginal: file.name\n});\nconst upload = async (options) => {\n\trequest.value = JSON.stringify({\n\t\taction: options.action,\n\t\tmethod: options.method,\n\t\theaders: options.headers,\n\t\tdata: options.data,\n\t\tname: options.filename,\n\t\twithCredentials: options.withCredentials,\n\t\tfile: options.file.name\n\t});\n\tresult.value = '本地请求已完成';\n\treturn { local: true };\n};\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "request",
					"title": "资源 transport、转换、取消和回填",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/request/ts/Demo.vue",
									"sha256": "1f9a54f6e4b3a3a9ce7f438b40c6ca859e23dff2b09975bba978114a11dc1c3e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用资源操作</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"failure\"> transport 失败</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"invalid\"> transform 失败</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tmultiple\n\t\t\t:request=\"request\"\n\t\t\t:limit=\"2\"\n\t\t\t:auto-upload=\"false\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:max-size-bytes=\"1024\"\n\t\t\tfield-name=\"document\"\n\t\t\t:data=\"{ category: 'demo' }\"\n\t\t\t:validate=\"(file) => file.name.endsWith('.txt') || '只接受 TXT'\"\n\t\t\t@success=\"(_resource, item) => (event = `success:${item.name}`)\"\n\t\t\t@progress=\"(item) => (event = `progress:${item.percent}`)\"\n\t\t\t@error=\"(error) => (event = `${error.kind}:${error.message}`)\"\n\t\t\t@cancelled=\"(item) => (event = `cancelled:${item.name}`)\"\n\t\t\t@remove=\"(resource) => (event = `remove:${resource.name}`)\"\n\t\t>\n\t\t\t<template #tip>独立 provider，不影响页面中其他示例；最多两个资源。</template>\n\t\t</AsamUpload>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\">提交资源</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.cancel()\">取消资源请求</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clear()\">清空资源</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"runtime.setScope(String(++scope))\"\n\t\t\t\t>切换资源作用域</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" @click=\"fill\">外部回填</AsamButton>\n\t\t</div>\n\t\t<output>{{ event }}；请求：{{ input }}；资源：{{ JSON.stringify(value) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadRequestExample' });\nimport { onBeforeUnmount, provide, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamUpload,\n\tAsamButton,\n\tasamDataRuntimeKey,\n\tcreateAsamDataRuntime\n} from '@asam-ui/ui';\nimport type { AsamUploadedResource, AsamUploadExpose, AsamUploadRequestConfig } from '@asam-ui/ui';\nconst value = ref<AsamUploadedResource[]>([]);\nconst control = ref<AsamUploadExpose>();\nconst disabled = ref(false);\nconst failure = ref(false);\nconst invalid = ref(false);\nconst event = ref('尚未提交');\nconst input = ref('');\nconst scope = ref(0);\nconst runtime = createAsamDataRuntime();\nruntime.install({\n\tupload: async (config, payload, context) => {\n\t\tinput.value = `${config.method}:${config.url}:${payload.fieldName}:${payload.data?.category}`;\n\t\tcontext.reportProgress({ loaded: 0, total: payload.file.size });\n\t\tawait new Promise<void>((resolve, reject) => {\n\t\t\tconst timer = setTimeout(resolve, 150);\n\t\t\tcontext.signal.addEventListener(\n\t\t\t\t'abort',\n\t\t\t\t() => {\n\t\t\t\t\tclearTimeout(timer);\n\t\t\t\t\treject(new Error('cancelled'));\n\t\t\t\t},\n\t\t\t\t{ once: true }\n\t\t\t);\n\t\t});\n\t\tif (failure.value) throw new Error('本地 transport 失败');\n\t\tcontext.reportProgress({ loaded: payload.file.size, total: payload.file.size });\n\t\treturn invalid.value ? null : { key: payload.file.name };\n\t}\n});\nprovide(asamDataRuntimeKey, runtime);\nonBeforeUnmount(() => runtime.invalidate());\nconst request: AsamUploadRequestConfig = {\n\turl: '/local-resource',\n\tmethod: 'put',\n\tparams: { demo: true },\n\ttransform(response, { file }) {\n\t\tif (\n\t\t\t!response ||\n\t\t\ttypeof response !== 'object' ||\n\t\t\t!('key' in response) ||\n\t\t\ttypeof response.key !== 'string'\n\t\t)\n\t\t\tthrow new Error('响应缺少资源 key');\n\t\treturn {\n\t\t\tid: response.key,\n\t\t\tname: file.name,\n\t\t\turl: '/local/' + encodeURIComponent(file.name),\n\t\t\tmimeType: file.type || 'application/octet-stream',\n\t\t\tsize: file.size\n\t\t};\n\t}\n};\nfunction fill(): void {\n\tvalue.value = [\n\t\t{ id: 'seed', name: 'seed.txt', url: '/seed.txt', mimeType: 'text/plain', size: 4 }\n\t];\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/request/js/Demo.vue",
									"sha256": "bc9b55e92e8dda634e02ba07e02ac331d4696d65deeab83d1ff8658982ffacea",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"controls\">\n\t\t\t<AsamCheckboxItem v-model=\"disabled\"> 禁用资源操作</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"failure\"> transport 失败</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"invalid\"> transform 失败</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamUpload\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tmultiple\n\t\t\t:request=\"request\"\n\t\t\t:limit=\"2\"\n\t\t\t:auto-upload=\"false\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:max-size-bytes=\"1024\"\n\t\t\tfield-name=\"document\"\n\t\t\t:data=\"{ category: 'demo' }\"\n\t\t\t:validate=\"(file) => file.name.endsWith('.txt') || '只接受 TXT'\"\n\t\t\t@success=\"(_resource, item) => (event = `success:${item.name}`)\"\n\t\t\t@progress=\"(item) => (event = `progress:${item.percent}`)\"\n\t\t\t@error=\"(error) => (event = `${error.kind}:${error.message}`)\"\n\t\t\t@cancelled=\"(item) => (event = `cancelled:${item.name}`)\"\n\t\t\t@remove=\"(resource) => (event = `remove:${resource.name}`)\"\n\t\t>\n\t\t\t<template #tip>独立 provider，不影响页面中其他示例；最多两个资源。</template>\n\t\t</AsamUpload>\n\t\t<div class=\"controls\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.submit()\">提交资源</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.cancel()\">取消资源请求</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.clear()\">清空资源</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"runtime.setScope(String(++scope))\"\n\t\t\t\t>切换资源作用域</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" @click=\"fill\">外部回填</AsamButton>\n\t\t</div>\n\t\t<output>{{ event }}；请求：{{ input }}；资源：{{ JSON.stringify(value) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadRequestExample' });\nimport { onBeforeUnmount, provide, ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamUpload,\n\tAsamButton,\n\tasamDataRuntimeKey,\n\tcreateAsamDataRuntime\n} from '@asam-ui/ui';\nconst value = ref([]);\nconst control = ref();\nconst disabled = ref(false);\nconst failure = ref(false);\nconst invalid = ref(false);\nconst event = ref('尚未提交');\nconst input = ref('');\nconst scope = ref(0);\nconst runtime = createAsamDataRuntime();\nruntime.install({\n\tupload: async (config, payload, context) => {\n\t\tinput.value = `${config.method}:${config.url}:${payload.fieldName}:${payload.data?.category}`;\n\t\tcontext.reportProgress({ loaded: 0, total: payload.file.size });\n\t\tawait new Promise((resolve, reject) => {\n\t\t\tconst timer = setTimeout(resolve, 150);\n\t\t\tcontext.signal.addEventListener(\n\t\t\t\t'abort',\n\t\t\t\t() => {\n\t\t\t\t\tclearTimeout(timer);\n\t\t\t\t\treject(new Error('cancelled'));\n\t\t\t\t},\n\t\t\t\t{ once: true }\n\t\t\t);\n\t\t});\n\t\tif (failure.value) throw new Error('本地 transport 失败');\n\t\tcontext.reportProgress({ loaded: payload.file.size, total: payload.file.size });\n\t\treturn invalid.value ? null : { key: payload.file.name };\n\t}\n});\nprovide(asamDataRuntimeKey, runtime);\nonBeforeUnmount(() => runtime.invalidate());\nconst request = {\n\turl: '/local-resource',\n\tmethod: 'put',\n\tparams: { demo: true },\n\ttransform(response, { file }) {\n\t\tif (\n\t\t\t!response ||\n\t\t\ttypeof response !== 'object' ||\n\t\t\t!('key' in response) ||\n\t\t\ttypeof response.key !== 'string'\n\t\t)\n\t\t\tthrow new Error('响应缺少资源 key');\n\t\treturn {\n\t\t\tid: response.key,\n\t\t\tname: file.name,\n\t\t\turl: '/local/' + encodeURIComponent(file.name),\n\t\t\tmimeType: file.type || 'application/octet-stream',\n\t\t\tsize: file.size\n\t\t};\n\t}\n};\nfunction fill() {\n\tvalue.value = [\n\t\t{ id: 'seed', name: 'seed.txt', url: '/seed.txt', mimeType: 'text/plain', size: 4 }\n\t];\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "avatar",
					"title": "头像替换、类型大小校验与对象 URL 回收",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/avatar/ts/Demo.vue",
									"sha256": "3843a8c5eb97c7a8d20422b10e3322a3ad5676444228fda1c0ad6d20194c4da5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<Avatar v-if=\"mounted\" @notice=\"notice = $event\" />\n\t\t<AsamButton type=\"default\" @click=\"mounted = !mounted\">\n\t\t\t{{ mounted ? '卸载头像控件' : '重新挂载头像控件' }}\n\t\t</AsamButton>\n\t\t<output aria-live=\"polite\">{{ notice }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadAvatarExample' });\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport Avatar from './Avatar.vue';\nconst mounted = ref(true);\nconst notice = ref('选择 JPG 头像；演示使用本地请求，不发送网络数据。');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tjustify-items: start;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "Avatar.vue",
									"sourcePath": "apps/website/examples/AsamUpload/avatar/ts/Avatar.vue",
									"sha256": "dbf03d849f400c7ce18cb54af514e5e75b509084e1d6425836a345f884ffa0e5",
									"source": "<template>\n\t<div class=\"avatar-example\">\n\t\t<AsamUpload\n\t\t\tref=\"uploadRef\"\n\t\t\tmode=\"native\"\n\t\t\t:show-file-list=\"false\"\n\t\t\taccept=\"image/jpeg\"\n\t\t\t:http-request=\"upload\"\n\t\t\t:before-upload=\"beforeUpload\"\n\t\t\t:on-success=\"onSuccess\"\n\t\t>\n\t\t\t<div class=\"avatar-frame\">\n\t\t\t\t<template v-if=\"imageUrl\">\n\t\t\t\t\t<AsamImage :src=\"imageUrl\" alt=\"当前头像\" class=\"avatar-image\" />\n\t\t\t\t</template>\n\t\t\t\t<span v-else>选择 JPG 头像</span>\n\t\t\t</div>\n\t\t</AsamUpload>\n\t\t<p class=\"example-paragraph\">只接受 JPG，大小不超过 2 MiB。成功后替换头像，拒绝的文件保留原头像。</p>\n\t\t<output aria-live=\"polite\" data-avatar-result>\n\t\t\t{{ result }}；本地请求 {{ requests }}；成功 {{ successes }}\n\t\t</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamUploadAvatarControlExample' });\nimport { onBeforeUnmount, ref } from 'vue';\nimport { AsamImage, AsamUpload } from '@asam-ui/ui';\nimport type { AsamNativeUploadExpose, AsamNativeUploadProps } from '@asam-ui/ui';\nconst emit = defineEmits({ notice: (message: string) => typeof message === 'string' });\nconst uploadRef = ref<AsamNativeUploadExpose>();\nconst imageUrl = ref('');\nconst result = ref('尚未选择头像');\nconst requests = ref(0);\nconst successes = ref(0);\nlet alive = true;\nfunction notice(message: string): void {\n\tresult.value = message;\n\temit('notice', message);\n}\nconst beforeUpload: NonNullable<AsamNativeUploadProps['beforeUpload']> = (file) => {\n\tif (file.type !== 'image/jpeg') {\n\t\tnotice('拒绝：只接受 JPG');\n\t\treturn false;\n\t}\n\tif (file.size > 2 * 1024 * 1024) {\n\t\tnotice('拒绝：文件超过 2 MiB');\n\t\treturn false;\n\t}\n\treturn true;\n};\nconst upload: NonNullable<AsamNativeUploadProps['httpRequest']> = async () => {\n\trequests.value++;\n\tnotice('本地上传中');\n\tawait new Promise((resolve) => setTimeout(resolve, 150));\n\treturn { local: true };\n};\nconst onSuccess: NonNullable<AsamNativeUploadProps['onSuccess']> = (_response, file) => {\n\tif (!alive || !file.raw) return;\n\tconst nextUrl = URL.createObjectURL(file.raw);\n\tif (imageUrl.value) URL.revokeObjectURL(imageUrl.value);\n\timageUrl.value = nextUrl;\n\tsuccesses.value++;\n\tnotice(`头像已更新：${file.name}`);\n\tuploadRef.value?.clearFiles();\n};\nonBeforeUnmount(() => {\n\talive = false;\n\tuploadRef.value?.abort();\n\tif (imageUrl.value) URL.revokeObjectURL(imageUrl.value);\n\timageUrl.value = '';\n});\n</script>\n\n<style scoped>\n.avatar-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.avatar-frame {\n\tdisplay: grid;\n\twidth: 160px;\n\theight: 160px;\n\tplace-items: center;\n\toverflow: hidden;\n\tcolor: var(--asam-color-text-secondary);\n\tborder: 1px dashed var(--asam-color-border);\n\tborder-radius: var(--asam-radius-md);\n}\n\n.avatar-image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamUpload/avatar/js/Demo.vue",
									"sha256": "f22634773f6bd53439b31088954d38fa64a4f1c84dcc0b56ab4188f528f782ad",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<Avatar v-if=\"mounted\" @notice=\"notice = $event\" />\n\t\t<AsamButton type=\"default\" @click=\"mounted = !mounted\">\n\t\t\t{{ mounted ? '卸载头像控件' : '重新挂载头像控件' }}\n\t\t</AsamButton>\n\t\t<output aria-live=\"polite\">{{ notice }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadAvatarExample' });\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport Avatar from './Avatar.vue';\nconst mounted = ref(true);\nconst notice = ref('选择 JPG 头像；演示使用本地请求，不发送网络数据。');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tjustify-items: start;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "Avatar.vue",
									"sourcePath": "apps/website/examples/AsamUpload/avatar/js/Avatar.vue",
									"sha256": "51b222339bd7ac5a78e853028dc73cb8a6f18158c9c5022812464c02259840e1",
									"source": "<template>\n\t<div class=\"avatar-example\">\n\t\t<AsamUpload\n\t\t\tref=\"uploadRef\"\n\t\t\tmode=\"native\"\n\t\t\t:show-file-list=\"false\"\n\t\t\taccept=\"image/jpeg\"\n\t\t\t:http-request=\"upload\"\n\t\t\t:before-upload=\"beforeUpload\"\n\t\t\t:on-success=\"onSuccess\"\n\t\t>\n\t\t\t<div class=\"avatar-frame\">\n\t\t\t\t<template v-if=\"imageUrl\">\n\t\t\t\t\t<AsamImage :src=\"imageUrl\" alt=\"当前头像\" class=\"avatar-image\" />\n\t\t\t\t</template>\n\t\t\t\t<span v-else>选择 JPG 头像</span>\n\t\t\t</div>\n\t\t</AsamUpload>\n\t\t<p class=\"example-paragraph\">只接受 JPG，大小不超过 2 MiB。成功后替换头像，拒绝的文件保留原头像。</p>\n\t\t<output aria-live=\"polite\" data-avatar-result>\n\t\t\t{{ result }}；本地请求 {{ requests }}；成功 {{ successes }}\n\t\t</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamUploadAvatarControlExample' });\nimport { onBeforeUnmount, ref } from 'vue';\nimport { AsamImage, AsamUpload } from '@asam-ui/ui';\nconst emit = defineEmits({ notice: (message) => typeof message === 'string' });\nconst uploadRef = ref();\nconst imageUrl = ref('');\nconst result = ref('尚未选择头像');\nconst requests = ref(0);\nconst successes = ref(0);\nlet alive = true;\nfunction notice(message) {\n\tresult.value = message;\n\temit('notice', message);\n}\nconst beforeUpload = (file) => {\n\tif (file.type !== 'image/jpeg') {\n\t\tnotice('拒绝：只接受 JPG');\n\t\treturn false;\n\t}\n\tif (file.size > 2 * 1024 * 1024) {\n\t\tnotice('拒绝：文件超过 2 MiB');\n\t\treturn false;\n\t}\n\treturn true;\n};\nconst upload = async () => {\n\trequests.value++;\n\tnotice('本地上传中');\n\tawait new Promise((resolve) => setTimeout(resolve, 150));\n\treturn { local: true };\n};\nconst onSuccess = (_response, file) => {\n\tif (!alive || !file.raw) return;\n\tconst nextUrl = URL.createObjectURL(file.raw);\n\tif (imageUrl.value) URL.revokeObjectURL(imageUrl.value);\n\timageUrl.value = nextUrl;\n\tsuccesses.value++;\n\tnotice(`头像已更新：${file.name}`);\n\tuploadRef.value?.clearFiles();\n};\nonBeforeUnmount(() => {\n\talive = false;\n\tuploadRef.value?.abort();\n\tif (imageUrl.value) URL.revokeObjectURL(imageUrl.value);\n\timageUrl.value = '';\n});\n</script>\n\n<style scoped>\n.avatar-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n\n.avatar-frame {\n\tdisplay: grid;\n\twidth: 160px;\n\theight: 160px;\n\tplace-items: center;\n\toverflow: hidden;\n\tcolor: var(--asam-color-text-secondary);\n\tborder: 1px dashed var(--asam-color-border);\n\tborder-radius: var(--asam-radius-md);\n}\n\n.avatar-image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSelect",
			"documentation": "/component-AsamSelect.html",
			"demos": [
				{
					"id": "basic",
					"title": "单选、筛选与事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/basic/ts/Demo.vue",
									"sha256": "a1feb287abcc65cb2bf181b5aee7ed3ce1917aac5e532205261140014c714b05",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ clearable: true, filterable: true, 'aria-label': '团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = 'change: ' + String($event)\"\n\t\t\t@clear=\"event = 'clear'\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t\t<AsamSelect :model-value=\"value\" :options=\"options\" disabled aria-label=\"禁用选择\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamSelectExpose } from '@asam-ui/ui';\nconst control = ref<AsamSelectExpose>();\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/basic/js/Demo.vue",
									"sha256": "1275b3e7a8a43ff68a44909ebd162cc8e1dc0be4ae1f01e9be9749f9460324e3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ clearable: true, filterable: true, 'aria-label': '团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = 'change: ' + String($event)\"\n\t\t\t@clear=\"event = 'clear'\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t\t<AsamSelect :model-value=\"value\" :options=\"options\" disabled aria-label=\"禁用选择\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref('design');\nconst event = ref('尚未更改');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "对象、数组与字符串存储",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/policies/ts/Demo.vue",
									"sha256": "3c986391da8a5621ab456998bf7e5a6c70344706cb89e9409e780be84bed1b2c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tv-model=\"arrayValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'collapse-tags': true,\n\t\t\t\t'collapse-tags-tooltip': true,\n\t\t\t\t'aria-label': '数组选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'multiple-value-mode': 'string',\n\t\t\t\tseparator: '|',\n\t\t\t\t'aria-label': '字符串选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tv-model=\"limitedValue\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\t:multiple-limit=\"1\"\n\t\t\taria-label=\"最多一项\"\n\t\t/>\n\t\t<output data-object>{{ JSON.stringify(objectValue) }}</output>\n\t\t<output data-array>{{ JSON.stringify(arrayValue) }}</output>\n\t\t<output data-string>{{ stringValue }}</output>\n\t\t<output data-limited>{{ JSON.stringify(limitedValue) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamSelect } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref<(typeof options)[number] | null>(options[0]);\nconst arrayValue = ref<string[]>(['design']);\nconst stringValue = ref('design');\nconst limitedValue = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/policies/js/Demo.vue",
									"sha256": "44644b6db7f0ddc81339c0a6c2af00eedde5de0c167bdaeca0830a6bb167bb74",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tv-model=\"arrayValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'collapse-tags': true,\n\t\t\t\t'collapse-tags-tooltip': true,\n\t\t\t\t'aria-label': '数组选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'multiple-value-mode': 'string',\n\t\t\t\tseparator: '|',\n\t\t\t\t'aria-label': '字符串选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tv-model=\"limitedValue\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\t:multiple-limit=\"1\"\n\t\t\taria-label=\"最多一项\"\n\t\t/>\n\t\t<output data-object>{{ JSON.stringify(objectValue) }}</output>\n\t\t<output data-array>{{ JSON.stringify(arrayValue) }}</output>\n\t\t<output data-string>{{ stringValue }}</output>\n\t\t<output data-limited>{{ JSON.stringify(limitedValue) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamSelect } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref(options[0]);\nconst arrayValue = ref(['design']);\nconst stringValue = ref('design');\nconst limitedValue = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "分组、原始值与插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/slots/ts/Demo.vue",
									"sha256": "1e084aa71455b26d44549954e2ad1bee0d213ef557713b51f80b122990490961",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tfilterable: true,\n\t\t\t\tclearable: true,\n\t\t\t\t'aria-label': '分组选择'\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t</AsamOptionGroup>\n\t\t\t<AsamOptionGroup label=\"停用\" disabled>\n\t\t\t\t<AsamOption label=\"不可用\" value=\"off\" />\n\t\t\t</AsamOptionGroup>\n\t\t\t<template #prefix> 团队 </template>\n\t\t\t<template #header> 选择所属团队 </template>\n\t\t\t<template #footer> 本地选项 </template>\n\t\t\t<template #label=\"{ label }\"> 已选 {{ label }} </template>\n\t\t\t<template #empty> 无匹配项 </template>\n\t\t</AsamSelect>\n\t\t<output>值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nconst value = ref<string | null>('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/slots/js/Demo.vue",
									"sha256": "dab0f7e9294494a5415e178e8fc5c63a486d10eadd4e027ffd52c5a1ffc36858",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tfilterable: true,\n\t\t\t\tclearable: true,\n\t\t\t\t'aria-label': '分组选择'\n\t\t\t}\"\n\t\t>\n\t\t\t<AsamOptionGroup label=\"团队\">\n\t\t\t\t<AsamOption label=\"设计\" value=\"design\" />\n\t\t\t\t<AsamOption label=\"开发\" value=\"dev\" />\n\t\t\t</AsamOptionGroup>\n\t\t\t<AsamOptionGroup label=\"停用\" disabled>\n\t\t\t\t<AsamOption label=\"不可用\" value=\"off\" />\n\t\t\t</AsamOptionGroup>\n\t\t\t<template #prefix> 团队 </template>\n\t\t\t<template #header> 选择所属团队 </template>\n\t\t\t<template #footer> 本地选项 </template>\n\t\t\t<template #label=\"{ label }\"> 已选 {{ label }} </template>\n\t\t\t<template #empty> 无匹配项 </template>\n\t\t</AsamSelect>\n\t\t<output>值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectSlotsExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nconst value = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/sizes/ts/Demo.vue",
									"sha256": "810e01a9b3dec6a8b910c50cc7662a6c901afba6d5aac8eec584b6ea01e3e684",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelect model-value=\"design\" :options=\"options\" aria-label=\"尺寸选择\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/sizes/js/Demo.vue",
									"sha256": "0b8b02fce885f438a33a8e1226bdd8e1e4eec9cd80b5f375f354567f2c0fd9f0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelect\n\t\t\t\t\tv-bind=\"{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelect model-value=\"design\" :options=\"options\" aria-label=\"尺寸选择\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "create",
					"title": "普通记录与自定义实体创建",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/create/ts/Demo.vue",
									"sha256": "219be8544105128cec5bb8961953b643d361377ca21de16d7db34e829632df77",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"record\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"[]\"\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入文本，创建普通记录\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tref=\"custom\"\n\t\t\tv-model=\"people\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:create-option=\"createPerson\"\n\t\t\tplaceholder=\"输入编号，创建完整实体\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"record = filled\">回填普通记录</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"custom?.clearCreatedOptions()\"\n\t\t\t>重置本地创建集合（保留模型）</AsamButton\n\t\t>\n\t\t<output>普通记录：{{ record }}；实体：{{ people }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamOption, AsamRecord, AsamCreateOption, AsamSelectExpose } from '@asam-ui/ui';\ninterface Person {\n\tid: number;\n\tname: string;\n}\nconst record = ref<AsamOption<string, AsamRecord> | null>(null);\nconst people = ref<AsamOption<number, Person>[]>([]);\nconst custom = ref<AsamSelectExpose>();\nconst filled: AsamOption<string, AsamRecord> = {\n\tvalue: 'filled',\n\tlabel: '已回填',\n\traw: { value: 'filled', label: '已回填' }\n};\nconst options: AsamOption<number, Person>[] = [\n\t{ value: 7, label: '已有实体 7', raw: { id: 7, name: '已有实体 7' } }\n];\nconst createPerson: AsamCreateOption<number, Person> = (text) => {\n\tconst id = Number(text);\n\tif (!Number.isFinite(id)) throw new TypeError('请输入有限数字编号');\n\treturn { value: id, label: `实体 ${id}`, raw: { id, name: text } };\n};\ndefineOptions({ name: 'AsamSelectCreateDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/create/js/Demo.vue",
									"sha256": "40c99089543cee1b68ad694f480c68070c7cd934eed0decea5bd5b75920f95db",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"record\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"[]\"\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入文本，创建普通记录\"\n\t\t/>\n\t\t<AsamSelect\n\t\t\tref=\"custom\"\n\t\t\tv-model=\"people\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:create-option=\"createPerson\"\n\t\t\tplaceholder=\"输入编号，创建完整实体\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"record = filled\">回填普通记录</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"custom?.clearCreatedOptions()\"\n\t\t\t>重置本地创建集合（保留模型）</AsamButton\n\t\t>\n\t\t<output>普通记录：{{ record }}；实体：{{ people }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelect, AsamButton } from '@asam-ui/ui';\nconst record = ref(null);\nconst people = ref([]);\nconst custom = ref();\nconst filled = { value: 'filled', label: '已回填', raw: { value: 'filled', label: '已回填' } };\nconst options = [{ value: 7, label: '已有实体 7', raw: { id: 7, name: '已有实体 7' } }];\nconst createPerson = (text) => {\n\tconst id = Number(text);\n\tif (!Number.isFinite(id)) throw new TypeError('请输入有限数字编号');\n\treturn { value: id, label: `实体 ${id}`, raw: { id, name: text } };\n};\ndefineOptions({ name: 'AsamSelectCreateDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "custom",
					"title": "自定义标签、加载与清空策略",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/custom/ts/Demo.vue",
									"sha256": "c4ab63b360f5afa3b6c81655156bb974b0d21e1938363d9e9a4e7b15234b01b9",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"2\"\n\t\t\t:tag-tooltip=\"{ placement: 'bottom', showAfter: 100 }\"\n\t\t\t:multiple-limit=\"3\"\n\t\t\t:loading=\"loading\"\n\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t:value-on-clear=\"null\"\n\t\t\t:fit-input-width=\"false\"\n\t\t\tpopper-class=\"custom-choice-popup\"\n\t\t\taria-label=\"自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"(item, index) in data\"\n\t\t\t\t\t:key=\"index\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, item)\"\n\t\t\t\t>\n\t\t\t\t\t移除 {{ selected[index] }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t\t<template #label=\"{ label, index }\">{{ index + 1 }} · {{ label }}</template>\n\t\t\t<template #loading>正在准备静态数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelect>\n\t\t<AsamCheckboxItem v-model=\"loading\">切换加载状态</AsamCheckboxItem>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelect, AsamCheckboxItem } from '@asam-ui/ui';\nconst selected = ref<string[]>(['design', 'dev']);\nconst loading = ref(false);\nconst options = ['design', 'dev', 'ops', 'test'].map((value) => ({\n\tvalue,\n\tlabel: value,\n\traw: { value }\n}));\ndefineOptions({ name: 'AsamSelectCustomDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/custom/js/Demo.vue",
									"sha256": "c078243cd26cc7ca0bec50a26500bb76b08f1907fa4f50c8097d6b0fef148958",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"2\"\n\t\t\t:tag-tooltip=\"{ placement: 'bottom', showAfter: 100 }\"\n\t\t\t:multiple-limit=\"3\"\n\t\t\t:loading=\"loading\"\n\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t:value-on-clear=\"null\"\n\t\t\t:fit-input-width=\"false\"\n\t\t\tpopper-class=\"custom-choice-popup\"\n\t\t\taria-label=\"自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"(item, index) in data\"\n\t\t\t\t\t:key=\"index\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, item)\"\n\t\t\t\t>\n\t\t\t\t\t移除 {{ selected[index] }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t\t<template #label=\"{ label, index }\">{{ index + 1 }} · {{ label }}</template>\n\t\t\t<template #loading>正在准备静态数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelect>\n\t\t<AsamCheckboxItem v-model=\"loading\">切换加载状态</AsamCheckboxItem>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelect, AsamCheckboxItem } from '@asam-ui/ui';\nconst selected = ref(['design', 'dev']);\nconst loading = ref(false);\nconst options = ['design', 'dev', 'ops', 'test'].map((value) => ({\n\tvalue,\n\tlabel: value,\n\traw: { value }\n}));\ndefineOptions({ name: 'AsamSelectCustomDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "search",
					"title": "异步回调与查询竞态示范",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/search/ts/Demo.vue",
									"sha256": "8cde006a479801963bb4cf5dbbf144d0c00e44177e127171328b2997ea3d5270",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t\tremote\n\t\t\tremote-show-suffix\n\t\t\t:remote-method=\"search\"\n\t\t\t:debounce=\"0\"\n\t\t\t:loading=\"loading\"\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tclearable\n\t\t\taria-label=\"异步筛选演示\"\n\t\t>\n\t\t\t<template #loading>正在筛选本地模拟数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelect>\n\t\t<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelect } from '@asam-ui/ui';\nimport type { AsamOption } from '@asam-ui/ui';\nconst value = ref<string | null>(null);\nconst query = ref('');\nconst loading = ref(false);\nconst source = ['设计', '开发', '测试'].map((value) => ({ value, label: value, raw: { value } }));\nconst options = ref<AsamOption<string>[]>(source);\nlet generation = 0;\nasync function search(text: string) {\n\tquery.value = text;\n\tconst ownGeneration = ++generation;\n\tloading.value = true;\n\tawait new Promise((resolve) => setTimeout(resolve, 180));\n\tif (ownGeneration !== generation) return;\n\toptions.value = source.filter((option) => option.label.includes(text));\n\tloading.value = false;\n}\ndefineOptions({ name: 'AsamSelectSearchDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/search/js/Demo.vue",
									"sha256": "6fb847489678aaa52c6b27b889b345a4aa05b124b41e391d9f8ba2120a4ca452",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t\tremote\n\t\t\tremote-show-suffix\n\t\t\t:remote-method=\"search\"\n\t\t\t:debounce=\"0\"\n\t\t\t:loading=\"loading\"\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tclearable\n\t\t\taria-label=\"异步筛选演示\"\n\t\t>\n\t\t\t<template #loading>正在筛选本地模拟数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelect>\n\t\t<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelect } from '@asam-ui/ui';\nconst value = ref(null);\nconst query = ref('');\nconst loading = ref(false);\nconst source = ['设计', '开发', '测试'].map((value) => ({ value, label: value, raw: { value } }));\nconst options = ref(source);\nlet generation = 0;\nasync function search(text) {\n\tquery.value = text;\n\tconst ownGeneration = ++generation;\n\tloading.value = true;\n\tawait new Promise((resolve) => setTimeout(resolve, 180));\n\tif (ownGeneration !== generation) return;\n\toptions.value = source.filter((option) => option.label.includes(text));\n\tloading.value = false;\n}\ndefineOptions({ name: 'AsamSelectSearchDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原始 options 字段映射与分组",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/native/ts/Demo.vue",
									"sha256": "be1417a350aafb1ab471f80ed818db558fa26499391169255f95f577ad4ad8b2",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:persistent=\"persistent\"\n\t\t>\n\t\t\t<template #prefix>团队</template>\n\t\t\t<template #header>原始字段映射与分组</template>\n\t\t\t<template #footer>每项身份取 code</template>\n\t\t\t<template #label=\"{ label }\">已选 {{ label }}</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelect>\n\t\t<AsamCheckboxItem v-model=\"persistent\">保留列表 DOM</AsamCheckboxItem>\n\t\t<AsamButton type=\"default\" @click=\"options[0].members[0].title = '设计新名称'\"\n\t\t\t>关闭时更新设计名称</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" @click=\"selectedLabel = String(control?.selectedLabel)\"\n\t\t\t>读取实例标签</AsamButton\n\t\t>\n\t\t<output>原始值：{{ value }}</output>\n\t\t<output>实例标签：{{ selectedLabel }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelect, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';\nimport type { AsamSelectExpose } from '@asam-ui/ui';\nconst control = ref<AsamSelectExpose>();\nconst value = ref<string | null>('design');\nconst persistent = ref(false);\nconst selectedLabel = ref('尚未读取');\n// Stable group identities also avoid the fixed native top-level duplicate check.\nconst options = ref([\n\t{\n\t\tcode: 'group-available',\n\t\ttitle: '可用团队',\n\t\tmembers: [\n\t\t\t{ code: 'design', title: '设计' },\n\t\t\t{ code: 'develop', title: '开发' }\n\t\t]\n\t},\n\t{\n\t\tcode: 'group-disabled',\n\t\ttitle: '停用团队',\n\t\tmembers: [{ code: 'off', title: '停用', inactive: true }]\n\t}\n]);\ndefineOptions({ name: 'AsamSelectNativeDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/native/js/Demo.vue",
									"sha256": "81bbbdb112faaaf8d672bb4e12aaeb957e5306b28c20f7730c6f8225243adad1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:persistent=\"persistent\"\n\t\t>\n\t\t\t<template #prefix>团队</template>\n\t\t\t<template #header>原始字段映射与分组</template>\n\t\t\t<template #footer>每项身份取 code</template>\n\t\t\t<template #label=\"{ label }\">已选 {{ label }}</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelect>\n\t\t<AsamCheckboxItem v-model=\"persistent\">保留列表 DOM</AsamCheckboxItem>\n\t\t<AsamButton type=\"default\" @click=\"options[0].members[0].title = '设计新名称'\"\n\t\t\t>关闭时更新设计名称</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" @click=\"selectedLabel = String(control?.selectedLabel)\"\n\t\t\t>读取实例标签</AsamButton\n\t\t>\n\t\t<output>原始值：{{ value }}</output>\n\t\t<output>实例标签：{{ selectedLabel }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelect, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref('design');\nconst persistent = ref(false);\nconst selectedLabel = ref('尚未读取');\n// Stable group identities also avoid the fixed native top-level duplicate check.\nconst options = ref([\n\t{\n\t\tcode: 'group-available',\n\t\ttitle: '可用团队',\n\t\tmembers: [\n\t\t\t{ code: 'design', title: '设计' },\n\t\t\t{ code: 'develop', title: '开发' }\n\t\t]\n\t},\n\t{\n\t\tcode: 'group-disabled',\n\t\ttitle: '停用团队',\n\t\tmembers: [{ code: 'off', title: '停用', inactive: true }]\n\t}\n]);\ndefineOptions({ name: 'AsamSelectNativeDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "display",
					"title": "空字符串、清空与默认折叠标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/display/ts/Demo.vue",
									"sha256": "840b49aa7cc2c81d892019e05100ccdcc9e49fac8a63ebb5d4a0713537d2cced",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section class=\"demo-layout-1\" data-case=\"empty\">\n\t\t\t<AsamSelect\n\t\t\t\tv-model=\"emptyValue\"\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t:options=\"emptyOptions\"\n\t\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t\t:value-on-clear=\"null\"\n\t\t\t\tclearable\n\t\t\t\taria-label=\"空字符串也是有效选项\"\n\t\t\t\t@clear=\"clearCount++\"\n\t\t\t/>\n\t\t\t<output>空值：{{ JSON.stringify(emptyValue) }}；清空次数：{{ clearCount }}</output>\n\t\t</section>\n\t\t<section data-case=\"explicit-tooltip\">\n\t\t\t<AsamSelect\n\t\t\t\tv-model=\"explicit\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"1\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{\n\t\t\t\t\tpopperClass: 'explicit-choice-tooltip',\n\t\t\t\t\teffect: 'light',\n\t\t\t\t\tplacement: 'top',\n\t\t\t\t\tshowAfter: 0\n\t\t\t\t}\"\n\t\t\t\taria-label=\"显式折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t\t<section data-case=\"inherited-tooltip\">\n\t\t\t<AsamSelect\n\t\t\t\tv-model=\"inherited\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"2\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{ showAfter: 0 }\"\n\t\t\t\taria-label=\"继承折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelect } from '@asam-ui/ui';\nconst emptyValue = ref<string | null>('');\nconst clearCount = ref(0);\nconst emptyOptions = [\n\t{ label: '全部', value: '' },\n\t{ label: '设计', value: 'design' }\n];\nconst options = ['design', 'develop', 'ops', 'test'].map((value) => ({\n\tlabel: value,\n\tvalue,\n\traw: { value }\n}));\nconst explicit = ref<string[]>(options.map((option) => option.value));\nconst inherited = ref<string[]>(options.map((option) => option.value));\ndefineOptions({ name: 'AsamSelectDisplayDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\nsection {\n\twidth: min(100%, 360px);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/display/js/Demo.vue",
									"sha256": "c37b408b10c41d538cd1b656a68fd2cb56c8cc529b0c16892059a52f3e5a4930",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section class=\"demo-layout-1\" data-case=\"empty\">\n\t\t\t<AsamSelect\n\t\t\t\tv-model=\"emptyValue\"\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t:options=\"emptyOptions\"\n\t\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t\t:value-on-clear=\"null\"\n\t\t\t\tclearable\n\t\t\t\taria-label=\"空字符串也是有效选项\"\n\t\t\t\t@clear=\"clearCount++\"\n\t\t\t/>\n\t\t\t<output>空值：{{ JSON.stringify(emptyValue) }}；清空次数：{{ clearCount }}</output>\n\t\t</section>\n\t\t<section data-case=\"explicit-tooltip\">\n\t\t\t<AsamSelect\n\t\t\t\tv-model=\"explicit\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"1\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{\n\t\t\t\t\tpopperClass: 'explicit-choice-tooltip',\n\t\t\t\t\teffect: 'light',\n\t\t\t\t\tplacement: 'top',\n\t\t\t\t\tshowAfter: 0\n\t\t\t\t}\"\n\t\t\t\taria-label=\"显式折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t\t<section data-case=\"inherited-tooltip\">\n\t\t\t<AsamSelect\n\t\t\t\tv-model=\"inherited\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"2\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{ showAfter: 0 }\"\n\t\t\t\taria-label=\"继承折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelect } from '@asam-ui/ui';\nconst emptyValue = ref('');\nconst clearCount = ref(0);\nconst emptyOptions = [\n\t{ label: '全部', value: '' },\n\t{ label: '设计', value: 'design' }\n];\nconst options = ['design', 'develop', 'ops', 'test'].map((value) => ({\n\tlabel: value,\n\tvalue,\n\traw: { value }\n}));\nconst explicit = ref(options.map((option) => option.value));\nconst inherited = ref(options.map((option) => option.value));\ndefineOptions({ name: 'AsamSelectDisplayDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\nsection {\n\twidth: min(100%, 360px);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-tag",
					"title": "原生标签项与删除回调",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/native-tag/ts/Demo.vue",
									"sha256": "e71aacaae64a418169786f56d93c2d67306ad0d3d1a0dcc4c05d9f93ce641bca",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSelect\n\t\t\tv-model=\"selected\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tmultiple\n\t\t\t:options=\"options\"\n\t\t\t:teleported=\"false\"\n\t\t\taria-label=\"经典自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"option in data\"\n\t\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled || option.isDisabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.currentLabel }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamSelect>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamSelectNativeTagExample' });\nconst selected = ref(['a']);\nconst options = [\n\t{ value: 'a', label: 'Alpha' },\n\t{ value: 'b', label: 'Beta', disabled: true }\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelect/native-tag/js/Demo.vue",
									"sha256": "5ba912d619e0ba928023937ff73bf885515d5cd5b8773543c5946d4d04a210c6",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSelect\n\t\t\tv-model=\"selected\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tmultiple\n\t\t\t:options=\"options\"\n\t\t\t:teleported=\"false\"\n\t\t\taria-label=\"经典自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"option in data\"\n\t\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled || option.isDisabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.currentLabel }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamSelect>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamSelectNativeTagExample' });\nconst selected = ref(['a']);\nconst options = [\n\t{ value: 'a', label: 'Alpha' },\n\t{ value: 'b', label: 'Beta', disabled: true }\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteSelect",
			"documentation": "/component-AsamRemoteSelect.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/basic/ts/Demo.vue",
									"sha256": "15ef82c257be049d67e5349a3d1da4a32bafbba1a03abcc21a1f7320d990290f",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamRemoteSelect\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelect>\n\t\t<AsamRemoteSelect\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelect>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readSelectedLabel\"\n\t\t\t\t>读取当前标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t\t>聚焦选择器</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@mousedown.prevent\n\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t>失焦选择器</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamRemoteSelectBasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose, AsamApiRequest } from '@asam-ui/ui';\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref<string[]>([]);\nconst control = ref<AsamAsyncSelectExpose<string, Item>>();\nconst selectedLabel = ref<string | string[]>('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/basic/js/Demo.vue",
									"sha256": "0cacdfab13754d52e3878233fc4d75c87c8d22fb1500786dc282e11611db668e",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamRemoteSelect\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelect>\n\t\t<AsamRemoteSelect\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelect>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readSelectedLabel\"\n\t\t\t\t>读取当前标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t\t>聚焦选择器</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@mousedown.prevent\n\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t>失焦选择器</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamRemoteSelectBasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';\nconst value = ref(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref([]);\nconst control = ref();\nconst selectedLabel = ref('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-creation",
					"title": "本地创建、规范项与来源重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-creation/ts/Demo.vue",
									"sha256": "fb911573127cefa27d602df4afffdc8c5200792818c8122ae2600aca2b9dda75",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:api=\"api\"\n\t\t\t:params=\"{ tenant, text: '' }\"\n\t\t\t:transform=\"transform\"\n\t\t\t:search=\"search\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamRemoteSelect>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelect } from '@asam-ui/ui';\nimport type {\n\tAsamOption,\n\tAsamCreateOption,\n\tAsamValue,\n\tAsamAsyncSelectExpose,\n\tAsamApiRequest\n} from '@asam-ui/ui';\ninterface Member {\n\tid: string;\n\tlabel: string;\n\tvalue: string;\n}\ninterface Query {\n\ttenant: string;\n\ttext: string;\n}\nconst tenant = ref('a');\nconst failure = ref(false);\nconst canonical = ref(false);\ndefineOptions({ name: 'AsamRemoteSelectLocalCreationDemo' });\nconst value = ref<AsamOption<string, Member> | null>(null);\nconst control = ref<AsamAsyncSelectExpose<string, Member>>();\nconst createdTexts = ref<string[]>([]);\nconst providerValues = ref<AsamValue[]>([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption: AsamCreateOption<string, Member> = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\nconst transform = (items: readonly Member[]) => items;\nconst api: AsamApiRequest<Query, readonly Member[]> = async (query, context) => {\n\tawait new Promise<void>((done) => setTimeout(done, 150));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示请求失败');\n\tconst items: Member[] = [{ id: 'server', label: 'Server', value: 'server' }];\n\tif (canonical.value) items.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\treturn items.filter((item) => item.label.toLowerCase().includes(query.text.toLowerCase()));\n};\nconst search = {\n\tdebounceMs: 100,\n\tbuildParams: (params: Query, text: string) => ({ ...params, text })\n};\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-creation/js/Demo.vue",
									"sha256": "984c240252f93086f7d3be46c591a2b0051cc4ddaebac0948faff97fd82554ec",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:api=\"api\"\n\t\t\t:params=\"{ tenant, text: '' }\"\n\t\t\t:transform=\"transform\"\n\t\t\t:search=\"search\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamRemoteSelect>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelect } from '@asam-ui/ui';\nconst tenant = ref('a');\nconst failure = ref(false);\nconst canonical = ref(false);\ndefineOptions({ name: 'AsamRemoteSelectLocalCreationDemo' });\nconst value = ref(null);\nconst control = ref();\nconst createdTexts = ref([]);\nconst providerValues = ref([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\nconst transform = (items) => items;\nconst api = async (query, context) => {\n\tawait new Promise((done) => setTimeout(done, 150));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示请求失败');\n\tconst items = [{ id: 'server', label: 'Server', value: 'server' }];\n\tif (canonical.value) items.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\treturn items.filter((item) => item.label.toLowerCase().includes(query.text.toLowerCase()));\n};\nconst search = { debounceMs: 100, buildParams: (params, text) => ({ ...params, text }) };\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "provider-lifetime",
					"title": "URL provider、共享缓存与消费者取消",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/provider-lifetime/ts/Demo.vue",
									"sha256": "56e87a07b8672dec9a0152a3781fe83aef252451838545ce7dae763cf267badf",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"verifyAppContracts\"\n\t\t\t>检查应用安装与 scope 边界</AsamButton\n\t\t>\n\t\t<pre data-testid=\"provider-app-contract\">{{ JSON.stringify(checks) }}</pre>\n\t\t<div ref=\"host\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"verifyRuntimeKey\"\n\t\t\t>检查公开 runtime 注入键</AsamButton\n\t\t>\n\t\t<pre data-testid=\"runtime-key-contract-result\">{{ JSON.stringify(runtimeKeyResult) }}</pre>\n\t\t<div ref=\"runtimeKeyHostA\" />\n\t\t<div ref=\"runtimeKeyHostB\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteSelectProviderLifetimeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport {\n\tAsamButton,\n\tprovideAsamData,\n\tgetAsamDataRuntime,\n\tsetAsamDataScope,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createProvider } from './provider';\nimport type { ProviderState } from './provider';\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nlet installedProvider: AsamDataProvider | undefined;\nlet providerState: ProviderState | undefined;\nconst checks = ref<object | null>(null);\nfunction rejected(operation: () => void): string {\n\ttry {\n\t\toperation();\n\t\treturn 'accepted';\n\t} catch (cause) {\n\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\treturn cause.kind;\n\t}\n}\nfunction verifyAppContracts() {\n\tif (!app || !installedProvider || !providerState) return;\n\tconst target = app;\n\tconst provider = installedProvider;\n\tconst runtime = getAsamDataRuntime(target);\n\tconst before = {\n\t\tcalls: providerState.calls.length,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch\n\t};\n\tprovideAsamData(target, provider);\n\tconst sameRuntime = runtime === getAsamDataRuntime(target);\n\tconst replacement = rejected(() => provideAsamData(target, {}));\n\t// This scenario deliberately creates an independent app to verify runtime isolation.\n\t// eslint-disable-next-line vue/one-component-per-file\n\tconst other = createApp({ render: () => null });\n\tconst otherRuntime = getAsamDataRuntime(other);\n\tconst context = runtime.createContext();\n\tconst otherContext = otherRuntime.createContext();\n\tconst currentBefore = runtime.isCurrent(context);\n\tconst foreignCurrent = runtime.isCurrent(otherContext);\n\tsetAsamDataScope(target, runtime.scope);\n\tconst empty = rejected(() => setAsamDataScope(target, ''));\n\tconst spaces = rejected(() => setAsamDataScope(target, '   '));\n\tconst invalidInstallScope = rejected(() => provideAsamData(target, provider, { scope: '' }));\n\truntime.release(context);\n\totherRuntime.release(otherContext);\n\tchecks.value = {\n\t\tsameRuntime,\n\t\treplacement,\n\t\totherIsolated: otherRuntime !== runtime && otherRuntime.provider === undefined,\n\t\tproviderRetained: runtime.provider === installedProvider,\n\t\tcurrentBefore,\n\t\tforeignCurrent,\n\t\tcurrentAfterRelease: runtime.isCurrent(context),\n\t\tabortedAfterRelease: context.signal.aborted,\n\t\tempty,\n\t\tspaces,\n\t\tinvalidInstallScope,\n\t\tbefore,\n\t\tafter: { calls: providerState.calls.length, scope: runtime.scope, epoch: runtime.epoch }\n\t};\n}\nonMounted(() => {\n\tif (!host.value) return;\n\tconst { provider, state, release } = createProvider();\n\tinstalledProvider = provider;\n\tproviderState = state;\n\t// Mount the imported child in the separately configured provider app.\n\t// eslint-disable-next-line vue/one-component-per-file\n\tapp = createApp(Child, { state, release });\n\tprovideAsamData(app, provider, { scope: 'provider-a' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n\nimport { h, inject } from 'vue';\nimport { asamDataRuntimeKey } from '@asam-ui/ui';\nconst runtimeKeyHostA = ref<HTMLElement>();\nconst runtimeKeyHostB = ref<HTMLElement>();\nconst runtimeKeyResult = ref<object[]>([]);\nfunction verifyRuntimeKey() {\n\tif (!runtimeKeyHostA.value || !runtimeKeyHostB.value) return;\n\tconst duplicateKey = Symbol('AsamDataRuntime');\n\tconst injected: {\n\t\tscope: string;\n\t\tmissingDuplicate: boolean;\n\t\tmissingString: boolean;\n\t\tcurrent: boolean;\n\t\treleased?: boolean;\n\t\tcancelled?: boolean;\n\t}[] = [];\n\tconst makeApp = () => {\n\t\t// eslint-disable-next-line vue/one-component-per-file\n\t\treturn createApp({\n\t\t\tsetup() {\n\t\t\t\tconst runtime = inject(asamDataRuntimeKey);\n\t\t\t\tif (!runtime) throw Error('Public runtime injection missing');\n\t\t\t\tconst context = runtime.createContext();\n\t\t\t\tconst snapshot = {\n\t\t\t\t\tscope: runtime.scope,\n\t\t\t\t\tmissingDuplicate: inject(duplicateKey, undefined) === undefined,\n\t\t\t\t\tmissingString: inject('AsamDataRuntime', undefined) === undefined,\n\t\t\t\t\tcurrent: runtime.isCurrent(context),\n\t\t\t\t\treleased: false,\n\t\t\t\t\tcancelled: false\n\t\t\t\t};\n\t\t\t\tinjected.push(snapshot);\n\t\t\t\tonBeforeUnmount(() => {\n\t\t\t\t\truntime.release(context);\n\t\t\t\t\tsnapshot.released = !runtime.isCurrent(context);\n\t\t\t\t\tsnapshot.cancelled = context.signal.aborted;\n\t\t\t\t});\n\t\t\t\treturn () =>\n\t\t\t\t\th('pre', { 'data-testid': 'runtime-key-injected-output' }, runtime.scope);\n\t\t\t}\n\t\t});\n\t};\n\tconst first = makeApp(),\n\t\tsecond = makeApp();\n\tconst providerA = {},\n\t\tproviderB = {};\n\tprovideAsamData(first, providerA, { scope: 'key-a' });\n\tprovideAsamData(second, providerB, { scope: 'key-b' });\n\tconst a = getAsamDataRuntime(first),\n\t\tb = getAsamDataRuntime(second);\n\ttry {\n\t\tfirst.mount(runtimeKeyHostA.value);\n\t\tsecond.mount(runtimeKeyHostB.value);\n\t\tconst phases: object[] = [\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-public-root-symbol',\n\t\t\t\tsymbol: typeof asamDataRuntimeKey === 'symbol'\n\t\t\t},\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-distinct-app-runtime',\n\t\t\t\tdistinct: a !== b,\n\t\t\t\townProviders: a.provider === providerA && b.provider === providerB\n\t\t\t},\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-real-mounted-injection',\n\t\t\t\tscopes: injected.map((item) => item.scope),\n\t\t\t\tcurrent: injected.every((item) => item.current),\n\t\t\t\trendered: [runtimeKeyHostA.value.textContent, runtimeKeyHostB.value.textContent]\n\t\t\t},\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-symbol-identity-and-string-isolation',\n\t\t\t\tduplicateMissing: injected.every((item) => item.missingDuplicate),\n\t\t\t\tstringMissing: injected.every((item) => item.missingString)\n\t\t\t}\n\t\t];\n\t\tsetAsamDataScope(first, 'key-a-next');\n\t\tphases.push({\n\t\t\tphase: 'runtime-key-scope-invalidation-preserves-provided-runtime',\n\t\t\tsame: getAsamDataRuntime(first) === a,\n\t\t\tfirst: a.scope,\n\t\t\tsecond: b.scope\n\t\t});\n\t\tfirst.unmount();\n\t\tsecond.unmount();\n\t\tphases.push({\n\t\t\tphase: 'runtime-key-unmount-releases-own-contexts',\n\t\t\treleased: injected.every((item) => item.released && item.cancelled),\n\t\t\ttargetsEmpty: !runtimeKeyHostA.value.textContent && !runtimeKeyHostB.value.textContent\n\t\t});\n\t\truntimeKeyResult.value = phases;\n\t} finally {\n\t\tif (runtimeKeyHostA.value.textContent) first.unmount();\n\t\tif (runtimeKeyHostB.value.textContent) second.unmount();\n\t}\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/provider-lifetime/ts/Child.vue",
									"sha256": "4bb754681bd02d2f91e70818e289c4e51d91138e52e42189d1a6c1bc6251a652",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"provider-lifetime\">\n\t\t<label>\n\t\t\t实际请求文本\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamInput v-model=\"text\" aria-label=\"实际请求文本\" />\n\t\t</label>\n\t\t<AsamCheckboxItem v-model=\"state.failure\">\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t模拟来源失败\n\t\t</AsamCheckboxItem>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"first\"\n\t\t\tv-model=\"firstValue\"\n\t\t\t:data-source=\"source\"\n\t\t\tplaceholder=\"第一缓存消费者\"\n\t\t\tclearable\n\t\t\t@success=\"firstStatus = 'success'\"\n\t\t\t@error=\"firstStatus = $event.kind\"\n\t\t/>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"second\"\n\t\t\tv-model=\"secondValue\"\n\t\t\t:data-source=\"source\"\n\t\t\tplaceholder=\"第二缓存消费者\"\n\t\t\tclearable\n\t\t\t@success=\"secondStatus = 'success'\"\n\t\t\t@error=\"secondStatus = $event.kind\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"refresh\"\n\t\t\t>强制刷新共享来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"changeScope\"\n\t\t\t>切换数据 scope</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"invalidateAsamData(app)\"\n\t\t\t>失效当前 epoch</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelOne\"\n\t\t\t>重载并取消第一实例</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\">完成共享传输</AsamButton>\n\t\t<pre data-testid=\"provider-observation\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tfirstValue,\n\t\t\t\tsecondValue,\n\t\t\t\tfirstStatus,\n\t\t\t\tsecondStatus,\n\t\t\t\ttransaction,\n\t\t\t\tscope,\n\t\t\t\tcalls: state.calls,\n\t\t\t\taborts: state.aborts\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteSelectProviderLifetimeChild' });\nimport { computed, getCurrentInstance, ref } from 'vue';\nimport {\n\tAsamInput,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteSelect,\n\tdefineAsamOptions,\n\tsetAsamDataScope,\n\tinvalidateAsamData\n} from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose } from '@asam-ui/ui';\nimport type { ProviderState } from './provider';\n\nconst props = defineProps<{ state: ProviderState; release: () => void }>();\nconst { state, release } = props;\ninterface Member {\n\tid: number;\n\tname: string;\n}\nconst instance = getCurrentInstance();\nif (!instance) throw new Error('Demo requires an app');\nconst app = instance.appContext.app;\nconst scope = ref('provider-a');\nconst text = ref('');\nconst firstValue = ref<number | null>(null);\nconst secondValue = ref<number | null>(null);\nconst first = ref<AsamAsyncSelectExpose<number, Member>>();\nconst second = ref<AsamAsyncSelectExpose<number, Member>>();\nconst firstStatus = ref('pending');\nconst secondStatus = ref('pending');\nconst transaction = ref('idle');\nconst factory = defineAsamOptions<number, Member>();\nconst cache = { ttlMs: 60000 };\nconst fields = { label: 'name', value: 'id' } satisfies {\n\tlabel: keyof Member;\n\tvalue: keyof Member;\n};\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n\treturn typeof value === 'object' && value !== null && !Array.isArray(value);\n}\nfunction transform(response: unknown): readonly Member[] {\n\tif (!Array.isArray(response)) throw new Error('Expected member array');\n\tconst values: readonly unknown[] = response;\n\treturn values.map((value) => {\n\t\tif (!isRecord(value) || typeof value.id !== 'number' || typeof value.name !== 'string')\n\t\t\tthrow new Error('Malformed member');\n\t\treturn { id: value.id, name: value.name };\n\t});\n}\nconst source = computed(() =>\n\tfactory.request({\n\t\trequest: { url: '/demo/members', params: { text: text.value } },\n\t\ttransform,\n\t\tfieldNames: fields,\n\t\tcache\n\t})\n);\nasync function refresh() {\n\tstate.slow = false;\n\ttransaction.value = (await first.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nfunction changeScope() {\n\tscope.value = scope.value === 'provider-a' ? 'provider-b' : 'provider-a';\n\tsetAsamDataScope(app, scope.value);\n}\nasync function cancelOne() {\n\tif (!first.value || !second.value) return;\n\tstate.slow = true;\n\ttransaction.value = 'waiting';\n\tconst one = first.value.reload({ force: true });\n\tconst two = second.value.reload({ force: true });\n\tfirst.value.cancel();\n\tconst results = await Promise.all([one, two]);\n\ttransaction.value = results.map((result) => result.status).join('/');\n\tstate.slow = false;\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/provider-lifetime/ts/provider.ts",
									"sha256": "662dc8be831a8b8f31543c2d4202a62b005ad1e95cde9a337c72b425e29f7006",
									"source": "import { reactive } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\n\nexport interface ProviderCall {\n\treadonly text: string;\n\treadonly scope: string;\n\treadonly epoch: number;\n\treadonly requestId: number;\n}\nexport interface ProviderState {\n\tfailure: boolean;\n\tslow: boolean;\n\tcalls: ProviderCall[];\n\taborts: number;\n}\n\n/** Local transport only: no server URL is contacted by this example. */\nexport function createProvider() {\n\tconst state = reactive<ProviderState>({ failure: false, slow: false, calls: [], aborts: 0 });\n\tlet release: () => void = () => undefined;\n\tconst provider: AsamDataProvider = {\n\t\tasync request(config, context) {\n\t\t\tif (config.url !== '/demo/members' || config.method !== 'get')\n\t\t\t\tthrow new Error('Unknown local route');\n\t\t\tconst text = config.params?.text;\n\t\t\tif (typeof text !== 'string') throw new Error('text must be a string');\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tstate.calls.push({\n\t\t\t\ttext,\n\t\t\t\tscope: context.scope,\n\t\t\t\tepoch: context.epoch,\n\t\t\t\trequestId: context.requestId\n\t\t\t});\n\t\t\tif (state.slow) {\n\t\t\t\tawait new Promise<void>((resolve, reject) => {\n\t\t\t\t\tconst abort = () => {\n\t\t\t\t\t\tstate.aborts++;\n\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\treject(context.signal.reason);\n\t\t\t\t\t};\n\t\t\t\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\t\t\t\trelease = () => {\n\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (state.failure) throw new Error('Local provider failure');\n\t\t\treturn [\n\t\t\t\t{ id: 1, name: '第一成员' },\n\t\t\t\t{ id: 2, name: '第二成员' }\n\t\t\t].filter((item) => item.name.includes(text));\n\t\t}\n\t};\n\treturn { provider, state, release: () => release() };\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/provider-lifetime/js/Demo.vue",
									"sha256": "7242754cf6b224c7864b49eda7c3501b46fa834058a95397aad9d07b9efaa865",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"verifyAppContracts\"\n\t\t\t>检查应用安装与 scope 边界</AsamButton\n\t\t>\n\t\t<pre data-testid=\"provider-app-contract\">{{ JSON.stringify(checks) }}</pre>\n\t\t<div ref=\"host\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"verifyRuntimeKey\"\n\t\t\t>检查公开 runtime 注入键</AsamButton\n\t\t>\n\t\t<pre data-testid=\"runtime-key-contract-result\">{{ JSON.stringify(runtimeKeyResult) }}</pre>\n\t\t<div ref=\"runtimeKeyHostA\" />\n\t\t<div ref=\"runtimeKeyHostB\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRemoteSelectProviderLifetimeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport {\n\tAsamButton,\n\tprovideAsamData,\n\tgetAsamDataRuntime,\n\tsetAsamDataScope,\n\tAsamDataFailure\n} from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createProvider } from './provider';\nconst host = ref();\nlet app;\nlet installedProvider;\nlet providerState;\nconst checks = ref(null);\nfunction rejected(operation) {\n\ttry {\n\t\toperation();\n\t\treturn 'accepted';\n\t} catch (cause) {\n\t\tif (!(cause instanceof AsamDataFailure)) throw cause;\n\t\treturn cause.kind;\n\t}\n}\nfunction verifyAppContracts() {\n\tif (!app || !installedProvider || !providerState) return;\n\tconst target = app;\n\tconst provider = installedProvider;\n\tconst runtime = getAsamDataRuntime(target);\n\tconst before = {\n\t\tcalls: providerState.calls.length,\n\t\tscope: runtime.scope,\n\t\tepoch: runtime.epoch\n\t};\n\tprovideAsamData(target, provider);\n\tconst sameRuntime = runtime === getAsamDataRuntime(target);\n\tconst replacement = rejected(() => provideAsamData(target, {}));\n\t// This scenario deliberately creates an independent app to verify runtime isolation.\n\t// eslint-disable-next-line vue/one-component-per-file\n\tconst other = createApp({ render: () => null });\n\tconst otherRuntime = getAsamDataRuntime(other);\n\tconst context = runtime.createContext();\n\tconst otherContext = otherRuntime.createContext();\n\tconst currentBefore = runtime.isCurrent(context);\n\tconst foreignCurrent = runtime.isCurrent(otherContext);\n\tsetAsamDataScope(target, runtime.scope);\n\tconst empty = rejected(() => setAsamDataScope(target, ''));\n\tconst spaces = rejected(() => setAsamDataScope(target, '   '));\n\tconst invalidInstallScope = rejected(() => provideAsamData(target, provider, { scope: '' }));\n\truntime.release(context);\n\totherRuntime.release(otherContext);\n\tchecks.value = {\n\t\tsameRuntime,\n\t\treplacement,\n\t\totherIsolated: otherRuntime !== runtime && otherRuntime.provider === undefined,\n\t\tproviderRetained: runtime.provider === installedProvider,\n\t\tcurrentBefore,\n\t\tforeignCurrent,\n\t\tcurrentAfterRelease: runtime.isCurrent(context),\n\t\tabortedAfterRelease: context.signal.aborted,\n\t\tempty,\n\t\tspaces,\n\t\tinvalidInstallScope,\n\t\tbefore,\n\t\tafter: { calls: providerState.calls.length, scope: runtime.scope, epoch: runtime.epoch }\n\t};\n}\nonMounted(() => {\n\tif (!host.value) return;\n\tconst { provider, state, release } = createProvider();\n\tinstalledProvider = provider;\n\tproviderState = state;\n\t// Mount the imported child in the separately configured provider app.\n\t// eslint-disable-next-line vue/one-component-per-file\n\tapp = createApp(Child, { state, release });\n\tprovideAsamData(app, provider, { scope: 'provider-a' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\nimport { h, inject } from 'vue';\nimport { asamDataRuntimeKey } from '@asam-ui/ui';\nconst runtimeKeyHostA = ref();\nconst runtimeKeyHostB = ref();\nconst runtimeKeyResult = ref([]);\nfunction verifyRuntimeKey() {\n\tif (!runtimeKeyHostA.value || !runtimeKeyHostB.value) return;\n\tconst duplicateKey = Symbol('AsamDataRuntime');\n\tconst injected = [];\n\tconst makeApp = () => {\n\t\t// eslint-disable-next-line vue/one-component-per-file\n\t\treturn createApp({\n\t\t\tsetup() {\n\t\t\t\tconst runtime = inject(asamDataRuntimeKey);\n\t\t\t\tif (!runtime) throw Error('Public runtime injection missing');\n\t\t\t\tconst context = runtime.createContext();\n\t\t\t\tconst snapshot = {\n\t\t\t\t\tscope: runtime.scope,\n\t\t\t\t\tmissingDuplicate: inject(duplicateKey, undefined) === undefined,\n\t\t\t\t\tmissingString: inject('AsamDataRuntime', undefined) === undefined,\n\t\t\t\t\tcurrent: runtime.isCurrent(context),\n\t\t\t\t\treleased: false,\n\t\t\t\t\tcancelled: false\n\t\t\t\t};\n\t\t\t\tinjected.push(snapshot);\n\t\t\t\tonBeforeUnmount(() => {\n\t\t\t\t\truntime.release(context);\n\t\t\t\t\tsnapshot.released = !runtime.isCurrent(context);\n\t\t\t\t\tsnapshot.cancelled = context.signal.aborted;\n\t\t\t\t});\n\t\t\t\treturn () =>\n\t\t\t\t\th('pre', { 'data-testid': 'runtime-key-injected-output' }, runtime.scope);\n\t\t\t}\n\t\t});\n\t};\n\tconst first = makeApp(),\n\t\tsecond = makeApp();\n\tconst providerA = {},\n\t\tproviderB = {};\n\tprovideAsamData(first, providerA, { scope: 'key-a' });\n\tprovideAsamData(second, providerB, { scope: 'key-b' });\n\tconst a = getAsamDataRuntime(first),\n\t\tb = getAsamDataRuntime(second);\n\ttry {\n\t\tfirst.mount(runtimeKeyHostA.value);\n\t\tsecond.mount(runtimeKeyHostB.value);\n\t\tconst phases = [\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-public-root-symbol',\n\t\t\t\tsymbol: typeof asamDataRuntimeKey === 'symbol'\n\t\t\t},\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-distinct-app-runtime',\n\t\t\t\tdistinct: a !== b,\n\t\t\t\townProviders: a.provider === providerA && b.provider === providerB\n\t\t\t},\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-real-mounted-injection',\n\t\t\t\tscopes: injected.map((item) => item.scope),\n\t\t\t\tcurrent: injected.every((item) => item.current),\n\t\t\t\trendered: [runtimeKeyHostA.value.textContent, runtimeKeyHostB.value.textContent]\n\t\t\t},\n\t\t\t{\n\t\t\t\tphase: 'runtime-key-symbol-identity-and-string-isolation',\n\t\t\t\tduplicateMissing: injected.every((item) => item.missingDuplicate),\n\t\t\t\tstringMissing: injected.every((item) => item.missingString)\n\t\t\t}\n\t\t];\n\t\tsetAsamDataScope(first, 'key-a-next');\n\t\tphases.push({\n\t\t\tphase: 'runtime-key-scope-invalidation-preserves-provided-runtime',\n\t\t\tsame: getAsamDataRuntime(first) === a,\n\t\t\tfirst: a.scope,\n\t\t\tsecond: b.scope\n\t\t});\n\t\tfirst.unmount();\n\t\tsecond.unmount();\n\t\tphases.push({\n\t\t\tphase: 'runtime-key-unmount-releases-own-contexts',\n\t\t\treleased: injected.every((item) => item.released && item.cancelled),\n\t\t\ttargetsEmpty: !runtimeKeyHostA.value.textContent && !runtimeKeyHostB.value.textContent\n\t\t});\n\t\truntimeKeyResult.value = phases;\n\t} finally {\n\t\tif (runtimeKeyHostA.value.textContent) first.unmount();\n\t\tif (runtimeKeyHostB.value.textContent) second.unmount();\n\t}\n}\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/provider-lifetime/js/Child.vue",
									"sha256": "60a292e03c90a6c38766f660f341e3e25de0077edd2710c761a05ca0f5049360",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"provider-lifetime\">\n\t\t<label>\n\t\t\t实际请求文本\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamInput v-model=\"text\" aria-label=\"实际请求文本\" />\n\t\t</label>\n\t\t<AsamCheckboxItem v-model=\"state.failure\">\n\t\t\t<!-- prettier-ignore -->\n\n\t\t\t模拟来源失败\n\t\t</AsamCheckboxItem>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"first\"\n\t\t\tv-model=\"firstValue\"\n\t\t\t:data-source=\"source\"\n\t\t\tplaceholder=\"第一缓存消费者\"\n\t\t\tclearable\n\t\t\t@success=\"firstStatus = 'success'\"\n\t\t\t@error=\"firstStatus = $event.kind\"\n\t\t/>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"second\"\n\t\t\tv-model=\"secondValue\"\n\t\t\t:data-source=\"source\"\n\t\t\tplaceholder=\"第二缓存消费者\"\n\t\t\tclearable\n\t\t\t@success=\"secondStatus = 'success'\"\n\t\t\t@error=\"secondStatus = $event.kind\"\n\t\t/>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"refresh\"\n\t\t\t>强制刷新共享来源</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"changeScope\"\n\t\t\t>切换数据 scope</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"invalidateAsamData(app)\"\n\t\t\t>失效当前 epoch</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelOne\"\n\t\t\t>重载并取消第一实例</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\">完成共享传输</AsamButton>\n\t\t<pre data-testid=\"provider-observation\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tfirstValue,\n\t\t\t\tsecondValue,\n\t\t\t\tfirstStatus,\n\t\t\t\tsecondStatus,\n\t\t\t\ttransaction,\n\t\t\t\tscope,\n\t\t\t\tcalls: state.calls,\n\t\t\t\taborts: state.aborts\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRemoteSelectProviderLifetimeChild' });\nimport { computed, getCurrentInstance, ref } from 'vue';\nimport {\n\tAsamInput,\n\tAsamCheckboxItem,\n\tAsamButton,\n\tAsamRemoteSelect,\n\tdefineAsamOptions,\n\tsetAsamDataScope,\n\tinvalidateAsamData\n} from '@asam-ui/ui';\nconst props = defineProps({\n\tstate: { type: Object, required: true },\n\trelease: { type: Function, required: true }\n});\nconst { state, release } = props;\nconst instance = getCurrentInstance();\nif (!instance) throw new Error('Demo requires an app');\nconst app = instance.appContext.app;\nconst scope = ref('provider-a');\nconst text = ref('');\nconst firstValue = ref(null);\nconst secondValue = ref(null);\nconst first = ref();\nconst second = ref();\nconst firstStatus = ref('pending');\nconst secondStatus = ref('pending');\nconst transaction = ref('idle');\nconst factory = defineAsamOptions();\nconst cache = { ttlMs: 60000 };\nconst fields = { label: 'name', value: 'id' };\nfunction isRecord(value) {\n\treturn typeof value === 'object' && value !== null && !Array.isArray(value);\n}\nfunction transform(response) {\n\tif (!Array.isArray(response)) throw new Error('Expected member array');\n\tconst values = response;\n\treturn values.map((value) => {\n\t\tif (!isRecord(value) || typeof value.id !== 'number' || typeof value.name !== 'string')\n\t\t\tthrow new Error('Malformed member');\n\t\treturn { id: value.id, name: value.name };\n\t});\n}\nconst source = computed(() =>\n\tfactory.request({\n\t\trequest: { url: '/demo/members', params: { text: text.value } },\n\t\ttransform,\n\t\tfieldNames: fields,\n\t\tcache\n\t})\n);\nasync function refresh() {\n\tstate.slow = false;\n\ttransaction.value = (await first.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nfunction changeScope() {\n\tscope.value = scope.value === 'provider-a' ? 'provider-b' : 'provider-a';\n\tsetAsamDataScope(app, scope.value);\n}\nasync function cancelOne() {\n\tif (!first.value || !second.value) return;\n\tstate.slow = true;\n\ttransaction.value = 'waiting';\n\tconst one = first.value.reload({ force: true });\n\tconst two = second.value.reload({ force: true });\n\tfirst.value.cancel();\n\tconst results = await Promise.all([one, two]);\n\ttransaction.value = results.map((result) => result.status).join('/');\n\tstate.slow = false;\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/provider-lifetime/js/provider.js",
									"sha256": "6db63f0fcc16ce0b6d6da9e55bfaa554325545b5985ca2a1e00823f0865788ed",
									"source": "import { reactive } from 'vue';\n/** Local transport only: no server URL is contacted by this example. */\nexport function createProvider() {\n\tconst state = reactive({ failure: false, slow: false, calls: [], aborts: 0 });\n\tlet release = () => undefined;\n\tconst provider = {\n\t\tasync request(config, context) {\n\t\t\tif (config.url !== '/demo/members' || config.method !== 'get')\n\t\t\t\tthrow new Error('Unknown local route');\n\t\t\tconst text = config.params?.text;\n\t\t\tif (typeof text !== 'string') throw new Error('text must be a string');\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tstate.calls.push({\n\t\t\t\ttext,\n\t\t\t\tscope: context.scope,\n\t\t\t\tepoch: context.epoch,\n\t\t\t\trequestId: context.requestId\n\t\t\t});\n\t\t\tif (state.slow) {\n\t\t\t\tawait new Promise((resolve, reject) => {\n\t\t\t\t\tconst abort = () => {\n\t\t\t\t\t\tstate.aborts++;\n\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\treject(context.signal.reason);\n\t\t\t\t\t};\n\t\t\t\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\t\t\t\trelease = () => {\n\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (state.failure) throw new Error('Local provider failure');\n\t\t\treturn [\n\t\t\t\t{ id: 1, name: '第一成员' },\n\t\t\t\t{ id: 2, name: '第二成员' }\n\t\t\t].filter((item) => item.name.includes(text));\n\t\t}\n\t};\n\treturn { provider, state, release: () => release() };\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "native-presentation",
					"title": "选项模板、标签折叠与加载插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/native-presentation/ts/Demo.vue",
									"sha256": "5da4e069afd6fe7d0577c3cebcd9299611240c995e626e3709fddbd52d39303a",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamRemoteSelectNativePresentationDemo' });\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/native-presentation/ts/Child.vue",
									"sha256": "2c02384edd6cff97ca5a78d3875ee723aba9fe8d1d2529dc8be7c0b2ed13545f",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'object'\"\n\t\t\t\t>使用对象弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'string'\"\n\t\t\t\t>使用字符串弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'array'\"\n\t\t\t\t>使用数组弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'false'\"\n\t\t\t\t>使用 false 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'null'\"\n\t\t\t\t>使用 null 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'undefined'\"\n\t\t\t\t>清空弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\t:data-source=\"source\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:popper-style=\"popperStyle\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamOptionGroup v-for=\"group in groups\" :key=\"group.team\" :label=\"group.team\">\n\t\t\t\t\t<AsamOption\n\t\t\t\t\t\tv-for=\"option in group.options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:label=\"option.label\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>{{ option.label }} · {{ option.raw.team }}</span>\n\t\t\t\t\t</AsamOption>\n\t\t\t\t</AsamOptionGroup>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<label>多选展示</label>\n\t\t<AsamRemoteSelect\n\t\t\tv-model=\"multipleValues\"\n\t\t\t:data-source=\"source\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tpopperStyleMode,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, inject, ref } from 'vue';\nimport type { StyleValue } from 'vue';\nimport {\n\tAsamButton,\n\tAsamRemoteSelect,\n\tdefineAsamOptions,\n\tAsamOption,\n\tAsamOptionGroup\n} from '@asam-ui/ui';\nimport type {\n\tAsamSelectDataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamOption as DataOption,\n\tAsamAsyncSelectExpose,\n\tAsamApiRequest\n} from '@asam-ui/ui';\nimport type { DemoState, Member } from './provider.js';\ndefineOptions({ name: 'AsamRemoteSelectNativePresentationChild' });\nconst injected = inject<DemoState>('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state: DemoState = injected;\nconst singleControl = ref<AsamAsyncSelectExpose<number, Member>>();\nconst singleValue = ref<number | null>(null);\ntype DataEmits = AsamSelectDataEmits<AsamValue, object>;\nconst dataEvents = ref<\n\treadonly {\n\t\treadonly mode: 'single' | 'multiple';\n\t\treadonly name: string;\n\t\treadonly payload: unknown;\n\t}[]\n>([]);\nconst eventResult = ref('');\nfunction recordEvent(mode: 'single' | 'multiple', name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref<readonly number[]>([1, 3, 4]);\nconst removed = ref<unknown[]>([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst popperStyleMode = ref<'object' | 'string' | 'array' | 'false' | 'null' | 'undefined'>(\n\t'object'\n);\nconst popperStyle = computed<StyleValue>(() => {\n\tif (popperStyleMode.value === 'object') return { minWidth: '320px' };\n\tif (popperStyleMode.value === 'string') return 'min-width: 360px';\n\tif (popperStyleMode.value === 'array') return [{ minWidth: '400px' }, [{ maxWidth: '460px' }]];\n\tif (popperStyleMode.value === 'false') return false;\n\tif (popperStyleMode.value === 'null') return null;\n\treturn undefined;\n});\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref<readonly DataOption<number, Member>[]>([]);\nconst groups = computed(() =>\n\t['一组', '二组'].map((team) => ({\n\t\tteam,\n\t\toptions: singleOptions.value.filter((item) => item.raw.team === team)\n\t}))\n);\nconst api: AsamApiRequest<{ text: string }, readonly Member[]> = async (params, context) =>\n\tstate.read(context.signal, params.text);\nconst factory = defineAsamOptions<number, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform,\n\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n});\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/native-presentation/ts/provider.ts",
									"sha256": "37e1ad50178df2b3276b64323369e24ae6e45f7e25b6f6bcd139fd01b6dd2f28",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Member {\n\treadonly label: string;\n\treadonly value: number;\n\treadonly id: number;\n\treadonly team: string;\n\treadonly disabled?: boolean;\n}\nconst rows: readonly Member[] = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set<() => void>();\n\tasync function read(signal: AbortSignal, text: string) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise<void>((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/native-presentation/js/Demo.vue",
									"sha256": "b04355fc1717f83ff604b8d05a668df398b1b9e379fcbef41e2c125e817a7b2a",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamRemoteSelectNativePresentationDemo' });\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/native-presentation/js/Child.vue",
									"sha256": "24441b6783812a0516c6b676178dcdb5e0affefd59cc0111af9b4ab512653ea9",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'object'\"\n\t\t\t\t>使用对象弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'string'\"\n\t\t\t\t>使用字符串弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'array'\"\n\t\t\t\t>使用数组弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'false'\"\n\t\t\t\t>使用 false 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'null'\"\n\t\t\t\t>使用 null 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'undefined'\"\n\t\t\t\t>清空弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamRemoteSelect\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\t:data-source=\"source\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:popper-style=\"popperStyle\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamOptionGroup v-for=\"group in groups\" :key=\"group.team\" :label=\"group.team\">\n\t\t\t\t\t<AsamOption\n\t\t\t\t\t\tv-for=\"option in group.options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:label=\"option.label\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>{{ option.label }} · {{ option.raw.team }}</span>\n\t\t\t\t\t</AsamOption>\n\t\t\t\t</AsamOptionGroup>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<label>多选展示</label>\n\t\t<AsamRemoteSelect\n\t\t\tv-model=\"multipleValues\"\n\t\t\t:data-source=\"source\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tpopperStyleMode,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, inject, ref } from 'vue';\nimport {\n\tAsamButton,\n\tAsamRemoteSelect,\n\tdefineAsamOptions,\n\tAsamOption,\n\tAsamOptionGroup\n} from '@asam-ui/ui';\ndefineOptions({ name: 'AsamRemoteSelectNativePresentationChild' });\nconst injected = inject('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state = injected;\nconst singleControl = ref();\nconst singleValue = ref(null);\nconst dataEvents = ref([]);\nconst eventResult = ref('');\nfunction recordEvent(mode, name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload, mode) {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload, mode) {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref([1, 3, 4]);\nconst removed = ref([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst popperStyleMode = ref('object');\nconst popperStyle = computed(() => {\n\tif (popperStyleMode.value === 'object') return { minWidth: '320px' };\n\tif (popperStyleMode.value === 'string') return 'min-width: 360px';\n\tif (popperStyleMode.value === 'array') return [{ minWidth: '400px' }, [{ maxWidth: '460px' }]];\n\tif (popperStyleMode.value === 'false') return false;\n\tif (popperStyleMode.value === 'null') return null;\n\treturn undefined;\n});\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref([]);\nconst groups = computed(() =>\n\t['一组', '二组'].map((team) => ({\n\t\tteam,\n\t\toptions: singleOptions.value.filter((item) => item.raw.team === team)\n\t}))\n);\nconst api = async (params, context) => state.read(context.signal, params.text);\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform,\n\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n});\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/native-presentation/js/provider.js",
									"sha256": "c1ed4061809c3d2f789fe4d38308d94262e415cce275789691f0de896a0b4b91",
									"source": "import { ref } from 'vue';\nconst rows = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set();\n\tasync function read(signal, text) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-error/ts/Demo.vue",
									"sha256": "e9baec270bfb09546d32d27011b684e0161acdfd3673d12992959a723b634aa0",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-error/ts/Child.vue",
									"sha256": "b9b7f5834100a0807b4a9d89f8683464e53f120eeb98ed01993534348abc5784",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose, AsamAsyncSelectSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamAsyncSelectExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncSelectSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-error/js/Demo.vue",
									"sha256": "5ccdb6699e6c743b0e2ecaa18d8a53e74bf5bc4a98196ea16c1ac3fd57251e94",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-error/js/Child.vue",
									"sha256": "83e78b7383672b063d869d809e0cfb17118ad8ce5ca178946d8998e67711ea07",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteSelect/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDictSelect",
			"documentation": "/component-AsamDictSelect.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地字典与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/basic/ts/Demo.vue",
									"sha256": "b86a33d0cd577c4cd9dbe725f7d4b7725115fc9afbc2ea7179891e8ae0ce997d",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictSelectBasicDemoExample' });\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/basic/ts/Child.vue",
									"sha256": "89feae878827095f0a4e6626bfa8fc0e605afb449d949657b9a2a56aede94f2d",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamDictSelect\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelect>\n\t\t<AsamDictSelect\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readSelectedLabel\"\n\t\t\t>读取当前标签</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t>聚焦选择器</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @mousedown.prevent @click=\"control?.blur()\"\n\t\t\t>失焦选择器</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamDictSelectBasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamDictSelect } from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose, AsamDictEntry } from '@asam-ui/ui';\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref<string[]>([]);\nconst control = ref<AsamAsyncSelectExpose<string, AsamDictEntry>>();\nconst selectedLabel = ref<string | string[]>('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/basic/ts/provider.ts",
									"sha256": "1da89e658d274256a3020a0b630ab0977904c4645dc8e6614b2d66951c17bc2d",
									"source": "import type { AsamDataProvider } from '@asam-ui/ui';\n\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/basic/js/Demo.vue",
									"sha256": "783e5e813a46aea5b875868aa54338e82277b78b82fe1a8bfb3b395617d08970",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictSelectBasicDemoExample' });\n\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/basic/js/Child.vue",
									"sha256": "880509b8a8e242079fd2cbcaf6b96c94fdb9e2ffd92cb2e2bb30841062dcf2da",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamDictSelect\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelect>\n\t\t<AsamDictSelect\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readSelectedLabel\"\n\t\t\t>读取当前标签</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t>聚焦选择器</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @mousedown.prevent @click=\"control?.blur()\"\n\t\t\t>失焦选择器</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamDictSelectBasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamDictSelect } from '@asam-ui/ui';\nconst value = ref(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref([]);\nconst control = ref();\nconst selectedLabel = ref('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/basic/js/provider.js",
									"sha256": "5dd6ce08b0eb95147057e3760678a200ea4d263da5390edccdbd797c9c661d49",
									"source": "export const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "local-creation",
					"title": "本地创建、规范项与来源重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-creation/ts/Child.vue",
									"sha256": "9f83e61c628d25edee0ddaf681998a7de8ddc9c45b35b7c9384e0f1c46790291",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamDictSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:dict-type=\"tenant\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamDictSelect>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictSelect } from '@asam-ui/ui';\nimport type { AsamOption, AsamCreateOption, AsamValue, AsamAsyncSelectExpose } from '@asam-ui/ui';\nimport type { DemoState, Member } from './provider.js';\nconst state = inject<DemoState>('selection-local-demo');\nif (!state) throw new Error('Demo.vue 必须先配置演示 provider。');\nconst { tenant, failure, canonical } = state;\ndefineOptions({ name: 'AsamDictSelectLocalCreationChild' });\nconst value = ref<AsamOption<string, Member> | null>(null);\nconst control = ref<AsamAsyncSelectExpose<string, Member>>();\nconst createdTexts = ref<string[]>([]);\nconst providerValues = ref<AsamValue[]>([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption: AsamCreateOption<string, Member> = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\n\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-creation/ts/Demo.vue",
									"sha256": "81c1769d1fb73852d19969decba8608da52fa723ef922e3719f2a16f3fba167e",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectLocalCreationDemo' });\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-local-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'selection-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-creation/ts/provider.ts",
									"sha256": "d05f7b764c10cb22f06cc341a6b6ba0eb430286b1501c21c93455df109828ad6",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider, AsamDictEntry } from '@asam-ui/ui';\nexport interface Member extends AsamDictEntry {\n\treadonly id: string;\n\treadonly value: string;\n}\nexport function createDemoState() {\n\treturn { tenant: ref('a'), failure: ref(false), canonical: ref(false) };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, 150));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示字典失败');\n\t\t\t\tif (!['a', 'b'].includes(type)) throw new Error('未知演示字典');\n\t\t\t\tconst items: Member[] = [{ id: 'server', label: 'Server', value: 'server' }];\n\t\t\t\tif (state.canonical.value)\n\t\t\t\t\titems.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\t\t\t\treturn items;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-creation/js/Child.vue",
									"sha256": "0e243ffba53a09ed6c3750072d429aa20b6edb9ccb77a40f2aa749a4be1d4e22",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamDictSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:dict-type=\"tenant\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamDictSelect>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { inject, nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictSelect } from '@asam-ui/ui';\nconst state = inject('selection-local-demo');\nif (!state) throw new Error('Demo.vue 必须先配置演示 provider。');\nconst { tenant, failure, canonical } = state;\ndefineOptions({ name: 'AsamDictSelectLocalCreationChild' });\nconst value = ref(null);\nconst control = ref();\nconst createdTexts = ref([]);\nconst providerValues = ref([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-creation/js/Demo.vue",
									"sha256": "df06e507ea83d384e87612f14fdd9db2505ff7d5ace703f0abd922a4197d4ce5",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectLocalCreationDemo' });\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-local-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'selection-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-creation/js/provider.js",
									"sha256": "b966c15c1af235e6c37541b22a4ddc9de20853d32f6ccced9a10970ba2282388",
									"source": "import { ref } from 'vue';\nexport function createDemoState() {\n\treturn { tenant: ref('a'), failure: ref(false), canonical: ref(false) };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise((done) => setTimeout(done, 150));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示字典失败');\n\t\t\t\tif (!['a', 'b'].includes(type)) throw new Error('未知演示字典');\n\t\t\t\tconst items = [{ id: 'server', label: 'Server', value: 'server' }];\n\t\t\t\tif (state.canonical.value)\n\t\t\t\t\titems.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\t\t\t\treturn items;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "native-presentation",
					"title": "选项模板、标签折叠与加载插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/native-presentation/ts/Demo.vue",
									"sha256": "4b05c05ca8c6f5815279b138ffe2af4d4b1edb77fc511b0ebceaa5346d19e569",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectNativePresentationDemo' });\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/native-presentation/ts/Child.vue",
									"sha256": "e9276d8b3afb17f2295ebc55c4590db82f89747f113f4abf58e27751494cb0e0",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'object'\"\n\t\t\t\t>使用对象弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'string'\"\n\t\t\t\t>使用字符串弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'array'\"\n\t\t\t\t>使用数组弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'false'\"\n\t\t\t\t>使用 false 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'null'\"\n\t\t\t\t>使用 null 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'undefined'\"\n\t\t\t\t>清空弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamDictSelect\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:popper-style=\"popperStyle\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamOptionGroup v-for=\"group in groups\" :key=\"group.team\" :label=\"group.team\">\n\t\t\t\t\t<AsamOption\n\t\t\t\t\t\tv-for=\"option in group.options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:label=\"option.label\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>{{ option.label }} · {{ option.raw.team }}</span>\n\t\t\t\t\t</AsamOption>\n\t\t\t\t</AsamOptionGroup>\n\t\t\t</template>\n\t\t</AsamDictSelect>\n\t\t<label>多选展示</label>\n\t\t<AsamDictSelect\n\t\t\tv-model=\"multipleValues\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDictSelect>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tpopperStyleMode,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, inject, ref } from 'vue';\nimport type { StyleValue } from 'vue';\nimport { AsamButton, AsamDictSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\nimport type {\n\tAsamSelectDataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamOption as DataOption,\n\tAsamAsyncSelectExpose,\n\tAsamRecord\n} from '@asam-ui/ui';\nimport type { DemoState } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectNativePresentationChild' });\nconst injected = inject<DemoState>('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state: DemoState = injected;\nconst singleControl = ref<AsamAsyncSelectExpose<number, AsamRecord>>();\nconst singleValue = ref<number | null>(null);\ntype DataEmits = AsamSelectDataEmits<AsamValue, object>;\nconst dataEvents = ref<\n\treadonly {\n\t\treadonly mode: 'single' | 'multiple';\n\t\treadonly name: string;\n\t\treadonly payload: unknown;\n\t}[]\n>([]);\nconst eventResult = ref('');\nfunction recordEvent(mode: 'single' | 'multiple', name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref<readonly number[]>([1, 3, 4]);\nconst removed = ref<unknown[]>([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst popperStyleMode = ref<'object' | 'string' | 'array' | 'false' | 'null' | 'undefined'>(\n\t'object'\n);\nconst popperStyle = computed<StyleValue>(() => {\n\tif (popperStyleMode.value === 'object') return { minWidth: '320px' };\n\tif (popperStyleMode.value === 'string') return 'min-width: 360px';\n\tif (popperStyleMode.value === 'array') return [{ minWidth: '400px' }, [{ maxWidth: '460px' }]];\n\tif (popperStyleMode.value === 'false') return false;\n\tif (popperStyleMode.value === 'null') return null;\n\treturn undefined;\n});\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref<readonly DataOption<number, AsamRecord>[]>([]);\nconst groups = computed(() =>\n\t['一组', '二组'].map((team) => ({\n\t\tteam,\n\t\toptions: singleOptions.value.filter((item) => item.raw.team === team)\n\t}))\n);\n\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/native-presentation/ts/provider.ts",
									"sha256": "37e1ad50178df2b3276b64323369e24ae6e45f7e25b6f6bcd139fd01b6dd2f28",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Member {\n\treadonly label: string;\n\treadonly value: number;\n\treadonly id: number;\n\treadonly team: string;\n\treadonly disabled?: boolean;\n}\nconst rows: readonly Member[] = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set<() => void>();\n\tasync function read(signal: AbortSignal, text: string) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise<void>((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/native-presentation/js/Demo.vue",
									"sha256": "7a6500bb2202d827007bdae411c4dd62a948ebcadc80fa9662e8539c1e99c788",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectNativePresentationDemo' });\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/native-presentation/js/Child.vue",
									"sha256": "f72f379a77af4475dc83c57abe77c537143711fb52e5f969242120e5b554b071",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'object'\"\n\t\t\t\t>使用对象弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'string'\"\n\t\t\t\t>使用字符串弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'array'\"\n\t\t\t\t>使用数组弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'false'\"\n\t\t\t\t>使用 false 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'null'\"\n\t\t\t\t>使用 null 弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"popperStyleMode = 'undefined'\"\n\t\t\t\t>清空弹层样式</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamDictSelect\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:popper-style=\"popperStyle\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<AsamOptionGroup v-for=\"group in groups\" :key=\"group.team\" :label=\"group.team\">\n\t\t\t\t\t<AsamOption\n\t\t\t\t\t\tv-for=\"option in group.options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:label=\"option.label\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>{{ option.label }} · {{ option.raw.team }}</span>\n\t\t\t\t\t</AsamOption>\n\t\t\t\t</AsamOptionGroup>\n\t\t\t</template>\n\t\t</AsamDictSelect>\n\t\t<label>多选展示</label>\n\t\t<AsamDictSelect\n\t\t\tv-model=\"multipleValues\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDictSelect>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tpopperStyleMode,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, inject, ref } from 'vue';\nimport { AsamButton, AsamDictSelect, AsamOption, AsamOptionGroup } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDictSelectNativePresentationChild' });\nconst injected = inject('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state = injected;\nconst singleControl = ref();\nconst singleValue = ref(null);\nconst dataEvents = ref([]);\nconst eventResult = ref('');\nfunction recordEvent(mode, name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload, mode) {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload, mode) {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref([1, 3, 4]);\nconst removed = ref([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst popperStyleMode = ref('object');\nconst popperStyle = computed(() => {\n\tif (popperStyleMode.value === 'object') return { minWidth: '320px' };\n\tif (popperStyleMode.value === 'string') return 'min-width: 360px';\n\tif (popperStyleMode.value === 'array') return [{ minWidth: '400px' }, [{ maxWidth: '460px' }]];\n\tif (popperStyleMode.value === 'false') return false;\n\tif (popperStyleMode.value === 'null') return null;\n\treturn undefined;\n});\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref([]);\nconst groups = computed(() =>\n\t['一组', '二组'].map((team) => ({\n\t\tteam,\n\t\toptions: singleOptions.value.filter((item) => item.raw.team === team)\n\t}))\n);\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/native-presentation/js/provider.js",
									"sha256": "c1ed4061809c3d2f789fe4d38308d94262e415cce275789691f0de896a0b4b91",
									"source": "import { ref } from 'vue';\nconst rows = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set();\n\tasync function read(signal, text) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "yudao-bridge",
					"title": "实际芋道桥接、共享确保与可选刷新",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/ts/Demo.vue",
									"sha256": "8a56495f8bbe4133da6d0bb44f584d3d416bb5f13be1b5fc2f8b423a13b0aea6",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div ref=\"host\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showWithoutRefresh\"\n\t\t\t>展示未提供 refresh 的桥接</AsamButton\n\t\t>\n\t\t<div ref=\"withoutRefreshHost\" data-testid=\"yudao-without-refresh\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkBridge\"\n\t\t\t>检查完整宿主桥</AsamButton\n\t\t>\n\t\t<pre data-testid=\"yudao-contract-result\">{{ contractResult }}</pre>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showUploadProtocol\"\n\t\t\t>展示上传数据协议</AsamButton\n\t\t>\n\t\t<div ref=\"uploadHost\" />\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictSelectYudaoBridgeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { AsamButton, provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createBridge } from './provider.js';\nimport { runYudaoBridgeContract } from './contract.js';\nimport UploadConsumer from './UploadConsumer.vue';\nimport { createUploadDemo } from './upload.js';\nconst uploadHost = ref<HTMLElement>();\nlet uploadApp: App | undefined;\nlet uploadDemo: ReturnType<typeof createUploadDemo> | undefined;\nfunction showUploadProtocol() {\n\tif (!uploadHost.value || uploadApp) return;\n\tuploadDemo = createUploadDemo();\n\tuploadApp = createApp(UploadConsumer);\n\tuploadApp.provide('data009-upload-demo', uploadDemo);\n\tprovideAsamData(uploadApp, uploadDemo.provider, { scope: 'data009-upload-contract' });\n\tuploadApp.mount(uploadHost.value);\n}\nconst contractResult = ref('未执行');\nasync function checkBridge() {\n\ttry {\n\t\tcontractResult.value = JSON.stringify(await runYudaoBridgeContract());\n\t} catch (error) {\n\t\tcontractResult.value = JSON.stringify({\n\t\t\tstatus: 'FAIL',\n\t\t\tmessage: error instanceof Error ? error.message : String(error)\n\t\t});\n\t}\n}\nconst host = ref<HTMLElement>();\nconst withoutRefreshHost = ref<HTMLElement>();\nlet app: App | undefined;\nlet withoutRefreshApp: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst demo = createBridge();\n\tapp = createApp(Child);\n\tapp.provide('yudao-bridge-demo', demo);\n\tprovideAsamData(app, demo.provider, { scope: 'yudao-local-demo' });\n\tapp.mount(host.value);\n});\nfunction showWithoutRefresh() {\n\tif (!withoutRefreshHost.value || withoutRefreshApp) return;\n\tconst demo = createBridge(false);\n\twithoutRefreshApp = createApp(Child);\n\twithoutRefreshApp.provide('yudao-bridge-demo', demo);\n\tprovideAsamData(withoutRefreshApp, demo.provider, { scope: 'yudao-no-refresh-demo' });\n\twithoutRefreshApp.mount(withoutRefreshHost.value);\n}\nonBeforeUnmount(() => {\n\tuploadApp?.unmount();\n\tuploadDemo?.releaseHeld();\n\tapp?.unmount();\n\twithoutRefreshApp?.unmount();\n});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/ts/provider.ts",
									"sha256": "d728fe22a24dbcda3787f684d2514795dbddaa5570a3a07f19a2225b4aa0a054",
									"source": "import { reactive } from 'vue';\nimport { createYudaoProvider } from '@asam-ui/ui-yudao';\nimport type { AsamRequestContext } from '@asam-ui/ui';\ninterface BridgeCall {\n\treadonly kind: 'ensure' | 'refresh';\n\treadonly scope: string;\n\treadonly epoch: number;\n\treadonly requestId: number;\n}\n/** Host cache and transport are local to this complete example; no URL is contacted. */\nexport function createBridge(supportsRefresh = true) {\n\tconst state = reactive({\n\t\tsupportsRefresh,\n\t\tgeneration: 0,\n\t\tslow: false,\n\t\tfailure: false,\n\t\taborts: 0,\n\t\treads: 0,\n\t\tcalls: [] as BridgeCall[]\n\t});\n\tlet release: () => void = () => undefined;\n\tconst record = (kind: BridgeCall['kind'], context: AsamRequestContext) =>\n\t\tstate.calls.push({\n\t\t\tkind,\n\t\t\tscope: context.scope,\n\t\t\tepoch: context.epoch,\n\t\t\trequestId: context.requestId\n\t\t});\n\tconst provider = createYudaoProvider({\n\t\tdict: {\n\t\t\tasync ensure(context) {\n\t\t\t\trecord('ensure', context);\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.slow)\n\t\t\t\t\tawait new Promise<void>((resolve, reject) => {\n\t\t\t\t\t\tconst abort = () => {\n\t\t\t\t\t\t\tstate.aborts++;\n\t\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\t\treject(context.signal.reason);\n\t\t\t\t\t\t};\n\t\t\t\t\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\t\t\t\t\trelease = () => {\n\t\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\t\tresolve();\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure) throw new Error('Local host dictionary failed');\n\t\t\t},\n\t\t\tget(type) {\n\t\t\t\tif (type !== 'members') throw new Error('Unknown local dictionary');\n\t\t\t\tstate.reads++;\n\t\t\t\treturn [\n\t\t\t\t\t{ label: '第一成员 G' + state.generation, value: 1 },\n\t\t\t\t\t{ label: '第二成员 G' + state.generation, value: 2 }\n\t\t\t\t];\n\t\t\t},\n\t\t\t...(supportsRefresh\n\t\t\t\t? {\n\t\t\t\t\t\tasync refresh(context: AsamRequestContext) {\n\t\t\t\t\t\t\trecord('refresh', context);\n\t\t\t\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\t\t\t\tstate.generation++;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t: {})\n\t\t}\n\t});\n\treturn { state, provider, release: () => release() };\n}\nexport type BridgeDemo = ReturnType<typeof createBridge>;\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/ts/Child.vue",
									"sha256": "d230aed997cb6a5631ec276795bcb64b2532e1926e7228c816b50514c588c9a0",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"demo.state.failure\">\n\n\t\t\t模拟宿主字典失败\n\t\t</AsamCheckboxItem>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cached\"\n\t\t\t>重读宿主字典缓存</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">重载两个字典</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"hold\"\n\t\t\t>重载并取消第一字典</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\"\n\t\t\t>完成宿主 ensure</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">刷新宿主世代</AsamButton>\n\t\t<AsamDictSelect\n\t\t\tref=\"first\"\n\t\t\tv-model=\"firstValue\"\n\t\t\tdict-type=\"members\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:teleported=\"false\"\n\t\t\t@success=\"firstStatus = 'success'\"\n\t\t\t@error=\"firstStatus = $event.kind\"\n\t\t/>\n\t\t<AsamDictSelect\n\t\t\tref=\"second\"\n\t\t\tv-model=\"secondValue\"\n\t\t\tdict-type=\"members\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:teleported=\"false\"\n\t\t\t@success=\"secondStatus = 'success'\"\n\t\t\t@error=\"secondStatus = $event.kind\"\n\t\t/>\n\t\t<pre data-testid=\"yudao-observation\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tfirstValue,\n\t\t\t\tsecondValue,\n\t\t\t\tfirstStatus,\n\t\t\t\tsecondStatus,\n\t\t\t\ttransaction,\n\t\t\t\t...demo.state\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictSelect } from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose, AsamRecord } from '@asam-ui/ui';\nimport type { BridgeDemo } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectYudaoBridgeChild' });\nconst injected = inject<BridgeDemo>('yudao-bridge-demo');\nif (!injected) throw new Error('Demo.vue must provide its local bridge');\nconst demo = injected;\nconst first = ref<AsamAsyncSelectExpose<number, AsamRecord>>();\nconst second = ref<AsamAsyncSelectExpose<number, AsamRecord>>();\nconst firstValue = ref<number | null>(null);\nconst secondValue = ref<number | null>(null);\nconst firstStatus = ref('loading');\nconst secondStatus = ref('loading');\nconst transaction = ref('idle');\nasync function reload() {\n\tconst results = await Promise.all([\n\t\tfirst.value?.reload({ force: true }),\n\t\tsecond.value?.reload({ force: true })\n\t]);\n\ttransaction.value = results.map((result) => result?.status).join('/');\n}\nasync function cached() {\n\tconst results = await Promise.all([first.value?.reload(), second.value?.reload()]);\n\ttransaction.value = results.map((result) => result?.status).join('/');\n}\nfunction hold() {\n\tdemo.state.slow = true;\n\ttransaction.value = 'waiting';\n\tvoid reload();\n\tfirst.value?.cancel();\n}\nfunction release() {\n\tdemo.state.slow = false;\n\tdemo.release();\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "contract.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/ts/contract.ts",
									"sha256": "3effc37a8dae047f49a95ff902681a20e7f3023bcc63cf95d618032b11e45469",
									"source": "import { createYudaoProvider } from '@asam-ui/ui-yudao';\nimport {\n\tcreateAsamDataRuntime,\n\tdefineAsamOptions,\n\tresolveAsamOptions,\n\tresolveAsamPage\n} from '@asam-ui/ui';\nimport type { AsamYudaoBridge } from '@asam-ui/ui-yudao';\nimport type {\n\tAsamRequestConfig,\n\tAsamRequestContext,\n\tAsamUploadInput,\n\tAsamUploadContext,\n\tAsamDataError\n} from '@asam-ui/ui';\n\n/** All transports and files are local fixtures; this function contacts no endpoint. */\nexport async function runYudaoBridgeContract() {\n\tconst observations: { phase: string; state: unknown }[] = [];\n\tconst check = (value: boolean, label: string) => {\n\t\tif (!value) throw Error(label);\n\t};\n\tconst record = (phase: string, state: unknown) => observations.push({ phase, state });\n\tconst requests: { config: AsamRequestConfig; context: AsamRequestContext }[] = [];\n\tconst notices: AsamDataError[] = [];\n\tconst ownedCause = Error('host already notified');\n\tconst bridge: AsamYudaoBridge = {\n\t\trequest: async (config, context) => {\n\t\t\trequests.push({ config, context });\n\t\t\treturn { code: 0, data: [{ label: 'Local', value: 0 }] };\n\t\t},\n\t\tupload: async (config, input, context) => {\n\t\t\tcontext.reportProgress({ loaded: input.file.size, total: input.file.size });\n\t\t\treturn { config, input, context };\n\t\t},\n\t\tisErrorNotified: (cause) => cause === ownedCause,\n\t\tonError: (error) => {\n\t\t\tnotices.push(error);\n\t\t}\n\t};\n\tconst provider = createYudaoProvider(bridge);\n\tcheck(requests.length === 0 && notices.length === 0, 'construction must be inert');\n\tcheck(\n\t\tprovider.request === bridge.request &&\n\t\t\tprovider.upload === bridge.upload &&\n\t\t\tprovider.onError === bridge.onError &&\n\t\t\tprovider.isErrorNotified === bridge.isErrorNotified,\n\t\t'callbacks must retain identity'\n\t);\n\tcheck(\n\t\tObject.isFrozen(provider) &&\n\t\t\tObject.isFrozen(provider.pagination) &&\n\t\t\t!Object.isFrozen(bridge),\n\t\t'freeze provider rather than host bridge'\n\t);\n\trecord('yudao-inert-construction-frozen-provider-and-original-callbacks', {\n\t\tcalls: requests.length,\n\t\tnotices: notices.length,\n\t\tcallbackIdentity: true,\n\t\tproviderFrozen: true,\n\t\tpaginationFrozen: true,\n\t\thostFrozen: false,\n\t\tpagination: provider.pagination\n\t});\n\tconst runtime = createAsamDataRuntime({ provider, scope: 'yudao-contract' });\n\tconst context = runtime.createContext();\n\ttry {\n\t\tconst params = { tenant: 'local' },\n\t\t\tdata = { body: true };\n\t\tconst source = defineAsamOptions().request({\n\t\t\trequest: { url: '/local-contract', method: 'post', params, data }\n\t\t});\n\t\tconst options = await resolveAsamOptions(source, { provider, context });\n\t\tcheck(\n\t\t\trequests.length === 1 && requests[0]!.context === context,\n\t\t\t'request context identity'\n\t\t);\n\t\tcheck(\n\t\t\trequests[0]!.config.params === params && requests[0]!.config.data === data,\n\t\t\t'request payload ownership'\n\t\t);\n\t\tcheck(options[0]!.value === 0, 'request unwrap and core normalization');\n\t\trecord('yudao-real-core-request-context-and-payload-ownership', {\n\t\t\turl: requests[0]!.config.url,\n\t\t\tmethod: requests[0]!.config.method,\n\t\t\tscope: context.scope,\n\t\t\tsameContext: true,\n\t\t\tsameParams: true,\n\t\t\tsameData: true,\n\t\t\tvalues: options.map((o) => o.value)\n\t\t});\n\t\tconst progress: number[] = [],\n\t\t\tinput: AsamUploadInput = {\n\t\t\t\tfile: new File(['abc'], 'local.txt', { type: 'text/plain' }),\n\t\t\t\tfieldName: 'attachment',\n\t\t\t\tdata: { tenant: 'local', payload: new Blob(['z']) }\n\t\t\t};\n\t\tconst uploadContext: AsamUploadContext = {\n\t\t\t...context,\n\t\t\treportProgress: (p) => {\n\t\t\t\tprogress.push(p.loaded);\n\t\t\t}\n\t\t};\n\t\tconst config = { url: '/local-upload', method: 'put' as const, params };\n\t\tconst uploaded = await provider.upload!(config, input, uploadContext);\n\t\tif (typeof uploaded !== 'object' || uploaded === null) throw Error('upload echo');\n\t\tcheck(\n\t\t\tReflect.get(uploaded, 'input') === input &&\n\t\t\t\tReflect.get(uploaded, 'context') === uploadContext &&\n\t\t\t\tReflect.get(uploaded, 'config') === config,\n\t\t\t'upload passthrough identity'\n\t\t);\n\t\tcheck(progress.length === 1 && progress[0] === 3, 'upload progress forwarding');\n\t\trecord('yudao-upload-original-transport-and-progress-passthrough', {\n\t\t\tsameConfig: true,\n\t\t\tsameInput: true,\n\t\t\tsameContext: true,\n\t\t\tname: input.file.name,\n\t\t\tfieldName: input.fieldName,\n\t\t\tprogress\n\t\t});\n\t\tconst row = { label: 'Decoded', value: false };\n\t\tconst values: (string | number | boolean)[] = [];\n\t\tfor (const response of [\n\t\t\t[row],\n\t\t\t{ data: [row] },\n\t\t\t{ code: 0, data: [row] },\n\t\t\t{ code: 200, data: [row] }\n\t\t]) {\n\t\t\tconst source = defineAsamOptions().api({\n\t\t\t\tapi: async () => response,\n\t\t\t\tparams: undefined\n\t\t\t});\n\t\t\tvalues.push((await resolveAsamOptions(source, { provider, context }))[0]!.value);\n\t\t}\n\t\tconst badCodes: unknown[] = ['0', 500, null, undefined];\n\t\tconst failures: string[] = [];\n\t\tfor (const response of [\n\t\t\t...badCodes.map((code) => ({ code, data: [row] })),\n\t\t\t{ code: 0, data: { data: [row] } }\n\t\t]) {\n\t\t\ttry {\n\t\t\t\tawait resolveAsamOptions(\n\t\t\t\t\tdefineAsamOptions().api({ api: async () => response, params: undefined }),\n\t\t\t\t\t{ provider, context }\n\t\t\t\t);\n\t\t\t\tthrow Error('invalid response accepted');\n\t\t\t} catch (error) {\n\t\t\t\tcheck(\n\t\t\t\t\ttypeof error === 'object' &&\n\t\t\t\t\t\terror !== null &&\n\t\t\t\t\t\tReflect.get(error, 'kind') === 'response',\n\t\t\t\t\t'one-envelope response rejection'\n\t\t\t\t);\n\t\t\t\tfailures.push('response');\n\t\t\t}\n\t\t}\n\t\tcheck(\n\t\t\tvalues.length === 4 && values.every((value) => value === false),\n\t\t\t'accepted envelopes preserve false'\n\t\t);\n\t\trecord('yudao-one-layer-options-and-five-response-rejections', { values, failures });\n\t\tconst pages = [\n\t\t\t{ list: [{ id: 0 }], total: 1 },\n\t\t\t{ code: 0, data: { list: [{ id: 0 }], total: 1 } },\n\t\t\t{ code: 200, list: [{ id: 0 }], total: 1 }\n\t\t].map((response) => resolveAsamPage(response, undefined, provider));\n\t\tfor (const page of pages)\n\t\t\tcheck(page.total === 1 && page.list[0]!.id === 0, 'page decoding');\n\t\tlet ambiguous = false;\n\t\ttry {\n\t\t\tresolveAsamPage(\n\t\t\t\t{ code: 0, list: [{ id: 1 }], total: 1, data: { list: [{ id: 2 }], total: 1 } },\n\t\t\t\tundefined,\n\t\t\t\tprovider\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tambiguous =\n\t\t\t\ttypeof error === 'object' &&\n\t\t\t\terror !== null &&\n\t\t\t\tReflect.get(error, 'kind') === 'response';\n\t\t}\n\t\tcheck(ambiguous, 'competing page paths rejected');\n\t\trecord('yudao-page-default-keys-one-envelope-and-ambiguity', {\n\t\t\tpages: pages.map((page) => ({\n\t\t\t\tids: page.list.map((row) => row.id),\n\t\t\t\ttotal: page.total\n\t\t\t})),\n\t\t\tambiguous\n\t\t});\n\t\tconst owned: AsamDataError = {\n\t\t\tkind: 'request',\n\t\t\tmessage: 'owned',\n\t\t\tcause: ownedCause,\n\t\t\tnotified: false\n\t\t};\n\t\tconst ownedResult = runtime.reportError(owned, context);\n\t\tcheck(\n\t\t\townedResult.notified && notices.length === 0,\n\t\t\t'host ownership suppresses duplicate notice'\n\t\t);\n\t\tconst fresh: AsamDataError = {\n\t\t\tkind: 'request',\n\t\t\tmessage: 'new',\n\t\t\tcause: Error('new'),\n\t\t\tnotified: false\n\t\t};\n\t\tconst first = runtime.reportError(fresh, context),\n\t\t\tsecond = runtime.reportError(fresh, context);\n\t\tcheck(\n\t\t\tfirst === second && notices.length === 1 && first.notified,\n\t\t\t'normal notice deduplicates'\n\t\t);\n\t\trecord('yudao-explicit-host-error-ownership-and-notice-deduplication', {\n\t\t\thostOwnedNotified: ownedResult.notified,\n\t\t\tfreshNotified: first.notified,\n\t\t\tnotices: notices.length,\n\t\t\tsameReportedError: first === second\n\t\t});\n\t\tconst invalid: unknown[] = [\n\t\t\tnull,\n\t\t\t[],\n\t\t\t'bridge',\n\t\t\t{ request: 1 },\n\t\t\t{ upload: 1 },\n\t\t\t{ isErrorNotified: true },\n\t\t\t{ onError: true },\n\t\t\t{ dict: null },\n\t\t\t{ dict: [] },\n\t\t\t{ dict: {} },\n\t\t\t{ dict: { ensure: async () => {}, get: 1 } },\n\t\t\t{ dict: { ensure: 1, get: () => [] } },\n\t\t\t{ dict: { ensure: async () => {}, get: () => [], refresh: 1 } }\n\t\t];\n\t\tconst rejected: string[] = [];\n\t\tfor (const value of invalid) {\n\t\t\ttry {\n\t\t\t\tReflect.apply(createYudaoProvider, undefined, [value]);\n\t\t\t\tthrow Error('invalid bridge accepted');\n\t\t\t} catch (error) {\n\t\t\t\tcheck(\n\t\t\t\t\ttypeof error === 'object' &&\n\t\t\t\t\t\terror !== null &&\n\t\t\t\t\t\tReflect.get(error, 'kind') === 'config',\n\t\t\t\t\t'bridge shape rejected before IO'\n\t\t\t\t);\n\t\t\t\trejected.push('config');\n\t\t\t}\n\t\t}\n\t\tconst empty = createYudaoProvider({});\n\t\tcheck(\n\t\t\tempty.request === undefined &&\n\t\t\t\tempty.upload === undefined &&\n\t\t\t\tempty.dict === undefined &&\n\t\t\t\ttypeof empty.adaptOptions === 'function' &&\n\t\t\t\ttypeof empty.adaptPage === 'function',\n\t\t\t'empty bridge supports decoding only'\n\t\t);\n\t\trecord('yudao-thirteen-invalid-bridges-and-empty-bridge', {\n\t\t\trejected,\n\t\t\temptyHasTransport: false,\n\t\t\temptyHasAdapters: true\n\t\t});\n\t\treturn { status: 'PASS', observations };\n\t} finally {\n\t\truntime.release(context);\n\t}\n}\n"
								},
								{
									"name": "UploadConsumer.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/ts/UploadConsumer.vue",
									"sha256": "2fa08ffd19b1c2f0f19a45d208d604e7d48541310ed58cf6dce9e51a01e10175",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"upload-protocol-consumer\">\n\t\t<label>\n\t\t\t<span>上传响应场景</span>\n\t\t\t<AsamSelect v-model=\"demo.state.responseCase\" aria-label=\"上传响应场景\">\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"value in [\n\t\t\t\t\t\t'valid',\n\t\t\t\t\t\t'empty-id',\n\t\t\t\t\t\t'unsafe-url',\n\t\t\t\t\t\t'nan-size',\n\t\t\t\t\t\t'reject',\n\t\t\t\t\t\t'transform-throw',\n\t\t\t\t\t\t'thenable',\n\t\t\t\t\t\t'hold'\n\t\t\t\t\t]\"\n\t\t\t\t\t:key=\"value\"\n\t\t\t\t\t:label=\"value\"\n\t\t\t\t\t:value=\"value\"\n\t\t\t\t>\n\t\t\t\t\t{{ value }}\n\t\t\t\t</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<label>\n\t\t\t<span>请求上传方法</span>\n\t\t\t<AsamSelect v-model=\"demo.state.method\" aria-label=\"请求上传方法\">\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'put'\" :value=\"'put'\">put</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<fieldset class=\"demo-spacing-2\" data-testid=\"upload-handler\">\n\t\t\t<legend>完整资源处理器</legend>\n\t\t\t<AsamUpload\n\t\t\t\tref=\"handlerControl\"\n\t\t\t\t:model-value=\"handlerModel\"\n\t\t\t\tmode=\"resource\"\n\t\t\t\t:upload=\"demo.upload\"\n\t\t\t\t:data=\"demo.data\"\n\t\t\t\tfield-name=\"attachment\"\n\t\t\t\tsize=\"default\"\n\t\t\t\t@update:model-value=\"(value) => acceptModel('handler', value)\"\n\t\t\t\t@progress=\"handlerProgress.push($event.percent ?? null)\"\n\t\t\t\t@success=\"handlerSuccess++\"\n\t\t\t\t@error=\"recordError('handler', $event)\"\n\t\t\t\t@cancelled=\"handlerCancelled++\"\n\t\t\t/>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"handlerControl?.clear()\"\n\t\t\t\t>清空直接上传</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"handlerControl?.cancel()\"\n\t\t\t\t>取消直接上传</AsamButton\n\t\t\t>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-3\" data-testid=\"upload-request\">\n\t\t\t<legend>未知响应传输与同步转换</legend>\n\t\t\t<AsamUpload\n\t\t\t\tref=\"requestControl\"\n\t\t\t\t:model-value=\"requestModel\"\n\t\t\t\tmode=\"resource\"\n\t\t\t\t:request=\"request\"\n\t\t\t\t:data=\"demo.data\"\n\t\t\t\tfield-name=\"attachment\"\n\t\t\t\tsize=\"default\"\n\t\t\t\t@update:model-value=\"(value) => acceptModel('request', value)\"\n\t\t\t\t@progress=\"requestProgress.push($event.percent ?? null)\"\n\t\t\t\t@success=\"requestSuccess++\"\n\t\t\t\t@error=\"recordError('request', $event)\"\n\t\t\t\t@cancelled=\"requestCancelled++\"\n\t\t\t/>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"requestControl?.clear()\"\n\t\t\t\t>清空请求上传</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"requestControl?.cancel()\"\n\t\t\t\t>取消请求上传</AsamButton\n\t\t\t>\n\t\t</fieldset>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"demo.releaseHeld()\"\n\t\t\t>完成迟到上传</AsamButton\n\t\t>\n\t\t<pre data-testid=\"upload-data-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\thandlerModel,\n\t\t\t\trequestModel,\n\t\t\t\thandlerProgress,\n\t\t\t\trequestProgress,\n\t\t\t\thandlerSuccess,\n\t\t\t\trequestSuccess,\n\t\t\t\thandlerCancelled,\n\t\t\t\trequestCancelled,\n\t\t\t\terrors,\n\t\t\t\tcalls: demo.state.calls,\n\t\t\t\tnotices: demo.state.notices,\n\t\t\t\theld: demo.state.held,\n\t\t\t\treleased: demo.state.released,\n\t\t\t\tabortedHeld: demo.state.abortedHeld,\n\t\t\t\ttransformSameInput: demo.state.transformSameInput\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, inject, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamUpload } from '@asam-ui/ui';\nimport type {\n\tAsamDataError,\n\tAsamUploadedResource,\n\tAsamUploadRequestConfig,\n\tAsamUploadExpose,\n\tAsamUploadValue\n} from '@asam-ui/ui';\nimport type { UploadDemo } from './upload.js';\ndefineOptions({ name: 'Data009UploadProtocolConsumer' });\nconst provided = inject<UploadDemo>('data009-upload-demo');\nif (!provided) throw Error('upload demo provider is required');\nconst demo = provided;\nfunction acceptModel(owner: string, value: AsamUploadValue) {\n\tif (value !== null && !('id' in value)) throw Error('single resource model is required');\n\tif (owner === 'handler') handlerModel.value = value;\n\telse requestModel.value = value;\n}\nconst handlerControl = ref<AsamUploadExpose>();\nconst requestControl = ref<AsamUploadExpose>();\nconst handlerModel = ref<AsamUploadedResource | null>(null),\n\trequestModel = ref<AsamUploadedResource | null>(null);\nconst handlerProgress = ref<(number | null)[]>([]),\n\trequestProgress = ref<(number | null)[]>([]);\nconst handlerSuccess = ref(0),\n\trequestSuccess = ref(0),\n\thandlerCancelled = ref(0),\n\trequestCancelled = ref(0);\nconst errors = ref<{ owner: string; kind: string; message: string }[]>([]);\nfunction recordError(owner: string, error: AsamDataError) {\n\terrors.value.push({ owner, kind: error.kind, message: error.message });\n}\nconst request = computed<AsamUploadRequestConfig>(() => {\n\tconst config: AsamUploadRequestConfig = {\n\t\turl: '/local-upload',\n\t\tparams: demo.params,\n\t\ttransform: demo.transform\n\t};\n\treturn demo.state.method === 'put' ? { ...config, method: 'put' } : config;\n});\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "upload.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/ts/upload.ts",
									"sha256": "0e03700e344e57f2f5b938e60524541514f4b7088efa629dccb59ec9edbd4247",
									"source": "import { reactive } from 'vue';\nimport type {\n\tAsamDataProvider,\n\tAsamUploadContext,\n\tAsamUploadInput,\n\tAsamUploadFormData,\n\tAsamUploadedResource\n} from '@asam-ui/ui';\n\nexport function createUploadDemo() {\n\tconst state = reactive({\n\t\tresponseCase: 'valid',\n\t\tmethod: 'default',\n\t\tcalls: [] as {\n\t\t\towner: string;\n\t\t\tname: string;\n\t\t\tsize: number;\n\t\t\tfieldName: string;\n\t\t\ttenant: unknown;\n\t\t\tblobText: string;\n\t\t\tfileIsFile: boolean;\n\t\t\tscope: string;\n\t\t\tsignalIsAbortSignal: boolean;\n\t\t\tmethod: string | null;\n\t\t\tsameParams: boolean;\n\t\t}[],\n\t\tnotices: 0,\n\t\theld: 0,\n\t\treleased: 0,\n\t\tabortedHeld: 0,\n\t\ttransformSameInput: [] as boolean[]\n\t});\n\tconst params = Object.freeze({ tenant: 'local' });\n\tconst data: AsamUploadFormData = Object.freeze({\n\t\ttenant: 'local',\n\t\tpayload: new Blob(['extra'])\n\t});\n\tconst pending = new Set<{\n\t\tinput: AsamUploadInput;\n\t\tcontext: AsamUploadContext;\n\t\tresolve: () => void;\n\t}>();\n\tlet transportedInput: AsamUploadInput | undefined;\n\tasync function transfer(\n\t\towner: string,\n\t\tinput: AsamUploadInput,\n\t\tcontext: AsamUploadContext,\n\t\tmethod: string | null,\n\t\tsameParams: boolean\n\t) {\n\t\tstate.calls.push({\n\t\t\towner,\n\t\t\tname: input.file.name,\n\t\t\tsize: input.file.size,\n\t\t\tfieldName: input.fieldName,\n\t\t\ttenant: input.data?.tenant,\n\t\t\tblobText: input.data?.payload instanceof Blob ? await input.data.payload.text() : '',\n\t\t\tfileIsFile: input.file instanceof File,\n\t\t\tscope: context.scope,\n\t\t\tsignalIsAbortSignal: context.signal instanceof AbortSignal,\n\t\t\tmethod,\n\t\t\tsameParams\n\t\t});\n\t\tcontext.reportProgress({ loaded: 0 });\n\t\tcontext.reportProgress({ loaded: 2, total: 4 });\n\t\tcontext.reportProgress({ loaded: -1, total: 4 });\n\t\tcontext.reportProgress({ loaded: 5, total: 4 });\n\t\tcontext.reportProgress({ loaded: NaN });\n\t\tif (state.responseCase === 'reject') throw Error('local upload transport rejected');\n\t\tif (state.responseCase === 'hold') {\n\t\t\tawait new Promise<void>((resolve) => {\n\t\t\t\tconst operation = { input, context, resolve };\n\t\t\t\tpending.add(operation);\n\t\t\t\tstate.held = pending.size;\n\t\t\t\tcontext.signal.addEventListener(\n\t\t\t\t\t'abort',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tif (pending.has(operation)) state.abortedHeld++;\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t\tcontext.reportProgress({ loaded: 4, total: 4 });\n\t}\n\tfunction resource(input: AsamUploadInput, owner: string): AsamUploadedResource {\n\t\treturn {\n\t\t\tid: state.responseCase === 'empty-id' ? '' : `${owner}:${input.file.name}`,\n\t\t\tname: input.file.name,\n\t\t\turl:\n\t\t\t\tstate.responseCase === 'unsafe-url'\n\t\t\t\t\t? 'javascript:bad'\n\t\t\t\t\t: '/local-resources/' + encodeURIComponent(input.file.name),\n\t\t\tmimeType: input.file.type,\n\t\t\tsize: state.responseCase === 'nan-size' ? NaN : input.file.size\n\t\t};\n\t}\n\tconst provider: AsamDataProvider = {\n\t\tupload: async (config, input, context) => {\n\t\t\ttransportedInput = input;\n\t\t\tawait transfer(\n\t\t\t\t'request',\n\t\t\t\tinput,\n\t\t\t\tcontext,\n\t\t\t\tconfig.method ?? null,\n\t\t\t\tconfig.params === params\n\t\t\t);\n\t\t\treturn { kind: 'local-resource', name: input.file.name };\n\t\t},\n\t\tonError: () => {\n\t\t\tstate.notices++;\n\t\t}\n\t};\n\treturn {\n\t\tstate,\n\t\tprovider,\n\t\tparams,\n\t\tdata,\n\t\tasync upload(\n\t\t\tinput: AsamUploadInput,\n\t\t\tcontext: AsamUploadContext\n\t\t): Promise<AsamUploadedResource> {\n\t\t\tawait transfer('handler', input, context, null, true);\n\t\t\treturn resource(input, 'handler');\n\t\t},\n\t\ttransform(response: unknown, input: AsamUploadInput): AsamUploadedResource {\n\t\t\tstate.transformSameInput.push(input === transportedInput);\n\t\t\tif (\n\t\t\t\t!response ||\n\t\t\t\ttypeof response !== 'object' ||\n\t\t\t\tReflect.get(response, 'kind') !== 'local-resource' ||\n\t\t\t\tReflect.get(response, 'name') !== input.file.name\n\t\t\t)\n\t\t\t\tthrow Error('invalid local response');\n\t\t\tif (state.responseCase === 'transform-throw') throw Error('local transform rejected');\n\t\t\tconst result = resource(input, 'request');\n\t\t\tif (state.responseCase === 'thenable') {\n\t\t\t\tconst thenable = {\n\t\t\t\t\t...result,\n\t\t\t\t\tthen(resolve: (value: unknown) => void) {\n\t\t\t\t\t\tresolve(result);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn thenable;\n\t\t\t}\n\t\t\treturn result;\n\t\t},\n\t\treleaseHeld() {\n\t\t\tfor (const operation of pending) {\n\t\t\t\tpending.delete(operation);\n\t\t\t\toperation.resolve();\n\t\t\t\tstate.released++;\n\t\t\t}\n\t\t\tstate.held = pending.size;\n\t\t}\n\t};\n}\nexport type UploadDemo = ReturnType<typeof createUploadDemo>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/js/Demo.vue",
									"sha256": "443c5b483191e905946aed3790f735fa1c3e97b2a4be22da6ec7c69853090b5a",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div ref=\"host\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showWithoutRefresh\"\n\t\t\t>展示未提供 refresh 的桥接</AsamButton\n\t\t>\n\t\t<div ref=\"withoutRefreshHost\" data-testid=\"yudao-without-refresh\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkBridge\"\n\t\t\t>检查完整宿主桥</AsamButton\n\t\t>\n\t\t<pre data-testid=\"yudao-contract-result\">{{ contractResult }}</pre>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showUploadProtocol\"\n\t\t\t>展示上传数据协议</AsamButton\n\t\t>\n\t\t<div ref=\"uploadHost\" />\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictSelectYudaoBridgeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { AsamButton, provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createBridge } from './provider.js';\nimport { runYudaoBridgeContract } from './contract.js';\nimport UploadConsumer from './UploadConsumer.vue';\nimport { createUploadDemo } from './upload.js';\nconst uploadHost = ref();\nlet uploadApp;\nlet uploadDemo;\nfunction showUploadProtocol() {\n\tif (!uploadHost.value || uploadApp) return;\n\tuploadDemo = createUploadDemo();\n\tuploadApp = createApp(UploadConsumer);\n\tuploadApp.provide('data009-upload-demo', uploadDemo);\n\tprovideAsamData(uploadApp, uploadDemo.provider, { scope: 'data009-upload-contract' });\n\tuploadApp.mount(uploadHost.value);\n}\nconst contractResult = ref('未执行');\nasync function checkBridge() {\n\ttry {\n\t\tcontractResult.value = JSON.stringify(await runYudaoBridgeContract());\n\t} catch (error) {\n\t\tcontractResult.value = JSON.stringify({\n\t\t\tstatus: 'FAIL',\n\t\t\tmessage: error instanceof Error ? error.message : String(error)\n\t\t});\n\t}\n}\nconst host = ref();\nconst withoutRefreshHost = ref();\nlet app;\nlet withoutRefreshApp;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst demo = createBridge();\n\tapp = createApp(Child);\n\tapp.provide('yudao-bridge-demo', demo);\n\tprovideAsamData(app, demo.provider, { scope: 'yudao-local-demo' });\n\tapp.mount(host.value);\n});\nfunction showWithoutRefresh() {\n\tif (!withoutRefreshHost.value || withoutRefreshApp) return;\n\tconst demo = createBridge(false);\n\twithoutRefreshApp = createApp(Child);\n\twithoutRefreshApp.provide('yudao-bridge-demo', demo);\n\tprovideAsamData(withoutRefreshApp, demo.provider, { scope: 'yudao-no-refresh-demo' });\n\twithoutRefreshApp.mount(withoutRefreshHost.value);\n}\nonBeforeUnmount(() => {\n\tuploadApp?.unmount();\n\tuploadDemo?.releaseHeld();\n\tapp?.unmount();\n\twithoutRefreshApp?.unmount();\n});\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/js/provider.js",
									"sha256": "34d358209d948dca93f31fffc7b17b8d484dd1e70aa45df9e58d569d26068e7e",
									"source": "import { reactive } from 'vue';\nimport { createYudaoProvider } from '@asam-ui/ui-yudao';\n/** Host cache and transport are local to this complete example; no URL is contacted. */\nexport function createBridge(supportsRefresh = true) {\n\tconst state = reactive({\n\t\tsupportsRefresh,\n\t\tgeneration: 0,\n\t\tslow: false,\n\t\tfailure: false,\n\t\taborts: 0,\n\t\treads: 0,\n\t\tcalls: []\n\t});\n\tlet release = () => undefined;\n\tconst record = (kind, context) =>\n\t\tstate.calls.push({\n\t\t\tkind,\n\t\t\tscope: context.scope,\n\t\t\tepoch: context.epoch,\n\t\t\trequestId: context.requestId\n\t\t});\n\tconst provider = createYudaoProvider({\n\t\tdict: {\n\t\t\tasync ensure(context) {\n\t\t\t\trecord('ensure', context);\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.slow)\n\t\t\t\t\tawait new Promise((resolve, reject) => {\n\t\t\t\t\t\tconst abort = () => {\n\t\t\t\t\t\t\tstate.aborts++;\n\t\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\t\treject(context.signal.reason);\n\t\t\t\t\t\t};\n\t\t\t\t\t\tcontext.signal.addEventListener('abort', abort, { once: true });\n\t\t\t\t\t\trelease = () => {\n\t\t\t\t\t\t\tcontext.signal.removeEventListener('abort', abort);\n\t\t\t\t\t\t\tresolve();\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure) throw new Error('Local host dictionary failed');\n\t\t\t},\n\t\t\tget(type) {\n\t\t\t\tif (type !== 'members') throw new Error('Unknown local dictionary');\n\t\t\t\tstate.reads++;\n\t\t\t\treturn [\n\t\t\t\t\t{ label: '第一成员 G' + state.generation, value: 1 },\n\t\t\t\t\t{ label: '第二成员 G' + state.generation, value: 2 }\n\t\t\t\t];\n\t\t\t},\n\t\t\t...(supportsRefresh\n\t\t\t\t? {\n\t\t\t\t\t\tasync refresh(context) {\n\t\t\t\t\t\t\trecord('refresh', context);\n\t\t\t\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\t\t\t\tstate.generation++;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t: {})\n\t\t}\n\t});\n\treturn { state, provider, release: () => release() };\n}\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/js/Child.vue",
									"sha256": "60b60eb8984bdfe9ab52ac5f39a64262815a6cc5d5bbf1d551560b6e852ffcbc",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"demo.state.failure\">\n\n\t\t\t模拟宿主字典失败\n\t\t</AsamCheckboxItem>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cached\"\n\t\t\t>重读宿主字典缓存</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">重载两个字典</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"hold\"\n\t\t\t>重载并取消第一字典</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"release\"\n\t\t\t>完成宿主 ensure</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">刷新宿主世代</AsamButton>\n\t\t<AsamDictSelect\n\t\t\tref=\"first\"\n\t\t\tv-model=\"firstValue\"\n\t\t\tdict-type=\"members\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:teleported=\"false\"\n\t\t\t@success=\"firstStatus = 'success'\"\n\t\t\t@error=\"firstStatus = $event.kind\"\n\t\t/>\n\t\t<AsamDictSelect\n\t\t\tref=\"second\"\n\t\t\tv-model=\"secondValue\"\n\t\t\tdict-type=\"members\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:teleported=\"false\"\n\t\t\t@success=\"secondStatus = 'success'\"\n\t\t\t@error=\"secondStatus = $event.kind\"\n\t\t/>\n\t\t<pre data-testid=\"yudao-observation\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tfirstValue,\n\t\t\t\tsecondValue,\n\t\t\t\tfirstStatus,\n\t\t\t\tsecondStatus,\n\t\t\t\ttransaction,\n\t\t\t\t...demo.state\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { inject, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictSelect } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDictSelectYudaoBridgeChild' });\nconst injected = inject('yudao-bridge-demo');\nif (!injected) throw new Error('Demo.vue must provide its local bridge');\nconst demo = injected;\nconst first = ref();\nconst second = ref();\nconst firstValue = ref(null);\nconst secondValue = ref(null);\nconst firstStatus = ref('loading');\nconst secondStatus = ref('loading');\nconst transaction = ref('idle');\nasync function reload() {\n\tconst results = await Promise.all([\n\t\tfirst.value?.reload({ force: true }),\n\t\tsecond.value?.reload({ force: true })\n\t]);\n\ttransaction.value = results.map((result) => result?.status).join('/');\n}\nasync function cached() {\n\tconst results = await Promise.all([first.value?.reload(), second.value?.reload()]);\n\ttransaction.value = results.map((result) => result?.status).join('/');\n}\nfunction hold() {\n\tdemo.state.slow = true;\n\ttransaction.value = 'waiting';\n\tvoid reload();\n\tfirst.value?.cancel();\n}\nfunction release() {\n\tdemo.state.slow = false;\n\tdemo.release();\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "contract.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/js/contract.js",
									"sha256": "e86e36cf65770479399d1588fa8d95b263d73ea21a1104aa49850aa5e079bdc5",
									"source": "import { createYudaoProvider } from '@asam-ui/ui-yudao';\nimport {\n\tcreateAsamDataRuntime,\n\tdefineAsamOptions,\n\tresolveAsamOptions,\n\tresolveAsamPage\n} from '@asam-ui/ui';\n/** All transports and files are local fixtures; this function contacts no endpoint. */\nexport async function runYudaoBridgeContract() {\n\tconst observations = [];\n\tconst check = (value, label) => {\n\t\tif (!value) throw Error(label);\n\t};\n\tconst record = (phase, state) => observations.push({ phase, state });\n\tconst requests = [];\n\tconst notices = [];\n\tconst ownedCause = Error('host already notified');\n\tconst bridge = {\n\t\trequest: async (config, context) => {\n\t\t\trequests.push({ config, context });\n\t\t\treturn { code: 0, data: [{ label: 'Local', value: 0 }] };\n\t\t},\n\t\tupload: async (config, input, context) => {\n\t\t\tcontext.reportProgress({ loaded: input.file.size, total: input.file.size });\n\t\t\treturn { config, input, context };\n\t\t},\n\t\tisErrorNotified: (cause) => cause === ownedCause,\n\t\tonError: (error) => {\n\t\t\tnotices.push(error);\n\t\t}\n\t};\n\tconst provider = createYudaoProvider(bridge);\n\tcheck(requests.length === 0 && notices.length === 0, 'construction must be inert');\n\tcheck(\n\t\tprovider.request === bridge.request &&\n\t\t\tprovider.upload === bridge.upload &&\n\t\t\tprovider.onError === bridge.onError &&\n\t\t\tprovider.isErrorNotified === bridge.isErrorNotified,\n\t\t'callbacks must retain identity'\n\t);\n\tcheck(\n\t\tObject.isFrozen(provider) &&\n\t\t\tObject.isFrozen(provider.pagination) &&\n\t\t\t!Object.isFrozen(bridge),\n\t\t'freeze provider rather than host bridge'\n\t);\n\trecord('yudao-inert-construction-frozen-provider-and-original-callbacks', {\n\t\tcalls: requests.length,\n\t\tnotices: notices.length,\n\t\tcallbackIdentity: true,\n\t\tproviderFrozen: true,\n\t\tpaginationFrozen: true,\n\t\thostFrozen: false,\n\t\tpagination: provider.pagination\n\t});\n\tconst runtime = createAsamDataRuntime({ provider, scope: 'yudao-contract' });\n\tconst context = runtime.createContext();\n\ttry {\n\t\tconst params = { tenant: 'local' },\n\t\t\tdata = { body: true };\n\t\tconst source = defineAsamOptions().request({\n\t\t\trequest: { url: '/local-contract', method: 'post', params, data }\n\t\t});\n\t\tconst options = await resolveAsamOptions(source, { provider, context });\n\t\tcheck(requests.length === 1 && requests[0].context === context, 'request context identity');\n\t\tcheck(\n\t\t\trequests[0].config.params === params && requests[0].config.data === data,\n\t\t\t'request payload ownership'\n\t\t);\n\t\tcheck(options[0].value === 0, 'request unwrap and core normalization');\n\t\trecord('yudao-real-core-request-context-and-payload-ownership', {\n\t\t\turl: requests[0].config.url,\n\t\t\tmethod: requests[0].config.method,\n\t\t\tscope: context.scope,\n\t\t\tsameContext: true,\n\t\t\tsameParams: true,\n\t\t\tsameData: true,\n\t\t\tvalues: options.map((o) => o.value)\n\t\t});\n\t\tconst progress = [],\n\t\t\tinput = {\n\t\t\t\tfile: new File(['abc'], 'local.txt', { type: 'text/plain' }),\n\t\t\t\tfieldName: 'attachment',\n\t\t\t\tdata: { tenant: 'local', payload: new Blob(['z']) }\n\t\t\t};\n\t\tconst uploadContext = {\n\t\t\t...context,\n\t\t\treportProgress: (p) => {\n\t\t\t\tprogress.push(p.loaded);\n\t\t\t}\n\t\t};\n\t\tconst config = { url: '/local-upload', method: 'put', params };\n\t\tconst uploaded = await provider.upload(config, input, uploadContext);\n\t\tif (typeof uploaded !== 'object' || uploaded === null) throw Error('upload echo');\n\t\tcheck(\n\t\t\tReflect.get(uploaded, 'input') === input &&\n\t\t\t\tReflect.get(uploaded, 'context') === uploadContext &&\n\t\t\t\tReflect.get(uploaded, 'config') === config,\n\t\t\t'upload passthrough identity'\n\t\t);\n\t\tcheck(progress.length === 1 && progress[0] === 3, 'upload progress forwarding');\n\t\trecord('yudao-upload-original-transport-and-progress-passthrough', {\n\t\t\tsameConfig: true,\n\t\t\tsameInput: true,\n\t\t\tsameContext: true,\n\t\t\tname: input.file.name,\n\t\t\tfieldName: input.fieldName,\n\t\t\tprogress\n\t\t});\n\t\tconst row = { label: 'Decoded', value: false };\n\t\tconst values = [];\n\t\tfor (const response of [\n\t\t\t[row],\n\t\t\t{ data: [row] },\n\t\t\t{ code: 0, data: [row] },\n\t\t\t{ code: 200, data: [row] }\n\t\t]) {\n\t\t\tconst source = defineAsamOptions().api({\n\t\t\t\tapi: async () => response,\n\t\t\t\tparams: undefined\n\t\t\t});\n\t\t\tvalues.push((await resolveAsamOptions(source, { provider, context }))[0].value);\n\t\t}\n\t\tconst badCodes = ['0', 500, null, undefined];\n\t\tconst failures = [];\n\t\tfor (const response of [\n\t\t\t...badCodes.map((code) => ({ code, data: [row] })),\n\t\t\t{ code: 0, data: { data: [row] } }\n\t\t]) {\n\t\t\ttry {\n\t\t\t\tawait resolveAsamOptions(\n\t\t\t\t\tdefineAsamOptions().api({ api: async () => response, params: undefined }),\n\t\t\t\t\t{ provider, context }\n\t\t\t\t);\n\t\t\t\tthrow Error('invalid response accepted');\n\t\t\t} catch (error) {\n\t\t\t\tcheck(\n\t\t\t\t\ttypeof error === 'object' &&\n\t\t\t\t\t\terror !== null &&\n\t\t\t\t\t\tReflect.get(error, 'kind') === 'response',\n\t\t\t\t\t'one-envelope response rejection'\n\t\t\t\t);\n\t\t\t\tfailures.push('response');\n\t\t\t}\n\t\t}\n\t\tcheck(\n\t\t\tvalues.length === 4 && values.every((value) => value === false),\n\t\t\t'accepted envelopes preserve false'\n\t\t);\n\t\trecord('yudao-one-layer-options-and-five-response-rejections', { values, failures });\n\t\tconst pages = [\n\t\t\t{ list: [{ id: 0 }], total: 1 },\n\t\t\t{ code: 0, data: { list: [{ id: 0 }], total: 1 } },\n\t\t\t{ code: 200, list: [{ id: 0 }], total: 1 }\n\t\t].map((response) => resolveAsamPage(response, undefined, provider));\n\t\tfor (const page of pages) check(page.total === 1 && page.list[0].id === 0, 'page decoding');\n\t\tlet ambiguous = false;\n\t\ttry {\n\t\t\tresolveAsamPage(\n\t\t\t\t{ code: 0, list: [{ id: 1 }], total: 1, data: { list: [{ id: 2 }], total: 1 } },\n\t\t\t\tundefined,\n\t\t\t\tprovider\n\t\t\t);\n\t\t} catch (error) {\n\t\t\tambiguous =\n\t\t\t\ttypeof error === 'object' &&\n\t\t\t\terror !== null &&\n\t\t\t\tReflect.get(error, 'kind') === 'response';\n\t\t}\n\t\tcheck(ambiguous, 'competing page paths rejected');\n\t\trecord('yudao-page-default-keys-one-envelope-and-ambiguity', {\n\t\t\tpages: pages.map((page) => ({\n\t\t\t\tids: page.list.map((row) => row.id),\n\t\t\t\ttotal: page.total\n\t\t\t})),\n\t\t\tambiguous\n\t\t});\n\t\tconst owned = { kind: 'request', message: 'owned', cause: ownedCause, notified: false };\n\t\tconst ownedResult = runtime.reportError(owned, context);\n\t\tcheck(\n\t\t\townedResult.notified && notices.length === 0,\n\t\t\t'host ownership suppresses duplicate notice'\n\t\t);\n\t\tconst fresh = { kind: 'request', message: 'new', cause: Error('new'), notified: false };\n\t\tconst first = runtime.reportError(fresh, context),\n\t\t\tsecond = runtime.reportError(fresh, context);\n\t\tcheck(\n\t\t\tfirst === second && notices.length === 1 && first.notified,\n\t\t\t'normal notice deduplicates'\n\t\t);\n\t\trecord('yudao-explicit-host-error-ownership-and-notice-deduplication', {\n\t\t\thostOwnedNotified: ownedResult.notified,\n\t\t\tfreshNotified: first.notified,\n\t\t\tnotices: notices.length,\n\t\t\tsameReportedError: first === second\n\t\t});\n\t\tconst invalid = [\n\t\t\tnull,\n\t\t\t[],\n\t\t\t'bridge',\n\t\t\t{ request: 1 },\n\t\t\t{ upload: 1 },\n\t\t\t{ isErrorNotified: true },\n\t\t\t{ onError: true },\n\t\t\t{ dict: null },\n\t\t\t{ dict: [] },\n\t\t\t{ dict: {} },\n\t\t\t{ dict: { ensure: async () => {}, get: 1 } },\n\t\t\t{ dict: { ensure: 1, get: () => [] } },\n\t\t\t{ dict: { ensure: async () => {}, get: () => [], refresh: 1 } }\n\t\t];\n\t\tconst rejected = [];\n\t\tfor (const value of invalid) {\n\t\t\ttry {\n\t\t\t\tReflect.apply(createYudaoProvider, undefined, [value]);\n\t\t\t\tthrow Error('invalid bridge accepted');\n\t\t\t} catch (error) {\n\t\t\t\tcheck(\n\t\t\t\t\ttypeof error === 'object' &&\n\t\t\t\t\t\terror !== null &&\n\t\t\t\t\t\tReflect.get(error, 'kind') === 'config',\n\t\t\t\t\t'bridge shape rejected before IO'\n\t\t\t\t);\n\t\t\t\trejected.push('config');\n\t\t\t}\n\t\t}\n\t\tconst empty = createYudaoProvider({});\n\t\tcheck(\n\t\t\tempty.request === undefined &&\n\t\t\t\tempty.upload === undefined &&\n\t\t\t\tempty.dict === undefined &&\n\t\t\t\ttypeof empty.adaptOptions === 'function' &&\n\t\t\t\ttypeof empty.adaptPage === 'function',\n\t\t\t'empty bridge supports decoding only'\n\t\t);\n\t\trecord('yudao-thirteen-invalid-bridges-and-empty-bridge', {\n\t\t\trejected,\n\t\t\temptyHasTransport: false,\n\t\t\temptyHasAdapters: true\n\t\t});\n\t\treturn { status: 'PASS', observations };\n\t} finally {\n\t\truntime.release(context);\n\t}\n}\n"
								},
								{
									"name": "UploadConsumer.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/js/UploadConsumer.vue",
									"sha256": "b9e8dde4de76bb4cb063e1c21ee8fd6e913c57831f81cf6a9b3da9d2ac82c2cd",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"upload-protocol-consumer\">\n\t\t<label>\n\t\t\t<span>上传响应场景</span>\n\t\t\t<AsamSelect v-model=\"demo.state.responseCase\" aria-label=\"上传响应场景\">\n\t\t\t\t<AsamOption\n\t\t\t\t\tv-for=\"value in [\n\t\t\t\t\t\t'valid',\n\t\t\t\t\t\t'empty-id',\n\t\t\t\t\t\t'unsafe-url',\n\t\t\t\t\t\t'nan-size',\n\t\t\t\t\t\t'reject',\n\t\t\t\t\t\t'transform-throw',\n\t\t\t\t\t\t'thenable',\n\t\t\t\t\t\t'hold'\n\t\t\t\t\t]\"\n\t\t\t\t\t:key=\"value\"\n\t\t\t\t\t:label=\"value\"\n\t\t\t\t\t:value=\"value\"\n\t\t\t\t>\n\t\t\t\t\t{{ value }}\n\t\t\t\t</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<label>\n\t\t\t<span>请求上传方法</span>\n\t\t\t<AsamSelect v-model=\"demo.state.method\" aria-label=\"请求上传方法\">\n\t\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t\t<AsamOption :label=\"'put'\" :value=\"'put'\">put</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<fieldset class=\"demo-spacing-2\" data-testid=\"upload-handler\">\n\t\t\t<legend>完整资源处理器</legend>\n\t\t\t<AsamUpload\n\t\t\t\tref=\"handlerControl\"\n\t\t\t\t:model-value=\"handlerModel\"\n\t\t\t\tmode=\"resource\"\n\t\t\t\t:upload=\"demo.upload\"\n\t\t\t\t:data=\"demo.data\"\n\t\t\t\tfield-name=\"attachment\"\n\t\t\t\tsize=\"default\"\n\t\t\t\t@update:model-value=\"(value) => acceptModel('handler', value)\"\n\t\t\t\t@progress=\"handlerProgress.push($event.percent ?? null)\"\n\t\t\t\t@success=\"handlerSuccess++\"\n\t\t\t\t@error=\"recordError('handler', $event)\"\n\t\t\t\t@cancelled=\"handlerCancelled++\"\n\t\t\t/>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"handlerControl?.clear()\"\n\t\t\t\t>清空直接上传</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"handlerControl?.cancel()\"\n\t\t\t\t>取消直接上传</AsamButton\n\t\t\t>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-3\" data-testid=\"upload-request\">\n\t\t\t<legend>未知响应传输与同步转换</legend>\n\t\t\t<AsamUpload\n\t\t\t\tref=\"requestControl\"\n\t\t\t\t:model-value=\"requestModel\"\n\t\t\t\tmode=\"resource\"\n\t\t\t\t:request=\"request\"\n\t\t\t\t:data=\"demo.data\"\n\t\t\t\tfield-name=\"attachment\"\n\t\t\t\tsize=\"default\"\n\t\t\t\t@update:model-value=\"(value) => acceptModel('request', value)\"\n\t\t\t\t@progress=\"requestProgress.push($event.percent ?? null)\"\n\t\t\t\t@success=\"requestSuccess++\"\n\t\t\t\t@error=\"recordError('request', $event)\"\n\t\t\t\t@cancelled=\"requestCancelled++\"\n\t\t\t/>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"requestControl?.clear()\"\n\t\t\t\t>清空请求上传</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"requestControl?.cancel()\"\n\t\t\t\t>取消请求上传</AsamButton\n\t\t\t>\n\t\t</fieldset>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"demo.releaseHeld()\"\n\t\t\t>完成迟到上传</AsamButton\n\t\t>\n\t\t<pre data-testid=\"upload-data-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\thandlerModel,\n\t\t\t\trequestModel,\n\t\t\t\thandlerProgress,\n\t\t\t\trequestProgress,\n\t\t\t\thandlerSuccess,\n\t\t\t\trequestSuccess,\n\t\t\t\thandlerCancelled,\n\t\t\t\trequestCancelled,\n\t\t\t\terrors,\n\t\t\t\tcalls: demo.state.calls,\n\t\t\t\tnotices: demo.state.notices,\n\t\t\t\theld: demo.state.held,\n\t\t\t\treleased: demo.state.released,\n\t\t\t\tabortedHeld: demo.state.abortedHeld,\n\t\t\t\ttransformSameInput: demo.state.transformSameInput\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, inject, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamUpload } from '@asam-ui/ui';\ndefineOptions({ name: 'Data009UploadProtocolConsumer' });\nconst provided = inject('data009-upload-demo');\nif (!provided) throw Error('upload demo provider is required');\nconst demo = provided;\nfunction acceptModel(owner, value) {\n\tif (value !== null && !('id' in value)) throw Error('single resource model is required');\n\tif (owner === 'handler') handlerModel.value = value;\n\telse requestModel.value = value;\n}\nconst handlerControl = ref();\nconst requestControl = ref();\nconst handlerModel = ref(null),\n\trequestModel = ref(null);\nconst handlerProgress = ref([]),\n\trequestProgress = ref([]);\nconst handlerSuccess = ref(0),\n\trequestSuccess = ref(0),\n\thandlerCancelled = ref(0),\n\trequestCancelled = ref(0);\nconst errors = ref([]);\nfunction recordError(owner, error) {\n\terrors.value.push({ owner, kind: error.kind, message: error.message });\n}\nconst request = computed(() => {\n\tconst config = {\n\t\turl: '/local-upload',\n\t\tparams: demo.params,\n\t\ttransform: demo.transform\n\t};\n\treturn demo.state.method === 'put' ? { ...config, method: 'put' } : config;\n});\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "upload.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/yudao-bridge/js/upload.js",
									"sha256": "8e82c20c924a99430e69a19e1b58287c6a29f9926298791fb4ed484822b6854c",
									"source": "import { reactive } from 'vue';\nexport function createUploadDemo() {\n\tconst state = reactive({\n\t\tresponseCase: 'valid',\n\t\tmethod: 'default',\n\t\tcalls: [],\n\t\tnotices: 0,\n\t\theld: 0,\n\t\treleased: 0,\n\t\tabortedHeld: 0,\n\t\ttransformSameInput: []\n\t});\n\tconst params = Object.freeze({ tenant: 'local' });\n\tconst data = Object.freeze({ tenant: 'local', payload: new Blob(['extra']) });\n\tconst pending = new Set();\n\tlet transportedInput;\n\tasync function transfer(owner, input, context, method, sameParams) {\n\t\tstate.calls.push({\n\t\t\towner,\n\t\t\tname: input.file.name,\n\t\t\tsize: input.file.size,\n\t\t\tfieldName: input.fieldName,\n\t\t\ttenant: input.data?.tenant,\n\t\t\tblobText: input.data?.payload instanceof Blob ? await input.data.payload.text() : '',\n\t\t\tfileIsFile: input.file instanceof File,\n\t\t\tscope: context.scope,\n\t\t\tsignalIsAbortSignal: context.signal instanceof AbortSignal,\n\t\t\tmethod,\n\t\t\tsameParams\n\t\t});\n\t\tcontext.reportProgress({ loaded: 0 });\n\t\tcontext.reportProgress({ loaded: 2, total: 4 });\n\t\tcontext.reportProgress({ loaded: -1, total: 4 });\n\t\tcontext.reportProgress({ loaded: 5, total: 4 });\n\t\tcontext.reportProgress({ loaded: NaN });\n\t\tif (state.responseCase === 'reject') throw Error('local upload transport rejected');\n\t\tif (state.responseCase === 'hold') {\n\t\t\tawait new Promise((resolve) => {\n\t\t\t\tconst operation = { input, context, resolve };\n\t\t\t\tpending.add(operation);\n\t\t\t\tstate.held = pending.size;\n\t\t\t\tcontext.signal.addEventListener(\n\t\t\t\t\t'abort',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tif (pending.has(operation)) state.abortedHeld++;\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t});\n\t\t}\n\t\tcontext.reportProgress({ loaded: 4, total: 4 });\n\t}\n\tfunction resource(input, owner) {\n\t\treturn {\n\t\t\tid: state.responseCase === 'empty-id' ? '' : `${owner}:${input.file.name}`,\n\t\t\tname: input.file.name,\n\t\t\turl:\n\t\t\t\tstate.responseCase === 'unsafe-url'\n\t\t\t\t\t? 'javascript:bad'\n\t\t\t\t\t: '/local-resources/' + encodeURIComponent(input.file.name),\n\t\t\tmimeType: input.file.type,\n\t\t\tsize: state.responseCase === 'nan-size' ? NaN : input.file.size\n\t\t};\n\t}\n\tconst provider = {\n\t\tupload: async (config, input, context) => {\n\t\t\ttransportedInput = input;\n\t\t\tawait transfer(\n\t\t\t\t'request',\n\t\t\t\tinput,\n\t\t\t\tcontext,\n\t\t\t\tconfig.method ?? null,\n\t\t\t\tconfig.params === params\n\t\t\t);\n\t\t\treturn { kind: 'local-resource', name: input.file.name };\n\t\t},\n\t\tonError: () => {\n\t\t\tstate.notices++;\n\t\t}\n\t};\n\treturn {\n\t\tstate,\n\t\tprovider,\n\t\tparams,\n\t\tdata,\n\t\tasync upload(input, context) {\n\t\t\tawait transfer('handler', input, context, null, true);\n\t\t\treturn resource(input, 'handler');\n\t\t},\n\t\ttransform(response, input) {\n\t\t\tstate.transformSameInput.push(input === transportedInput);\n\t\t\tif (\n\t\t\t\t!response ||\n\t\t\t\ttypeof response !== 'object' ||\n\t\t\t\tReflect.get(response, 'kind') !== 'local-resource' ||\n\t\t\t\tReflect.get(response, 'name') !== input.file.name\n\t\t\t)\n\t\t\t\tthrow Error('invalid local response');\n\t\t\tif (state.responseCase === 'transform-throw') throw Error('local transform rejected');\n\t\t\tconst result = resource(input, 'request');\n\t\t\tif (state.responseCase === 'thenable') {\n\t\t\t\tconst thenable = {\n\t\t\t\t\t...result,\n\t\t\t\t\tthen(resolve) {\n\t\t\t\t\t\tresolve(result);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn thenable;\n\t\t\t}\n\t\t\treturn result;\n\t\t},\n\t\treleaseHeld() {\n\t\t\tfor (const operation of pending) {\n\t\t\t\tpending.delete(operation);\n\t\t\t\toperation.resolve();\n\t\t\t\tstate.released++;\n\t\t\t}\n\t\t\tstate.held = pending.size;\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-error/ts/Demo.vue",
									"sha256": "c43a02944f5521156b857c943ab7640c0270401c8a69c79a3751822b1c8cfdf5",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-error/ts/Child.vue",
									"sha256": "83c90579221003e7cad4b136615e795e57e04872cb976962876771d465c71292",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictSelect ref=\"control\" v-model=\"value\" :data-source=\"dataSource\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictSelect, defineAsamDictSource } from '@asam-ui/ui';\nimport type { AsamAsyncSelectExpose, AsamAsyncSelectSlots } from '@asam-ui/ui';\nimport type { Transport } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamAsyncSelectExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncSelectSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-error/js/Demo.vue",
									"sha256": "02baf8a00f728271dad434d5eb920389471415a5104cd0a8cbb8f345339711f8",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-error/js/Child.vue",
									"sha256": "f23855258b804749bda7e8a2fd129c382affe6dc70982505c311fc9065476cbf",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictSelect ref=\"control\" v-model=\"value\" :data-source=\"dataSource\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictSelect, defineAsamDictSource } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDictSelect/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSelectV2",
			"documentation": "/component-AsamSelectV2.html",
			"demos": [
				{
					"id": "basic",
					"title": "单选、筛选与事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/basic/ts/Demo.vue",
									"sha256": "739c1aef2f9fb8b6fce84b0d3fe4410e24b8d40a1611fd9cf41d1f11bf22bec5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ clearable: true, filterable: true, 'aria-label': '团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = 'change: ' + String($event)\"\n\t\t\t@clear=\"event = 'clear'\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t\t<AsamSelectV2 :model-value=\"value\" :options=\"options\" disabled aria-label=\"禁用虚拟选择\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectV2BasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nimport type { AsamSelectV2Expose } from '@asam-ui/ui';\nconst control = ref<AsamSelectV2Expose>();\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/basic/js/Demo.vue",
									"sha256": "4c536806307822451148d03d000ca8b1ffb153040e13fe3e79f5fd1885896787",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ clearable: true, filterable: true, 'aria-label': '团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = 'change: ' + String($event)\"\n\t\t\t@clear=\"event = 'clear'\"\n\t\t/>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.blur()\"> 失焦 </AsamButton>\n\t\t</div>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t\t<AsamSelectV2 :model-value=\"value\" :options=\"options\" disabled aria-label=\"禁用虚拟选择\" />\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectV2BasicExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref('design');\nconst event = ref('尚未更改');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "对象、数组与字符串存储",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/policies/ts/Demo.vue",
									"sha256": "209320c05b1bf4247d7e3ae0033ab7607e7c901ee017f7f63ca7145918e45499",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"arrayValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'collapse-tags': true,\n\t\t\t\t'collapse-tags-tooltip': true,\n\t\t\t\t'aria-label': '数组选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'multiple-value-mode': 'string',\n\t\t\t\tseparator: '|',\n\t\t\t\t'aria-label': '字符串选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"limitedValue\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\t:multiple-limit=\"1\"\n\t\t\taria-label=\"最多一项\"\n\t\t/>\n\t\t<output data-object>{{ JSON.stringify(objectValue) }}</output>\n\t\t<output data-array>{{ JSON.stringify(arrayValue) }}</output>\n\t\t<output data-string>{{ stringValue }}</output>\n\t\t<output data-limited>{{ JSON.stringify(limitedValue) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectV2PoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref<(typeof options)[number] | null>(options[0]);\nconst arrayValue = ref<string[]>(['design']);\nconst stringValue = ref('design');\nconst limitedValue = ref<string[]>(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/policies/js/Demo.vue",
									"sha256": "38da730973ea350fec303b4f5a570788ca3b970bb0c91fc1fab6d9f532714aca",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'value-mode': 'object', clearable: true, 'aria-label': '对象选择' }\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"arrayValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'collapse-tags': true,\n\t\t\t\t'collapse-tags-tooltip': true,\n\t\t\t\t'aria-label': '数组选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'multiple-value-mode': 'string',\n\t\t\t\tseparator: '|',\n\t\t\t\t'aria-label': '字符串选择'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"limitedValue\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\t:multiple-limit=\"1\"\n\t\t\taria-label=\"最多一项\"\n\t\t/>\n\t\t<output data-object>{{ JSON.stringify(objectValue) }}</output>\n\t\t<output data-array>{{ JSON.stringify(arrayValue) }}</output>\n\t\t<output data-string>{{ stringValue }}</output>\n\t\t<output data-limited>{{ JSON.stringify(limitedValue) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectV2PoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref(options[0]);\nconst arrayValue = ref(['design']);\nconst stringValue = ref('design');\nconst limitedValue = ref(['design']);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "slots",
					"title": "虚拟选项与列表插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/slots/ts/Demo.vue",
									"sha256": "a9277bf9f1a5f4a08ecf6c8af0271e9fffc612c6f4de427cb88acabf70ccc37a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ options: options, height: 220, 'item-height': 36 },\n\t\t\t\t...{ filterable: true, 'aria-label': '虚拟选项' }\n\t\t\t}\"\n\t\t>\n\t\t\t<template #default=\"{ item, index }\"> {{ index + 1 }} · {{ item.label }} </template>\n\t\t\t<template #header> 本地 500 项 </template>\n\t\t\t<template #footer> 虚拟列表 </template>\n\t\t\t<template #empty> 没有结果 </template>\n\t\t</AsamSelectV2>\n\t\t<output>值：{{ value }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectV2SlotsExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nimport { makeOptions } from './options.js';\nconst options = makeOptions(500);\nconst value = ref<number | null>(1);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "options.ts",
									"sourcePath": "apps/website/examples/AsamSelectV2/slots/ts/options.ts",
									"sha256": "d5457646b8c192d03da6533830634572246129d50805e884b118dfc719de5ac4",
									"source": "export function makeOptions(count: number) {\n\treturn Array.from({ length: count }, (_, i) => ({\n\t\tlabel: '选项 ' + (i + 1),\n\t\tvalue: i + 1,\n\t\traw: { id: i + 1 }\n\t}));\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/slots/js/Demo.vue",
									"sha256": "e94677571ec8c57954a93097cb24a7cd81a8bc15199ba1f5bcd8607109360651",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ options: options, height: 220, 'item-height': 36 },\n\t\t\t\t...{ filterable: true, 'aria-label': '虚拟选项' }\n\t\t\t}\"\n\t\t>\n\t\t\t<template #default=\"{ item, index }\"> {{ index + 1 }} · {{ item.label }} </template>\n\t\t\t<template #header> 本地 500 项 </template>\n\t\t\t<template #footer> 虚拟列表 </template>\n\t\t\t<template #empty> 没有结果 </template>\n\t\t</AsamSelectV2>\n\t\t<output>值：{{ value }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectV2SlotsExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nimport { makeOptions } from './options.js';\nconst options = makeOptions(500);\nconst value = ref(1);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								},
								{
									"name": "options.js",
									"sourcePath": "apps/website/examples/AsamSelectV2/slots/js/options.js",
									"sha256": "3c2d773eb79e3ed7b631735b2de6f46e4f392c5a6027df92fa2ced96001c4eb5",
									"source": "export function makeOptions(count) {\n\treturn Array.from({ length: count }, (_, i) => ({\n\t\tlabel: '选项 ' + (i + 1),\n\t\tvalue: i + 1,\n\t\traw: { id: i + 1 }\n\t}));\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/sizes/ts/Demo.vue",
									"sha256": "c0e07bd262ae1375a7ed6e533ab6dd9777ec3151ff0168cad94760ba6134a0f3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelectV2 model-value=\"design\" :options=\"options\" aria-label=\"尺寸选择\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSelectV2SizesExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/sizes/js/Demo.vue",
									"sha256": "e662b022335ac144d0df159a30b006a9f11ab7d0d2529a7cef335ba3b6fbf2c7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'large', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'big', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'default', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSelectV2\n\t\t\t\t\tv-bind=\"{ size: 'small', 'model-value': 'design', 'aria-label': '尺寸选择' }\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t/>\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSelectV2 model-value=\"design\" :options=\"options\" aria-label=\"尺寸选择\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSelectV2SizesExample' });\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "create",
					"title": "完整实体创建、回填与清空",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/create/ts/Demo.vue",
									"sha256": "8efd6c2b3012f10539ed057e83226ee0d75f538cf715c903b9ec7c4de1942cdc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"record\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"[]\"\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入文本，创建普通记录\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tref=\"custom\"\n\t\t\tv-model=\"people\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:create-option=\"createPerson\"\n\t\t\tplaceholder=\"输入编号，创建完整实体\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"record = filled\">回填普通记录</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"custom?.clearCreatedOptions()\"\n\t\t\t>重置本地创建集合（保留模型）</AsamButton\n\t\t>\n\t\t<output>普通记录：{{ record }}；实体：{{ people }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nimport type { AsamOption, AsamRecord, AsamCreateOption, AsamSelectV2Expose } from '@asam-ui/ui';\ninterface Person {\n\tid: number;\n\tname: string;\n}\nconst record = ref<AsamOption<string, AsamRecord> | null>(null);\nconst people = ref<AsamOption<number, Person>[]>([]);\nconst custom = ref<AsamSelectV2Expose>();\nconst filled: AsamOption<string, AsamRecord> = {\n\tvalue: 'filled',\n\tlabel: '已回填',\n\traw: { value: 'filled', label: '已回填' }\n};\nconst options: AsamOption<number, Person>[] = [\n\t{ value: 7, label: '已有实体 7', raw: { id: 7, name: '已有实体 7' } }\n];\nconst createPerson: AsamCreateOption<number, Person> = (text) => {\n\tconst id = Number(text);\n\tif (!Number.isFinite(id)) throw new TypeError('请输入有限数字编号');\n\treturn { value: id, label: `实体 ${id}`, raw: { id, name: text } };\n};\ndefineOptions({ name: 'AsamSelectV2CreateDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/create/js/Demo.vue",
									"sha256": "64232ab98c3b04b7e3e32f0717f0522b91b4934e4f96c7e9234ac8320016a9ad",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"record\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"[]\"\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入文本，创建普通记录\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tref=\"custom\"\n\t\t\tv-model=\"people\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tallow-create\n\t\t\tdefault-first-option\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:create-option=\"createPerson\"\n\t\t\tplaceholder=\"输入编号，创建完整实体\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"record = filled\">回填普通记录</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"custom?.clearCreatedOptions()\"\n\t\t\t>重置本地创建集合（保留模型）</AsamButton\n\t\t>\n\t\t<output>普通记录：{{ record }}；实体：{{ people }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nconst record = ref(null);\nconst people = ref([]);\nconst custom = ref();\nconst filled = { value: 'filled', label: '已回填', raw: { value: 'filled', label: '已回填' } };\nconst options = [{ value: 7, label: '已有实体 7', raw: { id: 7, name: '已有实体 7' } }];\nconst createPerson = (text) => {\n\tconst id = Number(text);\n\tif (!Number.isFinite(id)) throw new TypeError('请输入有限数字编号');\n\treturn { value: id, label: `实体 ${id}`, raw: { id, name: text } };\n};\ndefineOptions({ name: 'AsamSelectV2CreateDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "virtual",
					"title": "虚拟长列表与真实末端事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/virtual/ts/Demo.vue",
									"sha256": "734119eb50c218ac02ce025a274894dcd412250e5c2acece68f4434f49738d8a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:height=\"220\"\n\t\t\t:item-height=\"36\"\n\t\t\tplaceholder=\"筛选或滚动到第 499 项\"\n\t\t\t@end-reached=\"ends.push($event)\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"created\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"[]\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入文本，创建完整记录\"\n\t\t/>\n\t\t<output>选中：{{ selected }}；末端方向：{{ ends }}；创建：{{ created }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nimport type { AsamOption, AsamRecord } from '@asam-ui/ui';\nconst options = Array.from({ length: 500 }, (_, index) => ({\n\tvalue: `row-${index}`,\n\tlabel: `第 ${index} 项`,\n\traw: { index }\n}));\nconst selected = ref<string | null>(null);\nconst ends = ref<string[]>([]);\nconst created = ref<AsamOption<string, AsamRecord> | null>(null);\ndefineOptions({ name: 'AsamSelectV2VirtualDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/virtual/js/Demo.vue",
									"sha256": "883ef2a0f5df2bb9fb65e369180caa98572d83f050d045e914dfbd08083a0e44",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:height=\"220\"\n\t\t\t:item-height=\"36\"\n\t\t\tplaceholder=\"筛选或滚动到第 499 项\"\n\t\t\t@end-reached=\"ends.push($event)\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"created\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:options=\"[]\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入文本，创建完整记录\"\n\t\t/>\n\t\t<output>选中：{{ selected }}；末端方向：{{ ends }}；创建：{{ created }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst options = Array.from({ length: 500 }, (_, index) => ({\n\tvalue: `row-${index}`,\n\tlabel: `第 ${index} 项`,\n\traw: { index }\n}));\nconst selected = ref(null);\nconst ends = ref([]);\nconst created = ref(null);\ndefineOptions({ name: 'AsamSelectV2VirtualDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原始字段映射与虚拟分组",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/native/ts/Demo.vue",
									"sha256": "6a204cb1eca0dc9d8c637e9e4d5f8901e64576e07f06676089cdb3ceb94829d1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"value\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:height=\"200\"\n\t\t\t:item-height=\"36\"\n\t\t>\n\t\t\t<template #prefix>团队</template>\n\t\t\t<template #header>原始字段映射与分组</template>\n\t\t\t<template #footer>每项身份取 code</template>\n\t\t\t<template #label=\"{ label }\">已选 {{ label }}</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelectV2>\n\t\t<output>原始值：{{ value }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst value = ref<string | null>(null);\n// Stable group identities also avoid the fixed native top-level duplicate check.\nconst options = [\n\t{\n\t\tcode: 'group-available',\n\t\ttitle: '可用团队',\n\t\tmembers: [\n\t\t\t{ code: 'design', title: '设计' },\n\t\t\t{ code: 'develop', title: '开发' }\n\t\t]\n\t},\n\t{\n\t\tcode: 'group-disabled',\n\t\ttitle: '停用团队',\n\t\tmembers: [{ code: 'off', title: '停用', inactive: true }]\n\t}\n];\ndefineOptions({ name: 'AsamSelectV2NativeDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/native/js/Demo.vue",
									"sha256": "2b09a1fcb2431e3e1f4a4482404ab889444e1f7c43f09d632900ce5c46813492",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"value\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"{ value: 'code', label: 'title', disabled: 'inactive', options: 'members' }\"\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\t:height=\"200\"\n\t\t\t:item-height=\"36\"\n\t\t>\n\t\t\t<template #prefix>团队</template>\n\t\t\t<template #header>原始字段映射与分组</template>\n\t\t\t<template #footer>每项身份取 code</template>\n\t\t\t<template #label=\"{ label }\">已选 {{ label }}</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelectV2>\n\t\t<output>原始值：{{ value }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst value = ref(null);\n// Stable group identities also avoid the fixed native top-level duplicate check.\nconst options = [\n\t{\n\t\tcode: 'group-available',\n\t\ttitle: '可用团队',\n\t\tmembers: [\n\t\t\t{ code: 'design', title: '设计' },\n\t\t\t{ code: 'develop', title: '开发' }\n\t\t]\n\t},\n\t{\n\t\tcode: 'group-disabled',\n\t\ttitle: '停用团队',\n\t\tmembers: [{ code: 'off', title: '停用', inactive: true }]\n\t}\n];\ndefineOptions({ name: 'AsamSelectV2NativeDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "custom",
					"title": "自定义标签、加载与清空策略",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/custom/ts/Demo.vue",
									"sha256": "927f315406a3410236c32163ac226a8be26101ed5c1e6362e10a5728563adaab",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"2\"\n\t\t\t:tag-tooltip=\"{ placement: 'bottom', showAfter: 100 }\"\n\t\t\t:multiple-limit=\"3\"\n\t\t\t:loading=\"loading\"\n\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t:value-on-clear=\"null\"\n\t\t\t:fit-input-width=\"false\"\n\t\t\tpopper-class=\"custom-choice-popup\"\n\t\t\taria-label=\"自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"(item, index) in data\"\n\t\t\t\t\t:key=\"index\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, item)\"\n\t\t\t\t>\n\t\t\t\t\t移除 {{ selected[index] }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t\t<template #label=\"{ label, index }\">{{ index + 1 }} · {{ label }}</template>\n\t\t\t<template #loading>正在准备静态数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelectV2>\n\t\t<AsamCheckboxItem v-model=\"loading\">切换加载状态</AsamCheckboxItem>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelectV2, AsamCheckboxItem } from '@asam-ui/ui';\nconst selected = ref<string[]>(['design', 'dev']);\nconst loading = ref(false);\nconst options = ['design', 'dev', 'ops', 'test'].map((value) => ({\n\tvalue,\n\tlabel: value,\n\traw: { value }\n}));\ndefineOptions({ name: 'AsamSelectV2CustomDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/custom/js/Demo.vue",
									"sha256": "c4fb4c267546a4cd86d1828ead9f78981cc94d469097479408f311e65bc3b205",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"2\"\n\t\t\t:tag-tooltip=\"{ placement: 'bottom', showAfter: 100 }\"\n\t\t\t:multiple-limit=\"3\"\n\t\t\t:loading=\"loading\"\n\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t:value-on-clear=\"null\"\n\t\t\t:fit-input-width=\"false\"\n\t\t\tpopper-class=\"custom-choice-popup\"\n\t\t\taria-label=\"自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"(item, index) in data\"\n\t\t\t\t\t:key=\"index\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, item)\"\n\t\t\t\t>\n\t\t\t\t\t移除 {{ selected[index] }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t\t<template #label=\"{ label, index }\">{{ index + 1 }} · {{ label }}</template>\n\t\t\t<template #loading>正在准备静态数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelectV2>\n\t\t<AsamCheckboxItem v-model=\"loading\">切换加载状态</AsamCheckboxItem>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelectV2, AsamCheckboxItem } from '@asam-ui/ui';\nconst selected = ref(['design', 'dev']);\nconst loading = ref(false);\nconst options = ['design', 'dev', 'ops', 'test'].map((value) => ({\n\tvalue,\n\tlabel: value,\n\traw: { value }\n}));\ndefineOptions({ name: 'AsamSelectV2CustomDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "search",
					"title": "虚拟选项与异步查询回调",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/search/ts/Demo.vue",
									"sha256": "e3bdf0eafd9cc80e664c94af2a37bf0702194e2f5ccbf1fea8aef6c7b50b1e78",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t\tremote\n\t\t\tremote-show-suffix\n\t\t\t:remote-method=\"search\"\n\t\t\t:debounce=\"0\"\n\t\t\t:loading=\"loading\"\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tclearable\n\t\t\taria-label=\"异步筛选演示\"\n\t\t>\n\t\t\t<template #loading>正在筛选本地模拟数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelectV2>\n\t\t<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nimport type { AsamOption } from '@asam-ui/ui';\nconst value = ref<string | null>(null);\nconst query = ref('');\nconst loading = ref(false);\nconst source = ['设计', '开发', '测试'].map((value) => ({ value, label: value, raw: { value } }));\nconst options = ref<AsamOption<string>[]>(source);\nlet generation = 0;\nasync function search(text: string) {\n\tquery.value = text;\n\tconst ownGeneration = ++generation;\n\tloading.value = true;\n\tawait new Promise((resolve) => setTimeout(resolve, 180));\n\tif (ownGeneration !== generation) return;\n\toptions.value = source.filter((option) => option.label.includes(text));\n\tloading.value = false;\n}\ndefineOptions({ name: 'AsamSelectV2SearchDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/search/js/Demo.vue",
									"sha256": "e780e3e37e9ba21c975fa0d8b02cb1edf95c339f4967275c551fe26858d6e434",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t\tremote\n\t\t\tremote-show-suffix\n\t\t\t:remote-method=\"search\"\n\t\t\t:debounce=\"0\"\n\t\t\t:loading=\"loading\"\n\t\t\t:reserve-keyword=\"false\"\n\t\t\tclearable\n\t\t\taria-label=\"异步筛选演示\"\n\t\t>\n\t\t\t<template #loading>正在筛选本地模拟数据</template>\n\t\t\t<template #empty>没有匹配项</template>\n\t\t</AsamSelectV2>\n\t\t<output>输入：{{ query }}；选择：{{ value }}；加载：{{ loading }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst value = ref(null);\nconst query = ref('');\nconst loading = ref(false);\nconst source = ['设计', '开发', '测试'].map((value) => ({ value, label: value, raw: { value } }));\nconst options = ref(source);\nlet generation = 0;\nasync function search(text) {\n\tquery.value = text;\n\tconst ownGeneration = ++generation;\n\tloading.value = true;\n\tawait new Promise((resolve) => setTimeout(resolve, 180));\n\tif (ownGeneration !== generation) return;\n\toptions.value = source.filter((option) => option.label.includes(text));\n\tloading.value = false;\n}\ndefineOptions({ name: 'AsamSelectV2SearchDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "canonical",
					"title": "来源接管本地创建项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/canonical/ts/Demo.vue",
									"sha256": "c72b48a6f5d44b9c3a8e23e0c3d2384b9d6b55b1abda6e437c50dd11e201540c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"model\"\n\t\t\t:options=\"options\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"options = [canonical]\">来源接管同值项</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"model = null\">清空模型后重新选择</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t>重置本地创建集合</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" @click=\"label = control?.selectedLabel\"\n\t\t\t>读取实际选中标签</AsamButton\n\t\t>\n\t\t<output data-model>{{ JSON.stringify(model) }}</output>\n\t\t<output data-label>{{ JSON.stringify(label) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nimport type { AsamOption, AsamCreateOption, AsamSelectV2Expose } from '@asam-ui/ui';\ninterface Member {\n\tid: string;\n}\ndefineOptions({ name: 'AsamSelectV2CanonicalDemo' });\nconst model = ref<AsamOption<string, Member> | null>(null);\nconst options = ref<AsamOption<string, Member>[]>([]);\nconst control = ref<AsamSelectV2Expose>();\nconst label = ref<string | string[]>();\nconst canonical: AsamOption<string, Member> = {\n\tvalue: 'Omega',\n\tlabel: 'Server Omega',\n\traw: { id: 'saved' }\n};\nconst createOption: AsamCreateOption<string, Member> = (text) => ({\n\tvalue: text,\n\tlabel: text,\n\traw: { id: 'local-' + text }\n});\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/canonical/js/Demo.vue",
									"sha256": "7d4425414dc98e3f8e976316de2ddddfd9aa8f167c02c6e098377ebf49092928",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"model\"\n\t\t\t:options=\"options\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"options = [canonical]\">来源接管同值项</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"model = null\">清空模型后重新选择</AsamButton>\n\t\t<AsamButton type=\"default\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t>重置本地创建集合</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" @click=\"label = control?.selectedLabel\"\n\t\t\t>读取实际选中标签</AsamButton\n\t\t>\n\t\t<output data-model>{{ JSON.stringify(model) }}</output>\n\t\t<output data-label>{{ JSON.stringify(label) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamSelectV2CanonicalDemo' });\nconst model = ref(null);\nconst options = ref([]);\nconst control = ref();\nconst label = ref();\nconst canonical = {\n\tvalue: 'Omega',\n\tlabel: 'Server Omega',\n\traw: { id: 'saved' }\n};\nconst createOption = (text) => ({\n\tvalue: text,\n\tlabel: text,\n\traw: { id: 'local-' + text }\n});\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-objects",
					"title": "原始对象与 valueKey 身份",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/native-objects/ts/Demo.vue",
									"sha256": "883537046ba3bd2a6aa3448fbd966ac7fd8c5b8e697f5d09489ea52ed6a1bf42",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"single\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tvalue-key=\"id\"\n\t\t\t:options=\"options\"\n\t\t\tclearable\n\t\t\taria-label=\"原始对象单选\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"multiple\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tvalue-key=\"id\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tclearable\n\t\t\t:multiple-limit=\"2\"\n\t\t\taria-label=\"原始对象多选\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"single = { ...teams[0], name: '回填旧名称' }\"\n\t\t\t>回填同 id 的新对象</AsamButton\n\t\t>\n\t\t<output>原始单选：{{ single }}；原始多选：{{ multiple }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\ninterface Team {\n\tid: number;\n\tname: string;\n\towner: string;\n}\nconst teams: Team[] = [\n\t{ id: 1, name: '设计团队', owner: 'design' },\n\t{ id: 2, name: '开发团队', owner: 'develop' },\n\t{ id: 3, name: '停用团队', owner: 'disabled' }\n];\nconst options = teams.map((team) => ({ label: team.name, value: team, disabled: team.id === 3 }));\nconst single = ref<Team | null>({ ...teams[0], name: '回填旧名称' });\nconst multiple = ref<Team[]>([teams[0]]);\ndefineOptions({ name: 'AsamSelectV2NativeObjectsDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/native-objects/js/Demo.vue",
									"sha256": "ebb1a88a5b5a9662ba47645dac916ce60285d647a83debc754e04790d9b8d3e0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"single\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tvalue-key=\"id\"\n\t\t\t:options=\"options\"\n\t\t\tclearable\n\t\t\taria-label=\"原始对象单选\"\n\t\t/>\n\t\t<AsamSelectV2\n\t\t\tv-model=\"multiple\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tvalue-key=\"id\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\tclearable\n\t\t\t:multiple-limit=\"2\"\n\t\t\taria-label=\"原始对象多选\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"single = { ...teams[0], name: '回填旧名称' }\"\n\t\t\t>回填同 id 的新对象</AsamButton\n\t\t>\n\t\t<output>原始单选：{{ single }}；原始多选：{{ multiple }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nconst teams = [\n\t{ id: 1, name: '设计团队', owner: 'design' },\n\t{ id: 2, name: '开发团队', owner: 'develop' },\n\t{ id: 3, name: '停用团队', owner: 'disabled' }\n];\nconst options = teams.map((team) => ({ label: team.name, value: team, disabled: team.id === 3 }));\nconst single = ref({ ...teams[0], name: '回填旧名称' });\nconst multiple = ref([teams[0]]);\ndefineOptions({ name: 'AsamSelectV2NativeObjectsDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "display",
					"title": "空字符串、清空与默认折叠标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/display/ts/Demo.vue",
									"sha256": "27618c650c06318395729e7e843c052bac6343d1a41525d59a186d91063f36a5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section class=\"demo-layout-1\" data-case=\"empty\">\n\t\t\t<AsamSelectV2\n\t\t\t\tv-model=\"emptyValue\"\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t:options=\"emptyOptions\"\n\t\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t\t:value-on-clear=\"null\"\n\t\t\t\tclearable\n\t\t\t\taria-label=\"空字符串也是有效选项\"\n\t\t\t\t@clear=\"clearCount++\"\n\t\t\t/>\n\t\t\t<output>空值：{{ JSON.stringify(emptyValue) }}；清空次数：{{ clearCount }}</output>\n\t\t</section>\n\t\t<section data-case=\"explicit-tooltip\">\n\t\t\t<AsamSelectV2\n\t\t\t\tv-model=\"explicit\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"1\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{\n\t\t\t\t\tpopperClass: 'explicit-choice-tooltip',\n\t\t\t\t\teffect: 'light',\n\t\t\t\t\tplacement: 'top',\n\t\t\t\t\tshowAfter: 0\n\t\t\t\t}\"\n\t\t\t\taria-label=\"显式折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t\t<section data-case=\"inherited-tooltip\">\n\t\t\t<AsamSelectV2\n\t\t\t\tv-model=\"inherited\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"2\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{ showAfter: 0 }\"\n\t\t\t\taria-label=\"继承折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst emptyValue = ref<string | null>('');\nconst clearCount = ref(0);\nconst emptyOptions = [\n\t{ label: '全部', value: '' },\n\t{ label: '设计', value: 'design' }\n];\nconst options = ['design', 'develop', 'ops', 'test'].map((value) => ({\n\tlabel: value,\n\tvalue,\n\traw: { value }\n}));\nconst explicit = ref<string[]>(options.map((option) => option.value));\nconst inherited = ref<string[]>(options.map((option) => option.value));\ndefineOptions({ name: 'AsamSelectV2DisplayDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\nsection {\n\twidth: min(100%, 360px);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/display/js/Demo.vue",
									"sha256": "ecb2f0a484b5e216c23ee2c9f52b49d9e7d0417804470b2cfe9d3084a2ce688b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section class=\"demo-layout-1\" data-case=\"empty\">\n\t\t\t<AsamSelectV2\n\t\t\t\tv-model=\"emptyValue\"\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t:options=\"emptyOptions\"\n\t\t\t\t:empty-values=\"[null, undefined]\"\n\t\t\t\t:value-on-clear=\"null\"\n\t\t\t\tclearable\n\t\t\t\taria-label=\"空字符串也是有效选项\"\n\t\t\t\t@clear=\"clearCount++\"\n\t\t\t/>\n\t\t\t<output>空值：{{ JSON.stringify(emptyValue) }}；清空次数：{{ clearCount }}</output>\n\t\t</section>\n\t\t<section data-case=\"explicit-tooltip\">\n\t\t\t<AsamSelectV2\n\t\t\t\tv-model=\"explicit\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"1\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{\n\t\t\t\t\tpopperClass: 'explicit-choice-tooltip',\n\t\t\t\t\teffect: 'light',\n\t\t\t\t\tplacement: 'top',\n\t\t\t\t\tshowAfter: 0\n\t\t\t\t}\"\n\t\t\t\taria-label=\"显式折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t\t<section data-case=\"inherited-tooltip\">\n\t\t\t<AsamSelectV2\n\t\t\t\tv-model=\"inherited\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tcollapse-tags\n\t\t\t\tcollapse-tags-tooltip\n\t\t\t\t:max-collapse-tags=\"2\"\n\t\t\t\t:teleported=\"false\"\n\t\t\t\tpopper-class=\"inherited-choice-tooltip\"\n\t\t\t\teffect=\"dark\"\n\t\t\t\t:tag-tooltip=\"{ showAfter: 0 }\"\n\t\t\t\taria-label=\"继承折叠标签配置\"\n\t\t\t/>\n\t\t</section>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst emptyValue = ref('');\nconst clearCount = ref(0);\nconst emptyOptions = [\n\t{ label: '全部', value: '' },\n\t{ label: '设计', value: 'design' }\n];\nconst options = ['design', 'develop', 'ops', 'test'].map((value) => ({\n\tlabel: value,\n\tvalue,\n\traw: { value }\n}));\nconst explicit = ref(options.map((option) => option.value));\nconst inherited = ref(options.map((option) => option.value));\ndefineOptions({ name: 'AsamSelectV2DisplayDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n\nsection {\n\twidth: min(100%, 360px);\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "layout",
					"title": "浮层宽度与固定行高",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/layout/ts/Demo.vue",
									"sha256": "12be412fb92b01a7d6308b102dc3be8cc6db4a487800d353c8b0bc0a2a02fc26",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-for=\"(width, index) in widths\"\n\t\t\t:key=\"index\"\n\t\t\tv-model=\"values[index]\"\n\t\t\t:options=\"options\"\n\t\t\t:fit-input-width=\"width\"\n\t\t\t:item-height=\"36\"\n\t\t\t:height=\"180\"\n\t\t\t:aria-label=\"'浮层宽度 ' + index\"\n\t\t\t:popper-class=\"'layout-popup-' + index\"\n\t\t\tstyle=\"width: 240px\"\n\t\t>\n\t\t\t<template #default=\"{ item }\"\n\t\t\t\t><span>{{ item?.label }} · 自定义选项内容</span></template\n\t\t\t>\n\t\t</AsamSelectV2>\n\t\t<output>选择：{{ values }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst widths = [false, true, 420];\nconst values = ref<(number | null)[]>([null, null, null]);\nconst options = Array.from({ length: 100 }, (_, value) => ({\n\tvalue,\n\tlabel: '布局选项 ' + value,\n\traw: { value }\n}));\ndefineOptions({ name: 'AsamSelectV2LayoutDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/layout/js/Demo.vue",
									"sha256": "99c90d2b23ca26300771bd0b9cf0724ce707ddcc337d2b976e9123b977130529",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-for=\"(width, index) in widths\"\n\t\t\t:key=\"index\"\n\t\t\tv-model=\"values[index]\"\n\t\t\t:options=\"options\"\n\t\t\t:fit-input-width=\"width\"\n\t\t\t:item-height=\"36\"\n\t\t\t:height=\"180\"\n\t\t\t:aria-label=\"'浮层宽度 ' + index\"\n\t\t\t:popper-class=\"'layout-popup-' + index\"\n\t\t\tstyle=\"width: 240px\"\n\t\t>\n\t\t\t<template #default=\"{ item }\"\n\t\t\t\t><span>{{ item?.label }} · 自定义选项内容</span></template\n\t\t\t>\n\t\t</AsamSelectV2>\n\t\t<output>选择：{{ values }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2 } from '@asam-ui/ui';\nconst widths = [false, true, 420];\nconst values = ref([null, null, null]);\nconst options = Array.from({ length: 100 }, (_, value) => ({\n\tvalue,\n\tlabel: '布局选项 ' + value,\n\traw: { value }\n}));\ndefineOptions({ name: 'AsamSelectV2LayoutDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "dynamic",
					"title": "真实动态行高与内容更新",
					"preview": {
						"mode": "source-only",
						"reason": "固定依赖 2.14.7 下，此输入首次挂载会出现渲染无响应；动态行高、内容更新和滚动运行尚未通过验证。这里保留完整 TS/JS 复现源码，固定行高的可运行用法见 virtual / layout 示例。"
					},
					"reproduction": "/example-AsamSelectV2-dynamic.html",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/dynamic/ts/Demo.vue",
									"sha256": "59848fd5ea293d2a861fb12f3655a21d1c53109560a5e7b7bc2509b56bdf7f16",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\t:estimated-option-height=\"40\"\n\t\t\t:height=\"180\"\n\t\t\t:fit-input-width=\"420\"\n\t\t\tfilterable\n\t\t\taria-label=\"可变行高选项\"\n\t\t\t@end-reached=\"direction = $event\"\n\t\t>\n\t\t\t<template #default=\"{ item, index }\"\n\t\t\t\t><div\n\t\t\t\t\t:style=\"{\n\t\t\t\t\t\tminHeight: index % 2 ? (tall ? '96px' : '64px') : '32px',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\tlineHeight: '20px'\n\t\t\t\t\t}\"\n\t\t\t\t>\n\t\t\t\t\t{{ item?.label }}\n\t\t\t\t</div></template\n\t\t\t>\n\t\t</AsamSelectV2>\n\t\t<AsamButton type=\"default\" @click=\"tall = !tall\">切换实际内容高度</AsamButton>\n\t\t<output>选择：{{ selected }}；方向：{{ direction }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nconst options = Array.from({ length: 100 }, (_, value) => ({\n\tvalue,\n\tlabel: '动态选项 ' + value,\n\traw: { value }\n}));\nconst selected = ref<number | null>(null);\nconst tall = ref(false);\nconst direction = ref('');\ndefineOptions({ name: 'AsamSelectV2DynamicDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/dynamic/js/Demo.vue",
									"sha256": "4a6a19e1ccf86542ac399aa7fb558c2d096d5bb069d7f1a6bb787d8d028b4cb3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\t:estimated-option-height=\"40\"\n\t\t\t:height=\"180\"\n\t\t\t:fit-input-width=\"420\"\n\t\t\tfilterable\n\t\t\taria-label=\"可变行高选项\"\n\t\t\t@end-reached=\"direction = $event\"\n\t\t>\n\t\t\t<template #default=\"{ item, index }\"\n\t\t\t\t><div\n\t\t\t\t\t:style=\"{\n\t\t\t\t\t\tminHeight: index % 2 ? (tall ? '96px' : '64px') : '32px',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\tlineHeight: '20px'\n\t\t\t\t\t}\"\n\t\t\t\t>\n\t\t\t\t\t{{ item?.label }}\n\t\t\t\t</div></template\n\t\t\t>\n\t\t</AsamSelectV2>\n\t\t<AsamButton type=\"default\" @click=\"tall = !tall\">切换实际内容高度</AsamButton>\n\t\t<output>选择：{{ selected }}；方向：{{ direction }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSelectV2, AsamButton } from '@asam-ui/ui';\nconst options = Array.from({ length: 100 }, (_, value) => ({\n\tvalue,\n\tlabel: '动态选项 ' + value,\n\traw: { value }\n}));\nconst selected = ref(null);\nconst tall = ref(false);\nconst direction = ref('');\ndefineOptions({ name: 'AsamSelectV2DynamicDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-tag",
					"title": "原生选项标签与删除回调",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/native-tag/ts/Demo.vue",
									"sha256": "3691ed5630f2d9211e9478b547931d86053ea9c10c46b85c9475206240a000ec",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tmultiple\n\t\t\t:options=\"options\"\n\t\t\t:teleported=\"false\"\n\t\t\taria-label=\"虚拟自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"option in data\"\n\t\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled || option.disabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamSelectV2>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelectV2 } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamSelectV2NativeTagExample' });\nconst selected = ref(['a']);\nconst options = [\n\t{ value: 'a', label: 'Alpha' },\n\t{ value: 'b', label: 'Beta', disabled: true }\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSelectV2/native-tag/js/Demo.vue",
									"sha256": "d26408dcf3a936fe4fe6700afede83e5404a6ad7e64fbad932b6cbeb07300874",
									"source": "<template>\n\t<div class=\"demo-root-layout\">\n\t\t<AsamSelectV2\n\t\t\tv-model=\"selected\"\n\t\t\tvalue-mode=\"native\"\n\t\t\tmultiple\n\t\t\t:options=\"options\"\n\t\t\t:teleported=\"false\"\n\t\t\taria-label=\"虚拟自定义标签\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"option in data\"\n\t\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled || option.disabled\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamSelectV2>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamSelectV2 } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamSelectV2NativeTagExample' });\nconst selected = ref(['a']);\nconst options = [\n\t{ value: 'a', label: 'Alpha' },\n\t{ value: 'b', label: 'Beta', disabled: true }\n];\n</script>\n\n<style scoped>\n.demo-root-layout {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.demo-root-layout > :is(p, pre, output) {\n\tmargin-block: 0;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteSelectV2",
			"documentation": "/component-AsamRemoteSelectV2.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/basic/ts/Demo.vue",
									"sha256": "fa7b23daa5970535083310744fea28d479649460999ab680256c75db339cf69f",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamRemoteSelectV2\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelectV2>\n\t\t<AsamRemoteSelectV2\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelectV2>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@mousedown.prevent\n\t\t\t\t@click=\"readSelectedLabel\"\n\t\t\t\t>读取当前标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t\t>聚焦选择器</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@mousedown.prevent\n\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t>失焦选择器</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamRemoteSelectV2BasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteSelectV2Expose, AsamApiRequest } from '@asam-ui/ui';\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref<string[]>([]);\nconst control = ref<AsamRemoteSelectV2Expose<string, Item>>();\nconst selectedLabel = ref<string | string[]>('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nfunction source(text: string) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/basic/js/Demo.vue",
									"sha256": "9644194a2cdca7e369e5a0363db1c2aef49ca9c31e22eb0641aa710d71bed26f",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamRemoteSelectV2\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelectV2>\n\t\t<AsamRemoteSelectV2\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\t:source=\"source\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamRemoteSelectV2>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@mousedown.prevent\n\t\t\t\t@click=\"readSelectedLabel\"\n\t\t\t\t>读取当前标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t\t>聚焦选择器</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@mousedown.prevent\n\t\t\t\t@click=\"control?.blur()\"\n\t\t\t\t>失焦选择器</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamRemoteSelectV2BasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\nconst value = ref(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref([]);\nconst control = ref();\nconst selectedLabel = ref('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nfunction source(text) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform: (response) => response,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-creation",
					"title": "本地创建、规范项与来源重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-creation/ts/Demo.vue",
									"sha256": "d7dae02739b65c97e98753e7bb873f75dd891bc8d5f92a1c61c1ece70c648529",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamRemoteSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce-ms=\"100\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamRemoteSelectV2>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\nimport type {\n\tAsamOption,\n\tAsamCreateOption,\n\tAsamValue,\n\tAsamRemoteSelectV2Expose,\n\tAsamApiRequest\n} from '@asam-ui/ui';\ninterface Member {\n\tid: string;\n\tlabel: string;\n\tvalue: string;\n}\ninterface Query {\n\ttenant: string;\n\ttext: string;\n}\nconst tenant = ref('a');\nconst failure = ref(false);\nconst canonical = ref(false);\ndefineOptions({ name: 'AsamRemoteSelectV2LocalCreationDemo' });\nconst value = ref<AsamOption<string, Member> | null>(null);\nconst control = ref<AsamRemoteSelectV2Expose<string, Member>>();\nconst createdTexts = ref<string[]>([]);\nconst providerValues = ref<AsamValue[]>([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption: AsamCreateOption<string, Member> = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\nconst transform = (items: readonly Member[]) => items;\nconst api: AsamApiRequest<Query, readonly Member[]> = async (query, context) => {\n\tawait new Promise<void>((done) => setTimeout(done, 150));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示请求失败');\n\tconst items: Member[] = [{ id: 'server', label: 'Server', value: 'server' }];\n\tif (canonical.value) items.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\treturn items.filter((item) => item.label.toLowerCase().includes(query.text.toLowerCase()));\n};\nconst factory = defineAsamOptions<string, Member>();\nfunction source(text: string) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { tenant: tenant.value, text },\n\t\ttransform,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-creation/js/Demo.vue",
									"sha256": "973b048f83bd7f1ed2cde8b4538f56236e5b589671e76125bf4e96532abd1752",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamRemoteSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce-ms=\"100\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamRemoteSelectV2>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\nconst tenant = ref('a');\nconst failure = ref(false);\nconst canonical = ref(false);\ndefineOptions({ name: 'AsamRemoteSelectV2LocalCreationDemo' });\nconst value = ref(null);\nconst control = ref();\nconst createdTexts = ref([]);\nconst providerValues = ref([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\nconst transform = (items) => items;\nconst api = async (query, context) => {\n\tawait new Promise((done) => setTimeout(done, 150));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示请求失败');\n\tconst items = [{ id: 'server', label: 'Server', value: 'server' }];\n\tif (canonical.value) items.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\treturn items.filter((item) => item.label.toLowerCase().includes(query.text.toLowerCase()));\n};\nconst factory = defineAsamOptions();\nfunction source(text) {\n\treturn factory.api({\n\t\tapi,\n\t\tparams: { tenant: tenant.value, text },\n\t\ttransform,\n\t\tfieldNames: { label: 'label', value: 'value' }\n\t});\n}\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-presentation",
					"title": "选项模板、标签折叠与加载插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/native-presentation/ts/Demo.vue",
									"sha256": "9d1181497067c8663c79ccce32ff6fb5e14312cbccec762659aa875bab532e29",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamRemoteSelectV2NativePresentationDemo' });\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/native-presentation/ts/Child.vue",
									"sha256": "d20ea7d1843e64b18775e308492026a7dcf840000621ac43be66b23ba2b1e32d",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamRemoteSelectV2\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce-ms=\"0\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:fit-input-width=\"320\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item, index, disabled: optionDisabled }\">\n\t\t\t\t<span :data-option-index=\"index\" :data-option-disabled=\"optionDisabled\">\n\t\t\t\t\t{{ item.label }} · 自定义虚拟选项\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamRemoteSelectV2>\n\t\t<label>多选展示</label>\n\t\t<AsamRemoteSelectV2\n\t\t\tv-model=\"multipleValues\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce-ms=\"0\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamRemoteSelectV2>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue';\nimport { AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\nimport type {\n\tAsamSelectV2DataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamOption as DataOption,\n\tAsamRemoteSelectV2Expose,\n\tAsamApiRequest\n} from '@asam-ui/ui';\nimport type { DemoState, Member } from './provider.js';\ndefineOptions({ name: 'AsamRemoteSelectV2NativePresentationChild' });\nconst injected = inject<DemoState>('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state: DemoState = injected;\nconst singleControl = ref<AsamRemoteSelectV2Expose<number, Member>>();\nconst singleValue = ref<number | null>(null);\ntype DataEmits = AsamSelectV2DataEmits<AsamValue, object>;\nconst dataEvents = ref<\n\treadonly {\n\t\treadonly mode: 'single' | 'multiple';\n\t\treadonly name: string;\n\t\treadonly payload: unknown;\n\t}[]\n>([]);\nconst eventResult = ref('');\nfunction recordEvent(mode: 'single' | 'multiple', name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref<readonly number[]>([1, 3, 4]);\nconst removed = ref<unknown[]>([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref<readonly DataOption<number, Member>[]>([]);\n\nconst api: AsamApiRequest<{ text: string }, readonly Member[]> = async (params, context) =>\n\tstate.read(context.signal, params.text);\nconst factory = defineAsamOptions<number, Member>();\nconst transform = (items: readonly Member[]) => items;\nconst source = (text: string) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n\t});\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/native-presentation/ts/provider.ts",
									"sha256": "37e1ad50178df2b3276b64323369e24ae6e45f7e25b6f6bcd139fd01b6dd2f28",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Member {\n\treadonly label: string;\n\treadonly value: number;\n\treadonly id: number;\n\treadonly team: string;\n\treadonly disabled?: boolean;\n}\nconst rows: readonly Member[] = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set<() => void>();\n\tasync function read(signal: AbortSignal, text: string) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise<void>((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/native-presentation/js/Demo.vue",
									"sha256": "dcc84df4d93a55cd305b496711a9c0e55d68eb0ae3e0bb0d543bdc0f58f5ae0c",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamRemoteSelectV2NativePresentationDemo' });\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/native-presentation/js/Child.vue",
									"sha256": "c71891c9e9d52ebd6a99523b8cb865d200ab332c2ec28b071c0aedea8c989fc2",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamRemoteSelectV2\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce-ms=\"0\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:fit-input-width=\"320\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item, index, disabled: optionDisabled }\">\n\t\t\t\t<span :data-option-index=\"index\" :data-option-disabled=\"optionDisabled\">\n\t\t\t\t\t{{ item.label }} · 自定义虚拟选项\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamRemoteSelectV2>\n\t\t<label>多选展示</label>\n\t\t<AsamRemoteSelectV2\n\t\t\tv-model=\"multipleValues\"\n\t\t\t:source=\"source\"\n\t\t\t:debounce-ms=\"0\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamRemoteSelectV2>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { inject, ref } from 'vue';\nimport { AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamRemoteSelectV2NativePresentationChild' });\nconst injected = inject('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state = injected;\nconst singleControl = ref();\nconst singleValue = ref(null);\nconst dataEvents = ref([]);\nconst eventResult = ref('');\nfunction recordEvent(mode, name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload, mode) {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload, mode) {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref([1, 3, 4]);\nconst removed = ref([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref([]);\nconst api = async (params, context) => state.read(context.signal, params.text);\nconst factory = defineAsamOptions();\nconst transform = (items) => items;\nconst source = (text) =>\n\tfactory.api({\n\t\tapi,\n\t\tparams: { text },\n\t\ttransform,\n\t\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n\t});\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/native-presentation/js/provider.js",
									"sha256": "c1ed4061809c3d2f789fe4d38308d94262e415cce275789691f0de896a0b4b91",
									"source": "import { ref } from 'vue';\nconst rows = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set();\n\tasync function read(signal, text) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-error/ts/Demo.vue",
									"sha256": "22bf4d4e530df721ff380280a72aec6bd18457008fa670de424c931ba444295a",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteSelectV2DemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteSelectV2-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-error/ts/Child.vue",
									"sha256": "c33501b8f1de65d1ca9e9abcca8ec2499f17c8d33522cd6a9af2ac29edaefe0d",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteSelectV2 ref=\"control\" v-model=\"value\" :source=\"source\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteSelectV2>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteSelectV2ChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteSelectV2Expose, AsamRemoteSelectV2Slots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamRemoteSelectV2Expose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nconst source = () => dataSource;\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamRemoteSelectV2Slots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-error/js/Demo.vue",
									"sha256": "6926ea42e7c0ddd401bc1e70ba10be10790df97d4ccc1b1d6d04b721a23cad39",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteSelectV2DemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteSelectV2-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-error/js/Child.vue",
									"sha256": "4192f61e44644273a0eea1c11a0c5d0c6ee7b4b4ba8cffe0efbb78dbeb6a1692",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteSelectV2 ref=\"control\" v-model=\"value\" :source=\"source\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteSelectV2>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteSelectV2ChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nconst source = () => dataSource;\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteSelectV2/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDictSelectV2",
			"documentation": "/component-AsamDictSelectV2.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地字典与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/basic/ts/Demo.vue",
									"sha256": "7396d64260c5ea55f3da48e82aa6d5f95612b739242d08c91b78f2c24334e40a",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictSelectV2BasicDemoExample' });\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/basic/ts/Child.vue",
									"sha256": "f5d3809155e53b4c6f3f0bf707d2783f43da5ffd09306c8bc229f6a409c915fe",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamDictSelectV2\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelectV2>\n\t\t<AsamDictSelectV2\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelectV2>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readSelectedLabel\"\n\t\t\t>读取当前标签</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t>聚焦选择器</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @mousedown.prevent @click=\"control?.blur()\"\n\t\t\t>失焦选择器</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamDictSelectV2BasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamDictSelectV2 } from '@asam-ui/ui';\nimport type { AsamDictSelectV2Expose, AsamDictEntry } from '@asam-ui/ui';\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref<string[]>([]);\nconst control = ref<AsamDictSelectV2Expose<string, AsamDictEntry>>();\nconst selectedLabel = ref<string | string[]>('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/basic/ts/provider.ts",
									"sha256": "1da89e658d274256a3020a0b630ab0977904c4645dc8e6614b2d66951c17bc2d",
									"source": "import type { AsamDataProvider } from '@asam-ui/ui';\n\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/basic/js/Demo.vue",
									"sha256": "218dd339e4adf4ca41ed878e27dc4109303b7b366144363f7a8cad17a98f22a3",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictSelectV2BasicDemoExample' });\n\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/basic/js/Child.vue",
									"sha256": "fb4b1f9f984e37224c90a6ba883c7f65f18fde5cee266751b97581400fa06dee",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"multipleMode\">启用多选</AsamCheckboxItem>\n\t\t<AsamDictSelectV2\n\t\t\tv-if=\"!multipleMode\"\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelectV2>\n\t\t<AsamDictSelectV2\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tv-model=\"multipleValue\"\n\t\t\tmultiple\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #prefix><span aria-hidden=\"true\">状态</span></template>\n\t\t</AsamDictSelectV2>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readSelectedLabel\"\n\t\t\t>读取当前标签</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.focus()\"\n\t\t\t>聚焦选择器</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @mousedown.prevent @click=\"control?.blur()\"\n\t\t\t>失焦选择器</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ multipleMode ? multipleValue : value }}</pre>\n\t\t<pre data-testid=\"selected-label\">{{ selectedLabel }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\ndefineOptions({ name: 'AsamDictSelectV2BasicExample' });\nimport { AsamCheckboxItem, AsamButton, AsamDictSelectV2 } from '@asam-ui/ui';\nconst value = ref(null);\nconst active = ref(true);\nconst multipleMode = ref(false);\nconst multipleValue = ref([]);\nconst control = ref();\nconst selectedLabel = ref('');\nfunction readSelectedLabel() {\n\tselectedLabel.value = control.value?.selectedLabel ?? '';\n}\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/basic/js/provider.js",
									"sha256": "5dd6ce08b0eb95147057e3760678a200ea4d263da5390edccdbd797c9c661d49",
									"source": "export const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "local-creation",
					"title": "本地创建、规范项与来源重置",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-creation/ts/Child.vue",
									"sha256": "6c67edb009434c4ece66c42b9199661fead1a6a312933f743386f727ad12bd00",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamDictSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:dict-type=\"tenant\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamDictSelectV2>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictSelectV2 } from '@asam-ui/ui';\nimport type {\n\tAsamOption,\n\tAsamCreateOption,\n\tAsamValue,\n\tAsamRemoteSelectV2Expose\n} from '@asam-ui/ui';\nimport type { DemoState, Member } from './provider.js';\nconst state = inject<DemoState>('selection-local-demo');\nif (!state) throw new Error('Demo.vue 必须先配置演示 provider。');\nconst { tenant, failure, canonical } = state;\ndefineOptions({ name: 'AsamDictSelectV2LocalCreationChild' });\nconst value = ref<AsamOption<string, Member> | null>(null);\nconst control = ref<AsamRemoteSelectV2Expose<string, Member>>();\nconst createdTexts = ref<string[]>([]);\nconst providerValues = ref<AsamValue[]>([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption: AsamCreateOption<string, Member> = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\n\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-creation/ts/Demo.vue",
									"sha256": "80978cbe6375699d9312ab49ba2d3bfa62cf1e586c7a6291a4aa4dbfa23874c8",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectV2LocalCreationDemo' });\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-local-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'selection-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-creation/ts/provider.ts",
									"sha256": "d05f7b764c10cb22f06cc341a6b6ba0eb430286b1501c21c93455df109828ad6",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider, AsamDictEntry } from '@asam-ui/ui';\nexport interface Member extends AsamDictEntry {\n\treadonly id: string;\n\treadonly value: string;\n}\nexport function createDemoState() {\n\treturn { tenant: ref('a'), failure: ref(false), canonical: ref(false) };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, 150));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示字典失败');\n\t\t\t\tif (!['a', 'b'].includes(type)) throw new Error('未知演示字典');\n\t\t\t\tconst items: Member[] = [{ id: 'server', label: 'Server', value: 'server' }];\n\t\t\t\tif (state.canonical.value)\n\t\t\t\t\titems.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\t\t\t\treturn items;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-creation/js/Child.vue",
									"sha256": "adcecc7b0d2917a05f833b5a88cd335aaea69d8d6a81ed025279f61953e15fcc",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<div class=\"actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"reload\">强制重载</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.clearCreatedOptions()\"\n\t\t\t\t>清空本地创建集合</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = null\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"tenant = tenant === 'a' ? 'b' : 'a'\"\n\t\t\t\t>切换逻辑来源</AsamButton\n\t\t\t>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"failure\">模拟失败</AsamCheckboxItem>\n\t\t\t<!-- prettier-ignore -->\n\t\t\t<AsamCheckboxItem v-model=\"canonical\">来源接受 Omega 同值项</AsamCheckboxItem>\n\t\t</div>\n\t\t<AsamDictSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:dict-type=\"tenant\"\n\t\t\t:create-option=\"createOption\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tallow-create\n\t\t\tfilterable\n\t\t\tclearable\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"输入 Omega 并选择创建项\"\n\t\t\t@success=\"providerValues = $event.map((item) => item.value)\"\n\t\t\t@error=\"message = $event.message\"\n\t\t>\n\t\t\t<template #header><p class=\"example-paragraph\">本地创建和来源选项分别保存</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>\n\t\t</AsamDictSelectV2>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ message }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>\n\t\t<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { inject, nextTick, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictSelectV2 } from '@asam-ui/ui';\nconst state = inject('selection-local-demo');\nif (!state) throw new Error('Demo.vue 必须先配置演示 provider。');\nconst { tenant, failure, canonical } = state;\ndefineOptions({ name: 'AsamDictSelectV2LocalCreationChild' });\nconst value = ref(null);\nconst control = ref();\nconst createdTexts = ref([]);\nconst providerValues = ref([]);\nconst message = ref('');\nconst result = ref('');\nconst createOption = (text) => {\n\tcreatedTexts.value.push(text);\n\treturn { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };\n};\nasync function reload() {\n\tawait nextTick();\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n\tif (result.value === 'success') message.value = '';\n}\n</script>\n\n<style scoped>\n.actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\npre {\n\twhite-space: pre-wrap;\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-creation/js/Demo.vue",
									"sha256": "83755c073ee6b80a392f89049dd4c473f158859c89b3e2cd8bbcf805dba9eb1e",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectV2LocalCreationDemo' });\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-local-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'selection-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-creation/js/provider.js",
									"sha256": "b966c15c1af235e6c37541b22a4ddc9de20853d32f6ccced9a10970ba2282388",
									"source": "import { ref } from 'vue';\nexport function createDemoState() {\n\treturn { tenant: ref('a'), failure: ref(false), canonical: ref(false) };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise((done) => setTimeout(done, 150));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示字典失败');\n\t\t\t\tif (!['a', 'b'].includes(type)) throw new Error('未知演示字典');\n\t\t\t\tconst items = [{ id: 'server', label: 'Server', value: 'server' }];\n\t\t\t\tif (state.canonical.value)\n\t\t\t\t\titems.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });\n\t\t\t\treturn items;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "native-presentation",
					"title": "选项模板、标签折叠与加载插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/native-presentation/ts/Demo.vue",
									"sha256": "3a9bf1db34d44d8dc43407c1296499ec5e3c41f883416de0b9c7137623c175a7",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectV2NativePresentationDemo' });\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/native-presentation/ts/Child.vue",
									"sha256": "ebb6c204ea497cc987da7791cf71a7930427ba73c31af3190bfbb15995d8d830",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamDictSelectV2\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:fit-input-width=\"320\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item, index, disabled: optionDisabled }\">\n\t\t\t\t<span :data-option-index=\"index\" :data-option-disabled=\"optionDisabled\">\n\t\t\t\t\t{{ item.label }} · 自定义虚拟选项\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDictSelectV2>\n\t\t<label>多选展示</label>\n\t\t<AsamDictSelectV2\n\t\t\tv-model=\"multipleValues\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDictSelectV2>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue';\nimport { AsamButton, AsamDictSelectV2 } from '@asam-ui/ui';\nimport type {\n\tAsamSelectV2DataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamOption as DataOption,\n\tAsamRemoteSelectV2Expose,\n\tAsamRecord\n} from '@asam-ui/ui';\nimport type { DemoState } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectV2NativePresentationChild' });\nconst injected = inject<DemoState>('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state: DemoState = injected;\nconst singleControl = ref<AsamRemoteSelectV2Expose<number, AsamRecord>>();\nconst singleValue = ref<number | null>(null);\ntype DataEmits = AsamSelectV2DataEmits<AsamValue, object>;\nconst dataEvents = ref<\n\treadonly {\n\t\treadonly mode: 'single' | 'multiple';\n\t\treadonly name: string;\n\t\treadonly payload: unknown;\n\t}[]\n>([]);\nconst eventResult = ref('');\nfunction recordEvent(mode: 'single' | 'multiple', name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0], mode: 'single' | 'multiple') {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref<readonly number[]>([1, 3, 4]);\nconst removed = ref<unknown[]>([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref<readonly DataOption<number, AsamRecord>[]>([]);\n\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/native-presentation/ts/provider.ts",
									"sha256": "37e1ad50178df2b3276b64323369e24ae6e45f7e25b6f6bcd139fd01b6dd2f28",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Member {\n\treadonly label: string;\n\treadonly value: number;\n\treadonly id: number;\n\treadonly team: string;\n\treadonly disabled?: boolean;\n}\nconst rows: readonly Member[] = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set<() => void>();\n\tasync function read(signal: AbortSignal, text: string) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise<void>((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/native-presentation/js/Demo.vue",
									"sha256": "e602a1ddf11e20b990ef51d464e1e2be7e0136d4e03f2d4b8be5d1daa7a9e845",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\ndefineOptions({ name: 'AsamDictSelectV2NativePresentationDemo' });\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('selection-presentation', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'native-presentation' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/native-presentation/js/Child.vue",
									"sha256": "7eb63ed5c2eaf9e43f4c49bbcd28bee449ff5b7ea53bea1f7471739f69c35a96",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"failReload\"\n\t\t\t\t>制造刷新失败</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"recoverReload\"\n\t\t\t\t>恢复失败请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelHeld\"\n\t\t\t\t>取消持有请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"holdAndReload\"\n\t\t\t\t>等待并重载单选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"state.release()\"\n\t\t\t\t>完成当前请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"\n\t\t\t\t\tstate.empty.value = !state.empty.value;\n\t\t\t\t\tsingleControl?.reload({ force: true });\n\t\t\t\t\"\n\t\t\t>\n\t\t\t\t切换空结果\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换多选禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"collapseTags = !collapseTags\"\n\t\t\t\t>切换标签折叠</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"collapseTagsTooltip = !collapseTagsTooltip\"\n\t\t\t>\n\t\t\t\t切换折叠标签提示\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"maxCollapseTags = maxCollapseTags === 1 ? 3 : 1\"\n\t\t\t>\n\t\t\t\t切换可见标签数量\n\t\t\t</AsamButton>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"multipleLimit = multipleLimit === 3 ? 0 : 3\"\n\t\t\t>\n\t\t\t\t切换多选数量上限\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = [1, 3, 4]\"\n\t\t\t\t>恢复初始多选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"multipleValues = []\"\n\t\t\t\t>清空多选模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<label>单选展示</label>\n\t\t<AsamDictSelectV2\n\t\t\tref=\"singleControl\"\n\t\t\tv-model=\"singleValue\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\t:fit-input-width=\"320\"\n\t\t\tpopper-class=\"data009-presentation-popper\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示单选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'single')\"\n\t\t\t@change=\"onModelChange($event, 'single')\"\n\t\t\t@error=\"onError\"\n\t\t\t@success=\"\n\t\t\t\tsingleOptions = $event;\n\t\t\t\tonSuccess($event);\n\t\t\t\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"presentation-prefix\">前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"presentation-header\">选项列表说明</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"presentation-footer\">由本地来源加载</p></template>\n\t\t\t<template #loading>\n\t\t\t\t<span data-testid=\"presentation-loading\">正在读取本地选项</span>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"presentation-empty\">当前来源没有匹配项</p></template>\n\t\t\t<template #label=\"{ label, value }\">\n\t\t\t\t<span data-testid=\"presentation-label\">{{ label }} [{{ value }}]</span>\n\t\t\t</template>\n\t\t\t<template #default=\"{ item, index, disabled: optionDisabled }\">\n\t\t\t\t<span :data-option-index=\"index\" :data-option-disabled=\"optionDisabled\">\n\t\t\t\t\t{{ item.label }} · 自定义虚拟选项\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDictSelectV2>\n\t\t<label>多选展示</label>\n\t\t<AsamDictSelectV2\n\t\t\tv-model=\"multipleValues\"\n\t\t\tdict-type=\"presentation\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tmultiple\n\t\t\t:collapse-tags=\"collapseTags\"\n\t\t\t:collapse-tags-tooltip=\"collapseTagsTooltip\"\n\t\t\t:max-collapse-tags=\"maxCollapseTags\"\n\t\t\t:multiple-limit=\"multipleLimit\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tclearable\n\t\t\tplaceholder=\"演示多选\"\n\t\t\t:teleported=\"false\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t\t@update:model-value=\"onModelUpdate($event, 'multiple')\"\n\t\t\t@change=\"onModelChange($event, 'multiple')\"\n\t\t>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<span data-testid=\"presentation-tag\">\n\t\t\t\t\t已选 {{ data.length }} 项\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</AsamDictSelectV2>\n\t\t<pre data-testid=\"presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tsingleValue,\n\t\t\t\tmultipleValues,\n\t\t\t\tremoved,\n\t\t\t\tcustomTag,\n\t\t\t\tdisabled,\n\t\t\t\tcollapseTags,\n\t\t\t\tcollapseTagsTooltip,\n\t\t\t\tmaxCollapseTags,\n\t\t\t\tmultipleLimit,\n\t\t\t\tcalls: state.calls.value\n\t\t\t})\n\t\t}}</pre>\n\t\t<p class=\"example-paragraph\" data-testid=\"selection-event-result\">{{ eventResult }}</p>\n\t\t<pre data-testid=\"selection-data-events\">{{ JSON.stringify(dataEvents) }}</pre>\n\t</section>\n</template>\n<script setup>\nimport { inject, ref } from 'vue';\nimport { AsamButton, AsamDictSelectV2 } from '@asam-ui/ui';\ndefineOptions({ name: 'AsamDictSelectV2NativePresentationChild' });\nconst injected = inject('selection-presentation');\nif (!injected) throw new Error('Demo.vue must install its local provider before Child.vue mounts.');\nconst state = injected;\nconst singleControl = ref();\nconst singleValue = ref(null);\nconst dataEvents = ref([]);\nconst eventResult = ref('');\nfunction recordEvent(mode, name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tdataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];\n}\nfunction onModelUpdate(payload, mode) {\n\trecordEvent(mode, 'update:modelValue', payload);\n}\nfunction onModelChange(payload, mode) {\n\trecordEvent(mode, 'change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('single', 'success', payload);\n}\nfunction onError(payload) {\n\trecordEvent('single', 'error', { kind: payload.kind, message: payload.message });\n}\nasync function failReload() {\n\tstate.failure.value = true;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function recoverReload() {\n\tstate.failure.value = false;\n\teventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelHeld() {\n\tstate.held.value = true;\n\tconst pending = singleControl.value?.reload({ force: true });\n\tsetTimeout(() => singleControl.value?.cancel(), 30);\n\teventResult.value = (await pending)?.status ?? 'cancelled';\n\tstate.release();\n}\nconst multipleValues = ref([1, 3, 4]);\nconst removed = ref([]);\nconst customTag = ref(false);\nconst disabled = ref(false);\nconst collapseTags = ref(true);\nconst collapseTagsTooltip = ref(true);\nconst maxCollapseTags = ref(1);\nconst multipleLimit = ref(3);\nconst singleOptions = ref([]);\nfunction holdAndReload() {\n\tstate.held.value = true;\n\tvoid singleControl.value?.reload({ force: true });\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/native-presentation/js/provider.js",
									"sha256": "c1ed4061809c3d2f789fe4d38308d94262e415cce275789691f0de896a0b4b91",
									"source": "import { ref } from 'vue';\nconst rows = [\n\t{ label: 'Alpha', value: 1, id: 1, team: '一组' },\n\t{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },\n\t{ label: 'Gamma', value: 3, id: 3, team: '二组' },\n\t{ label: 'Delta', value: 4, id: 4, team: '二组' },\n\t{ label: 'Epsilon', value: 5, id: 5, team: '二组' }\n];\nexport function createDemoState() {\n\tconst held = ref(false),\n\t\tempty = ref(false),\n\t\tfailure = ref(false),\n\t\tcalls = ref(0);\n\tconst pending = new Set();\n\tasync function read(signal, text) {\n\t\tsignal.throwIfAborted();\n\t\tcalls.value++;\n\t\tif (held.value)\n\t\t\tawait new Promise((done, reject) => {\n\t\t\t\tconst finish = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\tdone();\n\t\t\t\t};\n\t\t\t\tconst abort = () => {\n\t\t\t\t\tpending.delete(finish);\n\t\t\t\t\tsignal.removeEventListener('abort', abort);\n\t\t\t\t\treject(signal.reason);\n\t\t\t\t};\n\t\t\t\tpending.add(finish);\n\t\t\t\tsignal.addEventListener('abort', abort, { once: true });\n\t\t\t\tif (signal.aborted) abort();\n\t\t\t});\n\t\tsignal.throwIfAborted();\n\t\tif (failure.value) throw new Error('演示选择器请求失败');\n\t\treturn empty.value\n\t\t\t? []\n\t\t\t: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));\n\t}\n\tfunction release() {\n\t\theld.value = false;\n\t\tfor (const finish of [...pending]) finish();\n\t}\n\treturn { held, empty, failure, calls, read, release };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tif (type !== 'presentation') throw new Error('Unknown local dictionary');\n\t\t\t\treturn (await state.read(context.signal, '')).map((item) => ({ ...item }));\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-error/ts/Demo.vue",
									"sha256": "e2dfdf9e24f708f858ff3f60b29773fdcba45aced89d2a9583c89d983e5254da",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictSelectV2DemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictSelectV2-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-error/ts/Child.vue",
									"sha256": "82cd559ce9ab786b7a0dde22a2bf16cfe7609ea39d2a03941041a568afa6d770",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictSelectV2>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictSelectV2ChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictSelectV2, defineAsamDictSource } from '@asam-ui/ui';\nimport type { AsamRemoteSelectV2Expose, AsamRemoteSelectV2Slots } from '@asam-ui/ui';\nimport type { Transport } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamRemoteSelectV2Expose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamRemoteSelectV2Slots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-error/js/Demo.vue",
									"sha256": "0b4053508cbdb3c2558fac712f0041c7b6d54444b368daefc3ba146032cde008",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictSelectV2DemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictSelectV2-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-error/js/Child.vue",
									"sha256": "620704112d87a16ada97fd286b5e953d1c62a8397d82679089401d348c6c8a65",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictSelectV2\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictSelectV2>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictSelectV2ChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictSelectV2, defineAsamDictSource } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDictSelectV2/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRadio",
			"documentation": "/component-AsamRadio.html",
			"demos": [
				{
					"id": "default-slot",
					"title": "默认插槽与空内容回退",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/default-slot/ts/Demo.vue",
									"sha256": "9a7473d73fa8d1f646bd4950b05e77406c1f372f8e7e2db48fea2bf864079552",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButton type=\"default\" @click=\"custom = !custom\">切换默认插槽</AsamButton>\n\t\t<AsamRadio v-model=\"value\" :options=\"options\">\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamRadioItem\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamRadioItem>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamRadio>\n\t\t<AsamRadio\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ valueMode: 'object', type: 'button' }\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamRadioButton\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamRadioButton>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamRadio>\n\t\t<output>{{ JSON.stringify({ custom, value, objectValue }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioDefaultSlotExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamRadio, AsamRadioItem, AsamRadioButton } from '@asam-ui/ui';\nconst options = [\n\t{ value: 'design', label: '设计', raw: { code: 'design' } },\n\t{ value: 'dev', label: '开发', raw: { code: 'dev' } }\n];\nconst custom = ref(true);\nconst value = ref('design');\nconst objectValue = ref<(typeof options)[number] | null>(options[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/default-slot/js/Demo.vue",
									"sha256": "4a9fd3a8bcce759a00db2474e07c56718c9f79af4b62ee40255056a140c4dce7",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButton type=\"default\" @click=\"custom = !custom\">切换默认插槽</AsamButton>\n\t\t<AsamRadio v-model=\"value\" :options=\"options\">\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamRadioItem\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamRadioItem>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamRadio>\n\t\t<AsamRadio\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ valueMode: 'object', type: 'button' }\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamRadioButton\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamRadioButton>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamRadio>\n\t\t<output>{{ JSON.stringify({ custom, value, objectValue }) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioDefaultSlotExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamRadio, AsamRadioItem, AsamRadioButton } from '@asam-ui/ui';\nconst options = [\n\t{ value: 'design', label: '设计', raw: { code: 'design' } },\n\t{ value: 'dev', label: '开发', raw: { code: 'dev' } }\n];\nconst custom = ref(true);\nconst value = ref('design');\nconst objectValue = ref(options[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "选项与按钮形态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/basic/ts/Demo.vue",
									"sha256": "b1c515d1209e83aea2a787c95b675281694e93568a7bfd56cb806128c31f9dbe",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadio v-model=\"value\" :options=\"options\" @change=\"event = JSON.stringify($event)\">\n\t\t\t<template #option=\"{ option }\"> {{ option.label }}团队 </template>\n\t\t</AsamRadio>\n\t\t<AsamRadio v-model=\"value\" :options=\"options\" type=\"button\" />\n\t\t<AsamRadio :model-value=\"value\" :options=\"options\" disabled />\n\t\t<output>值：{{ value }}；change：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadio } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/basic/js/Demo.vue",
									"sha256": "78b2dab7905cb720720dab32ad4c1b4441b9002be29b301392f3750adbe98f28",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadio v-model=\"value\" :options=\"options\" @change=\"event = JSON.stringify($event)\">\n\t\t\t<template #option=\"{ option }\"> {{ option.label }}团队 </template>\n\t\t</AsamRadio>\n\t\t<AsamRadio v-model=\"value\" :options=\"options\" type=\"button\" />\n\t\t<AsamRadio :model-value=\"value\" :options=\"options\" disabled />\n\t\t<output>值：{{ value }}；change：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioBasicExample' });\nimport { ref } from 'vue';\nimport { AsamRadio } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref('design');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "对象值与存储策略",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/policies/ts/Demo.vue",
									"sha256": "de4528af3e46d94b5ba02bac8f8dc0062fbcd04868bf30d1aaecc0017a6a4518",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadio v-model=\"objectValue\" :options=\"options\" value-mode=\"object\" />\n\t\t<output>对象：{{ objectValue }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamRadio } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref<(typeof options)[number] | null>(options[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/policies/js/Demo.vue",
									"sha256": "e808a9890079286a2042d98ca2b8c30bf98efad977c3df7ae4bad0892a022f24",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamRadio v-model=\"objectValue\" :options=\"options\" value-mode=\"object\" />\n\t\t<output>对象：{{ objectValue }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamRadio } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref(options[0]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/sizes/ts/Demo.vue",
									"sha256": "753943a7f1f3f4577cf44f316c1c6bb2dea12b8a2484d35ec848bc881c619579",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadio size=\"large\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadio size=\"big\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadio size=\"default\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadio size=\"small\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadio :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRadioSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadio, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/sizes/js/Demo.vue",
									"sha256": "808c082686608add329b83a913d0dcb6fdf35a99e8086f2039bea1d780712bf3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamRadio size=\"large\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamRadio size=\"big\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamRadio size=\"default\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamRadio size=\"small\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamRadio :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRadioSizesExample' });\nimport { ref } from 'vue';\nimport { AsamRadio, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "continuous",
					"title": "四档连续按钮与显式 Group 对照",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/continuous/ts/Demo.vue",
									"sha256": "25108add50a728190d11ffde05f40509ea312069544ee95ca2d4c70631954fb9",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section v-for=\"size in sizes\" :key=\"size\">\n\t\t\t<strong>{{ size }}</strong>\n\t\t\t<AsamRadio v-model=\"selected\" :size=\"size\" type=\"button\" :options=\"options\" />\n\t\t\t<AsamRadioGroup v-model=\"selected\" :size=\"size\" aria-label=\"插槽按钮组\">\n\t\t\t\t<AsamRadioButton\n\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>{{ option.label }}</AsamRadioButton\n\t\t\t\t>\n\t\t\t</AsamRadioGroup>\n\t\t\t<AsamRadio v-model=\"selected\" :size=\"size\" :options=\"options\" />\n\t\t</section>\n\t\t<output>当前值：{{ selected }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamRadio, AsamRadioGroup, AsamRadioButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst selected = ref('design');\nconst options = [\n\t{ value: 'design', label: '设计', raw: {} },\n\t{ value: 'develop', label: '开发', raw: {} },\n\t{ value: 'disabled', label: '停用', disabled: true, raw: {} }\n];\ndefineOptions({ name: 'AsamRadioContinuousDemo' });\n</script>\n<style scoped>\n.example,\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRadio/continuous/js/Demo.vue",
									"sha256": "7eb292c4357f3a7202594797633431c93df7151e5631b1f3473f8a4aa23d36e0",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section v-for=\"size in sizes\" :key=\"size\">\n\t\t\t<strong>{{ size }}</strong>\n\t\t\t<AsamRadio v-model=\"selected\" :size=\"size\" type=\"button\" :options=\"options\" />\n\t\t\t<AsamRadioGroup v-model=\"selected\" :size=\"size\" aria-label=\"插槽按钮组\">\n\t\t\t\t<AsamRadioButton\n\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>{{ option.label }}</AsamRadioButton\n\t\t\t\t>\n\t\t\t</AsamRadioGroup>\n\t\t\t<AsamRadio v-model=\"selected\" :size=\"size\" :options=\"options\" />\n\t\t</section>\n\t\t<output>当前值：{{ selected }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamRadio, AsamRadioGroup, AsamRadioButton } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\nconst selected = ref('design');\nconst options = [\n\t{ value: 'design', label: '设计', raw: {} },\n\t{ value: 'develop', label: '开发', raw: {} },\n\t{ value: 'disabled', label: '停用', disabled: true, raw: {} }\n];\ndefineOptions({ name: 'AsamRadioContinuousDemo' });\n</script>\n<style scoped>\n.example,\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCheckbox",
			"documentation": "/component-AsamCheckbox.html",
			"demos": [
				{
					"id": "default-slot",
					"title": "默认插槽与三种模型回退",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/default-slot/ts/Demo.vue",
									"sha256": "57c72cea2971c01ba466e486775b2578497ae631f31d8e3d5808462507ac3868",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButton type=\"default\" @click=\"custom = !custom\">切换默认插槽</AsamButton>\n\t\t<AsamCheckbox v-model=\"value\" :options=\"options\">\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamCheckbox>\n\t\t<AsamCheckbox\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ valueMode: 'object', type: 'button' }\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamCheckboxButton\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamCheckboxButton>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamCheckbox>\n\t\t<AsamCheckbox\n\t\t\tv-model=\"textValue\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple-value-mode=\"string\"\n\t\t\tseparator=\"|\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamCheckbox>\n\t\t<output>{{ JSON.stringify({ custom, value, objectValue, textValue }) }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxDefaultSlotExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCheckbox, AsamCheckboxItem, AsamCheckboxButton } from '@asam-ui/ui';\nconst options = [\n\t{ value: 'design', label: '设计', raw: { code: 'design' } },\n\t{ value: 'dev', label: '开发', raw: { code: 'dev' } }\n];\nconst custom = ref(true);\nconst value = ref<readonly string[]>(['design']);\nconst objectValue = ref<readonly (typeof options)[number][]>([options[0]]);\nconst textValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/default-slot/js/Demo.vue",
									"sha256": "8c7b6c41077fa71736724b103f146a050020230bb76269a02e59ecf17deb3a6c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamButton type=\"default\" @click=\"custom = !custom\">切换默认插槽</AsamButton>\n\t\t<AsamCheckbox v-model=\"value\" :options=\"options\">\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamCheckbox>\n\t\t<AsamCheckbox\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ valueMode: 'object', type: 'button' }\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamCheckboxButton\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamCheckboxButton>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamCheckbox>\n\t\t<AsamCheckbox\n\t\t\tv-model=\"textValue\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple-value-mode=\"string\"\n\t\t\tseparator=\"|\"\n\t\t>\n\t\t\t<template #default>\n\t\t\t\t<template v-if=\"custom\">\n\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t>\n\t\t\t\t\t\t自定义{{ option.label }}\n\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t</template>\n\t\t\t</template>\n\t\t</AsamCheckbox>\n\t\t<output>{{ JSON.stringify({ custom, value, objectValue, textValue }) }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxDefaultSlotExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamCheckbox, AsamCheckboxItem, AsamCheckboxButton } from '@asam-ui/ui';\nconst options = [\n\t{ value: 'design', label: '设计', raw: { code: 'design' } },\n\t{ value: 'dev', label: '开发', raw: { code: 'dev' } }\n];\nconst custom = ref(true);\nconst value = ref(['design']);\nconst objectValue = ref([options[0]]);\nconst textValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "basic",
					"title": "选项与按钮形态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/basic/ts/Demo.vue",
									"sha256": "716c45d8b442958ae833576b92f2641a05fe8c7efcd9f70a17dae202b4e7fba4",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckbox v-model=\"value\" :options=\"options\" @change=\"event = JSON.stringify($event)\">\n\t\t\t<template #option=\"{ option }\"> {{ option.label }}团队 </template>\n\t\t</AsamCheckbox>\n\t\t<AsamCheckbox v-model=\"value\" :options=\"options\" type=\"button\" />\n\t\t<AsamCheckbox :model-value=\"value\" :options=\"options\" disabled />\n\t\t<output>值：{{ value }}；change：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckbox } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref<string[]>(['design']);\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/basic/js/Demo.vue",
									"sha256": "a8f6199b4882cc97fd37bf75a05a8d407c6a06e63a722b3b22005c1a9384b3c6",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckbox v-model=\"value\" :options=\"options\" @change=\"event = JSON.stringify($event)\">\n\t\t\t<template #option=\"{ option }\"> {{ option.label }}团队 </template>\n\t\t</AsamCheckbox>\n\t\t<AsamCheckbox v-model=\"value\" :options=\"options\" type=\"button\" />\n\t\t<AsamCheckbox :model-value=\"value\" :options=\"options\" disabled />\n\t\t<output>值：{{ value }}；change：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCheckbox } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref(['design']);\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "对象值与存储策略",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/policies/ts/Demo.vue",
									"sha256": "60104f9dd1be761aac66bd760b4997c926c3e0d047d2fbb04579fdd1ecb0659c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckbox v-model=\"objectValue\" :options=\"options\" value-mode=\"object\" />\n\t\t<AsamCheckbox\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'multiple-value-mode': 'string', separator: '|' }\"\n\t\t/>\n\t\t<output>字符串：{{ stringValue }}</output>\n\t\t<output>对象：{{ objectValue }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckbox } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref<(typeof options)[number][]>([options[0]]);\nconst stringValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/policies/js/Demo.vue",
									"sha256": "b0f6da3677a3d58621077ba5a14761ebcd1faab914d467ffb6fb9fa0508d5e13",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckbox v-model=\"objectValue\" :options=\"options\" value-mode=\"object\" />\n\t\t<AsamCheckbox\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'multiple-value-mode': 'string', separator: '|' }\"\n\t\t/>\n\t\t<output>字符串：{{ stringValue }}</output>\n\t\t<output>对象：{{ objectValue }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckbox } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst objectValue = ref([options[0]]);\nconst stringValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/sizes/ts/Demo.vue",
									"sha256": "0b87b328148f1c6991fc0364b8dd2d431dc0a33293a783ff95090672d3fe3756",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckbox size=\"large\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckbox size=\"big\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckbox size=\"default\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckbox size=\"small\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckbox :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCheckboxSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckbox, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/sizes/js/Demo.vue",
									"sha256": "a1ad4302f9338475a28c9d7e459a3d4a5659f15c675e059851fd4c2fb6f1a85b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCheckbox size=\"large\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCheckbox size=\"big\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCheckbox size=\"default\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCheckbox size=\"small\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCheckbox :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCheckboxSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCheckbox, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "continuous",
					"title": "连续按钮、数量边界与普通间距",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/continuous/ts/Demo.vue",
									"sha256": "a6c4904f6aa819f5da9dd5a5a50876f3626df0157343c32800154d76e52d8f3d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section v-for=\"size in sizes\" :key=\"size\">\n\t\t\t<strong>{{ size }}</strong>\n\t\t\t<AsamCheckbox\n\t\t\t\tv-model=\"selected\"\n\t\t\t\t:size=\"size\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:min=\"1\"\n\t\t\t\t:max=\"2\"\n\t\t\t/>\n\t\t\t<AsamCheckboxGroup\n\t\t\t\tv-model=\"selected\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:min=\"1\"\n\t\t\t\t:max=\"2\"\n\t\t\t\taria-label=\"插槽按钮组\"\n\t\t\t>\n\t\t\t\t<AsamCheckboxButton\n\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>{{ option.label }}</AsamCheckboxButton\n\t\t\t\t>\n\t\t\t</AsamCheckboxGroup>\n\t\t\t<AsamCheckbox v-model=\"selected\" :size=\"size\" :options=\"options\" />\n\t\t</section>\n\t\t<output>选中：{{ selected }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst sizes: AsamControlSize[] = ['large', 'big', 'default', 'small'];\nconst selected = ref<string[]>(['design']);\nconst options = [\n\t{ value: 'design', label: '设计', raw: {} },\n\t{ value: 'develop', label: '开发', raw: {} },\n\t{ value: 'disabled', label: '停用', disabled: true, raw: {} }\n];\ndefineOptions({ name: 'AsamCheckboxContinuousDemo' });\n</script>\n<style scoped>\n.example,\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/continuous/js/Demo.vue",
									"sha256": "ee8f50bf5a81a4065adf9ed2f0304a6f59bdff01de02128b14a99d4c79c94509",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<section v-for=\"size in sizes\" :key=\"size\">\n\t\t\t<strong>{{ size }}</strong>\n\t\t\t<AsamCheckbox\n\t\t\t\tv-model=\"selected\"\n\t\t\t\t:size=\"size\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:min=\"1\"\n\t\t\t\t:max=\"2\"\n\t\t\t/>\n\t\t\t<AsamCheckboxGroup\n\t\t\t\tv-model=\"selected\"\n\t\t\t\t:size=\"size\"\n\t\t\t\t:min=\"1\"\n\t\t\t\t:max=\"2\"\n\t\t\t\taria-label=\"插槽按钮组\"\n\t\t\t>\n\t\t\t\t<AsamCheckboxButton\n\t\t\t\t\tv-for=\"option in options\"\n\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t:value=\"option.value\"\n\t\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\t\t>{{ option.label }}</AsamCheckboxButton\n\t\t\t\t>\n\t\t\t</AsamCheckboxGroup>\n\t\t\t<AsamCheckbox v-model=\"selected\" :size=\"size\" :options=\"options\" />\n\t\t</section>\n\t\t<output>选中：{{ selected }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxButton } from '@asam-ui/ui';\nconst sizes = ['large', 'big', 'default', 'small'];\nconst selected = ref(['design']);\nconst options = [\n\t{ value: 'design', label: '设计', raw: {} },\n\t{ value: 'develop', label: '开发', raw: {} },\n\t{ value: 'disabled', label: '停用', disabled: true, raw: {} }\n];\ndefineOptions({ name: 'AsamCheckboxContinuousDemo' });\n</script>\n<style scoped>\n.example,\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "limits",
					"title": "最少与最多选择数量",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/limits/ts/Demo.vue",
									"sha256": "0bcd449932be4a156ccab286eec83e0d283203a094b20c27bc9369916758f39a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckbox v-model=\"selected\" :options=\"options\" :min=\"1\" :max=\"2\" />\n\t\t<AsamCheckboxGroup v-model=\"selected\" :min=\"1\" :max=\"2\" aria-label=\"插槽数量边界\">\n\t\t\t<AsamCheckboxItem v-for=\"option in options\" :key=\"option.value\" :value=\"option.value\">\n\t\t\t\t{{ option.label }}\n\t\t\t</AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst options = ['设计', '开发', '运维'].map((label, index) => ({\n\tlabel,\n\tvalue: index,\n\traw: { index }\n}));\nconst selected = ref<number[]>([0]);\ndefineOptions({ name: 'AsamCheckboxLimitsDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCheckbox/limits/js/Demo.vue",
									"sha256": "6883c3144f7c0987b9cd3fd4a19fec154fef6a616c74b20520a1a7c493cc6567",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCheckbox v-model=\"selected\" :options=\"options\" :min=\"1\" :max=\"2\" />\n\t\t<AsamCheckboxGroup v-model=\"selected\" :min=\"1\" :max=\"2\" aria-label=\"插槽数量边界\">\n\t\t\t<AsamCheckboxItem v-for=\"option in options\" :key=\"option.value\" :value=\"option.value\">\n\t\t\t\t{{ option.label }}\n\t\t\t</AsamCheckboxItem>\n\t\t</AsamCheckboxGroup>\n\t\t<output>已选：{{ selected }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckbox, AsamCheckboxGroup, AsamCheckboxItem } from '@asam-ui/ui';\nconst options = ['设计', '开发', '运维'].map((label, index) => ({\n\tlabel,\n\tvalue: index,\n\traw: { index }\n}));\nconst selected = ref([0]);\ndefineOptions({ name: 'AsamCheckboxLimitsDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamSwitch",
			"documentation": "/component-AsamSwitch.html",
			"demos": [
				{
					"id": "basic",
					"title": "绑定、文本与事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/basic/ts/Demo.vue",
									"sha256": "04c0f3d686f60f4f92d4051d0ca5ab246ec6e0a2e0540f59572a6df3bf405eb4",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSwitch\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'active-text': '启用', 'inactive-text': '停用' }\"\n\t\t\tv-model=\"enabled\"\n\t\t\t@change=\"event = String($event)\"\n\t\t/>\n\t\t<AsamSwitch\n\t\t\tv-model=\"status\"\n\t\t\tv-bind=\"{\n\t\t\t\t'active-value': 'on',\n\t\t\t\t'inactive-value': 'off',\n\t\t\t\t'inline-prompt': true,\n\t\t\t\t'active-text': '开',\n\t\t\t\t'inactive-text': '关'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦开关 </AsamButton>\n\t\t<AsamSwitch :model-value=\"true\" disabled active-text=\"禁止切换\" aria-label=\"禁用开关\" />\n\t\t<output>启用：{{ enabled }}；状态：{{ status }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSwitchBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamButton } from '@asam-ui/ui';\nimport type { AsamSwitchExpose } from '@asam-ui/ui';\nconst control = ref<AsamSwitchExpose>();\nconst enabled = ref(false);\nconst status = ref('off');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/basic/js/Demo.vue",
									"sha256": "8112d22ec2d9116b1ef2a7489bbf837ea1499fd596ca56c3531df7bed2e87d77",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSwitch\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ 'active-text': '启用', 'inactive-text': '停用' }\"\n\t\t\tv-model=\"enabled\"\n\t\t\t@change=\"event = String($event)\"\n\t\t/>\n\t\t<AsamSwitch\n\t\t\tv-model=\"status\"\n\t\t\tv-bind=\"{\n\t\t\t\t'active-value': 'on',\n\t\t\t\t'inactive-value': 'off',\n\t\t\t\t'inline-prompt': true,\n\t\t\t\t'active-text': '开',\n\t\t\t\t'inactive-text': '关'\n\t\t\t}\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦开关 </AsamButton>\n\t\t<AsamSwitch :model-value=\"true\" disabled active-text=\"禁止切换\" aria-label=\"禁用开关\" />\n\t\t<output>启用：{{ enabled }}；状态：{{ status }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSwitchBasicExample' });\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst enabled = ref(false);\nconst status = ref('off');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "confirmation",
					"title": "异步确认与动作插槽",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/confirmation/ts/Demo.vue",
									"sha256": "78a6183af3c6665e577e8e9a2c04d35497322776713c0c608b7f7d8e56c4f78f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSwitch v-model=\"enabled\" :loading=\"loading\" :before-change=\"confirm\">\n\t\t\t<template #active-action> ✓ </template>\n\t\t\t<template #inactive-action> × </template>\n\t\t</AsamSwitch>\n\t\t<AsamCheckboxItem v-model=\"allow\"> 允许本次切换 </AsamCheckboxItem>\n\t\t<AsamSwitch v-model=\"synchronous\" :before-change=\"() => allow\" aria-label=\"同步确认\" />\n\t\t<output>值：{{ enabled }}；确认中：{{ loading }}；同步值：{{ synchronous }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSwitchConfirmationExample' });\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamCheckboxItem } from '@asam-ui/ui';\nconst enabled = ref(false);\nconst synchronous = ref(false);\nconst allow = ref(true);\nconst loading = ref(false);\nasync function confirm() {\n\tloading.value = true;\n\ttry {\n\t\tawait new Promise((resolve) => setTimeout(resolve, 250));\n\t\treturn allow.value;\n\t} finally {\n\t\tloading.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/confirmation/js/Demo.vue",
									"sha256": "3445b9b6847bb88e49718773b2bab9e66935905cd4dd7a872614fd746106ba67",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSwitch v-model=\"enabled\" :loading=\"loading\" :before-change=\"confirm\">\n\t\t\t<template #active-action> ✓ </template>\n\t\t\t<template #inactive-action> × </template>\n\t\t</AsamSwitch>\n\t\t<AsamCheckboxItem v-model=\"allow\"> 允许本次切换 </AsamCheckboxItem>\n\t\t<AsamSwitch v-model=\"synchronous\" :before-change=\"() => allow\" aria-label=\"同步确认\" />\n\t\t<output>值：{{ enabled }}；确认中：{{ loading }}；同步值：{{ synchronous }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSwitchConfirmationExample' });\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamCheckboxItem } from '@asam-ui/ui';\nconst enabled = ref(false);\nconst synchronous = ref(false);\nconst allow = ref(true);\nconst loading = ref(false);\nasync function confirm() {\n\tloading.value = true;\n\ttry {\n\t\tawait new Promise((resolve) => setTimeout(resolve, 250));\n\t\treturn allow.value;\n\t} finally {\n\t\tloading.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/sizes/ts/Demo.vue",
									"sha256": "1b79bf7805a29fedea8edd6dff2dd758de8de1c074c73e8427074ec053a8f748",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSwitch size=\"large\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSwitch size=\"big\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSwitch size=\"default\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSwitch size=\"small\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSwitch :model-value=\"true\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamSwitchSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/sizes/js/Demo.vue",
									"sha256": "bf72e79f51161d108a2329753fe8e41ced84b8240a1dd819b0add4fc3fda51cc",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamSwitch size=\"large\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamSwitch size=\"big\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamSwitch size=\"default\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamSwitch size=\"small\" :model-value=\"true\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamSwitch :model-value=\"true\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamSwitchSizesExample' });\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "appearance",
					"title": "图标、数字值、加载与实例状态",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/appearance/ts/Demo.vue",
									"sha256": "2f05d2d33fa3ee5a0acd20ce3e77290175df29223f01558063a978cfb16546d5",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSwitch\n\t\t\tref=\"control\"\n\t\t\tv-model=\"enabled\"\n\t\t\tinline-prompt\n\t\t\t:width=\"64\"\n\t\t\t:active-icon=\"Check\"\n\t\t\t:inactive-icon=\"Close\"\n\t\t\t:active-action-icon=\"Check\"\n\t\t\t:inactive-action-icon=\"Close\"\n\t\t\taria-label=\"图标开关\"\n\t\t\t@input=\"input = $event\"\n\t\t>\n\t\t\t<template #active>启用内容</template>\n\t\t\t<template #inactive>停用内容</template>\n\t\t</AsamSwitch>\n\t\t<AsamSwitch\n\t\t\tv-model=\"numeric\"\n\t\t\t:active-value=\"1\"\n\t\t\t:inactive-value=\"0\"\n\t\t\tactive-text=\"启用\"\n\t\t\tinactive-text=\"停用\"\n\t\t\t:loading=\"loading\"\n\t\t\taria-label=\"数字状态\"\n\t\t/>\n\t\t<AsamCheckboxItem v-model=\"loading\">数字状态加载中</AsamCheckboxItem>\n\t\t<AsamSwitch\n\t\t\tv-model=\"enabled\"\n\t\t\tinline-prompt\n\t\t\t:active-icon=\"Check\"\n\t\t\t:inactive-icon=\"Close\"\n\t\t\tdata-case=\"content-icons\"\n\t\t\taria-label=\"状态图标\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"readChecked\">读取 checked</AsamButton>\n\t\t<output\n\t\t\t>启用：{{ enabled }}；数字：{{ numeric }}；input：{{ input }}；实例 checked：{{\n\t\t\t\tchecked\n\t\t\t}}</output\n\t\t>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';\nimport type { AsamSwitchExpose, AsamValue } from '@asam-ui/ui';\nimport { Check, Close } from '@asam-ui/icons-vue';\nconst enabled = ref(false);\nconst numeric = ref(0);\nconst loading = ref(false);\nconst input = ref<AsamValue>(false);\nconst checked = ref(false);\nconst control = ref<AsamSwitchExpose>();\nconst readChecked = () => {\n\tchecked.value = control.value?.checked ?? false;\n};\ndefineOptions({ name: 'AsamSwitchAppearanceDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamSwitch/appearance/js/Demo.vue",
									"sha256": "cce02512a4e96835df5193937fac7a8b414da2aef175dd2ff2169fddd4caa373",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamSwitch\n\t\t\tref=\"control\"\n\t\t\tv-model=\"enabled\"\n\t\t\tinline-prompt\n\t\t\t:width=\"64\"\n\t\t\t:active-icon=\"Check\"\n\t\t\t:inactive-icon=\"Close\"\n\t\t\t:active-action-icon=\"Check\"\n\t\t\t:inactive-action-icon=\"Close\"\n\t\t\taria-label=\"图标开关\"\n\t\t\t@input=\"input = $event\"\n\t\t>\n\t\t\t<template #active>启用内容</template>\n\t\t\t<template #inactive>停用内容</template>\n\t\t</AsamSwitch>\n\t\t<AsamSwitch\n\t\t\tv-model=\"numeric\"\n\t\t\t:active-value=\"1\"\n\t\t\t:inactive-value=\"0\"\n\t\t\tactive-text=\"启用\"\n\t\t\tinactive-text=\"停用\"\n\t\t\t:loading=\"loading\"\n\t\t\taria-label=\"数字状态\"\n\t\t/>\n\t\t<AsamCheckboxItem v-model=\"loading\">数字状态加载中</AsamCheckboxItem>\n\t\t<AsamSwitch\n\t\t\tv-model=\"enabled\"\n\t\t\tinline-prompt\n\t\t\t:active-icon=\"Check\"\n\t\t\t:inactive-icon=\"Close\"\n\t\t\tdata-case=\"content-icons\"\n\t\t\taria-label=\"状态图标\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"readChecked\">读取 checked</AsamButton>\n\t\t<output\n\t\t\t>启用：{{ enabled }}；数字：{{ numeric }}；input：{{ input }}；实例 checked：{{\n\t\t\t\tchecked\n\t\t\t}}</output\n\t\t>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamSwitch, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';\nimport { Check, Close } from '@asam-ui/icons-vue';\nconst enabled = ref(false);\nconst numeric = ref(0);\nconst loading = ref(false);\nconst input = ref(false);\nconst checked = ref(false);\nconst control = ref();\nconst readChecked = () => {\n\tchecked.value = control.value?.checked ?? false;\n};\ndefineOptions({ name: 'AsamSwitchAppearanceDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteRadio",
			"documentation": "/component-AsamRemoteRadio.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/basic/ts/Demo.vue",
									"sha256": "e4f9668e33beab503c4d216adaec808ed83289657e6e7787bb7ba230a5d12f35",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t</AsamRemoteRadio>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteRadioValuesDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteRadio, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamApiRequest } from '@asam-ui/ui';\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst control = ref<AsamAsyncChoiceExpose<string, Item>>();\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/basic/js/Demo.vue",
									"sha256": "24b2af814a116e6ccc03c9e51a340b42457c0eddc9d494d4c14415dfa1e25f15",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t</AsamRemoteRadio>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRemoteRadioValuesDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteRadio, defineAsamOptions } from '@asam-ui/ui';\nconst value = ref(null);\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "connected-buttons",
					"title": "连续按钮、对象模型与四档尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/connected-buttons/ts/Demo.vue",
									"sha256": "7ee4a581e3d898bee8a3514739a20bf0040321d708d44c0b539d9572258ec5e5",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamRemoteRadio-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamRemoteRadio-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamRemoteRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamRemoteRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteRadioButtons' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteRadio,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type {\n\tAsamAsyncChoiceExpose,\n\tAsamValue,\n\tAsamDataError,\n\tAsamRadioDataEmits,\n\tAsamApiRequest\n} from '@asam-ui/ui';\ninterface Item {\n\tid: number;\n\tlabel: string;\n\tvalue: number;\n\tdisabled?: boolean;\n}\ntype Model = AsamOption<number, Item> | null;\ntype Change = AsamRadioDataEmits<AsamValue, Item>['change'][0];\ntype Size = 'large' | 'big' | 'default' | 'small';\nconst size = ref<Size>('default');\nconst value = ref<Model>(null);\nconst changes = ref<Change[]>([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref<AsamAsyncChoiceExpose<number, Item>>();\nconst error = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nfunction recordChange(value: Change) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value: AsamDataError) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options: readonly AsamOption<AsamValue, Item>[]) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nconst failing = ref(false);\nconst slow = ref(false);\nconst api: AsamApiRequest<Record<string, never>, readonly Item[]> = async (_params, context) => {\n\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\tcontext.signal.throwIfAborted();\n\tif (failing.value) throw new Error('演示加载失败');\n\treturn [\n\t\t{ id: 0, label: '准备', value: 0 },\n\t\t{ id: 2, label: '进行', value: 2 },\n\t\t{ id: 3, label: '完成', value: 3 },\n\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t];\n};\nconst dataSource = defineAsamOptions<number, Item>().api({\n\tapi,\n\tparams: {},\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n});\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/connected-buttons/js/Demo.vue",
									"sha256": "bb349c34dbf1a9428306ae4800180ffc4a61f706587e5f4537e3c198afe91975",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamRemoteRadio-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamRemoteRadio-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamRemoteRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamRemoteRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRemoteRadioButtons' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteRadio,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst size = ref('default');\nconst value = ref(null);\nconst changes = ref([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref();\nconst error = ref('');\nconst events = ref([]);\nfunction recordChange(value) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nconst failing = ref(false);\nconst slow = ref(false);\nconst api = async (_params, context) => {\n\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\tcontext.signal.throwIfAborted();\n\tif (failing.value) throw new Error('演示加载失败');\n\treturn [\n\t\t{ id: 0, label: '准备', value: 0 },\n\t\t{ id: 2, label: '进行', value: 2 },\n\t\t{ id: 3, label: '完成', value: 3 },\n\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t];\n};\nconst dataSource = defineAsamOptions().api({\n\tapi,\n\tparams: {},\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n});\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/local-error/ts/Demo.vue",
									"sha256": "0d1a9cf01b4383b96dc1432108b4fcbb3796e00cbfbe6f29cc4ceeb8a8136616",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteRadioDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteRadio-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/local-error/ts/Child.vue",
									"sha256": "6f5b5e58f29ccf32f560563b6f4e4571e4d447e4c82f5f8d7cd4706b64b4e824",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteRadio ref=\"control\" v-model=\"value\" :data-source=\"dataSource\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteRadioChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteRadio, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamAsyncChoiceSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamAsyncChoiceExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncChoiceSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/local-error/js/Demo.vue",
									"sha256": "05b2e16b7ec83f91c9845479c5ebe2c4ec93a0e0444d1a22372d1b65741bcc21",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteRadioDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteRadio-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/local-error/js/Child.vue",
									"sha256": "9da21da1256629ac1df413082c93ea1f60ed1102444d0de7b75f0436c495f0f4",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteRadio ref=\"control\" v-model=\"value\" :data-source=\"dataSource\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteRadioChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteRadio, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteRadio/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDictRadio",
			"documentation": "/component-AsamDictRadio.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地字典与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/basic/ts/Demo.vue",
									"sha256": "882facdf493e79fbd16aabc98c45103307cf09993f6984a9dfa630888c66bd82",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictRadioValuesDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/basic/ts/Child.vue",
									"sha256": "092538681031fb02c73e91585259a76059366bdfa349c0fd9969288a25d84ad8",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamDictRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t</AsamDictRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictRadioValuesChild' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictRadio } from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamDictEntry } from '@asam-ui/ui';\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst control = ref<AsamAsyncChoiceExpose<string, AsamDictEntry>>();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictRadio/basic/ts/provider.ts",
									"sha256": "1da89e658d274256a3020a0b630ab0977904c4645dc8e6614b2d66951c17bc2d",
									"source": "import type { AsamDataProvider } from '@asam-ui/ui';\n\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/basic/js/Demo.vue",
									"sha256": "4e81eff2bdaef42aa4b62f8356ad7f851486ea57d7ed69aabf72008fc28695aa",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDictRadioValuesDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/basic/js/Child.vue",
									"sha256": "7bc8a4fe2afddf6d929ec4620e22b2eccfea63ee10b9fb984a9fde947243dc87",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamDictRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t</AsamDictRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDictRadioValuesChild' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictRadio } from '@asam-ui/ui';\nconst value = ref(null);\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictRadio/basic/js/provider.js",
									"sha256": "5dd6ce08b0eb95147057e3760678a200ea4d263da5390edccdbd797c9c661d49",
									"source": "export const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "connected-buttons",
					"title": "连续按钮、对象模型与四档尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/connected-buttons/ts/Demo.vue",
									"sha256": "870069867400b6ed5f97102f4a05bb8696172b5b6c46a3ff949e55b22ed911bf",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamChoiceButtonsHost' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-buttons' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/connected-buttons/ts/Child.vue",
									"sha256": "fbf5b32a8c84395002ed800f14516e2f7102144886c98dfb8ab3995a0737fbea",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamDictRadio-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamDictRadio-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamDictRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-buttons\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamDictRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictRadioButtons' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamButton, AsamDictRadio } from '@asam-ui/ui';\nimport type {\n\tAsamAsyncChoiceExpose,\n\tAsamValue,\n\tAsamDataError,\n\tAsamRadioDataEmits\n} from '@asam-ui/ui';\ninterface Item {\n\tid: number;\n\tlabel: string;\n\tvalue: number;\n\tdisabled?: boolean;\n}\ntype Model = AsamOption<number, Item> | null;\ntype Change = AsamRadioDataEmits<AsamValue, Item>['change'][0];\ntype Size = 'large' | 'big' | 'default' | 'small';\nimport { failing, slow } from './provider.js';\nconst size = ref<Size>('default');\nconst value = ref<Model>(null);\nconst changes = ref<Change[]>([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref<AsamAsyncChoiceExpose<number, Item>>();\nconst error = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nfunction recordChange(value: Change) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value: AsamDataError) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options: readonly AsamOption<AsamValue, Item>[]) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictRadio/connected-buttons/ts/provider.ts",
									"sha256": "c47e58c748cacb313c1f577a95cbe749da8f0c957cb9e0d1927972f17055c655",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport const failing = ref(false);\nexport const slow = ref(false);\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (failing.value) throw new Error('演示加载失败');\n\t\t\tif (dictType !== 'doc-buttons') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ id: 0, label: '准备', value: 0 },\n\t\t\t\t{ id: 2, label: '进行', value: 2 },\n\t\t\t\t{ id: 3, label: '完成', value: 3 },\n\t\t\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/connected-buttons/js/Demo.vue",
									"sha256": "ab63fa56e2d1aa3862884150fe2e79af5de3a29f98bb06e7392932a86bfc3449",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamChoiceButtonsHost' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-buttons' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/connected-buttons/js/Child.vue",
									"sha256": "2bf31c4b9468fd4d1bf37a5b368d27981b27b914db61beb2800dc08df98d1c9f",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamDictRadio-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamDictRadio-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamDictRadio\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-buttons\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamDictRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDictRadioButtons' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamButton, AsamDictRadio } from '@asam-ui/ui';\nimport { failing, slow } from './provider.js';\nconst size = ref('default');\nconst value = ref(null);\nconst changes = ref([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref();\nconst error = ref('');\nconst events = ref([]);\nfunction recordChange(value) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictRadio/connected-buttons/js/provider.js",
									"sha256": "f11b5afa504555ff7cf83b929762408dedb6e10cb3fdb3ffaef7282a0bb8b790",
									"source": "import { ref } from 'vue';\nexport const failing = ref(false);\nexport const slow = ref(false);\nexport const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (failing.value) throw new Error('演示加载失败');\n\t\t\tif (dictType !== 'doc-buttons') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ id: 0, label: '准备', value: 0 },\n\t\t\t\t{ id: 2, label: '进行', value: 2 },\n\t\t\t\t{ id: 3, label: '完成', value: 3 },\n\t\t\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/local-error/ts/Demo.vue",
									"sha256": "6cd9e9207f83ffa928998c1a332bb4c382cd8ce7f5d8167230f1d7b2054d3aed",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictRadioDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictRadio-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/local-error/ts/Child.vue",
									"sha256": "e340dff751cb496968c7bdf45b7cb8fdfbed944e87c558262a225953b36a7c96",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictRadio ref=\"control\" v-model=\"value\" :data-source=\"dataSource\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictRadioChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictRadio, defineAsamDictSource } from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamAsyncChoiceSlots } from '@asam-ui/ui';\nimport type { Transport } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamAsyncChoiceExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncChoiceSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDictRadio/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/local-error/js/Demo.vue",
									"sha256": "82fc1f0d32ef66666f64c7cce1b166a047d111e3a8707956de57ba9da6a69f88",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictRadioDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictRadio-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictRadio/local-error/js/Child.vue",
									"sha256": "49a29e564e8e17cde055f56907fd5ad3f06b284ce758894c80f88d01f926325a",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictRadio ref=\"control\" v-model=\"value\" :data-source=\"dataSource\" :immediate=\"false\">\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictRadio>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictRadioChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictRadio, defineAsamDictSource } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDictRadio/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteCheckbox",
			"documentation": "/component-AsamRemoteCheckbox.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/basic/ts/Demo.vue",
									"sha256": "8ba9e4221403f4b692e53ff9c11f2cecca17240a7ddcaebce15bbde4d2fb2cf2",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<fieldset data-testid=\"choice-array\">\n\t\t\t<legend>值数组</legend>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tref=\"control\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamRemoteCheckbox>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-1\" data-testid=\"choice-string\">\n\t\t\t<legend>分隔字符串</legend>\n\t\t\t<label for=\"AsamRemoteCheckbox-separator\">集合分隔符</label>\n\t\t\t<AsamSelect\n\t\t\t\tid=\"AsamRemoteCheckbox-separator\"\n\t\t\t\t:model-value=\"separator\"\n\t\t\t\t@change=\"changeSeparator\"\n\t\t\t>\n\t\t\t\t<AsamOption :label=\"'|'\" :value=\"'|'\">|</AsamOption>\n\t\t\t\t<AsamOption :label=\"'~'\" :value=\"'~'\">~</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"stringValue\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:separator=\"separator\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamRemoteCheckbox>\n\t\t\t<pre data-testid=\"choice-string-model\">{{ JSON.stringify(stringValue) }}</pre>\n\t\t</fieldset>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre data-testid=\"choice-array-model\">{{ JSON.stringify(value) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCheckboxValuesDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteCheckbox,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamApiRequest } from '@asam-ui/ui';\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<readonly string[]>([]);\nconst active = ref(true);\nconst stringValue = ref('');\nconst separator = ref<'|' | '~'>('|');\nfunction changeSeparator(value: unknown) {\n\tconst next = value;\n\tif (next !== '|' && next !== '~') return;\n\tstringValue.value = '';\n\tseparator.value = next;\n}\nconst control = ref<AsamAsyncChoiceExpose<string, Item>>();\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/basic/js/Demo.vue",
									"sha256": "423c0e2d62f601bc79d182c349467b6b4b9c237b70a51f7fcb6566513d10b43e",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<fieldset data-testid=\"choice-array\">\n\t\t\t<legend>值数组</legend>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tref=\"control\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamRemoteCheckbox>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-1\" data-testid=\"choice-string\">\n\t\t\t<legend>分隔字符串</legend>\n\t\t\t<label for=\"AsamRemoteCheckbox-separator\">集合分隔符</label>\n\t\t\t<AsamSelect\n\t\t\t\tid=\"AsamRemoteCheckbox-separator\"\n\t\t\t\t:model-value=\"separator\"\n\t\t\t\t@change=\"changeSeparator\"\n\t\t\t>\n\t\t\t\t<AsamOption :label=\"'|'\" :value=\"'|'\">|</AsamOption>\n\t\t\t\t<AsamOption :label=\"'~'\" :value=\"'~'\">~</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"stringValue\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:separator=\"separator\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamRemoteCheckbox>\n\t\t\t<pre data-testid=\"choice-string-model\">{{ JSON.stringify(stringValue) }}</pre>\n\t\t</fieldset>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre data-testid=\"choice-array-model\">{{ JSON.stringify(value) }}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRemoteCheckboxValuesDemo' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteCheckbox,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst value = ref([]);\nconst active = ref(true);\nconst stringValue = ref('');\nconst separator = ref('|');\nfunction changeSeparator(value) {\n\tconst next = value;\n\tif (next !== '|' && next !== '~') return;\n\tstringValue.value = '';\n\tseparator.value = next;\n}\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready' },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "connected-buttons",
					"title": "连续按钮、对象模型与四档尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/ts/Demo.vue",
									"sha256": "9abe2dec9df82c2b948063126c59b317b0200ad15713f53275cd98920a77826b",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamRemoteCheckbox-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamRemoteCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\t:max=\"2\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamRemoteCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showLimits = !showLimits\"\n\t\t\t>展示数量限制协议</AsamButton\n\t\t>\n\t\t<LimitsContract v-if=\"showLimits\" :data-source=\"dataSource\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPresentation = !showPresentation\"\n\t\t\t>展示组外观协议</AsamButton\n\t\t>\n\t\t<PresentationContract v-if=\"showPresentation\" :data-source=\"dataSource\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showValidation = !showValidation\"\n\t\t\t>展示自动校验协议</AsamButton\n\t\t>\n\t\t<ValidationContract v-if=\"showValidation\" :data-source=\"dataSource\" />\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCheckboxButtons' });\nimport { ref } from 'vue';\nimport LimitsContract from './LimitsContract.vue';\nimport PresentationContract from './PresentationContract.vue';\nimport ValidationContract from './ValidationContract.vue';\nconst showValidation = ref(false);\nconst showPresentation = ref(false);\nconst showLimits = ref(false);\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteCheckbox,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nimport type {\n\tAsamAsyncChoiceExpose,\n\tAsamValue,\n\tAsamDataError,\n\tAsamCheckboxDataEmits,\n\tAsamApiRequest\n} from '@asam-ui/ui';\ninterface Item {\n\tid: number;\n\tlabel: string;\n\tvalue: number;\n\tdisabled?: boolean;\n}\ntype Model = readonly AsamOption<number, Item>[];\ntype Change = AsamCheckboxDataEmits<AsamValue, Item>['change'][0];\ntype Size = 'large' | 'big' | 'default' | 'small';\nconst size = ref<Size>('default');\nconst value = ref<Model>([]);\nconst changes = ref<Change[]>([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref<AsamAsyncChoiceExpose<number, Item>>();\nconst error = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nfunction recordChange(value: Change) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value: AsamDataError) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options: readonly AsamOption<AsamValue, Item>[]) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nconst failing = ref(false);\nconst slow = ref(false);\nconst api: AsamApiRequest<Record<string, never>, readonly Item[]> = async (_params, context) => {\n\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\tcontext.signal.throwIfAborted();\n\tif (failing.value) throw new Error('演示加载失败');\n\treturn [\n\t\t{ id: 0, label: '准备', value: 0 },\n\t\t{ id: 2, label: '进行', value: 2 },\n\t\t{ id: 3, label: '完成', value: 3 },\n\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t];\n};\nconst dataSource = defineAsamOptions<number, Item>().api({\n\tapi,\n\tparams: {},\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n});\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "LimitsContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/ts/LimitsContract.vue",
									"sha256": "41f0adbe6e909f48e64d73d37ba4544a68e5b2a2320c0238f1d1dbe67412eac5",
									"source": "<template>\n\t<section data-testid=\"choice-limits\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"bounded\">启用数量限制</AsamCheckboxItem>\n\t\t<label for=\"AsamRemoteCheckbox-minimum\">最少选择</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-minimum\" v-model=\"minimum\">\n\t\t\t<AsamOption :value=\"0\" :label=\"'0'\">0</AsamOption>\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-maximum\">最多选择</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-maximum\" v-model=\"maximum\">\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t\t<AsamOption :value=\"3\" :label=\"'3'\">3</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-limits-type\">限制控件类型</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-limits-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用整组</AsamCheckboxItem>\n\t\t<div data-testid=\"choice-limits-object\">\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\tv-bind=\"limits\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">\n\t\t\t\t\t<span :data-limit-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamRemoteCheckbox>\n\t\t</div>\n\t\t<pre data-testid=\"choice-limits-state\">{{\n\t\t\tJSON.stringify({ model, bounded, minimum, maximum, disabled, type })\n\t\t}}</pre>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"policyBounded\">启用值模型限制</AsamCheckboxItem>\n\t\t<fieldset data-testid=\"choice-limits-array\">\n\t\t\t<legend>值数组数量限制</legend>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"arrayModel\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits-array\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(arrayModel) }}</pre>\n\t\t</fieldset>\n\t\t<fieldset data-testid=\"choice-limits-string\">\n\t\t\t<legend>分隔字符串数量限制</legend>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"stringModel\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\tseparator=\"|\"\n\t\t\t\tname=\"data009-limits-string\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(stringModel) }}</pre>\n\t\t</fieldset>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport type { PropType } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamRemoteCheckbox } from '@asam-ui/ui';\nimport type { AsamOptionsSource } from '@asam-ui/ui';\ninterface Item {\n\treadonly id: number;\n\treadonly label: string;\n\treadonly value: number;\n\treadonly disabled?: boolean;\n}\ndefineProps({\n\tdataSource: { type: Object as PropType<AsamOptionsSource<number, Item, 'api'>>, required: true }\n});\nconst model = ref<readonly AsamOption<number, Item>[]>([]);\nconst minimum = ref(1),\n\tmaximum = ref(2),\n\tbounded = ref(true),\n\tdisabled = ref(false);\nconst type = ref<'checkbox' | 'button'>('checkbox');\nconst limits = computed(() => (bounded.value ? { min: minimum.value, max: maximum.value } : {}));\nconst arrayModel = ref<readonly number[]>([]);\nconst stringModel = ref('');\nconst policyBounded = ref(true);\nconst policyLimits = computed(() => (policyBounded.value ? { min: 1, max: 2 } : {}));\n</script>\n"
								},
								{
									"name": "PresentationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/ts/PresentationContract.vue",
									"sha256": "0c28395b4a12abd7d857a9937de5ae1dfd8bfd946b9053957525fd732f5d2aff",
									"source": "<template>\n\t<section data-testid=\"choice-presentation\">\n\t\t<label for=\"AsamRemoteCheckbox-presentation-preset\">组外观方案</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-presentation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'first'\" :value=\"'first'\">first</AsamOption>\n\t\t\t<AsamOption :label=\"'second'\" :value=\"'second'\">second</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-presentation-type\">外观控件类型</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-presentation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamRemoteCheckbox\n\t\t\tv-model=\"model\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tv-bind=\"presentation\"\n\t\t\t:type=\"type\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\tname=\"data009-presentation\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span :data-presentation-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t</template>\n\t\t</AsamRemoteCheckbox>\n\t\t<pre data-testid=\"choice-presentation-state\">{{\n\t\t\tJSON.stringify({ model, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport type { PropType } from 'vue';\nimport { AsamSelect, AsamOption, AsamRemoteCheckbox } from '@asam-ui/ui';\nimport type { AsamOptionsSource } from '@asam-ui/ui';\ninterface Item {\n\treadonly id: number;\n\treadonly label: string;\n\treadonly value: number;\n\treadonly disabled?: boolean;\n}\ndefineProps({\n\tdataSource: { type: Object as PropType<AsamOptionsSource<number, Item, 'api'>>, required: true }\n});\nconst model = ref<readonly AsamOption<number, Item>[]>([]);\nconst preset = ref<'omit' | 'first' | 'second'>('omit');\nconst type = ref<'checkbox' | 'button'>('button');\nconst presentation = computed(() =>\n\tpreset.value === 'first'\n\t\t? { tag: 'fieldset', ariaLabel: '第一选择组', fill: '#123456', textColor: '#ffeecc' }\n\t\t: preset.value === 'second'\n\t\t\t? { tag: 'p', ariaLabel: '第二选择组', fill: '#563412', textColor: '#dcf0fa' }\n\t\t\t: {}\n);\n</script>\n"
								},
								{
									"name": "ValidationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/ts/ValidationContract.vue",
									"sha256": "8ebfade96d78c0cd45fc0f79d466e4776cc363d4be3f482dc002c7ade55d909d",
									"source": "<template>\n\t<section data-testid=\"choice-validation\">\n\t\t<label for=\"AsamRemoteCheckbox-validation-preset\">自动校验方案</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-validation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-validation-type\">校验控件类型</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-validation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamBaseForm :model=\"model\" :rules=\"rules\">\n\t\t\t<AsamFormItem label=\"object 值校验\" prop=\"object\">\n\t\t\t\t<div data-testid=\"choice-validation-object\">\n\t\t\t\t\t<AsamRemoteCheckbox\n\t\t\t\t\t\tv-model=\"model.object\"\n\t\t\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"object\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-object\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"array 值校验\" prop=\"array\">\n\t\t\t\t<div data-testid=\"choice-validation-array\">\n\t\t\t\t\t<AsamRemoteCheckbox\n\t\t\t\t\t\tv-model=\"model.array\"\n\t\t\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-array\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"string 值校验\" prop=\"string\">\n\t\t\t\t<div data-testid=\"choice-validation-string\">\n\t\t\t\t\t<AsamRemoteCheckbox\n\t\t\t\t\t\tv-model=\"model.string\"\n\t\t\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t\t\tseparator=\"|\"\n\t\t\t\t\t\tname=\"data009-validation-string\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearModels\"\n\t\t\t>清空校验模型</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setModels\">设置校验模型</AsamButton>\n\t\t<pre data-testid=\"choice-validation-state\">{{\n\t\t\tJSON.stringify({ model, calls, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref } from 'vue';\nimport type { PropType } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamBaseForm, AsamFormItem } from '@asam-ui/ui';\nimport type { AsamBaseFormProps } from '@asam-ui/ui';\nimport { AsamRemoteCheckbox } from '@asam-ui/ui';\nimport type { AsamOptionsSource } from '@asam-ui/ui';\ninterface Item {\n\treadonly id: number;\n\treadonly label: string;\n\treadonly value: number;\n\treadonly disabled?: boolean;\n}\ninterface Model {\n\tobject: readonly AsamOption<number, Item>[];\n\tarray: readonly number[];\n\tstring: string;\n}\ndefineProps({\n\tdataSource: { type: Object as PropType<AsamOptionsSource<number, Item, 'api'>>, required: true }\n});\nconst model = reactive<Model>({ object: [], array: [], string: '' });\nconst calls = ref<{ field: keyof Model; value: unknown; valid: boolean }[]>([]);\nconst preset = ref<'omit' | 'false' | 'true'>('omit');\nconst type = ref<'checkbox' | 'button'>('checkbox');\nconst validation = computed(() =>\n\tpreset.value === 'omit' ? {} : { validateEvent: preset.value === 'true' }\n);\nfunction validate(field: keyof Model, value: unknown, callback: (error?: Error) => void) {\n\tconst valid =\n\t\ttypeof value === 'string' ? value.length > 0 : Array.isArray(value) && value.length > 0;\n\tcalls.value.push({ field, value: JSON.parse(JSON.stringify(value)), valid });\n\tcallback(valid ? undefined : new Error('至少选择一项'));\n}\nconst rules: NonNullable<AsamBaseFormProps['rules']> = {\n\tobject: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value: unknown, callback) => validate('object', value, callback)\n\t\t}\n\t],\n\tarray: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value: unknown, callback) => validate('array', value, callback)\n\t\t}\n\t],\n\tstring: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value: unknown, callback) => validate('string', value, callback)\n\t\t}\n\t]\n};\nfunction clearModels() {\n\tmodel.object = [];\n\tmodel.array = [];\n\tmodel.string = '';\n}\nfunction setModels() {\n\tmodel.object = [{ label: '进行', value: 2, raw: { id: 2, label: '进行', value: 2 } }];\n\tmodel.array = [2];\n\tmodel.string = '2';\n}\n</script>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/js/Demo.vue",
									"sha256": "6eaa47f3af4f3f71253c0f84c7964fd90444ad21dafe83c40d8c110bbce96603",
									"source": "<template>\n\t<section class=\"data-demo demo-layout-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamRemoteCheckbox-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamRemoteCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\t:max=\"2\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamRemoteCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showLimits = !showLimits\"\n\t\t\t>展示数量限制协议</AsamButton\n\t\t>\n\t\t<LimitsContract v-if=\"showLimits\" :data-source=\"dataSource\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPresentation = !showPresentation\"\n\t\t\t>展示组外观协议</AsamButton\n\t\t>\n\t\t<PresentationContract v-if=\"showPresentation\" :data-source=\"dataSource\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showValidation = !showValidation\"\n\t\t\t>展示自动校验协议</AsamButton\n\t\t>\n\t\t<ValidationContract v-if=\"showValidation\" :data-source=\"dataSource\" />\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamRemoteCheckboxButtons' });\nimport { ref } from 'vue';\nimport LimitsContract from './LimitsContract.vue';\nimport PresentationContract from './PresentationContract.vue';\nimport ValidationContract from './ValidationContract.vue';\nconst showValidation = ref(false);\nconst showPresentation = ref(false);\nconst showLimits = ref(false);\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamRemoteCheckbox,\n\tdefineAsamOptions\n} from '@asam-ui/ui';\nconst size = ref('default');\nconst value = ref([]);\nconst changes = ref([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref();\nconst error = ref('');\nconst events = ref([]);\nfunction recordChange(value) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nconst failing = ref(false);\nconst slow = ref(false);\nconst api = async (_params, context) => {\n\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\tcontext.signal.throwIfAborted();\n\tif (failing.value) throw new Error('演示加载失败');\n\treturn [\n\t\t{ id: 0, label: '准备', value: 0 },\n\t\t{ id: 2, label: '进行', value: 2 },\n\t\t{ id: 3, label: '完成', value: 3 },\n\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t];\n};\nconst dataSource = defineAsamOptions().api({\n\tapi,\n\tparams: {},\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value', disabled: 'disabled' }\n});\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "LimitsContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/js/LimitsContract.vue",
									"sha256": "a85436ce84223b744f26808163502d054448f9f11583cd1ed79fb0e73b8459c3",
									"source": "<template>\n\t<section data-testid=\"choice-limits\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"bounded\">启用数量限制</AsamCheckboxItem>\n\t\t<label for=\"AsamRemoteCheckbox-minimum\">最少选择</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-minimum\" v-model=\"minimum\">\n\t\t\t<AsamOption :value=\"0\" :label=\"'0'\">0</AsamOption>\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-maximum\">最多选择</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-maximum\" v-model=\"maximum\">\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t\t<AsamOption :value=\"3\" :label=\"'3'\">3</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-limits-type\">限制控件类型</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-limits-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用整组</AsamCheckboxItem>\n\t\t<div data-testid=\"choice-limits-object\">\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\tv-bind=\"limits\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">\n\t\t\t\t\t<span :data-limit-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamRemoteCheckbox>\n\t\t</div>\n\t\t<pre data-testid=\"choice-limits-state\">{{\n\t\t\tJSON.stringify({ model, bounded, minimum, maximum, disabled, type })\n\t\t}}</pre>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"policyBounded\">启用值模型限制</AsamCheckboxItem>\n\t\t<fieldset data-testid=\"choice-limits-array\">\n\t\t\t<legend>值数组数量限制</legend>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"arrayModel\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits-array\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(arrayModel) }}</pre>\n\t\t</fieldset>\n\t\t<fieldset data-testid=\"choice-limits-string\">\n\t\t\t<legend>分隔字符串数量限制</legend>\n\t\t\t<AsamRemoteCheckbox\n\t\t\t\tv-model=\"stringModel\"\n\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\tseparator=\"|\"\n\t\t\t\tname=\"data009-limits-string\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(stringModel) }}</pre>\n\t\t</fieldset>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamRemoteCheckbox } from '@asam-ui/ui';\ndefineProps({\n\tdataSource: { type: Object, required: true }\n});\nconst model = ref([]);\nconst minimum = ref(1),\n\tmaximum = ref(2),\n\tbounded = ref(true),\n\tdisabled = ref(false);\nconst type = ref('checkbox');\nconst limits = computed(() => (bounded.value ? { min: minimum.value, max: maximum.value } : {}));\nconst arrayModel = ref([]);\nconst stringModel = ref('');\nconst policyBounded = ref(true);\nconst policyLimits = computed(() => (policyBounded.value ? { min: 1, max: 2 } : {}));\n</script>\n"
								},
								{
									"name": "PresentationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/js/PresentationContract.vue",
									"sha256": "7ae9ea8464a935a84ec839920039ab61f5420953c9bcbd7ff7babb48bb7e614c",
									"source": "<template>\n\t<section data-testid=\"choice-presentation\">\n\t\t<label for=\"AsamRemoteCheckbox-presentation-preset\">组外观方案</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-presentation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'first'\" :value=\"'first'\">first</AsamOption>\n\t\t\t<AsamOption :label=\"'second'\" :value=\"'second'\">second</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-presentation-type\">外观控件类型</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-presentation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamRemoteCheckbox\n\t\t\tv-model=\"model\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tv-bind=\"presentation\"\n\t\t\t:type=\"type\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\tname=\"data009-presentation\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span :data-presentation-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t</template>\n\t\t</AsamRemoteCheckbox>\n\t\t<pre data-testid=\"choice-presentation-state\">{{\n\t\t\tJSON.stringify({ model, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamRemoteCheckbox } from '@asam-ui/ui';\ndefineProps({\n\tdataSource: { type: Object, required: true }\n});\nconst model = ref([]);\nconst preset = ref('omit');\nconst type = ref('button');\nconst presentation = computed(() =>\n\tpreset.value === 'first'\n\t\t? { tag: 'fieldset', ariaLabel: '第一选择组', fill: '#123456', textColor: '#ffeecc' }\n\t\t: preset.value === 'second'\n\t\t\t? { tag: 'p', ariaLabel: '第二选择组', fill: '#563412', textColor: '#dcf0fa' }\n\t\t\t: {}\n);\n</script>\n"
								},
								{
									"name": "ValidationContract.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/connected-buttons/js/ValidationContract.vue",
									"sha256": "33b9c49737fbc395f9af3e495c7fcce9c48cb84a891e3a20c9a319ad70408c55",
									"source": "<template>\n\t<section data-testid=\"choice-validation\">\n\t\t<label for=\"AsamRemoteCheckbox-validation-preset\">自动校验方案</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-validation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamRemoteCheckbox-validation-type\">校验控件类型</label>\n\t\t<AsamSelect id=\"AsamRemoteCheckbox-validation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamBaseForm :model=\"model\" :rules=\"rules\">\n\t\t\t<AsamFormItem label=\"object 值校验\" prop=\"object\">\n\t\t\t\t<div data-testid=\"choice-validation-object\">\n\t\t\t\t\t<AsamRemoteCheckbox\n\t\t\t\t\t\tv-model=\"model.object\"\n\t\t\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"object\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-object\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"array 值校验\" prop=\"array\">\n\t\t\t\t<div data-testid=\"choice-validation-array\">\n\t\t\t\t\t<AsamRemoteCheckbox\n\t\t\t\t\t\tv-model=\"model.array\"\n\t\t\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-array\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"string 值校验\" prop=\"string\">\n\t\t\t\t<div data-testid=\"choice-validation-string\">\n\t\t\t\t\t<AsamRemoteCheckbox\n\t\t\t\t\t\tv-model=\"model.string\"\n\t\t\t\t\t\t:data-source=\"dataSource\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t\t\tseparator=\"|\"\n\t\t\t\t\t\tname=\"data009-validation-string\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearModels\"\n\t\t\t>清空校验模型</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setModels\">设置校验模型</AsamButton>\n\t\t<pre data-testid=\"choice-validation-state\">{{\n\t\t\tJSON.stringify({ model, calls, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, reactive, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamBaseForm, AsamFormItem } from '@asam-ui/ui';\nimport { AsamRemoteCheckbox } from '@asam-ui/ui';\ndefineProps({\n\tdataSource: { type: Object, required: true }\n});\nconst model = reactive({ object: [], array: [], string: '' });\nconst calls = ref([]);\nconst preset = ref('omit');\nconst type = ref('checkbox');\nconst validation = computed(() =>\n\tpreset.value === 'omit' ? {} : { validateEvent: preset.value === 'true' }\n);\nfunction validate(field, value, callback) {\n\tconst valid =\n\t\ttypeof value === 'string' ? value.length > 0 : Array.isArray(value) && value.length > 0;\n\tcalls.value.push({ field, value: JSON.parse(JSON.stringify(value)), valid });\n\tcallback(valid ? undefined : new Error('至少选择一项'));\n}\nconst rules = {\n\tobject: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value, callback) => validate('object', value, callback)\n\t\t}\n\t],\n\tarray: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value, callback) => validate('array', value, callback)\n\t\t}\n\t],\n\tstring: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value, callback) => validate('string', value, callback)\n\t\t}\n\t]\n};\nfunction clearModels() {\n\tmodel.object = [];\n\tmodel.array = [];\n\tmodel.string = '';\n}\nfunction setModels() {\n\tmodel.object = [{ label: '进行', value: 2, raw: { id: 2, label: '进行', value: 2 } }];\n\tmodel.array = [2];\n\tmodel.string = '2';\n}\n</script>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/local-error/ts/Demo.vue",
									"sha256": "bfdc44f2072f55cacd994d4885c783307dcac7f01b4f7e7efd1c2c0b86cabb54",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCheckboxDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteCheckbox-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/local-error/ts/Child.vue",
									"sha256": "b14787d79eae472d22ebecf15122cdf9cf1c14b78a27dc0dc998b45c38c10e73",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCheckboxChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteCheckbox, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamAsyncChoiceSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<readonly string[]>([]);\nconst control = ref<AsamAsyncChoiceExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncChoiceSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/local-error/js/Demo.vue",
									"sha256": "47418ac1c30e36c7b9859198206acb5effd719eeac02ed60762ab66646f72f63",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteCheckboxDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteCheckbox-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/local-error/js/Child.vue",
									"sha256": "6041d725a1b2bdf51487fc36b2863ff6a70e59adbe6dc9625a66e6e0d0b36fce",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteCheckboxChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteCheckbox, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref([]);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteCheckbox/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDictCheckbox",
			"documentation": "/component-AsamDictCheckbox.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地字典与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/basic/ts/Demo.vue",
									"sha256": "6ddf8c0d96a9c88af48017e7121693109c88e5d32489d31501d17ea789197478",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCheckboxValuesDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/basic/ts/Child.vue",
									"sha256": "58bdf8b31d2fd77495ca864fbf037a641024701b95a52aaed415bae2cac2e43f",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<fieldset data-testid=\"choice-array\">\n\t\t\t<legend>值数组</legend>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tref=\"control\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tdict-type=\"doc-status\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamDictCheckbox>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-2\" data-testid=\"choice-string\">\n\t\t\t<legend>分隔字符串</legend>\n\t\t\t<label for=\"AsamDictCheckbox-separator\">集合分隔符</label>\n\t\t\t<AsamSelect\n\t\t\t\tid=\"AsamDictCheckbox-separator\"\n\t\t\t\t:model-value=\"separator\"\n\t\t\t\t@change=\"changeSeparator\"\n\t\t\t>\n\t\t\t\t<AsamOption :label=\"'|'\" :value=\"'|'\">|</AsamOption>\n\t\t\t\t<AsamOption :label=\"'~'\" :value=\"'~'\">~</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"stringValue\"\n\t\t\t\tdict-type=\"doc-status\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:separator=\"separator\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamDictCheckbox>\n\t\t\t<pre data-testid=\"choice-string-model\">{{ JSON.stringify(stringValue) }}</pre>\n\t\t</fieldset>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre data-testid=\"choice-array-model\">{{ JSON.stringify(value) }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCheckboxValuesChild' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamDictCheckbox\n} from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamDictEntry } from '@asam-ui/ui';\nconst value = ref<readonly string[]>([]);\nconst active = ref(true);\nconst stringValue = ref('');\nconst separator = ref<'|' | '~'>('|');\nfunction changeSeparator(value: unknown) {\n\tconst next = value;\n\tif (next !== '|' && next !== '~') return;\n\tstringValue.value = '';\n\tseparator.value = next;\n}\nconst control = ref<AsamAsyncChoiceExpose<string, AsamDictEntry>>();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/basic/ts/provider.ts",
									"sha256": "1da89e658d274256a3020a0b630ab0977904c4645dc8e6614b2d66951c17bc2d",
									"source": "import type { AsamDataProvider } from '@asam-ui/ui';\n\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/basic/js/Demo.vue",
									"sha256": "e6657f933ec2078dc5d7230c79e82fc9d59b85091613b3b203651d609bdc00f2",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDictCheckboxValuesDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/basic/js/Child.vue",
									"sha256": "3bb71a8a9c2f6b1436d01581b9ee5a64f650f8c3717769389bc8c561f21886a0",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<fieldset data-testid=\"choice-array\">\n\t\t\t<legend>值数组</legend>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tref=\"control\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tdict-type=\"doc-status\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamDictCheckbox>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-2\" data-testid=\"choice-string\">\n\t\t\t<legend>分隔字符串</legend>\n\t\t\t<label for=\"AsamDictCheckbox-separator\">集合分隔符</label>\n\t\t\t<AsamSelect\n\t\t\t\tid=\"AsamDictCheckbox-separator\"\n\t\t\t\t:model-value=\"separator\"\n\t\t\t\t@change=\"changeSeparator\"\n\t\t\t>\n\t\t\t\t<AsamOption :label=\"'|'\" :value=\"'|'\">|</AsamOption>\n\t\t\t\t<AsamOption :label=\"'~'\" :value=\"'~'\">~</AsamOption>\n\t\t\t</AsamSelect>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"stringValue\"\n\t\t\t\tdict-type=\"doc-status\"\n\t\t\t\t:active=\"active\"\n\t\t\t\tsize=\"default\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:separator=\"separator\"\n\t\t\t\t@error=\"error = $event.message\"\n\t\t\t\t@success=\"error = ''\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">{{ option.label }}</template>\n\t\t\t</AsamDictCheckbox>\n\t\t\t<pre data-testid=\"choice-string-model\">{{ JSON.stringify(stringValue) }}</pre>\n\t\t</fieldset>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre data-testid=\"choice-array-model\">{{ JSON.stringify(value) }}</pre>\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDictCheckboxValuesChild' });\nimport { ref } from 'vue';\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamDictCheckbox\n} from '@asam-ui/ui';\nconst value = ref([]);\nconst active = ref(true);\nconst stringValue = ref('');\nconst separator = ref('|');\nfunction changeSeparator(value) {\n\tconst next = value;\n\tif (next !== '|' && next !== '~') return;\n\tstringValue.value = '';\n\tseparator.value = next;\n}\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/basic/js/provider.js",
									"sha256": "5dd6ce08b0eb95147057e3760678a200ea4d263da5390edccdbd797c9c661d49",
									"source": "export const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ label: '准备', value: 'ready' },\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "connected-buttons",
					"title": "连续按钮、对象模型与四档尺寸",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/ts/Demo.vue",
									"sha256": "870069867400b6ed5f97102f4a05bb8696172b5b6c46a3ff949e55b22ed911bf",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamChoiceButtonsHost' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-buttons' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/ts/Child.vue",
									"sha256": "b120ca640bbcf82be1e19c37c653587f3b4316d3ffc1e5d32a78c15622485983",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamDictCheckbox-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamDictCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-buttons\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\t:max=\"2\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamDictCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showLimits = !showLimits\"\n\t\t\t>展示数量限制协议</AsamButton\n\t\t>\n\t\t<LimitsContract v-if=\"showLimits\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPresentation = !showPresentation\"\n\t\t\t>展示组外观协议</AsamButton\n\t\t>\n\t\t<PresentationContract v-if=\"showPresentation\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showValidation = !showValidation\"\n\t\t\t>展示自动校验协议</AsamButton\n\t\t>\n\t\t<ValidationContract v-if=\"showValidation\" />\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCheckboxButtons' });\nimport { ref } from 'vue';\nimport LimitsContract from './LimitsContract.vue';\nimport PresentationContract from './PresentationContract.vue';\nimport ValidationContract from './ValidationContract.vue';\nconst showValidation = ref(false);\nconst showPresentation = ref(false);\nconst showLimits = ref(false);\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamDictCheckbox\n} from '@asam-ui/ui';\nimport type {\n\tAsamAsyncChoiceExpose,\n\tAsamValue,\n\tAsamDataError,\n\tAsamCheckboxDataEmits\n} from '@asam-ui/ui';\ninterface Item {\n\tid: number;\n\tlabel: string;\n\tvalue: number;\n\tdisabled?: boolean;\n}\ntype Model = readonly AsamOption<number, Item>[];\ntype Change = AsamCheckboxDataEmits<AsamValue, Item>['change'][0];\ntype Size = 'large' | 'big' | 'default' | 'small';\nimport { failing, slow } from './provider.js';\nconst size = ref<Size>('default');\nconst value = ref<Model>([]);\nconst changes = ref<Change[]>([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref<AsamAsyncChoiceExpose<number, Item>>();\nconst error = ref('');\nconst events = ref<{ name: string; payload: unknown }[]>([]);\nfunction recordChange(value: Change) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value: AsamDataError) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options: readonly AsamOption<AsamValue, Item>[]) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/ts/provider.ts",
									"sha256": "c47e58c748cacb313c1f577a95cbe749da8f0c957cb9e0d1927972f17055c655",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport const failing = ref(false);\nexport const slow = ref(false);\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (failing.value) throw new Error('演示加载失败');\n\t\t\tif (dictType !== 'doc-buttons') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ id: 0, label: '准备', value: 0 },\n\t\t\t\t{ id: 2, label: '进行', value: 2 },\n\t\t\t\t{ id: 3, label: '完成', value: 3 },\n\t\t\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								},
								{
									"name": "LimitsContract.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/ts/LimitsContract.vue",
									"sha256": "e9b0fbcc357e81d2152111ea42837dd9f76d1ca3c61550ffce8b18f881d153cb",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"choice-limits\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"bounded\">启用数量限制</AsamCheckboxItem>\n\t\t<label for=\"AsamDictCheckbox-minimum\">最少选择</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-minimum\" v-model=\"minimum\">\n\t\t\t<AsamOption :value=\"0\" :label=\"'0'\">0</AsamOption>\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-maximum\">最多选择</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-maximum\" v-model=\"maximum\">\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t\t<AsamOption :value=\"3\" :label=\"'3'\">3</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-limits-type\">限制控件类型</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-limits-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用整组</AsamCheckboxItem>\n\t\t<div data-testid=\"choice-limits-object\">\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"model\"\n\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\tdict-value-type=\"number\"\n\t\t\t\tv-bind=\"limits\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">\n\t\t\t\t\t<span :data-limit-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamDictCheckbox>\n\t\t</div>\n\t\t<pre data-testid=\"choice-limits-state\">{{\n\t\t\tJSON.stringify({ model, bounded, minimum, maximum, disabled, type })\n\t\t}}</pre>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"policyBounded\">启用值模型限制</AsamCheckboxItem>\n\t\t<fieldset class=\"demo-spacing-2\" data-testid=\"choice-limits-array\">\n\t\t\t<legend>值数组数量限制</legend>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"arrayModel\"\n\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\tdict-value-type=\"number\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits-array\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(arrayModel) }}</pre>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-3\" data-testid=\"choice-limits-string\">\n\t\t\t<legend>分隔字符串数量限制</legend>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"stringModel\"\n\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\tdict-value-type=\"number\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\tseparator=\"|\"\n\t\t\t\tname=\"data009-limits-string\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(stringModel) }}</pre>\n\t\t</fieldset>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamDictCheckbox } from '@asam-ui/ui';\n\ninterface Item {\n\treadonly id: number;\n\treadonly label: string;\n\treadonly value: number;\n\treadonly disabled?: boolean;\n}\n\nconst model = ref<readonly AsamOption<number, Item>[]>([]);\nconst minimum = ref(1),\n\tmaximum = ref(2),\n\tbounded = ref(true),\n\tdisabled = ref(false);\nconst type = ref<'checkbox' | 'button'>('checkbox');\nconst limits = computed(() => (bounded.value ? { min: minimum.value, max: maximum.value } : {}));\nconst arrayModel = ref<readonly number[]>([]);\nconst stringModel = ref('');\nconst policyBounded = ref(true);\nconst policyLimits = computed(() => (policyBounded.value ? { min: 1, max: 2 } : {}));\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "PresentationContract.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/ts/PresentationContract.vue",
									"sha256": "337ed51cad7e53549ba3d99ebf3505ff6627d7b7c1014f8fb9eb49d0f30cb592",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"choice-presentation\">\n\t\t<label for=\"AsamDictCheckbox-presentation-preset\">组外观方案</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-presentation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'first'\" :value=\"'first'\">first</AsamOption>\n\t\t\t<AsamOption :label=\"'second'\" :value=\"'second'\">second</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-presentation-type\">外观控件类型</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-presentation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamDictCheckbox\n\t\t\tv-model=\"model\"\n\t\t\tdict-type=\"doc-buttons\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tv-bind=\"presentation\"\n\t\t\t:type=\"type\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\tname=\"data009-presentation\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span :data-presentation-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t</template>\n\t\t</AsamDictCheckbox>\n\t\t<pre data-testid=\"choice-presentation-state\">{{\n\t\t\tJSON.stringify({ model, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\n\nimport { AsamSelect, AsamOption, AsamDictCheckbox } from '@asam-ui/ui';\n\ninterface Item {\n\treadonly id: number;\n\treadonly label: string;\n\treadonly value: number;\n\treadonly disabled?: boolean;\n}\n\nconst model = ref<readonly AsamOption<number, Item>[]>([]);\nconst preset = ref<'omit' | 'first' | 'second'>('omit');\nconst type = ref<'checkbox' | 'button'>('button');\nconst presentation = computed(() =>\n\tpreset.value === 'first'\n\t\t? { tag: 'fieldset', ariaLabel: '第一选择组', fill: '#123456', textColor: '#ffeecc' }\n\t\t: preset.value === 'second'\n\t\t\t? { tag: 'p', ariaLabel: '第二选择组', fill: '#563412', textColor: '#dcf0fa' }\n\t\t\t: {}\n);\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "ValidationContract.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/ts/ValidationContract.vue",
									"sha256": "18a76fd7ddfb4ca21bb4d2cc0efb9070e9543614f8d62a1f44a6a3c4159671e4",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"choice-validation\">\n\t\t<label for=\"AsamDictCheckbox-validation-preset\">自动校验方案</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-validation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-validation-type\">校验控件类型</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-validation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamBaseForm :model=\"model\" :rules=\"rules\">\n\t\t\t<AsamFormItem label=\"object 值校验\" prop=\"object\">\n\t\t\t\t<div data-testid=\"choice-validation-object\">\n\t\t\t\t\t<AsamDictCheckbox\n\t\t\t\t\t\tv-model=\"model.object\"\n\t\t\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\t\t\tdict-value-type=\"number\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"object\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-object\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"array 值校验\" prop=\"array\">\n\t\t\t\t<div data-testid=\"choice-validation-array\">\n\t\t\t\t\t<AsamDictCheckbox\n\t\t\t\t\t\tv-model=\"model.array\"\n\t\t\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\t\t\tdict-value-type=\"number\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-array\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"string 值校验\" prop=\"string\">\n\t\t\t\t<div data-testid=\"choice-validation-string\">\n\t\t\t\t\t<AsamDictCheckbox\n\t\t\t\t\t\tv-model=\"model.string\"\n\t\t\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\t\t\tdict-value-type=\"number\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t\t\tseparator=\"|\"\n\t\t\t\t\t\tname=\"data009-validation-string\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearModels\"\n\t\t\t>清空校验模型</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setModels\">设置校验模型</AsamButton>\n\t\t<pre data-testid=\"choice-validation-state\">{{\n\t\t\tJSON.stringify({ model, calls, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref } from 'vue';\n\nimport { AsamSelect, AsamOption, AsamButton, AsamBaseForm, AsamFormItem } from '@asam-ui/ui';\nimport type { AsamBaseFormProps } from '@asam-ui/ui';\nimport { AsamDictCheckbox } from '@asam-ui/ui';\n\ninterface Item {\n\treadonly id: number;\n\treadonly label: string;\n\treadonly value: number;\n\treadonly disabled?: boolean;\n}\ninterface Model {\n\tobject: readonly AsamOption<number, Item>[];\n\tarray: readonly number[];\n\tstring: string;\n}\n\nconst model = reactive<Model>({ object: [], array: [], string: '' });\nconst calls = ref<{ field: keyof Model; value: unknown; valid: boolean }[]>([]);\nconst preset = ref<'omit' | 'false' | 'true'>('omit');\nconst type = ref<'checkbox' | 'button'>('checkbox');\nconst validation = computed(() =>\n\tpreset.value === 'omit' ? {} : { validateEvent: preset.value === 'true' }\n);\nfunction validate(field: keyof Model, value: unknown, callback: (error?: Error) => void) {\n\tconst valid =\n\t\ttypeof value === 'string' ? value.length > 0 : Array.isArray(value) && value.length > 0;\n\tcalls.value.push({ field, value: JSON.parse(JSON.stringify(value)), valid });\n\tcallback(valid ? undefined : new Error('至少选择一项'));\n}\nconst rules: NonNullable<AsamBaseFormProps['rules']> = {\n\tobject: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value: unknown, callback) => validate('object', value, callback)\n\t\t}\n\t],\n\tarray: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value: unknown, callback) => validate('array', value, callback)\n\t\t}\n\t],\n\tstring: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value: unknown, callback) => validate('string', value, callback)\n\t\t}\n\t]\n};\nfunction clearModels() {\n\tmodel.object = [];\n\tmodel.array = [];\n\tmodel.string = '';\n}\nfunction setModels() {\n\tmodel.object = [{ label: '进行', value: 2, raw: { id: 2, label: '进行', value: 2 } }];\n\tmodel.array = [2];\n\tmodel.string = '2';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/js/Demo.vue",
									"sha256": "ab63fa56e2d1aa3862884150fe2e79af5de3a29f98bb06e7392932a86bfc3449",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamChoiceButtonsHost' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-buttons' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/js/Child.vue",
									"sha256": "cffb8bb839df92b1e3df15862206d3e94208d5969f6c5affe3b37140ae7df216",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"customDefault\">自定义默认布局</AsamCheckboxItem>\n\t\t<label for=\"AsamDictCheckbox-size\">尺寸</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-size\" v-model=\"size\">\n\t\t\t<AsamOption :label=\"'small'\" :value=\"'small'\">small</AsamOption>\n\t\t\t<AsamOption :label=\"'default'\" :value=\"'default'\">default</AsamOption>\n\t\t\t<AsamOption :label=\"'big'\" :value=\"'big'\">big</AsamOption>\n\t\t\t<AsamOption :label=\"'large'\" :value=\"'large'\">large</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failing\">模拟失败</AsamCheckboxItem>\n\t\t<AsamDictCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-buttons\"\n\t\t\tdict-value-type=\"number\"\n\t\t\t:active=\"active\"\n\t\t\t:size=\"size\"\n\t\t\ttype=\"button\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\t:max=\"2\"\n\t\t\t@update:model-value=\"events.push({ name: 'update:modelValue', payload: $event })\"\n\t\t\t@change=\"recordChange\"\n\t\t\t@error=\"recordError\"\n\t\t\t@success=\"recordSuccess\"\n\t\t>\n\t\t\t<template v-if=\"customDefault\" #default>\n\t\t\t\t<div class=\"choice-default\" data-testid=\"choice-default\">\n\t\t\t\t\t自定义默认内容；取消切换后恢复来源选项。\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span data-testid=\"choice-option\" :data-raw-id=\"option.raw.id\">{{\n\t\t\t\t\toption.label\n\t\t\t\t}}</span>\n\t\t\t</template>\n\t\t</AsamDictCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancel\">取消慢请求</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>模型：{{ JSON.stringify(value) }}</pre>\n\t\t<pre>变更：{{ JSON.stringify(changes) }}</pre>\n\t\t<pre data-testid=\"choice-events\">{{ JSON.stringify(events) }}</pre>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showLimits = !showLimits\"\n\t\t\t>展示数量限制协议</AsamButton\n\t\t>\n\t\t<LimitsContract v-if=\"showLimits\" />\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\tnative-type=\"button\"\n\t\t\t@click=\"showPresentation = !showPresentation\"\n\t\t\t>展示组外观协议</AsamButton\n\t\t>\n\t\t<PresentationContract v-if=\"showPresentation\" />\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"showValidation = !showValidation\"\n\t\t\t>展示自动校验协议</AsamButton\n\t\t>\n\t\t<ValidationContract v-if=\"showValidation\" />\n\t</section>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamDictCheckboxButtons' });\nimport { ref } from 'vue';\nimport LimitsContract from './LimitsContract.vue';\nimport PresentationContract from './PresentationContract.vue';\nimport ValidationContract from './ValidationContract.vue';\nconst showValidation = ref(false);\nconst showPresentation = ref(false);\nconst showLimits = ref(false);\nimport {\n\tAsamCheckboxItem,\n\tAsamSelect,\n\tAsamOption,\n\tAsamButton,\n\tAsamDictCheckbox\n} from '@asam-ui/ui';\nimport { failing, slow } from './provider.js';\nconst size = ref('default');\nconst value = ref([]);\nconst changes = ref([]);\nconst active = ref(true);\nconst customDefault = ref(false);\nconst control = ref();\nconst error = ref('');\nconst events = ref([]);\nfunction recordChange(value) {\n\tchanges.value.push(value);\n\tevents.value.push({ name: 'change', payload: value });\n}\nfunction recordError(value) {\n\terror.value = value.message;\n\tevents.value.push({ name: 'error', payload: { kind: value.kind, message: value.message } });\n}\nfunction recordSuccess(options) {\n\terror.value = '';\n\tevents.value.push({ name: 'success', payload: options });\n}\nconst result = ref('');\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancel() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 20);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\n</script>\n\n<style scoped>\n.choice-default {\n\tfont-size: var(--asam-control-font-size);\n\tline-height: 1.5;\n}\n\npre {\n\tmax-width: 100%;\n\toverflow: auto;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/js/provider.js",
									"sha256": "f11b5afa504555ff7cf83b929762408dedb6e10cb3fdb3ffaef7282a0bb8b790",
									"source": "import { ref } from 'vue';\nexport const failing = ref(false);\nexport const slow = ref(false);\nexport const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tif (slow.value) await new Promise((done) => setTimeout(done, 300));\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (failing.value) throw new Error('演示加载失败');\n\t\t\tif (dictType !== 'doc-buttons') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{ id: 0, label: '准备', value: 0 },\n\t\t\t\t{ id: 2, label: '进行', value: 2 },\n\t\t\t\t{ id: 3, label: '完成', value: 3 },\n\t\t\t\t{ id: 4, label: '停用', value: 4, disabled: true }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								},
								{
									"name": "LimitsContract.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/js/LimitsContract.vue",
									"sha256": "90b3b3896e685541501943c67c7407984e7ea9d249cc1aeed18d600e6272d036",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"choice-limits\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"bounded\">启用数量限制</AsamCheckboxItem>\n\t\t<label for=\"AsamDictCheckbox-minimum\">最少选择</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-minimum\" v-model=\"minimum\">\n\t\t\t<AsamOption :value=\"0\" :label=\"'0'\">0</AsamOption>\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-maximum\">最多选择</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-maximum\" v-model=\"maximum\">\n\t\t\t<AsamOption :value=\"1\" :label=\"'1'\">1</AsamOption>\n\t\t\t<AsamOption :value=\"2\" :label=\"'2'\">2</AsamOption>\n\t\t\t<AsamOption :value=\"3\" :label=\"'3'\">3</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-limits-type\">限制控件类型</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-limits-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用整组</AsamCheckboxItem>\n\t\t<div data-testid=\"choice-limits-object\">\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"model\"\n\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\tdict-value-type=\"number\"\n\t\t\t\tv-bind=\"limits\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits\"\n\t\t\t>\n\t\t\t\t<template #option=\"{ option }\">\n\t\t\t\t\t<span :data-limit-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t\t</template>\n\t\t\t</AsamDictCheckbox>\n\t\t</div>\n\t\t<pre data-testid=\"choice-limits-state\">{{\n\t\t\tJSON.stringify({ model, bounded, minimum, maximum, disabled, type })\n\t\t}}</pre>\n\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"policyBounded\">启用值模型限制</AsamCheckboxItem>\n\t\t<fieldset class=\"demo-spacing-2\" data-testid=\"choice-limits-array\">\n\t\t\t<legend>值数组数量限制</legend>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"arrayModel\"\n\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\tdict-value-type=\"number\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\tname=\"data009-limits-array\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(arrayModel) }}</pre>\n\t\t</fieldset>\n\t\t<fieldset class=\"demo-spacing-3\" data-testid=\"choice-limits-string\">\n\t\t\t<legend>分隔字符串数量限制</legend>\n\t\t\t<AsamDictCheckbox\n\t\t\t\tv-model=\"stringModel\"\n\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\tdict-value-type=\"number\"\n\t\t\t\tv-bind=\"policyLimits\"\n\t\t\t\t:type=\"type\"\n\t\t\t\tvalue-mode=\"value\"\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\tseparator=\"|\"\n\t\t\t\tname=\"data009-limits-string\"\n\t\t\t/>\n\t\t\t<pre data-testid=\"choice-policy-state\">{{ JSON.stringify(stringModel) }}</pre>\n\t\t</fieldset>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamCheckboxItem, AsamSelect, AsamOption, AsamDictCheckbox } from '@asam-ui/ui';\nconst model = ref([]);\nconst minimum = ref(1),\n\tmaximum = ref(2),\n\tbounded = ref(true),\n\tdisabled = ref(false);\nconst type = ref('checkbox');\nconst limits = computed(() => (bounded.value ? { min: minimum.value, max: maximum.value } : {}));\nconst arrayModel = ref([]);\nconst stringModel = ref('');\nconst policyBounded = ref(true);\nconst policyLimits = computed(() => (policyBounded.value ? { min: 1, max: 2 } : {}));\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "PresentationContract.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/js/PresentationContract.vue",
									"sha256": "101566e6ede1617bc028fca9ac330a2af64716d7dca28cb36ca04a7128ebdb3b",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"choice-presentation\">\n\t\t<label for=\"AsamDictCheckbox-presentation-preset\">组外观方案</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-presentation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'first'\" :value=\"'first'\">first</AsamOption>\n\t\t\t<AsamOption :label=\"'second'\" :value=\"'second'\">second</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-presentation-type\">外观控件类型</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-presentation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamDictCheckbox\n\t\t\tv-model=\"model\"\n\t\t\tdict-type=\"doc-buttons\"\n\t\t\tdict-value-type=\"number\"\n\t\t\tv-bind=\"presentation\"\n\t\t\t:type=\"type\"\n\t\t\tvalue-mode=\"object\"\n\t\t\tmultiple-value-mode=\"array\"\n\t\t\tname=\"data009-presentation\"\n\t\t>\n\t\t\t<template #option=\"{ option }\">\n\t\t\t\t<span :data-presentation-raw-id=\"option.raw.id\">{{ option.label }}</span>\n\t\t\t</template>\n\t\t</AsamDictCheckbox>\n\t\t<pre data-testid=\"choice-presentation-state\">{{\n\t\t\tJSON.stringify({ model, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamDictCheckbox } from '@asam-ui/ui';\nconst model = ref([]);\nconst preset = ref('omit');\nconst type = ref('button');\nconst presentation = computed(() =>\n\tpreset.value === 'first'\n\t\t? { tag: 'fieldset', ariaLabel: '第一选择组', fill: '#123456', textColor: '#ffeecc' }\n\t\t: preset.value === 'second'\n\t\t\t? { tag: 'p', ariaLabel: '第二选择组', fill: '#563412', textColor: '#dcf0fa' }\n\t\t\t: {}\n);\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								},
								{
									"name": "ValidationContract.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/connected-buttons/js/ValidationContract.vue",
									"sha256": "ce43ece1ded3ee32f541e2cce157b7bd2d398db73d50b095e96f8ea353f4dbab",
									"source": "<template>\n\t<section class=\"demo-spacing-1\" data-testid=\"choice-validation\">\n\t\t<label for=\"AsamDictCheckbox-validation-preset\">自动校验方案</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-validation-preset\" v-model=\"preset\">\n\t\t\t<AsamOption :label=\"'omit'\" :value=\"'omit'\">omit</AsamOption>\n\t\t\t<AsamOption :label=\"'false'\" :value=\"'false'\">false</AsamOption>\n\t\t\t<AsamOption :label=\"'true'\" :value=\"'true'\">true</AsamOption>\n\t\t</AsamSelect>\n\t\t<label for=\"AsamDictCheckbox-validation-type\">校验控件类型</label>\n\t\t<AsamSelect id=\"AsamDictCheckbox-validation-type\" v-model=\"type\">\n\t\t\t<AsamOption :label=\"'checkbox'\" :value=\"'checkbox'\">checkbox</AsamOption>\n\t\t\t<AsamOption :label=\"'button'\" :value=\"'button'\">button</AsamOption>\n\t\t</AsamSelect>\n\t\t<AsamBaseForm :model=\"model\" :rules=\"rules\">\n\t\t\t<AsamFormItem label=\"object 值校验\" prop=\"object\">\n\t\t\t\t<div data-testid=\"choice-validation-object\">\n\t\t\t\t\t<AsamDictCheckbox\n\t\t\t\t\t\tv-model=\"model.object\"\n\t\t\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\t\t\tdict-value-type=\"number\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"object\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-object\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"array 值校验\" prop=\"array\">\n\t\t\t\t<div data-testid=\"choice-validation-array\">\n\t\t\t\t\t<AsamDictCheckbox\n\t\t\t\t\t\tv-model=\"model.array\"\n\t\t\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\t\t\tdict-value-type=\"number\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"array\"\n\t\t\t\t\t\tname=\"data009-validation-array\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\n\t\t\t<AsamFormItem label=\"string 值校验\" prop=\"string\">\n\t\t\t\t<div data-testid=\"choice-validation-string\">\n\t\t\t\t\t<AsamDictCheckbox\n\t\t\t\t\t\tv-model=\"model.string\"\n\t\t\t\t\t\tdict-type=\"doc-buttons\"\n\t\t\t\t\t\tdict-value-type=\"number\"\n\t\t\t\t\t\tv-bind=\"validation\"\n\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\tvalue-mode=\"value\"\n\t\t\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t\t\tseparator=\"|\"\n\t\t\t\t\t\tname=\"data009-validation-string\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</AsamFormItem>\n\t\t</AsamBaseForm>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearModels\"\n\t\t\t>清空校验模型</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setModels\">设置校验模型</AsamButton>\n\t\t<pre data-testid=\"choice-validation-state\">{{\n\t\t\tJSON.stringify({ model, calls, preset, type })\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { computed, reactive, ref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamBaseForm, AsamFormItem } from '@asam-ui/ui';\nimport { AsamDictCheckbox } from '@asam-ui/ui';\nconst model = reactive({ object: [], array: [], string: '' });\nconst calls = ref([]);\nconst preset = ref('omit');\nconst type = ref('checkbox');\nconst validation = computed(() =>\n\tpreset.value === 'omit' ? {} : { validateEvent: preset.value === 'true' }\n);\nfunction validate(field, value, callback) {\n\tconst valid =\n\t\ttypeof value === 'string' ? value.length > 0 : Array.isArray(value) && value.length > 0;\n\tcalls.value.push({ field, value: JSON.parse(JSON.stringify(value)), valid });\n\tcallback(valid ? undefined : new Error('至少选择一项'));\n}\nconst rules = {\n\tobject: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value, callback) => validate('object', value, callback)\n\t\t}\n\t],\n\tarray: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value, callback) => validate('array', value, callback)\n\t\t}\n\t],\n\tstring: [\n\t\t{\n\t\t\ttrigger: 'change',\n\t\t\tvalidator: (_rule, value, callback) => validate('string', value, callback)\n\t\t}\n\t]\n};\nfunction clearModels() {\n\tmodel.object = [];\n\tmodel.array = [];\n\tmodel.string = '';\n}\nfunction setModels() {\n\tmodel.object = [{ label: '进行', value: 2, raw: { id: 2, label: '进行', value: 2 } }];\n\tmodel.array = [2];\n\tmodel.string = '2';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/local-error/ts/Demo.vue",
									"sha256": "6c33a3725453accf286ef2e97e42a8076c15af10d51017bec21a31448d9f5391",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCheckboxDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictCheckbox-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/local-error/ts/Child.vue",
									"sha256": "4edd006ed71d9a751c5e186e04c8fc22f800f259c7dfabb029c7a9704b5985e0",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCheckboxChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictCheckbox, defineAsamDictSource } from '@asam-ui/ui';\nimport type { AsamAsyncChoiceExpose, AsamAsyncChoiceSlots } from '@asam-ui/ui';\nimport type { Transport } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<readonly string[]>([]);\nconst control = ref<AsamAsyncChoiceExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamAsyncChoiceSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/local-error/js/Demo.vue",
									"sha256": "1ad111dad35f12823efaee7fa94baff1e00658b1487bcb1fe5468c46f16dba14",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictCheckboxDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictCheckbox-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/local-error/js/Child.vue",
									"sha256": "ffcb0be8e2574461e334717fa5f953fb96e3bdffae3b594a3b9962459b6fe829",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictCheckbox\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictCheckbox>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictCheckboxChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictCheckbox, defineAsamDictSource } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref([]);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDictCheckbox/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamCascader",
			"documentation": "/component-AsamCascader.html",
			"demos": [
				{
					"id": "basic",
					"title": "层级选择与自定义节点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/basic/ts/Demo.vue",
									"sha256": "7e6c23f797146e1b78ca6e36b062eb91b3a96d049c921e10e0310c276933d4bd",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascader\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t>\n\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t<template #empty> 没有可选节点 </template>\n\t\t</AsamCascader>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nimport type { AsamCascaderExpose } from '@asam-ui/ui';\nconst control = ref<AsamCascaderExpose>();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/basic/js/Demo.vue",
									"sha256": "68ef369eafa9dd747b096669bd229874fb46379eb06843d38a15ec04b431afb4",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascader\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t>\n\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t<template #empty> 没有可选节点 </template>\n\t\t</AsamCascader>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref('design');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "多选与对象值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/policies/ts/Demo.vue",
									"sha256": "8318d547de3bfd3bba966171b7813668fbe6fccc57e419c408795fd228869a5f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascader\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ multiple: true, 'value-mode': 'object' }\"\n\t\t/>\n\t\t<AsamCascader\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ multiple: true, 'multiple-value-mode': 'string', separator: '|' }\"\n\t\t/>\n\t\t<output>对象：{{ objectValue }}；字符串：{{ stringValue }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamCascader } from '@asam-ui/ui';\nimport type { AsamHierarchyOption } from '@asam-ui/ui';\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst objectValue = ref<AsamHierarchyOption[]>([]);\nconst stringValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/policies/js/Demo.vue",
									"sha256": "5d9f123250e776815dcbaa6fdb73b7c53dd6218545074b37cddfb51aef83c7b1",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascader\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ multiple: true, 'value-mode': 'object' }\"\n\t\t/>\n\t\t<AsamCascader\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ multiple: true, 'multiple-value-mode': 'string', separator: '|' }\"\n\t\t/>\n\t\t<output>对象：{{ objectValue }}；字符串：{{ stringValue }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamCascader } from '@asam-ui/ui';\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst objectValue = ref([]);\nconst stringValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原始节点字段与实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native/ts/Demo.vue",
									"sha256": "a96d76dc6149e15634ca19a96ea61e5ea7e4721e3975dfb2fcf41c07ba050684",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascader\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ 'value-mode': 'native' },\n\t\t\t\t...{\n\t\t\t\t\toptions: nodes,\n\t\t\t\t\tprops: { value: 'id', label: 'name', children: 'nodes', emitPath: true }\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"inspect\"> 读取节点 </AsamButton>\n\t\t<output>原始模型：{{ value }}；{{ inspected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderNativeExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nimport type { AsamCascaderExpose, AsamCascaderNativeProps } from '@asam-ui/ui';\nconst control = ref<AsamCascaderExpose>();\nconst value = ref<AsamCascaderNativeProps['modelValue']>([]);\nconst nodes = [\n\t{\n\t\tid: 'team',\n\t\tname: '团队',\n\t\tnodes: [\n\t\t\t{ id: 'design', name: '设计' },\n\t\t\t{ id: 'dev', name: '开发' }\n\t\t]\n\t}\n];\nconst inspected = ref('');\nfunction inspect() {\n\tinspected.value = JSON.stringify(\n\t\tcontrol.value?.getCheckedNodes(true)?.map((node) => node.value)\n\t);\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native/js/Demo.vue",
									"sha256": "39419447675c14fa771e77ab879145486cd741638eefa0c900a11d0f0ddcd34f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamCascader\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ 'value-mode': 'native' },\n\t\t\t\t...{\n\t\t\t\t\toptions: nodes,\n\t\t\t\t\tprops: { value: 'id', label: 'name', children: 'nodes', emitPath: true }\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"inspect\"> 读取节点 </AsamButton>\n\t\t<output>原始模型：{{ value }}；{{ inspected }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderNativeExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref([]);\nconst nodes = [\n\t{\n\t\tid: 'team',\n\t\tname: '团队',\n\t\tnodes: [\n\t\t\t{ id: 'design', name: '设计' },\n\t\t\t{ id: 'dev', name: '开发' }\n\t\t]\n\t}\n];\nconst inspected = ref('');\nfunction inspect() {\n\tinspected.value = JSON.stringify(\n\t\tcontrol.value?.getCheckedNodes(true)?.map((node) => node.value)\n\t);\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/sizes/ts/Demo.vue",
									"sha256": "33f29559ef56865521180d74ea27943916b4307b55f9f0e1566cfb7e6f7bd903",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCascader size=\"large\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCascader size=\"big\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCascader size=\"default\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCascader size=\"small\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCascader :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/sizes/js/Demo.vue",
									"sha256": "30793ca8860134ef8bf78c93f028f4802e71fff507a35f842909e0a3992198ca",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamCascader size=\"large\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamCascader size=\"big\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamCascader size=\"default\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamCascader size=\"small\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamCascader :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderSizesExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-basic/ts/Demo.vue",
									"sha256": "524076d19a3c969838d005dd5ad2b3d791a2a85dd7d6361d89b7540d48ae2a66",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">点击展开子选项（默认）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"handleChange\"\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">悬停展开子选项</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\t@change=\"handleChange\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\nimport type { AsamCascaderNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/basic.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamCascaderNativeProps['modelValue']>([]);\n\nconst props = {\n\texpandTrigger: 'hover' as const\n};\n\nconst handleChange = (value: unknown) => {\n\tconsole.log(value);\n};\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "46dfe6785ef852f7e8eabbb14cab9b3ce2f01f35d5edfe7542f56ee0506b3ac0",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-basic/js/Demo.vue",
									"sha256": "91def2f1681a741890b65388eba0a5af10da5a2ba7eaa3284eaa3a3d7426e09c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">点击展开子选项（默认）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"handleChange\"\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">悬停展开子选项</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\t@change=\"handleChange\"\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/basic.vue\nimport { ref } from 'vue';\nconst value = ref([]);\nconst props = {\n\texpandTrigger: 'hover'\n};\nconst handleChange = (value) => {\n\tconsole.log(value);\n};\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "8325f7edf2b1d18f41e58911ea8e137df83ad3d258214b48b9fd196ad75470e8",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-option-disabling",
					"title": "有禁用选项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-option-disabling/ts/Demo.vue",
									"sha256": "5951043bf7ae20f919530eb189df547d2264fd11116223e8dfbd7676613c4e30",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/option-disabling.vue\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "36bb05f53e5b9069a31559f83612028870d2fa625ca755ec1fac63329fe7ffa0",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-option-disabling/js/Demo.vue",
									"sha256": "9a8f23cd376e075bcc522b4ec5f9c07894b59d1d1e1696ced8fdbd313942bb7c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" />\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/option-disabling.vue\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "a81ca93c683ec698d6b938a6a123503cf341ec031b052e9595e41412915f2195",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-clearable",
					"title": "可清空",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-clearable/ts/Demo.vue",
									"sha256": "2462f90887fe60683e915a438e24e775432468d6aa12ae6f18f2408d28aeb055",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" clearable />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/clearable.vue\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "9c3edf57384e4e706fbd942ce434dec29b9b0a75bc3ace6bf1a194e899209a40",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-clearable/js/Demo.vue",
									"sha256": "3570f571625eb6cbcc916b64c7a80a403b86e4248ac8966abed0d383d1bb2b04",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" clearable />\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/clearable.vue\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "5867296f220cfd99095572b8c7ad97aafb69f9f3163386988b6edb9b9ef3f690",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-clear-icon",
					"title": "自定义清除图标",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-clear-icon/ts/Demo.vue",
									"sha256": "9352c8603b774c46cb8466c025d635fa90f8b593fcbc880fa50b46452310f33c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader\n\t\tvalue-mode=\"native\"\n\t\t:options=\"options\"\n\t\tclearable\n\t\t:clear-icon=\"CloseBold\"\n\t\tplaceholder=\"自定义清除图标\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/clear-icon.vue\n\nimport { CloseBold } from '@asam-ui/icons-vue';\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "a0c8410e0a50e91b4d46b1b1bc9db736bbbe9a30a1db666221cb6b703e54a5c2",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-clear-icon/js/Demo.vue",
									"sha256": "4d62710df55a2893e7e1f80ccc7c76272743db0fdb498fc861776c24dfb9317b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader\n\t\tvalue-mode=\"native\"\n\t\t:options=\"options\"\n\t\tclearable\n\t\t:clear-icon=\"CloseBold\"\n\t\tplaceholder=\"自定义清除图标\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/clear-icon.vue\nimport { CloseBold } from '@asam-ui/icons-vue';\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "4fe2c8efcf6db76e4cd274a80a21cc44da5af4e149c64262270b902b845333fb",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-last-level",
					"title": "仅显示最后一级",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-last-level/ts/Demo.vue",
									"sha256": "45aeadd942c49161a2c5b03f7d75e4fa8e763591eaa90932e6898c56d9ec3ee3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" :show-all-levels=\"false\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/last-level.vue\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "7a407ac66e06f6cd04b4a48bb419fd7eb298c182f2c9196955468b556180329c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-last-level/js/Demo.vue",
									"sha256": "95bd93c18898dee84960d8ecfa93104fd9dc8c9ec5b346486f7c4a5543d2dd17",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" :show-all-levels=\"false\" />\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/last-level.vue\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "87e1eccdc1b05bfa32dcd254a9a883dd51cb0ae45d158503564a92a3c4c1913b",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-multiple-selection",
					"title": "多选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-multiple-selection/ts/Demo.vue",
									"sha256": "a30d4f3323a237172ee5572d6838797801e0b008e6602a8a6338c797812f490c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">显示全部标签（默认）</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props\" clearable />\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">折叠标签</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tcollapse-tags\n\t\t\tclearable\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">折叠标签提示</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\tclearable\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">最多显示的折叠标签数</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"3\"\n\t\t\tclearable\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/multiple-selection.vue\n\nconst props = { multiple: true };\n\nconst options = [\n\t{\n\t\tvalue: 1,\n\t\tlabel: 'Asia',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 2,\n\t\t\t\tlabel: 'China',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 3, label: 'Beijing' },\n\t\t\t\t\t{ value: 4, label: 'Shanghai' },\n\t\t\t\t\t{ value: 5, label: 'Hangzhou' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 6,\n\t\t\t\tlabel: 'Japan',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 7, label: 'Tokyo' },\n\t\t\t\t\t{ value: 8, label: 'Osaka' },\n\t\t\t\t\t{ value: 9, label: 'Kyoto' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 10,\n\t\t\t\tlabel: 'Korea',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 11, label: 'Seoul' },\n\t\t\t\t\t{ value: 12, label: 'Busan' },\n\t\t\t\t\t{ value: 13, label: 'Taegu' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 14,\n\t\tlabel: 'Europe',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 15,\n\t\t\t\tlabel: 'France',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 16, label: 'Paris' },\n\t\t\t\t\t{ value: 17, label: 'Marseille' },\n\t\t\t\t\t{ value: 18, label: 'Lyon' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 19,\n\t\t\t\tlabel: 'UK',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 20, label: 'London' },\n\t\t\t\t\t{ value: 21, label: 'Birmingham' },\n\t\t\t\t\t{ value: 22, label: 'Manchester' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 23,\n\t\tlabel: 'North America',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 24,\n\t\t\t\tlabel: 'US',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 25, label: 'New York' },\n\t\t\t\t\t{ value: 26, label: '洛杉矶' },\n\t\t\t\t\t{ value: 27, label: 'Washington' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 28,\n\t\t\t\tlabel: 'Canada',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 29, label: 'Toronto' },\n\t\t\t\t\t{ value: 30, label: 'Montreal' },\n\t\t\t\t\t{ value: 31, label: 'Ottawa' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "b15da7db17d83d0a01721d6100bca34e7c97a870e44db05aebec47399a7428fb",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-multiple-selection/js/Demo.vue",
									"sha256": "cd3b3f43f68a7c6288e389adce01cd1727793b453471ecae8b2ca52993a3683c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">显示全部标签（默认）</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props\" clearable />\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">折叠标签</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tcollapse-tags\n\t\t\tclearable\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">折叠标签提示</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\tclearable\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">最多显示的折叠标签数</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"3\"\n\t\t\tclearable\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/multiple-selection.vue\nconst props = { multiple: true };\nconst options = [\n\t{\n\t\tvalue: 1,\n\t\tlabel: 'Asia',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 2,\n\t\t\t\tlabel: 'China',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 3, label: 'Beijing' },\n\t\t\t\t\t{ value: 4, label: 'Shanghai' },\n\t\t\t\t\t{ value: 5, label: 'Hangzhou' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 6,\n\t\t\t\tlabel: 'Japan',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 7, label: 'Tokyo' },\n\t\t\t\t\t{ value: 8, label: 'Osaka' },\n\t\t\t\t\t{ value: 9, label: 'Kyoto' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 10,\n\t\t\t\tlabel: 'Korea',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 11, label: 'Seoul' },\n\t\t\t\t\t{ value: 12, label: 'Busan' },\n\t\t\t\t\t{ value: 13, label: 'Taegu' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 14,\n\t\tlabel: 'Europe',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 15,\n\t\t\t\tlabel: 'France',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 16, label: 'Paris' },\n\t\t\t\t\t{ value: 17, label: 'Marseille' },\n\t\t\t\t\t{ value: 18, label: 'Lyon' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 19,\n\t\t\t\tlabel: 'UK',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 20, label: 'London' },\n\t\t\t\t\t{ value: 21, label: 'Birmingham' },\n\t\t\t\t\t{ value: 22, label: 'Manchester' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 23,\n\t\tlabel: 'North America',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 24,\n\t\t\t\tlabel: 'US',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 25, label: 'New York' },\n\t\t\t\t\t{ value: 26, label: '洛杉矶' },\n\t\t\t\t\t{ value: 27, label: 'Washington' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 28,\n\t\t\t\tlabel: 'Canada',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 29, label: 'Toronto' },\n\t\t\t\t\t{ value: 30, label: 'Montreal' },\n\t\t\t\t\t{ value: 31, label: 'Ottawa' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "3aee17d66d9785663a4de451114c847cca87e85dc397b3b05d2aae3df0cd4823",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-any-level",
					"title": "选择任意一级选项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-any-level/ts/Demo.vue",
									"sha256": "4ecfa0b8f6de50b432eb9651924e1a22c2a4a5354e82533e533cacdf8925d9f5",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">选择任意层级（单选）</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props1\" clearable />\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">选择任意层级（多选）</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props2\" clearable />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/any-level.vue\n\nconst props1 = {\n\tcheckStrictly: true\n};\n\nconst props2 = {\n\tmultiple: true,\n\tcheckStrictly: true\n};\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "e54b4929b65cb340adc37401ccdb834176eb8047655bdcdda3794dd07cff6f90",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-any-level/js/Demo.vue",
									"sha256": "59759a21f7efc7bccadd1d4a6e3a736e170939ebdc475407703ef8e0d9492eed",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">选择任意层级（单选）</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props1\" clearable />\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">选择任意层级（多选）</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props2\" clearable />\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/any-level.vue\nconst props1 = {\n\tcheckStrictly: true\n};\nconst props2 = {\n\tmultiple: true,\n\tcheckStrictly: true\n};\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "c8dd11488deff55ca629db7cd1efcd3350eb66f9b1b4f17b0b4245fb2ae481b0",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-dynamic-loading",
					"title": "动态加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-dynamic-loading/ts/Demo.vue",
									"sha256": "8a8e897a9a184e64b11682f624588b0b438e3cb2e78b2fdc940a3cd0b106ae83",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :props=\"props\" />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/dynamic-loading.vue\n\nimport type { AsamCascaderNativeConfig } from '@asam-ui/ui';\n\nlet id = 0;\nconst props: AsamCascaderNativeConfig = {\n\tlazy: true,\n\tlazyLoad(node, resolve) {\n\t\tconst { level } = node;\n\t\tsetTimeout(() => {\n\t\t\tconst nodes = Array.from({ length: level + 1 }).map(() => ({\n\t\t\t\tvalue: ++id,\n\t\t\t\tlabel: `Option - ${id}`,\n\t\t\t\tleaf: level >= 2\n\t\t\t}));\n\t\t\t// Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.\n\t\t\tresolve(nodes);\n\t\t}, 1000);\n\t}\n};\n</script>\n",
									"originalSourceSha256": "5c8a1e53514fec0b503a6b54e8fc31cc68bcd6938f5fd2711dc78f36425915e1",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-dynamic-loading/js/Demo.vue",
									"sha256": "66641db329c3e7638c056535c5809bfb2979b94d7b91c4e332493e8cc419f107",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :props=\"props\" />\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\nlet id = 0;\nconst props = {\n\tlazy: true,\n\tlazyLoad(node, resolve) {\n\t\tconst { level } = node;\n\t\tsetTimeout(() => {\n\t\t\tconst nodes = Array.from({ length: level + 1 }).map(() => ({\n\t\t\t\tvalue: ++id,\n\t\t\t\tlabel: `Option - ${id}`,\n\t\t\t\tleaf: level >= 2\n\t\t\t}));\n\t\t\t// Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.\n\t\t\tresolve(nodes);\n\t\t}, 1000);\n\t}\n};\n</script>\n",
									"originalSourceSha256": "3bf2f9624e957bd992091d0231ac583963977042b9791c00877ae075c941d307",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-filterable",
					"title": "可筛选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-filterable/ts/Demo.vue",
									"sha256": "536a9433542b28fe74cb30f31147a4238b4ff3291b749995219de8373d77ab98",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">可筛选（单选）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tplaceholder=\"尝试搜索：Guide\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">可筛选（多选）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tplaceholder=\"尝试搜索：Guide\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tfilterable\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/filterable.vue\n\nconst props = {\n\tmultiple: true\n};\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "a7064206b9ea5366a28f0e2095c0b757664d85a0b9b63b950e22ca92041edb87",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-filterable/js/Demo.vue",
									"sha256": "d2e09fa956d12dcdab30dbc081542c5ee28883d47febd68c834d2148a37bfb32",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">可筛选（单选）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tplaceholder=\"尝试搜索：Guide\"\n\t\t\t:options=\"options\"\n\t\t\tfilterable\n\t\t/>\n\t</div>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">可筛选（多选）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tplaceholder=\"尝试搜索：Guide\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tfilterable\n\t\t/>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/filterable.vue\nconst props = {\n\tmultiple: true\n};\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "202d7d581346f9a4e874fd8fe4eede7077713571112ff364ab74dfd58e39e32c",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-content",
					"title": "自定义节点内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-content/ts/Demo.vue",
									"sha256": "328fb02eca0d25ab740fd2464958687ea97456074309454eb31c02c47b808945",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\">\n\t\t<template #default=\"{ node, data }\">\n\t\t\t<span>{{ data.label }}</span>\n\t\t\t<span v-if=\"!node.isLeaf\"> ({{ data.children?.length ?? 0 }}) </span>\n\t\t</template>\n\t</AsamCascader>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-content.vue\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "9ab1a01af56d0fa8491b2141d65f794d904e98f5fa6984f1412dcc2278b7ecd6",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-content/js/Demo.vue",
									"sha256": "b5b0ebddf0e4259e7791c80ed717ed7e43dbec0819da11a36250965636cb856d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\">\n\t\t<template #default=\"{ node, data }\">\n\t\t\t<span>{{ data.label }}</span>\n\t\t\t<span v-if=\"!node.isLeaf\"> ({{ data.children?.length ?? 0 }}) </span>\n\t\t</template>\n\t</AsamCascader>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-content.vue\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "46cd8a702cb3de6e5e63591b9f8d37d749e40828b90451b8214ae140f8a4d55d",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-suggestion-item",
					"title": "自定义建议项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-suggestion-item/ts/Demo.vue",
									"sha256": "f12b71adf6570dcd743375086b4debeae6cda25332d776bed36b5475715d2421",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" filterable placeholder=\"尝试搜索：Guide\">\n\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t<span>🔍 {{ item.pathLabels.join(' > ') }}</span>\n\t\t</template>\n\t</AsamCascader>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-suggestion-item.vue\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "606bc6e5b5521302b3244fe5fcf8414966e17e3cc9d9ba5431160316bf74b491",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-suggestion-item/js/Demo.vue",
									"sha256": "8acd69e5eb3b98cae9dbe355ca09a0da1311b661bb129ed7545cdabe52330715",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader value-mode=\"native\" :options=\"options\" filterable placeholder=\"尝试搜索：Guide\">\n\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t<span>🔍 {{ item.pathLabels.join(' > ') }}</span>\n\t\t</template>\n\t</AsamCascader>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-suggestion-item.vue\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'color',\n\t\t\t\t\t\tlabel: '颜色'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'typography',\n\t\t\t\t\t\tlabel: 'Typography'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'icon',\n\t\t\t\t\t\tlabel: 'Icon'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'button',\n\t\t\t\t\t\tlabel: '按钮'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'checkbox',\n\t\t\t\t\t\tlabel: 'Checkbox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input',\n\t\t\t\t\t\tlabel: 'Input'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'input-number',\n\t\t\t\t\t\tlabel: 'InputNumber'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'select',\n\t\t\t\t\t\tlabel: '选择'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'cascader',\n\t\t\t\t\t\tlabel: 'Cascader'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'switch',\n\t\t\t\t\t\tlabel: 'Switch'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'slider',\n\t\t\t\t\t\tlabel: 'Slider'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'time-picker',\n\t\t\t\t\t\tlabel: 'TimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'date-picker',\n\t\t\t\t\t\tlabel: 'DatePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'datetime-picker',\n\t\t\t\t\t\tlabel: 'DateTimePicker'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'upload',\n\t\t\t\t\t\tlabel: '上传'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'rate',\n\t\t\t\t\t\tlabel: '评分'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'form',\n\t\t\t\t\t\tlabel: 'Form'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'data',\n\t\t\t\tlabel: 'Data',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'table',\n\t\t\t\t\t\tlabel: 'Table'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tag',\n\t\t\t\t\t\tlabel: '标签'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'progress',\n\t\t\t\t\t\tlabel: 'Progress'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tree',\n\t\t\t\t\t\tlabel: 'Tree'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'pagination',\n\t\t\t\t\t\tlabel: 'Pagination'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'badge',\n\t\t\t\t\t\tlabel: 'Badge'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'notice',\n\t\t\t\tlabel: '注意',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'alert',\n\t\t\t\t\t\tlabel: 'Alert'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'loading',\n\t\t\t\t\t\tlabel: '加载中'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message',\n\t\t\t\t\t\tlabel: 'Message'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'message-box',\n\t\t\t\t\t\tlabel: 'MessageBox'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'notification',\n\t\t\t\t\t\tlabel: 'Notification'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'menu',\n\t\t\t\t\t\tlabel: 'Menu'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tabs',\n\t\t\t\t\t\tlabel: 'Tabs'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'breadcrumb',\n\t\t\t\t\t\tlabel: 'Breadcrumb'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dropdown',\n\t\t\t\t\t\tlabel: 'Dropdown'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'steps',\n\t\t\t\t\t\tlabel: 'Steps'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'others',\n\t\t\t\tlabel: 'Others',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'dialog',\n\t\t\t\t\t\tlabel: 'Dialog'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'tooltip',\n\t\t\t\t\t\tlabel: 'Tooltip'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'popover',\n\t\t\t\t\t\tlabel: 'Popover'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'card',\n\t\t\t\t\t\tlabel: 'Card'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'carousel',\n\t\t\t\t\t\tlabel: 'Carousel'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'collapse',\n\t\t\t\t\t\tlabel: 'Collapse'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'sketch',\n\t\t\t\tlabel: 'Sketch Templates'\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'docs',\n\t\t\t\tlabel: 'Design Documentation'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "440e05504bf4cbb32adad22442c6fd7779e6d981765f7bf29ee59c6f80872ce3",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-tag",
					"title": "自定义级联标签",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-tag/ts/Demo.vue",
									"sha256": "3e533537f3feb676e2995af7cfc8c08eab8e6e0ed364ae64edf5449ff68f722c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用插槽可以更灵活地控制展示。</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props\" clearable>\n\t\t\t<template #tag=\"{ data }\">\n\t\t\t\t<AsamTag\n\t\t\t\t\tv-for=\"(item, index) in getTags(data)\"\n\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t:color=\"index % 2 === 0 ? '#FFDE0A' : ''\"\n\t\t\t\t>\n\t\t\t\t\t{{ item }}\n\t\t\t\t</AsamTag>\n\t\t\t</template>\n\t\t</AsamCascader>\n\t\t<p class=\"example-paragraph\">仅显示顶层标签</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props\" clearable>\n\t\t\t<template #tag=\"{ data }\">\n\t\t\t\t<AsamTag v-for=\"item in getTopLevelTags(data)\" :key=\"item\">\n\t\t\t\t\t{{ item }}\n\t\t\t\t</AsamTag>\n\t\t\t</template>\n\t\t</AsamCascader>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader, AsamTag } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-tag.vue\n\nimport type { AsamCascaderTag } from '@asam-ui/ui';\n\nconst props = { multiple: true };\nconst options = [\n\t{\n\t\tvalue: 1,\n\t\tlabel: 'Asia',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 2,\n\t\t\t\tlabel: 'China',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 3, label: 'Beijing' },\n\t\t\t\t\t{ value: 4, label: 'Shanghai' },\n\t\t\t\t\t{ value: 5, label: 'Hangzhou' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 6,\n\t\t\t\tlabel: 'Japan',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 7, label: 'Tokyo' },\n\t\t\t\t\t{ value: 8, label: 'Osaka' },\n\t\t\t\t\t{ value: 9, label: 'Kyoto' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 10,\n\t\t\t\tlabel: 'Korea',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 11, label: 'Seoul' },\n\t\t\t\t\t{ value: 12, label: 'Busan' },\n\t\t\t\t\t{ value: 13, label: 'Taegu' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 14,\n\t\tlabel: 'Europe',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 15,\n\t\t\t\tlabel: 'France',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 16, label: 'Paris' },\n\t\t\t\t\t{ value: 17, label: 'Marseille' },\n\t\t\t\t\t{ value: 18, label: 'Lyon' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 19,\n\t\t\t\tlabel: 'UK',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 20, label: 'London' },\n\t\t\t\t\t{ value: 21, label: 'Birmingham' },\n\t\t\t\t\t{ value: 22, label: 'Manchester' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 23,\n\t\tlabel: 'North America',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 24,\n\t\t\t\tlabel: 'US',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 25, label: 'New York' },\n\t\t\t\t\t{ value: 26, label: '洛杉矶' },\n\t\t\t\t\t{ value: 27, label: 'Washington' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 28,\n\t\t\t\tlabel: 'Canada',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 29, label: 'Toronto' },\n\t\t\t\t\t{ value: 30, label: 'Montreal' },\n\t\t\t\t\t{ value: 31, label: 'Ottawa' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst getTags = (data: AsamCascaderTag[]) => {\n\treturn data.map((item) => item.text);\n};\nconst getTopLevelTags = (data: AsamCascaderTag[]) => {\n\tconst set: Set<string> = new Set();\n\tfor (const datum of data) {\n\t\tlet parent = datum.node?.parent;\n\t\twhile (parent && parent.level !== 1) {\n\t\t\tparent = parent.parent;\n\t\t}\n\t\tconst label = parent?.data?.label;\n\t\tif (label) set.add(label);\n\t}\n\treturn [...set];\n};\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "294ea40d57327fca65d2f67765db3c1eb2e762b13226ac80ac7e01ec3b85b487",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-tag/js/Demo.vue",
									"sha256": "a9da4e34d693115fbacc0401be4247e0b54d8030cd82b044c4e03eb4c3a718f6",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">使用插槽可以更灵活地控制展示。</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props\" clearable>\n\t\t\t<template #tag=\"{ data }\">\n\t\t\t\t<AsamTag\n\t\t\t\t\tv-for=\"(item, index) in getTags(data)\"\n\t\t\t\t\t:key=\"item\"\n\t\t\t\t\t:color=\"index % 2 === 0 ? '#FFDE0A' : ''\"\n\t\t\t\t>\n\t\t\t\t\t{{ item }}\n\t\t\t\t</AsamTag>\n\t\t\t</template>\n\t\t</AsamCascader>\n\t\t<p class=\"example-paragraph\">仅显示顶层标签</p>\n\t\t<AsamCascader value-mode=\"native\" :options=\"options\" :props=\"props\" clearable>\n\t\t\t<template #tag=\"{ data }\">\n\t\t\t\t<AsamTag v-for=\"item in getTopLevelTags(data)\" :key=\"item\">\n\t\t\t\t\t{{ item }}\n\t\t\t\t</AsamTag>\n\t\t\t</template>\n\t\t</AsamCascader>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader, AsamTag } from '@asam-ui/ui';\nconst props = { multiple: true };\nconst options = [\n\t{\n\t\tvalue: 1,\n\t\tlabel: 'Asia',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 2,\n\t\t\t\tlabel: 'China',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 3, label: 'Beijing' },\n\t\t\t\t\t{ value: 4, label: 'Shanghai' },\n\t\t\t\t\t{ value: 5, label: 'Hangzhou' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 6,\n\t\t\t\tlabel: 'Japan',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 7, label: 'Tokyo' },\n\t\t\t\t\t{ value: 8, label: 'Osaka' },\n\t\t\t\t\t{ value: 9, label: 'Kyoto' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 10,\n\t\t\t\tlabel: 'Korea',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 11, label: 'Seoul' },\n\t\t\t\t\t{ value: 12, label: 'Busan' },\n\t\t\t\t\t{ value: 13, label: 'Taegu' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 14,\n\t\tlabel: 'Europe',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 15,\n\t\t\t\tlabel: 'France',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 16, label: 'Paris' },\n\t\t\t\t\t{ value: 17, label: 'Marseille' },\n\t\t\t\t\t{ value: 18, label: 'Lyon' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 19,\n\t\t\t\tlabel: 'UK',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 20, label: 'London' },\n\t\t\t\t\t{ value: 21, label: 'Birmingham' },\n\t\t\t\t\t{ value: 22, label: 'Manchester' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 23,\n\t\tlabel: 'North America',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 24,\n\t\t\t\tlabel: 'US',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 25, label: 'New York' },\n\t\t\t\t\t{ value: 26, label: '洛杉矶' },\n\t\t\t\t\t{ value: 27, label: 'Washington' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 28,\n\t\t\t\tlabel: 'Canada',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 29, label: 'Toronto' },\n\t\t\t\t\t{ value: 30, label: 'Montreal' },\n\t\t\t\t\t{ value: 31, label: 'Ottawa' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst getTags = (data) => {\n\treturn data.map((item) => item.text);\n};\nconst getTopLevelTags = (data) => {\n\tconst set = new Set();\n\tfor (const datum of data) {\n\t\tlet parent = datum.node?.parent;\n\t\twhile (parent && parent.level !== 1) {\n\t\t\tparent = parent.parent;\n\t\t}\n\t\tconst label = parent?.data?.label;\n\t\tif (label) set.add(label);\n\t}\n\treturn [...set];\n};\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "637e3c8ba954168a58f428fbd2e273ffa7a5946b5a67818153a0400523bb968b",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-show-checked-strategy",
					"title": "选中项显示策略",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-show-checked-strategy/ts/Demo.vue",
									"sha256": "1d05077251d840f2ec30c9a20434966e6e0bf433c73f2875f5f3ff0744f95820",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<p class=\"example-paragraph\">弹层设为 persistent=false；关闭后保留选中标签，可直接删除或清空，再打开按当前值回填。</p>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">策略：child（默认，显示全部选中的子节点）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value1\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tshow-checked-strategy=\"child\"\n\t\t\t:persistent=\"false\"\n\t\t\tclearable\n\t\t\t@change=\"handleChange1\"\n\t\t/>\n\t</div>\n\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">策略：parent（全部子节点选中时仅显示父节点）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value2\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tshow-checked-strategy=\"parent\"\n\t\t\t:persistent=\"false\"\n\t\t\tclearable\n\t\t\t@change=\"handleChange2\"\n\t\t/>\n\t</div>\n\t<ControlledBoundary />\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\nimport ControlledBoundary from './ControlledBoundary.vue';\nimport type { AsamCascaderNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/show-checked-strategy.vue\n\nimport { ref } from 'vue';\n\nconst value1 = ref<AsamCascaderNativeProps['modelValue']>([['guide', 'disciplines', 'feedback']]);\nconst value2 = ref<AsamCascaderNativeProps['modelValue']>([['guide', 'disciplines', 'feedback']]);\nconst props = {\n\tmultiple: true\n};\n\nconst handleChange1 = (value: unknown) => {\n\tconsole.log('Child strategy:', value);\n};\n\nconst handleChange2 = (value: unknown) => {\n\tconsole.log('Parent strategy:', value);\n};\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{ value: 'feedback', label: '反馈' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "900dc5bcc2228dbe18fb12ef08ed7601bcafc59160bf00be14c0a9036f6884f3",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								},
								{
									"name": "ControlledBoundary.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-show-checked-strategy/ts/ControlledBoundary.vue",
									"sha256": "f9fc728a334919b4a5f42fd9473b8ffe5ce0dc1aae93ba149a5a93dc99861b30",
									"source": "<template>\n\t<section class=\"controlled-boundary\">\n\t\t<h3>常驻面板的受控回写边界</h3>\n\t\t<p class=\"example-paragraph\">\n\t\t\t初始宿主值为3。选择节点2后，忽略回写或第一次转换回旧值3时，常驻面板可能保留候选2。\n\t\t\t关闭再打开不会自动回滚；随后将宿主改为4，可观察真实新值的同步。\n\t\t</p>\n\t\t<label>\n\t\t\t值模式\n\t\t\t<AsamSelect v-model=\"mode\" @change=\"resetLog\">\n\t\t\t\t<AsamOption value=\"native\" :label=\"'native'\">native</AsamOption>\n\t\t\t\t<AsamOption value=\"value\" :label=\"'value'\">value</AsamOption>\n\t\t\t\t<AsamOption value=\"object\" :label=\"'object'\">object</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<label>\n\t\t\t宿主回写\n\t\t\t<AsamSelect v-model=\"behavior\" @change=\"resetLog\">\n\t\t\t\t<AsamOption value=\"accept\" :label=\"'接受候选值'\">接受候选值</AsamOption>\n\t\t\t\t<AsamOption value=\"reject\" :label=\"'忽略回写'\">忽略回写</AsamOption>\n\t\t\t\t<AsamOption value=\"transform\" :label=\"'非幂等转换：依次返回3、2、3'\"\n\t\t\t\t\t>非幂等转换：依次返回3、2、3</AsamOption\n\t\t\t\t>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<div class=\"boundary-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"closePanel\"\n\t\t\t\t>关闭面板</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"openPanel\">重新打开</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readDisplay\"\n\t\t\t\t>读取显示与节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setParent\"\n\t\t\t\t>宿主改为4</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamCascader\n\t\t\tv-if=\"mode === 'native'\"\n\t\t\tref=\"control\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:model-value=\"nativeModel\"\n\t\t\t:options=\"boundaryOptions\"\n\t\t\t:props=\"configuration\"\n\t\t\t:persistent=\"true\"\n\t\t\t@update:model-value=\"updateNative\"\n\t\t\t@change=\"record('change', $event)\"\n\t\t/>\n\t\t<AsamCascader\n\t\t\tv-else-if=\"mode === 'value'\"\n\t\t\tref=\"control\"\n\t\t\tvalue-mode=\"value\"\n\t\t\t:model-value=\"valueModel\"\n\t\t\t:options=\"boundaryOptions\"\n\t\t\t:props=\"configuration\"\n\t\t\t:persistent=\"true\"\n\t\t\t@update:model-value=\"updateValue\"\n\t\t\t@change=\"record('change', $event)\"\n\t\t/>\n\t\t<AsamCascader\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:model-value=\"objectModel\"\n\t\t\t:options=\"boundaryOptions\"\n\t\t\t:props=\"configuration\"\n\t\t\t:persistent=\"true\"\n\t\t\t@update:model-value=\"updateObject\"\n\t\t\t@change=\"record('change', $event)\"\n\t\t/>\n\t\t<output class=\"boundary-model\">宿主模型：{{ model }}</output>\n\t\t<output class=\"boundary-display\">\n\t\t\t实际显示：{{ display.text }}；公开节点：{{ display.nodes }}；面板存在：{{\n\t\t\t\tdisplay.panel\n\t\t\t}}\n\t\t</output>\n\t\t<output class=\"boundary-events\">模型事件：{{ events }}</output>\n\t\t<output class=\"boundary-transformations\">转换调用：{{ transformations }}</output>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, ref, unref } from 'vue';\nimport { AsamSelect, AsamOption, AsamButton, AsamCascader } from '@asam-ui/ui';\nimport type { AsamCascaderExpose, AsamCascaderNativeProps, AsamHierarchyOption } from '@asam-ui/ui';\n\nconst mode = ref<'native' | 'value' | 'object'>('native');\nconst behavior = ref<'accept' | 'reject' | 'transform'>('reject');\nconst configuration = { multiple: false, emitPath: false } as const;\nconst children = [\n\t{ value: 2, label: '节点2', raw: { id: 2 } },\n\t{ value: 3, label: '节点3', raw: { id: 3 } },\n\t{ value: 4, label: '节点4', raw: { id: 4 } }\n];\nconst boundaryOptions = [{ value: 1, label: '根节点', raw: { id: 1 }, children }];\nconst nativeModel = ref<AsamCascaderNativeProps['modelValue']>(3);\nconst valueModel = ref<AsamHierarchyOption['value'] | null>(3);\nconst objectModel = ref<AsamHierarchyOption | null>(children[1]);\nconst control = ref<AsamCascaderExpose>();\nconst transformations = ref(0);\nconst events = ref<{ name: string; value: unknown }[]>([]);\nconst display = ref<{ text: string; nodes: unknown[]; panel: boolean }>({\n\ttext: '',\n\tnodes: [],\n\tpanel: false\n});\nconst model = computed(() =>\n\tmode.value === 'native'\n\t\t? nativeModel.value\n\t\t: mode.value === 'value'\n\t\t\t? valueModel.value\n\t\t\t: objectModel.value\n);\nasync function readDisplay() {\n\tawait nextTick();\n\tdisplay.value = {\n\t\ttext: unref(control.value?.presentText) ?? '',\n\t\tnodes: control.value?.getCheckedNodes(true)?.map((node) => node.value) ?? [],\n\t\tpanel: !!control.value?.cascaderPanelRef\n\t};\n}\nfunction record(name: string, value: unknown) {\n\tevents.value.push({ name, value });\n\tvoid readDisplay();\n}\nfunction transformedValue() {\n\treturn ++transformations.value % 2 ? 3 : 2;\n}\nfunction updateNative(value: AsamCascaderNativeProps['modelValue']) {\n\trecord('update:modelValue', value);\n\tif (behavior.value !== 'reject')\n\t\tnativeModel.value = behavior.value === 'transform' ? transformedValue() : value;\n}\nfunction updateValue(value: AsamHierarchyOption['value'] | null) {\n\trecord('update:modelValue', value);\n\tif (behavior.value !== 'reject')\n\t\tvalueModel.value = behavior.value === 'transform' ? transformedValue() : value;\n}\nfunction updateObject(value: AsamHierarchyOption | null) {\n\trecord('update:modelValue', value);\n\tif (behavior.value === 'reject') return;\n\tconst transformed = behavior.value === 'transform' ? transformedValue() : undefined;\n\tobjectModel.value =\n\t\ttransformed === undefined\n\t\t\t? value\n\t\t\t: (children.find((option) => option.value === transformed) ?? null);\n}\nfunction resetLog() {\n\tevents.value = [];\n\ttransformations.value = 0;\n\tvoid readDisplay();\n}\nasync function closePanel() {\n\tcontrol.value?.togglePopperVisible(false);\n\tawait readDisplay();\n}\nasync function openPanel() {\n\tcontrol.value?.togglePopperVisible(true);\n\tawait readDisplay();\n}\nasync function setParent() {\n\tnativeModel.value = 4;\n\tvalueModel.value = 4;\n\tobjectModel.value = children[2];\n\tawait readDisplay();\n}\n</script>\n\n<style scoped>\n.controlled-boundary {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmargin-block: var(--asam-space-lg, 24px);\n}\n\n.boundary-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm, 8px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-show-checked-strategy/js/Demo.vue",
									"sha256": "487f2cee08d94e13a062cf26b09e65eafaadd0580a0eddba8dbf43190eab0e69",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<p class=\"example-paragraph\">弹层设为 persistent=false；关闭后保留选中标签，可直接删除或清空，再打开按当前值回填。</p>\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">策略：child（默认，显示全部选中的子节点）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value1\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tshow-checked-strategy=\"child\"\n\t\t\t:persistent=\"false\"\n\t\t\tclearable\n\t\t\t@change=\"handleChange1\"\n\t\t/>\n\t</div>\n\n\t<div class=\"m-4\">\n\t\t<p class=\"example-paragraph\">策略：parent（全部子节点选中时仅显示父节点）</p>\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value2\"\n\t\t\t:options=\"options\"\n\t\t\t:props=\"props\"\n\t\t\tshow-checked-strategy=\"parent\"\n\t\t\t:persistent=\"false\"\n\t\t\tclearable\n\t\t\t@change=\"handleChange2\"\n\t\t/>\n\t</div>\n\t<ControlledBoundary />\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\nimport ControlledBoundary from './ControlledBoundary.vue';\n// Adapted from the fixed upstream MIT example: cascader/show-checked-strategy.vue\nimport { ref } from 'vue';\nconst value1 = ref([['guide', 'disciplines', 'feedback']]);\nconst value2 = ref([['guide', 'disciplines', 'feedback']]);\nconst props = {\n\tmultiple: true\n};\nconst handleChange1 = (value) => {\n\tconsole.log('Child strategy:', value);\n};\nconst handleChange2 = (value) => {\n\tconsole.log('Parent strategy:', value);\n};\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{ value: 'feedback', label: '反馈' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "1d9bfb4ef6585e1396ad8c7c069725783bc3ec46afa1a9e1dbfe6b214ea7a89b",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								},
								{
									"name": "ControlledBoundary.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-show-checked-strategy/js/ControlledBoundary.vue",
									"sha256": "54680c7d72b1cad59bea8fcd7567891f01de998e3a8217799f0b67c27f1f5f20",
									"source": "<template>\n\t<section class=\"controlled-boundary\">\n\t\t<h3>常驻面板的受控回写边界</h3>\n\t\t<p class=\"example-paragraph\">\n\t\t\t初始宿主值为3。选择节点2后，忽略回写或第一次转换回旧值3时，常驻面板可能保留候选2。\n\t\t\t关闭再打开不会自动回滚；随后将宿主改为4，可观察真实新值的同步。\n\t\t</p>\n\t\t<label>\n\t\t\t值模式\n\t\t\t<AsamSelect v-model=\"mode\" @change=\"resetLog\">\n\t\t\t\t<AsamOption value=\"native\" :label=\"'native'\">native</AsamOption>\n\t\t\t\t<AsamOption value=\"value\" :label=\"'value'\">value</AsamOption>\n\t\t\t\t<AsamOption value=\"object\" :label=\"'object'\">object</AsamOption>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<label>\n\t\t\t宿主回写\n\t\t\t<AsamSelect v-model=\"behavior\" @change=\"resetLog\">\n\t\t\t\t<AsamOption value=\"accept\" :label=\"'接受候选值'\">接受候选值</AsamOption>\n\t\t\t\t<AsamOption value=\"reject\" :label=\"'忽略回写'\">忽略回写</AsamOption>\n\t\t\t\t<AsamOption value=\"transform\" :label=\"'非幂等转换：依次返回3、2、3'\"\n\t\t\t\t\t>非幂等转换：依次返回3、2、3</AsamOption\n\t\t\t\t>\n\t\t\t</AsamSelect>\n\t\t</label>\n\t\t<div class=\"boundary-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"closePanel\"\n\t\t\t\t>关闭面板</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"openPanel\">重新打开</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"readDisplay\"\n\t\t\t\t>读取显示与节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"setParent\"\n\t\t\t\t>宿主改为4</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamCascader\n\t\t\tv-if=\"mode === 'native'\"\n\t\t\tref=\"control\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:model-value=\"nativeModel\"\n\t\t\t:options=\"boundaryOptions\"\n\t\t\t:props=\"configuration\"\n\t\t\t:persistent=\"true\"\n\t\t\t@update:model-value=\"updateNative\"\n\t\t\t@change=\"record('change', $event)\"\n\t\t/>\n\t\t<AsamCascader\n\t\t\tv-else-if=\"mode === 'value'\"\n\t\t\tref=\"control\"\n\t\t\tvalue-mode=\"value\"\n\t\t\t:model-value=\"valueModel\"\n\t\t\t:options=\"boundaryOptions\"\n\t\t\t:props=\"configuration\"\n\t\t\t:persistent=\"true\"\n\t\t\t@update:model-value=\"updateValue\"\n\t\t\t@change=\"record('change', $event)\"\n\t\t/>\n\t\t<AsamCascader\n\t\t\tv-else\n\t\t\tref=\"control\"\n\t\t\tvalue-mode=\"object\"\n\t\t\t:model-value=\"objectModel\"\n\t\t\t:options=\"boundaryOptions\"\n\t\t\t:props=\"configuration\"\n\t\t\t:persistent=\"true\"\n\t\t\t@update:model-value=\"updateObject\"\n\t\t\t@change=\"record('change', $event)\"\n\t\t/>\n\t\t<output class=\"boundary-model\">宿主模型：{{ model }}</output>\n\t\t<output class=\"boundary-display\">\n\t\t\t实际显示：{{ display.text }}；公开节点：{{ display.nodes }}；面板存在：{{\n\t\t\t\tdisplay.panel\n\t\t\t}}\n\t\t</output>\n\t\t<output class=\"boundary-events\">模型事件：{{ events }}</output>\n\t\t<output class=\"boundary-transformations\">转换调用：{{ transformations }}</output>\n\t</section>\n</template>\n\n<script setup>\nimport { AsamSelect, AsamOption, AsamButton, AsamCascader } from '@asam-ui/ui';\nimport { computed, nextTick, ref, unref } from 'vue';\nconst mode = ref('native');\nconst behavior = ref('reject');\nconst configuration = { multiple: false, emitPath: false };\nconst children = [\n\t{ value: 2, label: '节点2', raw: { id: 2 } },\n\t{ value: 3, label: '节点3', raw: { id: 3 } },\n\t{ value: 4, label: '节点4', raw: { id: 4 } }\n];\nconst boundaryOptions = [{ value: 1, label: '根节点', raw: { id: 1 }, children }];\nconst nativeModel = ref(3);\nconst valueModel = ref(3);\nconst objectModel = ref(children[1]);\nconst control = ref();\nconst transformations = ref(0);\nconst events = ref([]);\nconst display = ref({\n\ttext: '',\n\tnodes: [],\n\tpanel: false\n});\nconst model = computed(() =>\n\tmode.value === 'native'\n\t\t? nativeModel.value\n\t\t: mode.value === 'value'\n\t\t\t? valueModel.value\n\t\t\t: objectModel.value\n);\nasync function readDisplay() {\n\tawait nextTick();\n\tdisplay.value = {\n\t\ttext: unref(control.value?.presentText) ?? '',\n\t\tnodes: control.value?.getCheckedNodes(true)?.map((node) => node.value) ?? [],\n\t\tpanel: !!control.value?.cascaderPanelRef\n\t};\n}\nfunction record(name, value) {\n\tevents.value.push({ name, value });\n\tvoid readDisplay();\n}\nfunction transformedValue() {\n\treturn ++transformations.value % 2 ? 3 : 2;\n}\nfunction updateNative(value) {\n\trecord('update:modelValue', value);\n\tif (behavior.value !== 'reject')\n\t\tnativeModel.value = behavior.value === 'transform' ? transformedValue() : value;\n}\nfunction updateValue(value) {\n\trecord('update:modelValue', value);\n\tif (behavior.value !== 'reject')\n\t\tvalueModel.value = behavior.value === 'transform' ? transformedValue() : value;\n}\nfunction updateObject(value) {\n\trecord('update:modelValue', value);\n\tif (behavior.value === 'reject') return;\n\tconst transformed = behavior.value === 'transform' ? transformedValue() : undefined;\n\tobjectModel.value =\n\t\ttransformed === undefined\n\t\t\t? value\n\t\t\t: (children.find((option) => option.value === transformed) ?? null);\n}\nfunction resetLog() {\n\tevents.value = [];\n\ttransformations.value = 0;\n\tvoid readDisplay();\n}\nasync function closePanel() {\n\tcontrol.value?.togglePopperVisible(false);\n\tawait readDisplay();\n}\nasync function openPanel() {\n\tcontrol.value?.togglePopperVisible(true);\n\tawait readDisplay();\n}\nasync function setParent() {\n\tnativeModel.value = 4;\n\tvalueModel.value = 4;\n\tobjectModel.value = children[2];\n\tawait readDisplay();\n}\n</script>\n\n<style scoped>\n.controlled-boundary {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmargin-block: var(--asam-space-lg, 24px);\n}\n\n.boundary-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-sm, 8px);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-check-on-click-node",
					"title": "点击节点选择",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-check-on-click-node/ts/Demo.vue",
									"sha256": "e10c8069a0006d66529d9b09b455ef9b376167d76ba1c05b10a127efec0adc15",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"flex flex-col items-center demo-spacing-1\">\n\t\t<AsamSwitch v-model=\"showPrefix\" active-text=\"显示前缀\" inactive-text=\"隐藏前缀\" />\n\t\t<div class=\"flex flex-wrap demo-spacing-2\">\n\t\t\t<div class=\"m-4 demo-spacing-3\">\n\t\t\t\t<p class=\"example-paragraph\">checkStrictly 单选模式</p>\n\t\t\t\t<AsamCascader\n\t\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t\tv-model=\"value\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:props=\"props1\"\n\t\t\t\t\tclearable\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"m-4 demo-spacing-4\">\n\t\t\t\t<p class=\"example-paragraph\">多选模式</p>\n\t\t\t\t<AsamCascader\n\t\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tshow-checked-strategy=\"parent\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:props=\"props2\"\n\t\t\t\t\tclearable\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamSwitch, AsamCascader } from '@asam-ui/ui';\nimport type { AsamCascaderNativeProps, AsamValue } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/check-on-click-node.vue\n\nimport { computed, ref } from 'vue';\n\nconst value = ref<AsamCascaderNativeProps['modelValue']>();\nconst value2 = ref<AsamCascaderNativeProps['modelValue']>();\nconst showPrefix = ref<AsamValue>(true);\n\nconst props1 = computed(() => ({\n\tshowPrefix: showPrefix.value === true,\n\tcheckStrictly: true,\n\tcheckOnClickNode: true\n}));\nconst props2 = computed(() => ({\n\tshowPrefix: showPrefix.value === true,\n\tmultiple: true,\n\tcheckOnClickNode: true\n}));\n\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n.flex-col {\n\tflex-direction: column;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-4 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "e0a4ea444f346b2a85eef7ad9070b2c60c8a7654713ec992f2822595d2ce89ae",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-check-on-click-node/js/Demo.vue",
									"sha256": "7050caa22291d3cc3d4a8f387953960abf5307ead04f76f604fe63d96c533dd9",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"flex flex-col items-center demo-spacing-1\">\n\t\t<AsamSwitch v-model=\"showPrefix\" active-text=\"显示前缀\" inactive-text=\"隐藏前缀\" />\n\t\t<div class=\"flex flex-wrap demo-spacing-2\">\n\t\t\t<div class=\"m-4 demo-spacing-3\">\n\t\t\t\t<p class=\"example-paragraph\">checkStrictly 单选模式</p>\n\t\t\t\t<AsamCascader\n\t\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t\tv-model=\"value\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:props=\"props1\"\n\t\t\t\t\tclearable\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div class=\"m-4 demo-spacing-4\">\n\t\t\t\t<p class=\"example-paragraph\">多选模式</p>\n\t\t\t\t<AsamCascader\n\t\t\t\t\tvalue-mode=\"native\"\n\t\t\t\t\tv-model=\"value2\"\n\t\t\t\t\tshow-checked-strategy=\"parent\"\n\t\t\t\t\t:options=\"options\"\n\t\t\t\t\t:props=\"props2\"\n\t\t\t\t\tclearable\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamSwitch, AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/check-on-click-node.vue\nimport { computed, ref } from 'vue';\nconst value = ref();\nconst value2 = ref();\nconst showPrefix = ref(true);\nconst props1 = computed(() => ({\n\tshowPrefix: showPrefix.value === true,\n\tcheckStrictly: true,\n\tcheckOnClickNode: true\n}));\nconst props2 = computed(() => ({\n\tshowPrefix: showPrefix.value === true,\n\tmultiple: true,\n\tcheckOnClickNode: true\n}));\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'component',\n\t\tlabel: '组件',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'basic',\n\t\t\t\tlabel: 'Basic',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'layout',\n\t\t\t\t\t\tlabel: 'Layout'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'form',\n\t\t\t\tlabel: 'Form',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'radio',\n\t\t\t\t\t\tlabel: 'Radio'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: 'resource',\n\t\tlabel: '资源',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'axure',\n\t\t\t\tlabel: 'Axure Components'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n.m-4 {\n\tmargin: var(--asam-space-lg);\n}\n.flex-col {\n\tflex-direction: column;\n}\n</style>\n\n<style scoped>\n.demo-spacing-1 {\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-4 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "691b989029c6d362c4622a5e6912091d24a68254a2c029a0b4100b64d96811f5",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-custom-header-footer",
					"title": "自定义头部与底部",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-header-footer/ts/Demo.vue",
									"sha256": "c413b1f4c5cfed0a372762d70b8b5759e08c18b855f8864ed0f746b330f4699d",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"cascader-custom-header-footer demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<p class=\"example-paragraph\">自定义头部内容</p>\n\t\t\t<AsamCascader\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tpopper-class=\"cascader-custom-header\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:props=\"props\"\n\t\t\t\tclearable\n\t\t\t>\n\t\t\t\t<template #header>\n\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\tv-model=\"checkAll\"\n\t\t\t\t\t\t:indeterminate=\"indeterminate\"\n\t\t\t\t\t\t@change=\"handleCheckAll\"\n\t\t\t\t\t>\n\t\t\t\t\t\t全部\n\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t</template>\n\t\t\t</AsamCascader>\n\t\t</div>\n\t\t<div class=\"demo-layout-3\">\n\t\t\t<p class=\"example-paragraph\">自定义底部内容</p>\n\t\t\t<AsamCascader\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:props=\"props\"\n\t\t\t\tclearable\n\t\t\t>\n\t\t\t\t<template #footer>\n\t\t\t\t\t<AsamButton type=\"default\" link size=\"small\" @click=\"handleClear\">\n\t\t\t\t\t\t清除\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamCascader>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader, AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-header-footer.vue\n\nimport { computed, ref, watch } from 'vue';\n\nimport type {\n\tAsamCascaderOption,\n\tAsamCascaderNativeProps,\n\tAsamCheckboxItemEmits\n} from '@asam-ui/ui';\ntype CheckboxValueType = string | number | boolean;\n\nconst props = { multiple: true };\nconst checkAll = ref<AsamCheckboxItemEmits['update:modelValue'][0]>(false);\nconst indeterminate = ref(false);\nconst value = ref<AsamCascaderNativeProps['modelValue']>([]);\nconst options = ref([\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 'consistency', label: '一致性' },\n\t\t\t\t\t{ value: 'feedback', label: '反馈' },\n\t\t\t\t\t{ value: 'efficiency', label: '效率' },\n\t\t\t\t\t{ value: 'controllability', label: '可控性' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]);\n\nconst getAllValuePaths = computed(() => {\n\tconst result: string[][] = [];\n\tconst queue: { node: AsamCascaderOption; path: string[] }[] = options.value.map((node) => ({\n\t\tnode,\n\t\tpath: [node.value]\n\t}));\n\n\twhile (queue.length > 0) {\n\t\tconst { node, path } = queue.shift()!;\n\t\tif (node.children?.length) {\n\t\t\tnode.children.forEach((child) => {\n\t\t\t\tqueue.push({ node: child, path: [...path, child.value as string] });\n\t\t\t});\n\t\t} else {\n\t\t\tresult.push(path);\n\t\t}\n\t}\n\treturn result;\n});\n\nwatch(value, (val) => {\n\tconst count = Array.isArray(val) ? val.length : 0;\n\tif (count === 0) {\n\t\tcheckAll.value = false;\n\t\tindeterminate.value = false;\n\t} else if (count === getAllValuePaths.value.length) {\n\t\tcheckAll.value = true;\n\t\tindeterminate.value = false;\n\t} else {\n\t\tindeterminate.value = true;\n\t}\n});\n\nconst handleCheckAll = (val: CheckboxValueType) => {\n\tindeterminate.value = false;\n\tvalue.value = val ? getAllValuePaths.value : [];\n};\n\nconst handleClear = () => {\n\tvalue.value = [];\n};\n</script>\n\n<style scoped>\n.cascader-custom-header-footer {\n\tdisplay: flex;\n}\n\n.cascader-custom-header-footer > div {\n\tflex: 1;\n\ttext-align: center;\n}\n\n.cascader-custom-header-footer > div:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n\n.cascader-custom-header .el-checkbox {\n\tdisplay: flex;\n\theight: unset;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "eb5549a2f20653681b08cb5056d05724d512190ee5a484e4f0c3a7acc8738ecb",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-custom-header-footer/js/Demo.vue",
									"sha256": "daf139a93ab48968159d2ad12f3c8a5ef61a22d1d17ba5b17450efaa16b78946",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"cascader-custom-header-footer demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<p class=\"example-paragraph\">自定义头部内容</p>\n\t\t\t<AsamCascader\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\tpopper-class=\"cascader-custom-header\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:props=\"props\"\n\t\t\t\tclearable\n\t\t\t>\n\t\t\t\t<template #header>\n\t\t\t\t\t<AsamCheckboxItem\n\t\t\t\t\t\tv-model=\"checkAll\"\n\t\t\t\t\t\t:indeterminate=\"indeterminate\"\n\t\t\t\t\t\t@change=\"handleCheckAll\"\n\t\t\t\t\t>\n\t\t\t\t\t\t全部\n\t\t\t\t\t</AsamCheckboxItem>\n\t\t\t\t</template>\n\t\t\t</AsamCascader>\n\t\t</div>\n\t\t<div class=\"demo-layout-3\">\n\t\t\t<p class=\"example-paragraph\">自定义底部内容</p>\n\t\t\t<AsamCascader\n\t\t\t\tvalue-mode=\"native\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t:props=\"props\"\n\t\t\t\tclearable\n\t\t\t>\n\t\t\t\t<template #footer>\n\t\t\t\t\t<AsamButton type=\"default\" link size=\"small\" @click=\"handleClear\">\n\t\t\t\t\t\t清除\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</template>\n\t\t\t</AsamCascader>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader, AsamCheckboxItem, AsamButton } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/custom-header-footer.vue\nimport { computed, ref, watch } from 'vue';\nconst props = { multiple: true };\nconst checkAll = ref(false);\nconst indeterminate = ref(false);\nconst value = ref([]);\nconst options = ref([\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ value: 'consistency', label: '一致性' },\n\t\t\t\t\t{ value: 'feedback', label: '反馈' },\n\t\t\t\t\t{ value: 'efficiency', label: '效率' },\n\t\t\t\t\t{ value: 'controllability', label: '可控性' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n]);\nconst getAllValuePaths = computed(() => {\n\tconst result = [];\n\tconst queue = options.value.map((node) => ({ node, path: [node.value] }));\n\twhile (queue.length > 0) {\n\t\tconst { node, path } = queue.shift();\n\t\tif (node.children?.length) {\n\t\t\tnode.children.forEach((child) => {\n\t\t\t\tqueue.push({ node: child, path: [...path, child.value] });\n\t\t\t});\n\t\t} else {\n\t\t\tresult.push(path);\n\t\t}\n\t}\n\treturn result;\n});\nwatch(value, (val) => {\n\tconst count = Array.isArray(val) ? val.length : 0;\n\tif (count === 0) {\n\t\tcheckAll.value = false;\n\t\tindeterminate.value = false;\n\t} else if (count === getAllValuePaths.value.length) {\n\t\tcheckAll.value = true;\n\t\tindeterminate.value = false;\n\t} else {\n\t\tindeterminate.value = true;\n\t}\n});\nconst handleCheckAll = (val) => {\n\tindeterminate.value = false;\n\tvalue.value = val ? getAllValuePaths.value : [];\n};\nconst handleClear = () => {\n\tvalue.value = [];\n};\n</script>\n\n<style scoped>\n.cascader-custom-header-footer {\n\tdisplay: flex;\n}\n\n.cascader-custom-header-footer > div {\n\tflex: 1;\n\ttext-align: center;\n}\n\n.cascader-custom-header-footer > div:not(:last-child) {\n\tborder-right: 1px solid var(--el-border-color);\n}\n\n.cascader-custom-header .el-checkbox {\n\tdisplay: flex;\n\theight: unset;\n}\n</style>\n\n<style scoped>\n.demo-layout-1 {\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-3 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n",
									"originalSourceSha256": "fd29ec657678d0feeb701cc8fd22db672ea82c7f90d24d522d3dd3974679418e",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-virtual-scroll",
					"title": "虚拟滚动",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-virtual-scroll/ts/Demo.vue",
									"sha256": "836b47c8f2251718b5088e7d6c7e1129707b3c975e00ac807417fc03cddcff1c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:options=\"options\"\n\t\t:filter-method=\"filterMethod\"\n\t\tfilterable\n\t\tvirtual-scroll\n\t\tclearable\n\t\tplaceholder=\"大数据量选择器\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/virtual-scroll.vue\n\nimport { ref } from 'vue';\n\nimport type { AsamCascaderNode, AsamCascaderNativeProps } from '@asam-ui/ui';\n\ninterface CascaderExampleOption {\n\tvalue: string;\n\tlabel: string;\n\tchildren?: CascaderExampleOption[];\n}\n\nconst value = ref<AsamCascaderNativeProps['modelValue']>([]);\n\nconst filterMethod = (node: AsamCascaderNode, keyword: string) => {\n\treturn node.text.toLowerCase().includes(keyword.toLowerCase());\n};\n\nconst generateOptions = (count: number): CascaderExampleOption[] => {\n\treturn Array.from({ length: count }).map((_, index) => ({\n\t\tvalue: `option-${index}`,\n\t\tlabel: `Option ${index + 1}`,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: `child-${index}-1`,\n\t\t\t\tlabel: `Child ${index + 1}-1`,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: `grandchild-${index}-1-1`,\n\t\t\t\t\t\tlabel: `Grandchild ${index + 1}-1-1`\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: `grandchild-${index}-1-2`,\n\t\t\t\t\t\tlabel: `Grandchild ${index + 1}-1-2`\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: `child-${index}-2`,\n\t\t\t\tlabel: `Child ${index + 1}-2`\n\t\t\t}\n\t\t]\n\t}));\n};\n\nconst options = ref<CascaderExampleOption[]>(generateOptions(20000));\n</script>\n",
									"originalSourceSha256": "11edb81901e342aa5fa7b17c8c737129c7c0715a9a4a119e849f649bc5b9472a",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-virtual-scroll/js/Demo.vue",
									"sha256": "ff233ab36a7b408c73192a48595c3c1b1efb6afa96b5c8d366056e18bad4fad3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamCascader\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:options=\"options\"\n\t\t:filter-method=\"filterMethod\"\n\t\tfilterable\n\t\tvirtual-scroll\n\t\tclearable\n\t\tplaceholder=\"大数据量选择器\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/virtual-scroll.vue\nimport { ref } from 'vue';\nconst value = ref([]);\nconst filterMethod = (node, keyword) => {\n\treturn node.text.toLowerCase().includes(keyword.toLowerCase());\n};\nconst generateOptions = (count) => {\n\treturn Array.from({ length: count }).map((_, index) => ({\n\t\tvalue: `option-${index}`,\n\t\tlabel: `Option ${index + 1}`,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: `child-${index}-1`,\n\t\t\t\tlabel: `Child ${index + 1}-1`,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: `grandchild-${index}-1-1`,\n\t\t\t\t\t\tlabel: `Grandchild ${index + 1}-1-1`\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: `grandchild-${index}-1-2`,\n\t\t\t\t\t\tlabel: `Grandchild ${index + 1}-1-2`\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: `child-${index}-2`,\n\t\t\t\tlabel: `Child ${index + 1}-2`\n\t\t\t}\n\t\t]\n\t}));\n};\nconst options = ref(generateOptions(20000));\n</script>\n",
									"originalSourceSha256": "b2bf09066a096fe8867894d2707917a9b98b5250166aa2fe9c757cd7705dc926",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-fit-input-width",
					"title": "自定义建议列表宽度",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-fit-input-width/ts/Demo.vue",
									"sha256": "4909dad50feaa854c41b8e6f5fadfd973d5381cccee199a349924add972bb5b7",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap gap-4 items-center\">\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tplaceholder=\"默认展开面板\"\n\t\t\tfilterable\n\t\t/>\n\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tplaceholder=\"匹配输入框宽度\"\n\t\t\tfilterable\n\t\t\tfit-input-width\n\t\t/>\n\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tplaceholder=\"固定宽度（400px）\"\n\t\t\tfilterable\n\t\t\t:fit-input-width=\"400\"\n\t\t>\n\t\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t\t<div>{{ item.text }} （较长的自定义内容）</div>\n\t\t\t</template>\n\t\t</AsamCascader>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\nimport type { AsamCascaderNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/fit-input-width.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamCascaderNativeProps['modelValue']>();\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "e20ed9462fd2bf8134d827911ac81c5f9d6b180385a6b3fbab54efd0b423dbd2",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/native-fit-input-width/js/Demo.vue",
									"sha256": "3ddf4cebd440fbbb7f33b93deb7a356f25def2a990f1949b935aa80e85ec1299",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<div class=\"flex flex-wrap gap-4 items-center\">\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tplaceholder=\"默认展开面板\"\n\t\t\tfilterable\n\t\t/>\n\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tplaceholder=\"匹配输入框宽度\"\n\t\t\tfilterable\n\t\t\tfit-input-width\n\t\t/>\n\n\t\t<AsamCascader\n\t\t\tvalue-mode=\"native\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tplaceholder=\"固定宽度（400px）\"\n\t\t\tfilterable\n\t\t\t:fit-input-width=\"400\"\n\t\t>\n\t\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t\t<div>{{ item.text }} （较长的自定义内容）</div>\n\t\t\t</template>\n\t\t</AsamCascader>\n\t</div>\n</template>\n\n<script setup>\n\n\nimport { AsamCascader } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: cascader/fit-input-width.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst options = [\n\t{\n\t\tvalue: 'guide',\n\t\tlabel: '指南',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: 'disciplines',\n\t\t\t\tlabel: 'Disciplines',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'consistency',\n\t\t\t\t\t\tlabel: '一致性'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'feedback',\n\t\t\t\t\t\tlabel: '反馈'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'efficiency',\n\t\t\t\t\t\tlabel: '效率'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'controllability',\n\t\t\t\t\t\tlabel: '可控性'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: 'navigation',\n\t\t\t\tlabel: 'Navigation',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'side nav',\n\t\t\t\t\t\tlabel: 'Side Navigation'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: 'top nav',\n\t\t\t\t\t\tlabel: 'Top Navigation'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */\n.flex {\n\tdisplay: flex;\n}\n.flex-wrap {\n\tflex-wrap: wrap;\n}\n.items-center {\n\talign-items: center;\n}\n.gap-4 {\n\tgap: var(--asam-space-lg);\n}\n</style>\n",
									"originalSourceSha256": "b41f732d685f6919695fabfe7540118e7b31eb12a50373daba660be4052c2476",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "normalized-lazy",
					"title": "三模式动态模型、回填与源切换",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/normalized-lazy/ts/Demo.vue",
									"sha256": "5c4478b5609c333a9773f16db55ba7f12a234081216870da097a7267043b4051",
									"source": "<template>\n\t<div class=\"hierarchy-example\">\n\t\t<p class=\"example-paragraph\">依次展开“根节点”和子节点，加载两层；数字 0、false 与空字符串保留原类型。</p>\n\t\t<label\n\t\t\t>value<AsamCascader v-model=\"value\" :props=\"{ lazy: true, lazyLoad: load }\" clearable\n\t\t/></label>\n\t\t<label\n\t\t\t>object<AsamCascader\n\t\t\t\tv-model=\"objectValue\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\t:props=\"{ lazy: true, lazyLoad: load }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>多选<AsamCascader\n\t\t\t\tv-model=\"multiple\"\n\t\t\t\tmultiple\n\t\t\t\t:props=\"{ lazy: true, lazyLoad: load }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>字符串存储<AsamCascader\n\t\t\t\tv-model=\"tokens\"\n\t\t\t\tmultiple\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:options=\"stringOptions\"\n\t\t/></label>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"restore\">回填数字 0</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"clear\">清空</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"replace\">切换源并丢弃迟到回调</AsamButton>\n\t\t</div>\n\t\t<output\n\t\t\t>源 {{ version }}；value={{ JSON.stringify(value) }}；object={{\n\t\t\t\tJSON.stringify(objectValue)\n\t\t\t}}；multiple={{ JSON.stringify(multiple) }}；tokens={{ tokens }}</output\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nimport type { AsamCascaderLazyLoad, AsamHierarchyOption, AsamValue } from '@asam-ui/ui';\nconst version = ref(1);\nconst value = ref<AsamValue | null>(null);\nconst objectValue = ref<AsamHierarchyOption | null>(null);\nconst multiple = ref<AsamValue[]>([]);\nconst tokens = ref('');\nconst stringOptions = [\n\t{ value: 1, label: '一', raw: {} },\n\t{ value: 2, label: '二', raw: {} }\n];\nconst load = computed<AsamCascaderLazyLoad>(() => {\n\tconst sourceVersion = version.value;\n\treturn (node, resolve) => {\n\t\tsetTimeout(() => {\n\t\t\tresolve(\n\t\t\t\tnode.level === 0\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tvalue: 'root',\n\t\t\t\t\t\t\t\tlabel: '根节点 ' + sourceVersion,\n\t\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\t\tleaf: false,\n\t\t\t\t\t\t\t\tisLeaf: false\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]\n\t\t\t\t\t: [0, false, ''].map((value) => ({\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tlabel:\n\t\t\t\t\t\t\t\ttypeof value +\n\t\t\t\t\t\t\t\t':' +\n\t\t\t\t\t\t\t\tJSON.stringify(value) +\n\t\t\t\t\t\t\t\t' / 源' +\n\t\t\t\t\t\t\t\tsourceVersion,\n\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\tleaf: true,\n\t\t\t\t\t\t\tisLeaf: true\n\t\t\t\t\t\t}))\n\t\t\t);\n\t\t}, 400);\n\t};\n});\nfunction restore() {\n\tvalue.value = 0;\n\tobjectValue.value = { value: 0, label: '回填 0', raw: { restored: true } };\n}\nfunction clear() {\n\tvalue.value = null;\n\tobjectValue.value = null;\n\tmultiple.value = [];\n\ttokens.value = '';\n}\nfunction replace() {\n\tclear();\n\tversion.value++;\n}\n</script>\n\n<style scoped>\n.hierarchy-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\nlabel {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/normalized-lazy/js/Demo.vue",
									"sha256": "8a9d30bedd75144778588bb1eaca357a965f7de0ee02535964dd15b6f846438b",
									"source": "<template>\n\t<div class=\"hierarchy-example\">\n\t\t<p class=\"example-paragraph\">依次展开“根节点”和子节点，加载两层；数字 0、false 与空字符串保留原类型。</p>\n\t\t<label\n\t\t\t>value<AsamCascader v-model=\"value\" :props=\"{ lazy: true, lazyLoad: load }\" clearable\n\t\t/></label>\n\t\t<label\n\t\t\t>object<AsamCascader\n\t\t\t\tv-model=\"objectValue\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\t:props=\"{ lazy: true, lazyLoad: load }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>多选<AsamCascader\n\t\t\t\tv-model=\"multiple\"\n\t\t\t\tmultiple\n\t\t\t\t:props=\"{ lazy: true, lazyLoad: load }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>字符串存储<AsamCascader\n\t\t\t\tv-model=\"tokens\"\n\t\t\t\tmultiple\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:options=\"stringOptions\"\n\t\t/></label>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"restore\">回填数字 0</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"clear\">清空</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"replace\">切换源并丢弃迟到回调</AsamButton>\n\t\t</div>\n\t\t<output\n\t\t\t>源 {{ version }}；value={{ JSON.stringify(value) }}；object={{\n\t\t\t\tJSON.stringify(objectValue)\n\t\t\t}}；multiple={{ JSON.stringify(multiple) }}；tokens={{ tokens }}</output\n\t\t>\n\t</div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nconst version = ref(1);\nconst value = ref(null);\nconst objectValue = ref(null);\nconst multiple = ref([]);\nconst tokens = ref('');\nconst stringOptions = [\n\t{ value: 1, label: '一', raw: {} },\n\t{ value: 2, label: '二', raw: {} }\n];\nconst load = computed(() => {\n\tconst sourceVersion = version.value;\n\treturn (node, resolve) => {\n\t\tsetTimeout(() => {\n\t\t\tresolve(\n\t\t\t\tnode.level === 0\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tvalue: 'root',\n\t\t\t\t\t\t\t\tlabel: '根节点 ' + sourceVersion,\n\t\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\t\tleaf: false,\n\t\t\t\t\t\t\t\tisLeaf: false\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]\n\t\t\t\t\t: [0, false, ''].map((value) => ({\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tlabel:\n\t\t\t\t\t\t\t\ttypeof value +\n\t\t\t\t\t\t\t\t':' +\n\t\t\t\t\t\t\t\tJSON.stringify(value) +\n\t\t\t\t\t\t\t\t' / 源' +\n\t\t\t\t\t\t\t\tsourceVersion,\n\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\tleaf: true,\n\t\t\t\t\t\t\tisLeaf: true\n\t\t\t\t\t\t}))\n\t\t\t);\n\t\t}, 400);\n\t};\n});\nfunction restore() {\n\tvalue.value = 0;\n\tobjectValue.value = { value: 0, label: '回填 0', raw: { restored: true } };\n}\nfunction clear() {\n\tvalue.value = null;\n\tobjectValue.value = null;\n\tmultiple.value = [];\n\ttokens.value = '';\n}\nfunction replace() {\n\tclear();\n\tversion.value++;\n}\n</script>\n\n<style scoped>\n.hierarchy-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\nlabel {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/popup-container/ts/Demo.vue",
									"sha256": "821bb36e8a1adadd01ebd29b60738709659161de0c2240c0748b381e85581b61",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamCascader\n\t\t\t\tref=\"control\"\n\t\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t>\n\t\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t\t<template #empty> 没有可选节点 </template>\n\t\t\t</AsamCascader>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamCascaderBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nimport type { AsamCascaderExpose } from '@asam-ui/ui';\nconst control = ref<AsamCascaderExpose>();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamCascader/popup-container/js/Demo.vue",
									"sha256": "ce10b6b6ad033cce9e18eeee347b73e2b8f90582a1ef057eae857978e4a02e63",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamCascader\n\t\t\t\tref=\"control\"\n\t\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t>\n\t\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t\t<template #empty> 没有可选节点 </template>\n\t\t\t</AsamCascader>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamCascaderBasicExample' });\nimport { ref } from 'vue';\nimport { AsamCascader, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref('design');\nconst event = ref('尚未更改');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTreeSelect",
			"documentation": "/component-AsamTreeSelect.html",
			"demos": [
				{
					"id": "basic",
					"title": "层级选择与自定义节点",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/basic/ts/Demo.vue",
									"sha256": "9b5ac3e0f58e60da0556b3ca6197a89e6a3cbcd350791cf672fd5b884996fe33",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t>\n\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t<template #empty> 没有可选节点 </template>\n\t\t</AsamTreeSelect>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamTreeSelectExpose } from '@asam-ui/ui';\nconst control = ref<AsamTreeSelectExpose>();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/basic/js/Demo.vue",
									"sha256": "37172441a82a85406c7a451b5513d0eaf91cfb739724e973e4ac3b5f9e411b43",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t>\n\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t<template #empty> 没有可选节点 </template>\n\t\t</AsamTreeSelect>\n\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref('design');\nconst event = ref('尚未更改');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "多选与对象值",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/policies/ts/Demo.vue",
									"sha256": "2ff74cfa40a98669db6d9be296b9bf037c31f9d0eed0985eb72eda362ecddd3f",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTreeSelect\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ multiple: true, 'value-mode': 'object', 'show-checkbox': true }\"\n\t\t/>\n\t\t<AsamTreeSelect\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'multiple-value-mode': 'string',\n\t\t\t\tseparator: '|',\n\t\t\t\t'show-checkbox': true\n\t\t\t}\"\n\t\t/>\n\t\t<output>对象：{{ objectValue }}；字符串：{{ stringValue }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeSelectPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect } from '@asam-ui/ui';\nimport type { AsamHierarchyOption } from '@asam-ui/ui';\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst objectValue = ref<AsamHierarchyOption[]>([]);\nconst stringValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/policies/js/Demo.vue",
									"sha256": "137071cbb265861b5f5d1920f283ded19fe1142b6a0bfcd0b0f4a9651e8fadea",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTreeSelect\n\t\t\tv-model=\"objectValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ multiple: true, 'value-mode': 'object', 'show-checkbox': true }\"\n\t\t/>\n\t\t<AsamTreeSelect\n\t\t\tv-model=\"stringValue\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{\n\t\t\t\tmultiple: true,\n\t\t\t\t'multiple-value-mode': 'string',\n\t\t\t\tseparator: '|',\n\t\t\t\t'show-checkbox': true\n\t\t\t}\"\n\t\t/>\n\t\t<output>对象：{{ objectValue }}；字符串：{{ stringValue }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeSelectPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect } from '@asam-ui/ui';\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst objectValue = ref([]);\nconst stringValue = ref('design');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原始节点字段与实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native/ts/Demo.vue",
									"sha256": "0a12f333866ab2f89334de059cc6350e7ab0f0dbb76b2f6a0221adfe3d201584",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{\n\t\t\t\t\t'value-mode': 'native',\n\t\t\t\t\t'node-key': 'id',\n\t\t\t\t\tmultiple: true,\n\t\t\t\t\t'show-checkbox': true\n\t\t\t\t},\n\t\t\t\t...{ data: nodes, props: { label: 'name', children: 'nodes' } }\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"inspect\"> 读取节点 </AsamButton>\n\t\t<output>原始模型：{{ value }}；{{ inspected }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeSelectNativeExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamTreeSelectExpose, AsamTreeSelectNativeProps } from '@asam-ui/ui';\nconst control = ref<AsamTreeSelectExpose>();\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>([]);\nconst nodes = [\n\t{\n\t\tid: 'team',\n\t\tname: '团队',\n\t\tnodes: [\n\t\t\t{ id: 'design', name: '设计' },\n\t\t\t{ id: 'dev', name: '开发' }\n\t\t]\n\t}\n];\nconst inspected = ref('');\nfunction inspect() {\n\tinspected.value = JSON.stringify(control.value?.getCheckedKeys());\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native/js/Demo.vue",
									"sha256": "17c7b0aa554a126db1ad0f181d0f7c3aa09a25178406434e06abb27b9f43b649",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{\n\t\t\t\t\t'value-mode': 'native',\n\t\t\t\t\t'node-key': 'id',\n\t\t\t\t\tmultiple: true,\n\t\t\t\t\t'show-checkbox': true\n\t\t\t\t},\n\t\t\t\t...{ data: nodes, props: { label: 'name', children: 'nodes' } }\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t/>\n\t\t<AsamButton type=\"default\" @click=\"inspect\"> 读取节点 </AsamButton>\n\t\t<output>原始模型：{{ value }}；{{ inspected }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeSelectNativeExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst value = ref([]);\nconst nodes = [\n\t{\n\t\tid: 'team',\n\t\tname: '团队',\n\t\tnodes: [\n\t\t\t{ id: 'design', name: '设计' },\n\t\t\t{ id: 'dev', name: '开发' }\n\t\t]\n\t}\n];\nconst inspected = ref('');\nfunction inspect() {\n\tinspected.value = JSON.stringify(control.value?.getCheckedKeys());\n}\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/sizes/ts/Demo.vue",
									"sha256": "767858256ce9e0cea28c9b791367d4278ccdb56481717fcd5f8134d33599d550",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTreeSelect size=\"large\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTreeSelect size=\"big\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTreeSelect size=\"default\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTreeSelect size=\"small\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamTreeSelect :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeSelectSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/sizes/js/Demo.vue",
									"sha256": "222aa831f89194cf30c137954760f058edb501b5f434e6ec9f0c6915021b741d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTreeSelect size=\"large\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTreeSelect size=\"big\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTreeSelect size=\"default\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTreeSelect size=\"small\" :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamTreeSelect :options=\"options\" model-value=\"design\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeSelectSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native-basic",
					"title": "基础用法",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-basic/ts/Demo.vue",
									"sha256": "0eb8c8ae78a8dfabec25f7ee1af1fdc4710e79c83fcb312cb2eb612d4914eb40",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:render-after-expand=\"false\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\nimport type { AsamTreeSelectNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/basic.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\n\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "dd522ee9be9f0f75e2773529d4879128f8c5496632784464d7b3234d6f29a46a",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-basic/js/Demo.vue",
									"sha256": "a2a98c549868e658ea257248f460c6b69d2bebd489d571f3c296621a8c4239ec",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:render-after-expand=\"false\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/basic.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "8f49f592bccf59f9c513faaa054478c92660f229396daab224b178a9e34721fb",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-check-strictly",
					"title": "选择任意级别",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-check-strictly/ts/Demo.vue",
									"sha256": "cf45443f077b584156072720232a609796333fdaddc1ec6dd406a6091eb68764",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tcheck-strictly\n\t\t:render-after-expand=\"false\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框：\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tcheck-strictly\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框并启用 check-on-click-node：\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tcheck-strictly\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tcheck-on-click-node\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\nimport type { AsamTreeSelectNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/check-strictly.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\n\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "2eb80e2015dadc8df518fd1faf651014444917edb7cd990f6b016bd87e14334b",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-check-strictly/js/Demo.vue",
									"sha256": "897aedc1162794e1902f7f34e3e7c456bab90f5179fb0c6c4698db9e29d725a8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tcheck-strictly\n\t\t:render-after-expand=\"false\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框：\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tcheck-strictly\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框并启用 check-on-click-node：\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tcheck-strictly\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tcheck-on-click-node\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/check-strictly.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "3e20af7f1f06ed9cf86984ef2372846866ab9922559e42b551949ffcdde1dbfb",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-multiple",
					"title": "多选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-multiple/ts/Demo.vue",
									"sha256": "97284180d54ea2b13101888ebfec1962f75b838748b324ca99112ec674aecd2b",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tmultiple\n\t\t:render-after-expand=\"false\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tmultiple\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框并启用 check-strictly：\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"valueStrictly\"\n\t\t:data=\"data\"\n\t\tmultiple\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tcheck-strictly\n\t\tcheck-on-click-node\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\nimport type { AsamTreeSelectNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/multiple.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\nconst valueStrictly = ref<AsamTreeSelectNativeProps['modelValue']>();\n\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "18e57f7751d9811ca95f17eaa210ff9a85b7fa1c5b17244ccba14bd460c3402b",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-multiple/js/Demo.vue",
									"sha256": "5a28721680344414afe3bd13f9be469b17e28d7aaf430250dd17a6bfb8688c8c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tmultiple\n\t\t:render-after-expand=\"false\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tmultiple\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t显示复选框并启用 check-strictly：\n\t<AsamTreeSelect\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"valueStrictly\"\n\t\t:data=\"data\"\n\t\tmultiple\n\t\t:render-after-expand=\"false\"\n\t\tshow-checkbox\n\t\tcheck-strictly\n\t\tcheck-on-click-node\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/multiple.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst valueStrictly = ref();\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "3739c3aafa763fc621377486eedf78744ca151d29319792a1ebe8f3b0313a3e3",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-disabled",
					"title": "禁用选项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-disabled/ts/Demo.vue",
									"sha256": "a0e889ec8bb407a48c823129df975cf7290cacbf9430452b33bc13d47b6b40f8",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect } from '@asam-ui/ui';\nimport type { AsamTreeSelectNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/disabled.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\n\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tdisabled: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdisabled: true,\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "2bbb48eb665e2535052ed369b6e052638fb6854ab079b82b60847ea7ddaa7293",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-disabled/js/Demo.vue",
									"sha256": "b12cffbc3bb2010f8ad9a958e72f74c3fae6fea631fa6c9820347f6c4b400694",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/disabled.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tdisabled: true,\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tdisabled: true,\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tdisabled: true,\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "96f43d6bcc0457f79aff42ee6c433ea86150aea01be07c5ea0ce8e8f6035e899",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-filterable",
					"title": "可筛选",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-filterable/ts/Demo.vue",
									"sha256": "0c4961d07d956664d6895d0e5885ecad673ab0449927e2b4877d31a4c39ddd05",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tfilterable\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t筛选方法：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:filter-method=\"filterMethod\"\n\t\tfilterable\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t节点筛选方法：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:filter-node-method=\"filterNodeMethod\"\n\t\tfilterable\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/filterable.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\n\nconst sourceData = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst data = ref(sourceData);\n\nconst filterMethod = (value: string) => {\n\tdata.value = [...sourceData].filter((item) => item.label.includes(value));\n};\n\nimport type { AsamTreeFilterNodeMethodFunction, AsamTreeSelectNativeProps } from '@asam-ui/ui';\nconst filterNodeMethod: AsamTreeFilterNodeMethodFunction = (value, data) =>\n\tString(data.label).includes(String(value));\n</script>\n",
									"originalSourceSha256": "b3c974528d93afe5a9f93f3adf5f7c5a6f49c8e000c3178cd101cf7de1e6a0e7",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-filterable/js/Demo.vue",
									"sha256": "92f1d60576f0f90753a61d2a4adaf37173039ec506c295c00d8eb27e9089d878",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tfilterable\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t筛选方法：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:filter-method=\"filterMethod\"\n\t\tfilterable\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t节点筛选方法：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:filter-node-method=\"filterNodeMethod\"\n\t\tfilterable\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/filterable.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst sourceData = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\nconst data = ref(sourceData);\nconst filterMethod = (value) => {\n\tdata.value = [...sourceData].filter((item) => item.label.includes(value));\n};\nconst filterNodeMethod = (value, data) => String(data.label).includes(String(value));\n</script>\n",
									"originalSourceSha256": "fd8a77dbc2fb3cc7d326fca3ff62c5fb4cc689573448605e4029cfb9cfc1e857",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-slots",
					"title": "设置文案",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-slots/ts/Demo.vue",
									"sha256": "e64f55bf89d0ffa41d85826df9be32fe95ca4abbf492d1630b2c5f94c79fea17",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tstyle=\"width: 240px\"\n\t>\n\t\t<template #default=\"{ data: { label } }\">\n\t\t\t{{ label }}<span style=\"color: gray\">（后缀）</span>\n\t\t</template>\n\t</AsamTreeSelect>\n\t<AsamDivider />\n\t使用渲染内容：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:render-content=\"renderContent\"\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/slots.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\n\nimport type { AsamTreeRenderContentFunction, AsamTreeSelectNativeProps } from '@asam-ui/ui';\nconst renderContent: AsamTreeRenderContentFunction = (h, { data }) => {\n\treturn h(\n\t\t'span',\n\t\t{\n\t\t\tstyle: {\n\t\t\t\tcolor: 'var(--asam-color-primary)'\n\t\t\t}\n\t\t},\n\t\tdata.label\n\t);\n};\n\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "874172dbb81f9ae8feffe587ba3880154855dbf91364abb50741fa2a11b809d0",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-slots/js/Demo.vue",
									"sha256": "7225ef0535cca27c9d29572544c13c2ffaa4b46859023826f9fc76c4c64d224c",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\tstyle=\"width: 240px\"\n\t>\n\t\t<template #default=\"{ data: { label } }\">\n\t\t\t{{ label }}<span style=\"color: gray\">（后缀）</span>\n\t\t</template>\n\t</AsamTreeSelect>\n\t<AsamDivider />\n\t使用渲染内容：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\t:data=\"data\"\n\t\t:render-content=\"renderContent\"\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/slots.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst renderContent = (h, { data }) => {\n\treturn h(\n\t\t'span',\n\t\t{\n\t\t\tstyle: {\n\t\t\t\tcolor: 'var(--asam-color-primary)'\n\t\t\t}\n\t\t},\n\t\tdata.label\n\t);\n};\nconst data = [\n\t{\n\t\tvalue: '1',\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '1-1',\n\t\t\t\tlabel: '二级节点 1-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '1-1-1',\n\t\t\t\t\t\tlabel: '三级节点 1-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '2',\n\t\tlabel: '一级节点 2',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '2-1',\n\t\t\t\tlabel: '二级节点 2-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-1-1',\n\t\t\t\t\t\tlabel: '三级节点 2-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '2-2',\n\t\t\t\tlabel: '二级节点 2-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '2-2-1',\n\t\t\t\t\t\tlabel: '三级节点 2-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\n\t{\n\t\tvalue: '3',\n\t\tlabel: '一级节点 3',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tvalue: '3-1',\n\t\t\t\tlabel: '二级节点 3-1',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-1-1',\n\t\t\t\t\t\tlabel: '三级节点 3-1-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: '3-2',\n\t\t\t\tlabel: '二级节点 3-2',\n\t\t\t\tchildren: [\n\t\t\t\t\t{\n\t\t\t\t\t\tvalue: '3-2-1',\n\t\t\t\t\t\tlabel: '三级节点 3-2-1'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "bbef9eaf490a6d4ffeb7dac8cdc7c35b6323e2c8a2d18a6e9f21164d983899fe",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-lazy",
					"title": "懒加载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-lazy/ts/Demo.vue",
									"sha256": "4e518b5a79f4ffe131c5263e28b66faeef6c055ec1177a519f469faaca7c2e58",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\tlazy\n\t\t:load=\"load\"\n\t\t:props=\"props\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t<span>缓存回填</span> 显示懒加载标签：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value2\"\n\t\tlazy\n\t\t:load=\"load\"\n\t\t:props=\"props\"\n\t\t:cache-data=\"cacheData\"\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/lazy.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>();\nconst value2 = ref<AsamTreeSelectNativeProps['modelValue']>(5);\n\nconst cacheData = [{ value: 5, label: '节点五（懒加载）' }];\n\nconst props = {\n\tlabel: 'label',\n\tchildren: 'children',\n\tisLeaf: 'isLeaf'\n};\n\nlet id = 0;\n\nimport type { AsamTreeSelectNativeProps } from '@asam-ui/ui';\nconst load: NonNullable<AsamTreeSelectNativeProps['load']> = (node, resolve) => {\n\tif (node.isLeaf) return resolve([]);\n\n\tsetTimeout(() => {\n\t\tresolve([\n\t\t\t{\n\t\t\t\tvalue: ++id,\n\t\t\t\tlabel: `懒加载节点${id}`\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: ++id,\n\t\t\t\tlabel: `懒加载节点${id}`,\n\t\t\t\tisLeaf: true\n\t\t\t}\n\t\t]);\n\t}, 400);\n};\n</script>\n",
									"originalSourceSha256": "e97b94f39ebda58dea93a7d0322488081f88690d2014fbeaf4e10a97d3348fc9",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-lazy/js/Demo.vue",
									"sha256": "1771def7f558cd3f0af24cf99912aa8b6a26ce42feccfaddde8d74d75dcbbd06",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\tlazy\n\t\t:load=\"load\"\n\t\t:props=\"props\"\n\t\tstyle=\"width: 240px\"\n\t/>\n\t<AsamDivider />\n\t<span>缓存回填</span> 显示懒加载标签：\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value2\"\n\t\tlazy\n\t\t:load=\"load\"\n\t\t:props=\"props\"\n\t\t:cache-data=\"cacheData\"\n\t\tstyle=\"width: 240px\"\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect, AsamDivider } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/lazy.vue\nimport { ref } from 'vue';\nconst value = ref();\nconst value2 = ref(5);\nconst cacheData = [{ value: 5, label: '节点五（懒加载）' }];\nconst props = {\n\tlabel: 'label',\n\tchildren: 'children',\n\tisLeaf: 'isLeaf'\n};\nlet id = 0;\nconst load = (node, resolve) => {\n\tif (node.isLeaf) return resolve([]);\n\tsetTimeout(() => {\n\t\tresolve([\n\t\t\t{\n\t\t\t\tvalue: ++id,\n\t\t\t\tlabel: `懒加载节点${id}`\n\t\t\t},\n\t\t\t{\n\t\t\t\tvalue: ++id,\n\t\t\t\tlabel: `懒加载节点${id}`,\n\t\t\t\tisLeaf: true\n\t\t\t}\n\t\t]);\n\t}, 400);\n};\n</script>\n",
									"originalSourceSha256": "c0f9cd69503fea9e9ceeb8040d2bd2b7e5f0f67dbd251cc93f1696ead46081ac",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "native-node-key",
					"title": "使用 node-key 属性",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-node-key/ts/Demo.vue",
									"sha256": "4fe9b8242a4edbc913a525ddea2d78f5da925bd738701fb9ecacbfcb0b1a59e3",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\tstyle=\"width: 240px\"\n\t\t:data=\"data\"\n\t\tnode-key=\"id\"\n\t\tshow-checkbox\n\t\tmultiple\n\t\tdefault-expand-all\n\t/>\n</template>\n\n<script lang=\"ts\" setup>\n\n\nimport { AsamTreeSelect } from '@asam-ui/ui';\nimport type { AsamTreeSelectNativeProps } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/node-key.vue\n\nimport { ref } from 'vue';\n\nconst value = ref<AsamTreeSelectNativeProps['modelValue']>([2]);\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: '二级节点 1-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: '二级节点 1-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "31da0c70ea50d824851aaa243831558300abb7ed1afd2ed672d8d51a18a02656",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/native-node-key/js/Demo.vue",
									"sha256": "6ca383e55fcc821b6120dca746ad437fab1e3cb739ad13fc7b9f959aee721626",
									"source": "<!--\nSPDX-License-Identifier: MIT\nComplete attribution and permission: LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\nNotice resource: /licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt\n-->\n<template>\n\t<AsamTreeSelect\n\t\t:check-strictly=\"false\"\n\t\tvalue-mode=\"native\"\n\t\tv-model=\"value\"\n\t\tstyle=\"width: 240px\"\n\t\t:data=\"data\"\n\t\tnode-key=\"id\"\n\t\tshow-checkbox\n\t\tmultiple\n\t\tdefault-expand-all\n\t/>\n</template>\n\n<script setup>\n\n\nimport { AsamTreeSelect } from '@asam-ui/ui';\n// Adapted from the fixed upstream MIT example: tree-select/node-key.vue\nimport { ref } from 'vue';\nconst value = ref([2]);\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlabel: '一级节点 1',\n\t\tchildren: [\n\t\t\t{\n\t\t\t\tid: 2,\n\t\t\t\tlabel: '二级节点 1-1'\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 3,\n\t\t\t\tlabel: '二级节点 1-2'\n\t\t\t}\n\t\t]\n\t}\n];\n</script>\n",
									"originalSourceSha256": "ec251a8360a63a71e353f5b0348d1a41e08d66cc6b49950c3f5f1c4021f21566",
									"notice": {
										"id": "0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27",
										"url": "/licenses/source-notices/0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"licenseFilename": "LICENSE-0790118bb4d66681db1d63181f72ef68e632d632f6db0373ef87cf328561af27.txt",
										"upstreamVersion": "2.14.7",
										"upstreamSha": "77d5c32c4ebcfffde67e51f6325c6d350ca668a0"
									}
								}
							]
						}
					]
				},
				{
					"id": "normalized-lazy",
					"title": "三模式动态模型、回填与源切换",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/normalized-lazy/ts/Demo.vue",
									"sha256": "714ee61c3536a837b5da4976b3f61717396ef76f29c0b9149f4d4beb9b308ccf",
									"source": "<template>\n\t<div class=\"hierarchy-example\">\n\t\t<p class=\"example-paragraph\">依次展开“根节点”和子节点，加载两层；数字 0、false 与空字符串保留原类型。</p>\n\t\t<label\n\t\t\t>value<AsamTreeSelect\n\t\t\t\tv-model=\"value\"\n\t\t\t\tlazy\n\t\t\t\t:load=\"load\"\n\t\t\t\t:props=\"{ isLeaf: 'isLeaf' }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>object<AsamTreeSelect\n\t\t\t\tv-model=\"objectValue\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\tlazy\n\t\t\t\t:load=\"load\"\n\t\t\t\t:props=\"{ isLeaf: 'isLeaf' }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>多选<AsamTreeSelect\n\t\t\t\tv-model=\"multiple\"\n\t\t\t\tmultiple\n\t\t\t\tlazy\n\t\t\t\t:load=\"load\"\n\t\t\t\t:props=\"{ isLeaf: 'isLeaf' }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>字符串存储<AsamTreeSelect\n\t\t\t\tv-model=\"tokens\"\n\t\t\t\tmultiple\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:options=\"stringOptions\"\n\t\t/></label>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"restore\">回填数字 0</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"clear\">清空</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"replace\">切换源并丢弃迟到回调</AsamButton>\n\t\t</div>\n\t\t<output\n\t\t\t>源 {{ version }}；value={{ JSON.stringify(value) }}；object={{\n\t\t\t\tJSON.stringify(objectValue)\n\t\t\t}}；multiple={{ JSON.stringify(multiple) }}；tokens={{ tokens }}</output\n\t\t>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamTreeSelectLoad, AsamHierarchyOption, AsamValue } from '@asam-ui/ui';\nconst version = ref(1);\nconst value = ref<AsamValue | null>(null);\nconst objectValue = ref<AsamHierarchyOption | null>(null);\nconst multiple = ref<AsamValue[]>([]);\nconst tokens = ref('');\nconst stringOptions = [\n\t{ value: 1, label: '一', raw: {} },\n\t{ value: 2, label: '二', raw: {} }\n];\nconst load = computed<AsamTreeSelectLoad>(() => {\n\tconst sourceVersion = version.value;\n\treturn (node, resolve) => {\n\t\tsetTimeout(() => {\n\t\t\tresolve(\n\t\t\t\tnode.level === 0\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tvalue: 'root',\n\t\t\t\t\t\t\t\tlabel: '根节点 ' + sourceVersion,\n\t\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\t\tleaf: false,\n\t\t\t\t\t\t\t\tisLeaf: false\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]\n\t\t\t\t\t: [0, false, ''].map((value) => ({\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tlabel:\n\t\t\t\t\t\t\t\ttypeof value +\n\t\t\t\t\t\t\t\t':' +\n\t\t\t\t\t\t\t\tJSON.stringify(value) +\n\t\t\t\t\t\t\t\t' / 源' +\n\t\t\t\t\t\t\t\tsourceVersion,\n\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\tleaf: true,\n\t\t\t\t\t\t\tisLeaf: true\n\t\t\t\t\t\t}))\n\t\t\t);\n\t\t}, 400);\n\t};\n});\nfunction restore() {\n\tvalue.value = 0;\n\tobjectValue.value = { value: 0, label: '回填 0', raw: { restored: true } };\n}\nfunction clear() {\n\tvalue.value = null;\n\tobjectValue.value = null;\n\tmultiple.value = [];\n\ttokens.value = '';\n}\nfunction replace() {\n\tclear();\n\tversion.value++;\n}\n</script>\n\n<style scoped>\n.hierarchy-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\nlabel {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/normalized-lazy/js/Demo.vue",
									"sha256": "7ecde71697499a1d0b45c2fde42bc4ca7432eca55616dc711781c7dd308f7f64",
									"source": "<template>\n\t<div class=\"hierarchy-example\">\n\t\t<p class=\"example-paragraph\">依次展开“根节点”和子节点，加载两层；数字 0、false 与空字符串保留原类型。</p>\n\t\t<label\n\t\t\t>value<AsamTreeSelect\n\t\t\t\tv-model=\"value\"\n\t\t\t\tlazy\n\t\t\t\t:load=\"load\"\n\t\t\t\t:props=\"{ isLeaf: 'isLeaf' }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>object<AsamTreeSelect\n\t\t\t\tv-model=\"objectValue\"\n\t\t\t\tvalue-mode=\"object\"\n\t\t\t\tlazy\n\t\t\t\t:load=\"load\"\n\t\t\t\t:props=\"{ isLeaf: 'isLeaf' }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>多选<AsamTreeSelect\n\t\t\t\tv-model=\"multiple\"\n\t\t\t\tmultiple\n\t\t\t\tlazy\n\t\t\t\t:load=\"load\"\n\t\t\t\t:props=\"{ isLeaf: 'isLeaf' }\"\n\t\t\t\tclearable\n\t\t/></label>\n\t\t<label\n\t\t\t>字符串存储<AsamTreeSelect\n\t\t\t\tv-model=\"tokens\"\n\t\t\t\tmultiple\n\t\t\t\tmultiple-value-mode=\"string\"\n\t\t\t\t:options=\"stringOptions\"\n\t\t/></label>\n\t\t<div>\n\t\t\t<AsamButton type=\"default\" @click=\"restore\">回填数字 0</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"clear\">清空</AsamButton\n\t\t\t><AsamButton type=\"default\" @click=\"replace\">切换源并丢弃迟到回调</AsamButton>\n\t\t</div>\n\t\t<output\n\t\t\t>源 {{ version }}；value={{ JSON.stringify(value) }}；object={{\n\t\t\t\tJSON.stringify(objectValue)\n\t\t\t}}；multiple={{ JSON.stringify(multiple) }}；tokens={{ tokens }}</output\n\t\t>\n\t</div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nconst version = ref(1);\nconst value = ref(null);\nconst objectValue = ref(null);\nconst multiple = ref([]);\nconst tokens = ref('');\nconst stringOptions = [\n\t{ value: 1, label: '一', raw: {} },\n\t{ value: 2, label: '二', raw: {} }\n];\nconst load = computed(() => {\n\tconst sourceVersion = version.value;\n\treturn (node, resolve) => {\n\t\tsetTimeout(() => {\n\t\t\tresolve(\n\t\t\t\tnode.level === 0\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tvalue: 'root',\n\t\t\t\t\t\t\t\tlabel: '根节点 ' + sourceVersion,\n\t\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\t\tleaf: false,\n\t\t\t\t\t\t\t\tisLeaf: false\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t]\n\t\t\t\t\t: [0, false, ''].map((value) => ({\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\tlabel:\n\t\t\t\t\t\t\t\ttypeof value +\n\t\t\t\t\t\t\t\t':' +\n\t\t\t\t\t\t\t\tJSON.stringify(value) +\n\t\t\t\t\t\t\t\t' / 源' +\n\t\t\t\t\t\t\t\tsourceVersion,\n\t\t\t\t\t\t\traw: { sourceVersion },\n\t\t\t\t\t\t\tleaf: true,\n\t\t\t\t\t\t\tisLeaf: true\n\t\t\t\t\t\t}))\n\t\t\t);\n\t\t}, 400);\n\t};\n});\nfunction restore() {\n\tvalue.value = 0;\n\tobjectValue.value = { value: 0, label: '回填 0', raw: { restored: true } };\n}\nfunction clear() {\n\tvalue.value = null;\n\tobjectValue.value = null;\n\tmultiple.value = [];\n\ttokens.value = '';\n}\nfunction replace() {\n\tclear();\n\tversion.value++;\n}\n</script>\n\n<style scoped>\n.hierarchy-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n\nlabel {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--asam-space-sm);\n}\n\noutput {\n\toverflow-wrap: anywhere;\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "inherited-contracts",
					"title": "继承滚动事件与标签包装项",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/inherited-contracts/ts/Demo.vue",
									"sha256": "832f5f02c0d2b648e6cc26a7ff17b693a4b89dafdcdcf136aab6726b738abf0d",
									"source": "<template>\n\t<div class=\"inherited-contracts-example\">\n\t\t<AsamTreeSelect\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\t@end-reached=\"ends.push($event)\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"option in data\"\n\t\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled || option.isDisabled\"\n\t\t\t\t\t:data-tag-value=\"String(option.value)\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.currentLabel }} ×\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamTreeSelect>\n\t\t<output data-contract=\"model\">{{ JSON.stringify(value) }}</output>\n\t\t<output data-contract=\"ends\">{{ JSON.stringify(ends) }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamTreeSelect } from '@asam-ui/ui';\nimport type { AsamTreeSelectEmits } from '@asam-ui/ui';\nconst value = ref<number[]>([1, 2]);\nconst ends = ref<AsamTreeSelectEmits['end-reached'][0][]>([]);\nconst options = Array.from({ length: 160 }, (_, value) => ({\n\tvalue,\n\tlabel: `标签行 ${value}`,\n\traw: {}\n}));\n</script>\n<style scoped>\n.inherited-contracts-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/inherited-contracts/js/Demo.vue",
									"sha256": "bde60dd2fbc4cdbe833489867472d87744e59790833158dae7bb6311d8870220",
									"source": "<template>\n\t<div class=\"inherited-contracts-example\">\n\t\t<AsamTreeSelect\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tmultiple\n\t\t\t@end-reached=\"ends.push($event)\"\n\t\t>\n\t\t\t<template #tag=\"{ data, selectDisabled, deleteTag }\">\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-for=\"option in data\"\n\t\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t:disabled=\"selectDisabled || option.isDisabled\"\n\t\t\t\t\t:data-tag-value=\"String(option.value)\"\n\t\t\t\t\t@click.stop=\"deleteTag($event, option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.currentLabel }} ×\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\t\t</AsamTreeSelect>\n\t\t<output data-contract=\"model\">{{ JSON.stringify(value) }}</output>\n\t\t<output data-contract=\"ends\">{{ JSON.stringify(ends) }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamTreeSelect } from '@asam-ui/ui';\nconst value = ref([1, 2]);\nconst ends = ref([]);\nconst options = Array.from({ length: 160 }, (_, value) => ({\n\tvalue,\n\tlabel: `标签行 ${value}`,\n\traw: {}\n}));\n</script>\n<style scoped>\n.inherited-contracts-example {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "popup-container",
					"title": "局部与全局挂载",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/popup-container/ts/Demo.vue",
									"sha256": "19d241c2d409f7fc1e7bede29b79ec418652b740f675b1cf6a53b673febe1409",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamTreeSelect\n\t\t\t\tref=\"control\"\n\t\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t>\n\t\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t\t<template #empty> 没有可选节点 </template>\n\t\t\t</AsamTreeSelect>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTreeSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nimport type { AsamTreeSelectExpose } from '@asam-ui/ui';\nconst control = ref<AsamTreeSelectExpose>();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref<string | null>('design');\nconst event = ref('尚未更改');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef<HTMLElement>();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTreeSelect/popup-container/js/Demo.vue",
									"sha256": "022edfe2844c6d05706266ef1d5f04084fbcd0dc2d152fe4e1957722d0116dab",
									"source": "<template>\n\t<div ref=\"mountTarget\" class=\"popup-stage\" :class=\"{ local: !globalPopup }\">\n\t\t<div class=\"popup-mode\">\n\t\t\t<ContainerSwitch\n\t\t\t\tv-model=\"globalPopup\"\n\t\t\t\tactive-text=\"全局挂载到 body\"\n\t\t\t\tinactive-text=\"局部挂载到当前区域\"\n\t\t\t/>\n\t\t</div>\n\t\t<div class=\"example\">\n\t\t\t<AsamTreeSelect\n\t\t\t\tref=\"control\"\n\t\t\t\tv-bind=\"{ filterable: true, clearable: true, 'aria-label': '选择团队' }\"\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:options=\"options\"\n\t\t\t\t@change=\"event = JSON.stringify($event)\"\n\t\t\t\t:teleported=\"globalPopup\"\n\t\t\t>\n\t\t\t\t<template #default=\"{ data }\"> {{ data.label }}节点 </template>\n\t\t\t\t<template #empty> 没有可选节点 </template>\n\t\t\t</AsamTreeSelect>\n\t\t\t<AsamButton type=\"default\" @click=\"control?.focus()\"> 聚焦 </AsamButton>\n\t\t\t<output>值：{{ value }}；事件：{{ event }}</output>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTreeSelectBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTreeSelect, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst options = [\n\t{\n\t\tlabel: '团队',\n\t\tvalue: 'team',\n\t\traw: {},\n\t\tchildren: [\n\t\t\t{ label: '设计', value: 'design', raw: {} },\n\t\t\t{ label: '开发', value: 'dev', raw: {} }\n\t\t]\n\t}\n];\nconst value = ref('design');\nconst event = ref('尚未更改');\n\nimport { ref as containerRef } from 'vue';\nimport { AsamSwitch as ContainerSwitch } from '@asam-ui/ui';\nconst globalPopup = containerRef(true);\nconst mountTarget = containerRef();\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n\n<style scoped>\n.popup-stage {\n\tposition: relative;\n\tisolation: isolate;\n\tmin-height: 140px;\n\tpadding: var(--asam-space-md);\n\tborder: 1px dashed var(--asam-color-border);\n}\n\n.popup-mode {\n\tmargin-bottom: var(--asam-space-lg);\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamTransfer",
			"documentation": "/component-AsamTransfer.html",
			"demos": [
				{
					"id": "basic",
					"title": "移动、检索与方向事件",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/basic/ts/Demo.vue",
									"sha256": "7d3e89978d67e3924f014ee97627425357291207b759398109877d5c8b99936b",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ filterable: true },\n\t\t\t\t...{\n\t\t\t\t\toptions: options,\n\t\t\t\t\ttitles: ['待选', '已选'],\n\t\t\t\t\t'button-texts': ['移除', '加入']\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t\t@change=\"(v, direction, moved) => (event = JSON.stringify({ v, direction, moved }))\"\n\t\t>\n\t\t\t<template #default=\"{ data }\">\n\t\t\t\t{{ data?.label }}\n\t\t\t</template>\n\t\t\t<template #left-footer> 请选择左侧项目 </template>\n\t\t\t<template #right-footer> 右侧为当前模型 </template>\n\t\t</AsamTransfer>\n\t\t<AsamButton type=\"default\" @click=\"control?.clearQuery('left')\"> 清空左侧检索 </AsamButton>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTransferBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTransfer, AsamButton } from '@asam-ui/ui';\nimport type { AsamTransferExpose } from '@asam-ui/ui';\nconst control = ref<AsamTransferExpose>();\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref<string[]>(['design']);\nconst event = ref('尚未移动');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/basic/js/Demo.vue",
									"sha256": "74817641460a570661b7d621d97c856526d21c6a3dd09550febe7b1dedba1e9a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tref=\"control\"\n\t\t\tv-bind=\"{\n\t\t\t\t...{ filterable: true },\n\t\t\t\t...{\n\t\t\t\t\toptions: options,\n\t\t\t\t\ttitles: ['待选', '已选'],\n\t\t\t\t\t'button-texts': ['移除', '加入']\n\t\t\t\t}\n\t\t\t}\"\n\t\t\tv-model=\"value\"\n\t\t\t@change=\"(v, direction, moved) => (event = JSON.stringify({ v, direction, moved }))\"\n\t\t>\n\t\t\t<template #default=\"{ data }\">\n\t\t\t\t{{ data?.label }}\n\t\t\t</template>\n\t\t\t<template #left-footer> 请选择左侧项目 </template>\n\t\t\t<template #right-footer> 右侧为当前模型 </template>\n\t\t</AsamTransfer>\n\t\t<AsamButton type=\"default\" @click=\"control?.clearQuery('left')\"> 清空左侧检索 </AsamButton>\n\t\t<output>值：{{ value }}；{{ event }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTransferBasicExample' });\nimport { ref } from 'vue';\nimport { AsamTransfer, AsamButton } from '@asam-ui/ui';\nconst control = ref();\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref(['design']);\nconst event = ref('尚未移动');\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "policies",
					"title": "字符串与对象存储",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/policies/ts/Demo.vue",
									"sha256": "e8e255d04213651a41fab044cdf876af8213549ce0f476f0b18e0b3e8b5a99a3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'multiple-value-mode': 'string', separator: '|', 'target-order': 'push' }\"\n\t\t/>\n\t\t<AsamTransfer v-model=\"objects\" :options=\"options\" value-mode=\"object\" />\n\t\t<output>字符串：{{ value }}；对象：{{ objects }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTransferPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamTransfer } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref('design');\nconst objects = ref<(typeof options)[number][]>([]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/policies/js/Demo.vue",
									"sha256": "37a09f6068cc3425f39d146aa51ea9b750ea3f4896cd8bc9bd79caa63b8ce07e",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tv-model=\"value\"\n\t\t\t:options=\"options\"\n\t\t\tv-bind=\"{ 'multiple-value-mode': 'string', separator: '|', 'target-order': 'push' }\"\n\t\t/>\n\t\t<AsamTransfer v-model=\"objects\" :options=\"options\" value-mode=\"object\" />\n\t\t<output>字符串：{{ value }}；对象：{{ objects }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTransferPoliciesExample' });\nimport { ref } from 'vue';\nimport { AsamTransfer } from '@asam-ui/ui';\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\nconst value = ref('design');\nconst objects = ref([]);\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "native",
					"title": "原始数据映射",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/native/ts/Demo.vue",
									"sha256": "777c774f0466a58665137f73f1f914688dc9ea52cf22cab31f258778b2b2b102",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"reset('original')\">按来源顺序</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"reset('push')\">新增项放末尾</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"reset('unshift')\">新增项放开头</AsamButton>\n\t\t</div>\n\t\t<AsamTransfer\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tdata: data,\n\t\t\t\ttargetOrder: order,\n\t\t\t\tbuttonTexts: ['移出', '移入'],\n\t\t\t\tprops: { key: 'id', label: 'name', disabled: 'locked' }\n\t\t\t}\"\n\t\t\t@change=\"recordMove\"\n\t\t/>\n\t\t<output>原始键：{{ value }}</output>\n\t\t<output>排列：{{ order }}；移动：{{ lastMove }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTransferNativeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTransfer } from '@asam-ui/ui';\nconst value = ref<number[]>([2]);\nconst order = ref<'original' | 'push' | 'unshift'>('original');\nconst lastMove = ref('');\nfunction reset(next: 'original' | 'push' | 'unshift') {\n\torder.value = next;\n\tvalue.value = [2];\n\tlastMove.value = '';\n}\nfunction recordMove(_value: unknown, direction: string, keys: readonly unknown[]) {\n\tlastMove.value = `${direction}:${keys.join(',')}`;\n}\nconst data = [\n\t{ id: 1, name: '设计', locked: false },\n\t{ id: 2, name: '开发', locked: false },\n\t{ id: 3, name: '停用', locked: true }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/native/js/Demo.vue",
									"sha256": "142b00fafe0bda6471498867f4f68ec5396f366edbbbc3672a83e088da0fd6b3",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"reset('original')\">按来源顺序</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"reset('push')\">新增项放末尾</AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"reset('unshift')\">新增项放开头</AsamButton>\n\t\t</div>\n\t\t<AsamTransfer\n\t\t\tv-model=\"value\"\n\t\t\tv-bind=\"{\n\t\t\t\t'value-mode': 'native',\n\t\t\t\tdata: data,\n\t\t\t\ttargetOrder: order,\n\t\t\t\tbuttonTexts: ['移出', '移入'],\n\t\t\t\tprops: { key: 'id', label: 'name', disabled: 'locked' }\n\t\t\t}\"\n\t\t\t@change=\"recordMove\"\n\t\t/>\n\t\t<output>原始键：{{ value }}</output>\n\t\t<output>排列：{{ order }}；移动：{{ lastMove }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTransferNativeExample' });\nimport { ref } from 'vue';\nimport { AsamButton, AsamTransfer } from '@asam-ui/ui';\nconst value = ref([2]);\nconst order = ref('original');\nconst lastMove = ref('');\nfunction reset(next) {\n\torder.value = next;\n\tvalue.value = [2];\n\tlastMove.value = '';\n}\nfunction recordMove(_value, direction, keys) {\n\tlastMove.value = `${direction}:${keys.join(',')}`;\n}\nconst data = [\n\t{ id: 1, name: '设计', locked: false },\n\t{ id: 2, name: '开发', locked: false },\n\t{ id: 3, name: '停用', locked: true }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "sizes",
					"title": "四档尺寸与上下文继承",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/sizes/ts/Demo.vue",
									"sha256": "78649386d7c4f871d2144ebb9559ee087113286a8bbc30f073b07beb164eee4a",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTransfer size=\"large\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTransfer size=\"big\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTransfer size=\"default\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTransfer size=\"small\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamTransfer :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamTransferSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTransfer, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nimport type { AsamControlSize } from '@asam-ui/ui';\nconst density = ref<AsamControlSize>('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/sizes/js/Demo.vue",
									"sha256": "fe3d482ea946f3c030d49253ab07c49a20135ebc5eb0640448373a1b33e0ed52",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<div class=\"density-grid\">\n\t\t\t<section data-density=\"large\">\n\t\t\t\t<strong> large </strong>\n\t\t\t\t<AsamTransfer size=\"large\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"big\">\n\t\t\t\t<strong> big </strong>\n\t\t\t\t<AsamTransfer size=\"big\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"default\">\n\t\t\t\t<strong> default </strong>\n\t\t\t\t<AsamTransfer size=\"default\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t\t<section data-density=\"small\">\n\t\t\t\t<strong> small </strong>\n\t\t\t\t<AsamTransfer size=\"small\" :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</div>\n\t\t<AsamConfigProvider :size=\"density\">\n\t\t\t<section data-density=\"inherited\">\n\t\t\t\t<AsamTransfer :options=\"options\" :model-value=\"['design']\" />\n\t\t\t</section>\n\t\t</AsamConfigProvider>\n\t\t<div class=\"row\">\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'small'\"> 继承 small </AsamButton>\n\t\t\t<AsamButton type=\"default\" @click=\"density = 'big'\"> 继承 big </AsamButton>\n\t\t</div>\n\t\t<output>配置提供器：{{ density }}</output>\n\t</div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'AsamTransferSizesExample' });\nimport { ref } from 'vue';\nimport { AsamTransfer, AsamConfigProvider, AsamButton } from '@asam-ui/ui';\nconst density = ref('big');\nconst options = [\n\t{ label: '设计', value: 'design', raw: { code: 'design' } },\n\t{ label: '开发', value: 'dev', raw: { code: 'dev' } },\n\t{ label: '停用', value: 'off', disabled: true, raw: { code: 'off' } }\n];\n</script>\n\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tmin-width: 0;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-sm, 8px);\n}\n\n.density-grid {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));\n}\n\nsection {\n\tdisplay: grid;\n\tgap: var(--asam-space-sm, 8px);\n\tmin-width: 0;\n}\n\noutput {\n\toverflow-wrap: anywhere;\n\tcolor: var(--asam-color-text-secondary);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "virtual",
					"title": "虚拟列表过滤与已选回显",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/virtual/ts/Demo.vue",
									"sha256": "6217f195792fb107e4f0315694924ea9c2b0589c044d4957c47a8a40e77e6f6d",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tref=\"transfer\"\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tvirtual-scroll\n\t\t\t:item-size=\"36\"\n\t\t\tfilterable\n\t\t\t:titles=\"['未选择', '已选择']\"\n\t\t\t:button-texts=\"['移回', '移入']\"\n\t\t\t@change=\"(_, direction, values) => (moved = `${direction}: ${values.join(', ')}`)\"\n\t\t>\n\t\t\t<template #default=\"{ data }\"\n\t\t\t\t><strong>{{ data?.label }}</strong></template\n\t\t\t>\n\t\t\t<template #left-footer><small>输入「第 499 项」筛选边界项</small></template>\n\t\t\t<template #right-footer\n\t\t\t\t><small>已选 {{ selected.length }} 项</small></template\n\t\t\t>\n\t\t</AsamTransfer>\n\t\t<AsamButton type=\"default\" @click=\"transfer?.clearQuery('left')\">清空左侧检索</AsamButton>\n\t\t<output>右侧模型：{{ selected }}；最近移动：{{ moved }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamTransfer, AsamButton } from '@asam-ui/ui';\nimport type { AsamTransferExpose } from '@asam-ui/ui';\nconst options = Array.from({ length: 500 }, (_, index) => ({\n\tvalue: `row-${index}`,\n\tlabel: `第 ${index} 项`,\n\traw: { index },\n\tdisabled: index === 1\n}));\nconst selected = ref<string[]>([]);\nconst moved = ref('');\nconst transfer = ref<AsamTransferExpose>();\ndefineOptions({ name: 'AsamTransferVirtualDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/virtual/js/Demo.vue",
									"sha256": "dd2a0f46c72f8f8c2670e14e6e35dda4f5e7ccea1b69fc53e6b21a1276727d60",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tref=\"transfer\"\n\t\t\tv-model=\"selected\"\n\t\t\t:options=\"options\"\n\t\t\tvirtual-scroll\n\t\t\t:item-size=\"36\"\n\t\t\tfilterable\n\t\t\t:titles=\"['未选择', '已选择']\"\n\t\t\t:button-texts=\"['移回', '移入']\"\n\t\t\t@change=\"(_, direction, values) => (moved = `${direction}: ${values.join(', ')}`)\"\n\t\t>\n\t\t\t<template #default=\"{ data }\"\n\t\t\t\t><strong>{{ data?.label }}</strong></template\n\t\t\t>\n\t\t\t<template #left-footer><small>输入「第 499 项」筛选边界项</small></template>\n\t\t\t<template #right-footer\n\t\t\t\t><small>已选 {{ selected.length }} 项</small></template\n\t\t\t>\n\t\t</AsamTransfer>\n\t\t<AsamButton type=\"default\" @click=\"transfer?.clearQuery('left')\">清空左侧检索</AsamButton>\n\t\t<output>右侧模型：{{ selected }}；最近移动：{{ moved }}</output>\n\t</div>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamTransfer, AsamButton } from '@asam-ui/ui';\nconst options = Array.from({ length: 500 }, (_, index) => ({\n\tvalue: `row-${index}`,\n\tlabel: `第 ${index} 项`,\n\traw: { index },\n\tdisabled: index === 1\n}));\nconst selected = ref([]);\nconst moved = ref('');\nconst transfer = ref();\ndefineOptions({ name: 'AsamTransferVirtualDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "custom",
					"title": "渲染回调、默认勾选与空内容",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/custom/ts/Demo.vue",
									"sha256": "f5b08c8384bb09c92c6c0a07cc6027db05292073fa49973fb8948fe829aa571c",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tv-model=\"selected\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:data=\"effectiveData\"\n\t\t\tfilterable\n\t\t\t:filter-method=\"filter\"\n\t\t\t:left-default-checked=\"['b']\"\n\t\t\t:right-default-checked=\"['a']\"\n\t\t\t:render-content=\"render\"\n\t\t\t:titles=\"['候选', '目标']\"\n\t\t\t:button-texts=\"['移回', '移入']\"\n\t\t\t:format=\"{ noChecked: '共${total}项', hasChecked: '${checked}/${total}' }\"\n\t\t\t@change=\"(_, direction, keys) => (moved = direction + ':' + keys.join(','))\"\n\t\t>\n\t\t\t<template #left-footer><small>使用默认勾选移入</small></template>\n\t\t\t<template #right-footer><small>保留原始键</small></template>\n\t\t\t<template #left-empty><p class=\"example-paragraph\">候选为空</p></template>\n\t\t\t<template #right-empty><p class=\"example-paragraph\">尚无目标</p></template>\n\t\t</AsamTransfer>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tdata = [];\n\t\t\t\tselected = [];\n\t\t\t\"\n\t\t\t>清空候选</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tdata = original;\n\t\t\t\tselected = ['a'];\n\t\t\t\"\n\t\t\t>还原候选</AsamButton\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用全部数据项</AsamCheckboxItem>\n\t\t<output>原始键：{{ selected }}；移动：{{ moved }}</output>\n\t</div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue';\nimport { AsamTransfer, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';\nimport type { AsamTransferProps } from '@asam-ui/ui';\nconst original = [\n\t{ key: 'a', label: '设计', disabled: false },\n\t{ key: 'b', label: '开发', disabled: false },\n\t{ key: 'c', label: '测试', disabled: false },\n\t{ key: 'd', label: '停用', disabled: true }\n];\nconst data = ref(original);\nconst selected = ref<string[]>(['a']);\nconst disabled = ref(false);\nconst effectiveData = computed(() =>\n\tdata.value.map((item) => ({ ...item, disabled: disabled.value || item.disabled }))\n);\nconst moved = ref('');\nconst render: NonNullable<AsamTransferProps['renderContent']> = (h, item) =>\n\th('strong', { class: 'rendered-choice' }, String(item.label));\nconst filter: NonNullable<AsamTransferProps['filterMethod']> = (query, item) =>\n\tString(item.label).includes(query);\ndefineOptions({ name: 'AsamTransferCustomDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamTransfer/custom/js/Demo.vue",
									"sha256": "16050b6edb804e41233216e3c287ecada651f2e4d3193b401df25bd83d8ef574",
									"source": "<template>\n\t<div class=\"example\">\n\t\t<AsamTransfer\n\t\t\tv-model=\"selected\"\n\t\t\tvalue-mode=\"native\"\n\t\t\t:data=\"effectiveData\"\n\t\t\tfilterable\n\t\t\t:filter-method=\"filter\"\n\t\t\t:left-default-checked=\"['b']\"\n\t\t\t:right-default-checked=\"['a']\"\n\t\t\t:render-content=\"render\"\n\t\t\t:titles=\"['候选', '目标']\"\n\t\t\t:button-texts=\"['移回', '移入']\"\n\t\t\t:format=\"{ noChecked: '共${total}项', hasChecked: '${checked}/${total}' }\"\n\t\t\t@change=\"(_, direction, keys) => (moved = direction + ':' + keys.join(','))\"\n\t\t>\n\t\t\t<template #left-footer><small>使用默认勾选移入</small></template>\n\t\t\t<template #right-footer><small>保留原始键</small></template>\n\t\t\t<template #left-empty><p class=\"example-paragraph\">候选为空</p></template>\n\t\t\t<template #right-empty><p class=\"example-paragraph\">尚无目标</p></template>\n\t\t</AsamTransfer>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tdata = [];\n\t\t\t\tselected = [];\n\t\t\t\"\n\t\t\t>清空候选</AsamButton\n\t\t>\n\t\t<AsamButton\n\t\t type=\"default\"\n\t\t\t@click=\"\n\t\t\t\tdata = original;\n\t\t\t\tselected = ['a'];\n\t\t\t\"\n\t\t\t>还原候选</AsamButton\n\t\t>\n\t\t<AsamCheckboxItem v-model=\"disabled\">禁用全部数据项</AsamCheckboxItem>\n\t\t<output>原始键：{{ selected }}；移动：{{ moved }}</output>\n\t</div>\n</template>\n<script setup>\nimport { computed, ref } from 'vue';\nimport { AsamTransfer, AsamButton, AsamCheckboxItem } from '@asam-ui/ui';\nconst original = [\n\t{ key: 'a', label: '设计', disabled: false },\n\t{ key: 'b', label: '开发', disabled: false },\n\t{ key: 'c', label: '测试', disabled: false },\n\t{ key: 'd', label: '停用', disabled: true }\n];\nconst data = ref(original);\nconst selected = ref(['a']);\nconst disabled = ref(false);\nconst effectiveData = computed(() =>\n\tdata.value.map((item) => ({ ...item, disabled: disabled.value || item.disabled }))\n);\nconst moved = ref('');\nconst render = (h, item) => h('strong', { class: 'rendered-choice' }, String(item.label));\nconst filter = (query, item) => String(item.label).includes(query);\ndefineOptions({ name: 'AsamTransferCustomDemo' });\n</script>\n<style scoped>\n.example {\n\tdisplay: grid;\n\tgap: var(--asam-space-md, 16px);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteCascader",
			"documentation": "/component-AsamRemoteCascader.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/basic/ts/Demo.vue",
									"sha256": "ec58a48dfc6ae5560cd3560da02e4eb9aa2f3730cefa6c497d97587f124e9bc8",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamRemoteCascader>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteCascaderExpose, AsamApiRequest } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamRemoteCascaderBasicDemoExample' });\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst control = ref<AsamRemoteCascaderExpose<string, Item>>();\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready', children: [{ label: '就绪', value: 'available' }] },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/basic/js/Demo.vue",
									"sha256": "600e5a04014237a8dc96a9b57239edc0c4fe155810c18c6eacc16e9cd2ae264b",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamRemoteCascader>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamRemoteCascaderBasicDemoExample' });\nconst value = ref(null);\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready', children: [{ label: '就绪', value: 'available' }] },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "complete-tree",
					"title": "完整树、对象多选与失败恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/complete-tree/ts/Demo.vue",
									"sha256": "6713f21905f891bfff11806639e37dec934a0135c76d1b9f51382000403a50d2",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\t:props=\"{ expandTrigger: 'click' }\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamRemoteCascader>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\"\n\t\t\t\t>取消慢请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取勾选节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCascaderCompleteTreeDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\nimport type {\n\tAsamCascaderDataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamRemoteCascaderExpose,\n\tAsamOption,\n\tAsamApiRequest\n} from '@asam-ui/ui';\nimport type { Member } from './provider.js';\nimport { members } from './provider.js';\nconst active = ref(true);\nconst failure = ref(false);\nconst slow = ref(false);\nconst api: AsamApiRequest<undefined, readonly Member[]> = async (_params, context) => {\n\tawait new Promise<void>((done) => setTimeout(done, slow.value ? 500 : 100));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示完整树请求失败');\n\treturn members;\n};\nconst dataSource = defineAsamOptions<string, Member>().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\nconst value = ref<readonly AsamOption<string, Member>[]>([]);\nconst control = ref<AsamRemoteCascaderExpose<string, Member>>();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\ntype DataEmits = AsamCascaderDataEmits<AsamValue, object>;\nconst events = ref<readonly { readonly name: string; readonly payload: unknown }[]>([]);\nfunction recordEvent(name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0]) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0]) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/complete-tree/ts/provider.ts",
									"sha256": "9e59cecd64e7ba87c13f4b0d3929b58044d4f40f119800324970e4a8cc01e3cb",
									"source": "export interface Member {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/complete-tree/js/Demo.vue",
									"sha256": "9ddb37a42774bec7ca724e0361be6b7f44033db950c05e720fe0a2d1a7b4f0ef",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\t:props=\"{ expandTrigger: 'click' }\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamRemoteCascader>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\"\n\t\t\t\t>取消慢请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取勾选节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteCascaderCompleteTreeDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\nimport { members } from './provider.js';\nconst active = ref(true);\nconst failure = ref(false);\nconst slow = ref(false);\nconst api = async (_params, context) => {\n\tawait new Promise((done) => setTimeout(done, slow.value ? 500 : 100));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示完整树请求失败');\n\treturn members;\n};\nconst dataSource = defineAsamOptions().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\nconst value = ref([]);\nconst control = ref();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\nconst events = ref([]);\nfunction recordEvent(name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/complete-tree/js/provider.js",
									"sha256": "1c2148894416780164fe2763711de9e61ed40194a777e080b8c725cf87f6c396",
									"source": "export const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "native-tree-presentation",
					"title": "父子显示、标签和虚拟滚动",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/native-tree-presentation/ts/Demo.vue",
									"sha256": "28a15250be98740f8060fbad8fa1648ba95bc76313334987969842cfe9bf31ce",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"parentStrategy = !parentStrategy\"\n\t\t\t>\n\t\t\t\t切换父子显示策略\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"virtual = !virtual\"\n\t\t\t\t>切换级联虚拟滚动</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = 360\"\n\t\t\t\t>固定搜索宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = true\"\n\t\t\t\t>搜索与输入同宽</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = false\"\n\t\t\t\t>搜索自然宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\t:props=\"{ checkStrictly: strict, expandTrigger: 'click' }\"\n\t\t\t:show-checked-strategy=\"parentStrategy ? 'parent' : 'child'\"\n\t\t\t:virtual-scroll=\"virtual\"\n\t\t\t:height=\"180\"\n\t\t\t:item-size=\"30\"\n\t\t\t:fit-input-width=\"fitWidth\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t\t<span data-testid=\"tree-presentation-suggestion\">\n\t\t\t\t\t{{ item.text }} 完整树搜索结果\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag(data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteCascader>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\tparentStrategy,\n\t\t\t\tvirtual,\n\t\t\t\tfitWidth,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteCascaderExpose, AsamApiRequest } from '@asam-ui/ui';\nimport type { Member } from './provider.js';\nimport { members } from './provider.js';\nconst api: AsamApiRequest<undefined, readonly Member[]> = async (_params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn members;\n};\nconst dataSource = defineAsamOptions<string, Member>().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\ndefineOptions({ name: 'AsamRemoteCascaderNativeTreePresentationDemo' });\nconst control = ref<AsamRemoteCascaderExpose<string, Member>>();\nconst value = ref<readonly string[]>(['alpha', 'beta']);\nconst removed = ref<unknown[]>([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst parentStrategy = ref(false);\nconst virtual = ref(true);\nconst fitWidth = ref<boolean | number>(360);\nconst checkedKeys = ref<unknown[]>([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedNodes(false)?.map((node) => node.value) ?? [];\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/native-tree-presentation/ts/provider.ts",
									"sha256": "e7be4dda83f0bf30f06067d0d6a679d912f637f7dc1e217a77736b807ddc6809",
									"source": "export interface Member {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/native-tree-presentation/js/Demo.vue",
									"sha256": "dcd13e78c386f3ebde936ace1ebbe28690a7ac495dcfb1be63b1e54fef1054bf",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"parentStrategy = !parentStrategy\"\n\t\t\t>\n\t\t\t\t切换父子显示策略\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"virtual = !virtual\"\n\t\t\t\t>切换级联虚拟滚动</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = 360\"\n\t\t\t\t>固定搜索宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = true\"\n\t\t\t\t>搜索与输入同宽</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = false\"\n\t\t\t\t>搜索自然宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\t:props=\"{ checkStrictly: strict, expandTrigger: 'click' }\"\n\t\t\t:show-checked-strategy=\"parentStrategy ? 'parent' : 'child'\"\n\t\t\t:virtual-scroll=\"virtual\"\n\t\t\t:height=\"180\"\n\t\t\t:item-size=\"30\"\n\t\t\t:fit-input-width=\"fitWidth\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t\t<span data-testid=\"tree-presentation-suggestion\">\n\t\t\t\t\t{{ item.text }} 完整树搜索结果\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag(data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteCascader>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\tparentStrategy,\n\t\t\t\tvirtual,\n\t\t\t\tfitWidth,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\nimport { members } from './provider.js';\nconst api = async (_params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn members;\n};\nconst dataSource = defineAsamOptions().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\ndefineOptions({ name: 'AsamRemoteCascaderNativeTreePresentationDemo' });\nconst control = ref();\nconst value = ref(['alpha', 'beta']);\nconst removed = ref([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst parentStrategy = ref(false);\nconst virtual = ref(true);\nconst fitWidth = ref(360);\nconst checkedKeys = ref([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedNodes(false)?.map((node) => node.value) ?? [];\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/native-tree-presentation/js/provider.js",
									"sha256": "3d40c7a046e1cf01f74e0d638d46bc4b2e69b4d7f90f55c33467eb7a294d0609",
									"source": "export const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/local-error/ts/Demo.vue",
									"sha256": "4e4a46b45f72ee5446d9670f46f5154d9e0d68cf6d422bcfb8b092fc71b9789d",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCascaderDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteCascader-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/local-error/ts/Child.vue",
									"sha256": "f39d20e92e3ecf76b08ac9d970fec399a427a803d07223bd1ff6c64fbc152b6a",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteCascaderChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteCascaderExpose, AsamCascaderDataSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamRemoteCascaderExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamCascaderDataSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/local-error/js/Demo.vue",
									"sha256": "387ed40c81933a72fdfe732dfe95409e49d99680fe1c80516c9b8d2a99f9b3f9",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteCascaderDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteCascader-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/local-error/js/Child.vue",
									"sha256": "be22d462cec93e0afdeaf0781406dc3d23e5b21237cc635fafb07f1d66305c04",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteCascaderChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteCascader, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteCascader/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamRemoteTreeSelect",
			"documentation": "/component-AsamRemoteTreeSelect.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地数据与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/basic/ts/Demo.vue",
									"sha256": "71e3af5c67053f006874e1703775486c5f76f180da0049d386d0518f8347394a",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteTreeSelectExpose, AsamApiRequest } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamRemoteTreeSelectBasicDemoExample' });\ninterface Item {\n\tlabel: string;\n\tvalue: string;\n\tchildren?: readonly Item[];\n}\ninterface Query {\n\ttext: string;\n}\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst control = ref<AsamRemoteTreeSelectExpose<string, Item>>();\nconst error = ref('');\nconst result = ref('');\nconst items: readonly Item[] = [\n\t{ label: '准备', value: 'ready', children: [{ label: '就绪', value: 'available' }] },\n\t{ label: '进行', value: 'running' }\n];\nconst api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions<string, Item>();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/basic/js/Demo.vue",
									"sha256": "202a5675346401fdde8f63666e4e0873c0a418c05edaa4830794108efd0c68db",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t\t>取消请求</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamRemoteTreeSelectBasicDemoExample' });\nconst value = ref(null);\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nconst items = [\n\t{ label: '准备', value: 'ready', children: [{ label: '就绪', value: 'available' }] },\n\t{ label: '进行', value: 'running' }\n];\nconst api = async (params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn items.filter((item) => item.label.includes(params.text));\n};\nconst factory = defineAsamOptions();\nconst dataSource = factory.api({\n\tapi,\n\tparams: { text: '' },\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children' }\n});\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								}
							]
						}
					]
				},
				{
					"id": "complete-tree",
					"title": "完整树、对象多选与失败恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/complete-tree/ts/Demo.vue",
									"sha256": "25e69c41420713e01d49d2b196b06186b2a7ac7bcc13770e69533ad08f4ec38e",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tshow-checkbox\n\t\t\t:render-after-expand=\"false\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\"\n\t\t\t\t>取消慢请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取勾选节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteTreeSelectCompleteTreeDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type {\n\tAsamTreeSelectDataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamRemoteTreeSelectExpose,\n\tAsamOption,\n\tAsamApiRequest\n} from '@asam-ui/ui';\nimport type { Member } from './provider.js';\nimport { members } from './provider.js';\nconst active = ref(true);\nconst failure = ref(false);\nconst slow = ref(false);\nconst api: AsamApiRequest<undefined, readonly Member[]> = async (_params, context) => {\n\tawait new Promise<void>((done) => setTimeout(done, slow.value ? 500 : 100));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示完整树请求失败');\n\treturn members;\n};\nconst dataSource = defineAsamOptions<string, Member>().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\nconst value = ref<readonly AsamOption<string, Member>[]>([]);\nconst control = ref<AsamRemoteTreeSelectExpose<string, Member>>();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\ntype DataEmits = AsamTreeSelectDataEmits<AsamValue, object>;\nconst events = ref<readonly { readonly name: string; readonly payload: unknown }[]>([]);\nfunction recordEvent(name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0]) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0]) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/complete-tree/ts/provider.ts",
									"sha256": "9e59cecd64e7ba87c13f4b0d3929b58044d4f40f119800324970e4a8cc01e3cb",
									"source": "export interface Member {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/complete-tree/js/Demo.vue",
									"sha256": "e6bb09f19162a8832b65f999e3433b6bc0061e9676f5c615cac433d28b3470b1",
									"source": "<template>\n\t<section class=\"data-demo\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tshow-checkbox\n\t\t\t:render-after-expand=\"false\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<div class=\"demo-actions\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t\t>强制重载</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\"\n\t\t\t\t>取消慢请求</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取勾选节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\"\n\t\t\t\t>清空模型</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteTreeSelectCompleteTreeDemo' });\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\nimport { members } from './provider.js';\nconst active = ref(true);\nconst failure = ref(false);\nconst slow = ref(false);\nconst api = async (_params, context) => {\n\tawait new Promise((done) => setTimeout(done, slow.value ? 500 : 100));\n\tcontext.signal.throwIfAborted();\n\tif (failure.value) throw new Error('演示完整树请求失败');\n\treturn members;\n};\nconst dataSource = defineAsamOptions().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\nconst value = ref([]);\nconst control = ref();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\nconst events = ref([]);\nfunction recordEvent(name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.data-demo {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n\tjustify-items: start;\n}\n.data-demo > p,\n.data-demo > pre,\n.data-demo > fieldset {\n\twidth: 100%;\n\tmin-width: 0;\n\tmargin: 0;\n}\n.demo-actions {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/complete-tree/js/provider.js",
									"sha256": "1c2148894416780164fe2763711de9e61ed40194a777e080b8c725cf87f6c396",
									"source": "export const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "native-tree-presentation",
					"title": "父级选择、标签和树实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/native-tree-presentation/ts/Demo.vue",
									"sha256": "21a7cbddda81483bfb879058b7c4ed73005d9c3e4e834d8e9d028485ee992dde",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearChecked\"\n\t\t\t\t>清空实例勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(false)\"\n\t\t\t\t>仅勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(true)\"\n\t\t\t\t>深层勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkDefault\"\n\t\t\t\t>默认深度勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkData\"\n\t\t\t\t>按节点数据深层勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkAbsent\"\n\t\t\t\t>勾选不存在的数字键</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"uncheckData\"\n\t\t\t\t>按节点数据递归取消勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\tshow-checkbox\n\t\t\t:check-strictly=\"strict\"\n\t\t\t:check-on-click-node=\"false\"\n\t\t\t:render-after-expand=\"false\"\n\t\t\t:popper-style=\"{ minWidth: '360px' }\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-if=\"option?.value === 'team'\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click.stop=\"rememberNode(data)\"\n\t\t\t\t>\n\t\t\t\t\t记住父节点键\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag, selectDisabled }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"selectDisabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\thalfCheckedKeys,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteTreeSelectExpose, AsamApiRequest } from '@asam-ui/ui';\nimport type { Member } from './provider.js';\nimport { members } from './provider.js';\nconst api: AsamApiRequest<undefined, readonly Member[]> = async (_params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn members;\n};\nconst dataSource = defineAsamOptions<string, Member>().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\ndefineOptions({ name: 'AsamRemoteTreeSelectNativeTreePresentationDemo' });\nconst control = ref<AsamRemoteTreeSelectExpose<string, Member>>();\nconst value = ref<readonly string[]>(['alpha', 'beta']);\nconst removed = ref<unknown[]>([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst checkedKeys = ref<unknown[]>([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedKeys(false) ?? [];\n\thalfCheckedKeys.value = control.value?.getHalfCheckedKeys() ?? [];\n}\nconst parentKey = ref<string | number>();\nconst parentData = shallowRef<Record<string, unknown>>();\nconst halfCheckedKeys = ref<unknown[]>([]);\nfunction rememberKey(key: unknown) {\n\tif (typeof key !== 'string' && typeof key !== 'number')\n\t\tthrow new Error('Expected public native node key');\n\tparentKey.value = key;\n}\nfunction rememberNode(data: Record<string, unknown>) {\n\trememberKey(data.value);\n\tparentData.value = data;\n}\nfunction clearChecked() {\n\tcontrol.value?.setCheckedKeys([], false);\n\tinspect();\n}\nfunction checkParent(deep: boolean) {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true, deep);\n\tinspect();\n}\nfunction checkDefault() {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true);\n\tinspect();\n}\nfunction checkData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, true, true);\n\tinspect();\n}\nfunction uncheckData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, false, true);\n\tinspect();\n}\nfunction checkAbsent() {\n\tcontrol.value?.setChecked(999, true, true);\n\tinspect();\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/native-tree-presentation/ts/provider.ts",
									"sha256": "e7be4dda83f0bf30f06067d0d6a679d912f637f7dc1e217a77736b807ddc6809",
									"source": "export interface Member {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/native-tree-presentation/js/Demo.vue",
									"sha256": "44e6472ed777ddd62f7e622fde89e5e36100f4fd4ea31c50492fbc07a71bd423",
									"source": "<template>\n\t<section class=\"demo-layout-1\">\n\t\t<div class=\"demo-layout-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearChecked\"\n\t\t\t\t>清空实例勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(false)\"\n\t\t\t\t>仅勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(true)\"\n\t\t\t\t>深层勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkDefault\"\n\t\t\t\t>默认深度勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkData\"\n\t\t\t\t>按节点数据深层勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkAbsent\"\n\t\t\t\t>勾选不存在的数字键</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"uncheckData\"\n\t\t\t\t>按节点数据递归取消勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\tshow-checkbox\n\t\t\t:check-strictly=\"strict\"\n\t\t\t:check-on-click-node=\"false\"\n\t\t\t:render-after-expand=\"false\"\n\t\t\t:popper-style=\"{ minWidth: '360px' }\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-if=\"option?.value === 'team'\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click.stop=\"rememberNode(data)\"\n\t\t\t\t>\n\t\t\t\t\t记住父节点键\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag, selectDisabled }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"selectDisabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\thalfCheckedKeys,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { ref, shallowRef } from 'vue';\nimport { AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\nimport { members } from './provider.js';\nconst api = async (_params, context) => {\n\tcontext.signal.throwIfAborted();\n\treturn members;\n};\nconst dataSource = defineAsamOptions().api({\n\tapi,\n\tparams: undefined,\n\ttransform: (response) => response,\n\tfieldNames: { label: 'label', value: 'value', children: 'children', disabled: 'disabled' }\n});\ndefineOptions({ name: 'AsamRemoteTreeSelectNativeTreePresentationDemo' });\nconst control = ref();\nconst value = ref(['alpha', 'beta']);\nconst removed = ref([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst checkedKeys = ref([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedKeys(false) ?? [];\n\thalfCheckedKeys.value = control.value?.getHalfCheckedKeys() ?? [];\n}\nconst parentKey = ref();\nconst parentData = shallowRef();\nconst halfCheckedKeys = ref([]);\nfunction rememberKey(key) {\n\tif (typeof key !== 'string' && typeof key !== 'number')\n\t\tthrow new Error('Expected public native node key');\n\tparentKey.value = key;\n}\nfunction rememberNode(data) {\n\trememberKey(data.value);\n\tparentData.value = data;\n}\nfunction clearChecked() {\n\tcontrol.value?.setCheckedKeys([], false);\n\tinspect();\n}\nfunction checkParent(deep) {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true, deep);\n\tinspect();\n}\nfunction checkDefault() {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true);\n\tinspect();\n}\nfunction checkData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, true, true);\n\tinspect();\n}\nfunction uncheckData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, false, true);\n\tinspect();\n}\nfunction checkAbsent() {\n\tcontrol.value?.setChecked(999, true, true);\n\tinspect();\n}\n</script>\n\n<style scoped>\n.demo-layout-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-layout-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/native-tree-presentation/js/provider.js",
									"sha256": "3d40c7a046e1cf01f74e0d638d46bc4b2e69b4d7f90f55c33467eb7a294d0609",
									"source": "export const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/local-error/ts/Demo.vue",
									"sha256": "2352dabea768c8f8b74d48b85a05f4c932aaf32d191087e406fb3dedb21cdd6b",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteTreeSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteTreeSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/local-error/ts/Child.vue",
									"sha256": "5e687d01e57e52248bcd7a546db5649ab025dc2f8c5aacaac767fe26e5661626",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamRemoteTreeSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\nimport type { AsamRemoteTreeSelectExpose, AsamTreeSelectDataSlots } from '@asam-ui/ui';\nimport type { Transport, Item } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamRemoteTreeSelectExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions<string, Item>().api({\n\tapi: transport.api,\n\tparams: undefined,\n\ttransform: (rows) => rows,\n\tfieldNames: { label: 'label', value: 'value' }\n});\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamTreeSelectDataSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/local-error/js/Demo.vue",
									"sha256": "d339fc482ea5476ff11f03ffaffe5e6f5459bc66be3550b4622ed264a02b9b39",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteTreeSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamRemoteTreeSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/local-error/js/Child.vue",
									"sha256": "602dd4278621772ee66d0ab1c121f5da44d50eb1916acfdf355de7ed5a6896da",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamRemoteTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamRemoteTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamRemoteTreeSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamRemoteTreeSelect, defineAsamOptions } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamOptions().api({ api: transport.api, params: undefined });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamRemoteTreeSelect/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDictCascader",
			"documentation": "/component-AsamDictCascader.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地字典与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/basic/ts/Demo.vue",
									"sha256": "47e21e50fd31ebc3e1d155e9360ff0957629afb1e78bb6f0258efc361806bfd7",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictCascaderBasicDemoExample' });\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/basic/ts/Child.vue",
									"sha256": "48c038ccb547819179161ca7b7b117551d0e66da1ef5760021f75b52cf4f58e4",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamDictCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictCascader } from '@asam-ui/ui';\nimport type { AsamDictCascaderExpose, AsamDictEntry } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDictCascaderBasicChildExample' });\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst control = ref<AsamDictCascaderExpose<string, AsamDictEntry>>();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictCascader/basic/ts/provider.ts",
									"sha256": "baec908f8f9054f02d7cab65743d13f3ed59b9aec678b01c17b69c69fb90f597",
									"source": "import type { AsamDataProvider } from '@asam-ui/ui';\n\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: '准备',\n\t\t\t\t\tvalue: 'ready',\n\t\t\t\t\tchildren: [{ label: '就绪', value: 'available' }]\n\t\t\t\t},\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/basic/js/Demo.vue",
									"sha256": "cbc82a7977700aa08e464a4341cafd20f2184358c0eeb9679b02f5bc272c5ac7",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictCascaderBasicDemoExample' });\n\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/basic/js/Child.vue",
									"sha256": "2265ba3dd4454787f6b9f3c5c44e6ad46bc1e5937b32d67ffa56391658e59d59",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamDictCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictCascader } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDictCascaderBasicChildExample' });\nconst value = ref(null);\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictCascader/basic/js/provider.js",
									"sha256": "c4dd208add177b01abaf143035de2c9f40b6b1909112a86928d9dc242f2b8de6",
									"source": "export const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: '准备',\n\t\t\t\t\tvalue: 'ready',\n\t\t\t\t\tchildren: [{ label: '就绪', value: 'available' }]\n\t\t\t\t},\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "complete-tree",
					"title": "完整树、对象多选与失败恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/complete-tree/ts/Demo.vue",
									"sha256": "1d0208da75b03b45815ffe4b990d5f10bf806cf33625b1d6bd77006264c056a3",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCascaderCompleteTreeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/complete-tree/ts/Child.vue",
									"sha256": "54ffe653e39424ded6498d66a123a4d500d74ecc719c4cd39c5836204e5fc8d3",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\t:props=\"{ expandTrigger: 'click' }\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamDictCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\">取消慢请求</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取勾选节点</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\">清空模型</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCascaderCompleteTreeChild' });\nimport { inject, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictCascader } from '@asam-ui/ui';\nimport type {\n\tAsamCascaderDataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamDictCascaderExpose,\n\tAsamOption\n} from '@asam-ui/ui';\nimport type { Member, DemoState } from './provider.js';\nconst state = inject<DemoState>('complete-tree-demo');\nif (!state) throw new Error('演示 provider 尚未安装');\nconst { active, failure, slow } = state;\nconst value = ref<readonly AsamOption<string, Member>[]>([]);\nconst control = ref<AsamDictCascaderExpose<string, Member>>();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\ntype DataEmits = AsamCascaderDataEmits<AsamValue, object>;\nconst events = ref<readonly { readonly name: string; readonly payload: unknown }[]>([]);\nfunction recordEvent(name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0]) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0]) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictCascader/complete-tree/ts/provider.ts",
									"sha256": "355ae023f9cf083a45208751b21b5e4321d19687027d56e35225cddcae64915f",
									"source": "import { ref } from 'vue';\nimport type { AsamDictEntry, AsamDataProvider } from '@asam-ui/ui';\nexport interface Member extends AsamDictEntry {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/complete-tree/js/Demo.vue",
									"sha256": "9476025c64bb32421c3def9be8883ad46b22342f46748ec719d439509955863b",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictCascaderCompleteTreeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/complete-tree/js/Child.vue",
									"sha256": "72042b643b27047bddf5a88a36f474f3dec2f3349a300d5739623ea1677e2bb3",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\t:props=\"{ expandTrigger: 'click' }\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamDictCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\">取消慢请求</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取勾选节点</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\">清空模型</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictCascaderCompleteTreeChild' });\nimport { inject, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictCascader } from '@asam-ui/ui';\nconst state = inject('complete-tree-demo');\nif (!state) throw new Error('演示 provider 尚未安装');\nconst { active, failure, slow } = state;\nconst value = ref([]);\nconst control = ref();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\nconst events = ref([]);\nfunction recordEvent(name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictCascader/complete-tree/js/provider.js",
									"sha256": "6d8de77c40d9a9ca4c4e22a9d2345f946e6b5b826d2267e7d2ff830619408fd1",
									"source": "import { ref } from 'vue';\nexport const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "native-tree-presentation",
					"title": "父子显示、标签和虚拟滚动",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/native-tree-presentation/ts/Demo.vue",
									"sha256": "a6e40cd0f6289acd45dfae4882b5e557eab46f99229067deab7461685f3837e2",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCascaderNativeTreePresentationDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/native-tree-presentation/ts/Child.vue",
									"sha256": "288211eca5dfba3a3e21e0acca3a186d3dab8d96855d8b754f0ebcc033141ea4",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"parentStrategy = !parentStrategy\"\n\t\t\t>\n\t\t\t\t切换父子显示策略\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"virtual = !virtual\"\n\t\t\t\t>切换级联虚拟滚动</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = 360\"\n\t\t\t\t>固定搜索宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = true\"\n\t\t\t\t>搜索与输入同宽</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = false\"\n\t\t\t\t>搜索自然宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\t:props=\"{ checkStrictly: strict, expandTrigger: 'click' }\"\n\t\t\t:show-checked-strategy=\"parentStrategy ? 'parent' : 'child'\"\n\t\t\t:virtual-scroll=\"virtual\"\n\t\t\t:height=\"180\"\n\t\t\t:item-size=\"30\"\n\t\t\t:fit-input-width=\"fitWidth\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t\t<span data-testid=\"tree-presentation-suggestion\">\n\t\t\t\t\t{{ item.text }} 完整树搜索结果\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag(data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictCascader>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\tparentStrategy,\n\t\t\t\tvirtual,\n\t\t\t\tfitWidth,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue';\nimport { AsamButton, AsamDictCascader } from '@asam-ui/ui';\nimport type { AsamDictCascaderExpose } from '@asam-ui/ui';\nimport type { DemoState, Member } from './provider.js';\nconst state = inject<DemoState>('complete-tree-demo');\nif (!state) throw new Error('Demo.vue must install its local dict provider');\nvoid state;\ndefineOptions({ name: 'AsamDictCascaderNativeTreePresentationChild' });\nconst control = ref<AsamDictCascaderExpose<string, Member>>();\nconst value = ref<readonly string[]>(['alpha', 'beta']);\nconst removed = ref<unknown[]>([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst parentStrategy = ref(false);\nconst virtual = ref(true);\nconst fitWidth = ref<boolean | number>(360);\nconst checkedKeys = ref<unknown[]>([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedNodes(false)?.map((node) => node.value) ?? [];\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictCascader/native-tree-presentation/ts/provider.ts",
									"sha256": "fa0f01b7304fa0776f7179bf5139ca0c5042863c4595d8f03c7dc52114edd0b2",
									"source": "import { ref } from 'vue';\nimport type { AsamDictEntry, AsamDataProvider } from '@asam-ui/ui';\nexport interface Member extends AsamDictEntry {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/native-tree-presentation/js/Demo.vue",
									"sha256": "7c161331bf2c40b661b4bd835d0a2d379505df60e89318588dc45c7b9ea4717e",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictCascaderNativeTreePresentationDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/native-tree-presentation/js/Child.vue",
									"sha256": "8608ac397518038f7db7943735c17a1da0ac94caeb3d782748b54efac9f940a7",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton\n\t\t\t type=\"default\"\n\t\t\t\tnative-type=\"button\"\n\t\t\t\t@click=\"parentStrategy = !parentStrategy\"\n\t\t\t>\n\t\t\t\t切换父子显示策略\n\t\t\t</AsamButton>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"virtual = !virtual\"\n\t\t\t\t>切换级联虚拟滚动</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = 360\"\n\t\t\t\t>固定搜索宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = true\"\n\t\t\t\t>搜索与输入同宽</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"fitWidth = false\"\n\t\t\t\t>搜索自然宽度</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\t:props=\"{ checkStrictly: strict, expandTrigger: 'click' }\"\n\t\t\t:show-checked-strategy=\"parentStrategy ? 'parent' : 'child'\"\n\t\t\t:virtual-scroll=\"virtual\"\n\t\t\t:height=\"180\"\n\t\t\t:item-size=\"30\"\n\t\t\t:fit-input-width=\"fitWidth\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #suggestion-item=\"{ item }\">\n\t\t\t\t<span data-testid=\"tree-presentation-suggestion\">\n\t\t\t\t\t{{ item.text }} 完整树搜索结果\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"disabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag(data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictCascader>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\tparentStrategy,\n\t\t\t\tvirtual,\n\t\t\t\tfitWidth,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { inject, ref } from 'vue';\nimport { AsamButton, AsamDictCascader } from '@asam-ui/ui';\nconst state = inject('complete-tree-demo');\nif (!state) throw new Error('Demo.vue must install its local dict provider');\nvoid state;\ndefineOptions({ name: 'AsamDictCascaderNativeTreePresentationChild' });\nconst control = ref();\nconst value = ref(['alpha', 'beta']);\nconst removed = ref([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst parentStrategy = ref(false);\nconst virtual = ref(true);\nconst fitWidth = ref(360);\nconst checkedKeys = ref([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedNodes(false)?.map((node) => node.value) ?? [];\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictCascader/native-tree-presentation/js/provider.js",
									"sha256": "07540f9772c55dcbd1d5b37ecabdc35b86e5855c132beb6b9ba3b0b1ccc31da1",
									"source": "import { ref } from 'vue';\nexport const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/local-error/ts/Demo.vue",
									"sha256": "6ab7c4fba2283f518c3e510b1ed6fb04698a8521d8f57a66249670ef679d6e86",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCascaderDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictCascader-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/local-error/ts/Child.vue",
									"sha256": "ef161cbba2828240de4332142c19885def51689a4b824344a3bc686bb755d108",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictCascaderChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictCascader, defineAsamDictSource } from '@asam-ui/ui';\nimport type { AsamRemoteCascaderExpose, AsamCascaderDataSlots } from '@asam-ui/ui';\nimport type { Transport } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamRemoteCascaderExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamCascaderDataSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDictCascader/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/local-error/js/Demo.vue",
									"sha256": "ec704136e99374a5b7d2ed429274703b541a44fbfc6d175ac1779df9b9d0547b",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictCascaderDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictCascader-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictCascader/local-error/js/Child.vue",
									"sha256": "f0730e65f0e255460095bad7000010c8cf74b10a05acc8a1643cc5b9cce53aae",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictCascader\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictCascader>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictCascaderChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictCascader, defineAsamDictSource } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDictCascader/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "AsamDictTreeSelect",
			"documentation": "/component-AsamDictTreeSelect.html",
			"demos": [
				{
					"id": "basic",
					"title": "本地字典与生命周期",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/basic/ts/Demo.vue",
									"sha256": "caadb63a27d57ac4956fa2d78730d5f56a9f8d379e422213db8c7c88b024873c",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictTreeSelectBasicDemoExample' });\n\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/basic/ts/Child.vue",
									"sha256": "6fda7e1442a39868ca2aa869adf3a01aa856f76f641ed96794510e5f4539fa85",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamDictTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictTreeSelect } from '@asam-ui/ui';\nimport type { AsamDictTreeSelectExpose, AsamDictEntry } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDictTreeSelectBasicChildExample' });\nconst value = ref<string | null>(null);\nconst active = ref(true);\nconst control = ref<AsamDictTreeSelectExpose<string, AsamDictEntry>>();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/basic/ts/provider.ts",
									"sha256": "baec908f8f9054f02d7cab65743d13f3ed59b9aec678b01c17b69c69fb90f597",
									"source": "import type { AsamDataProvider } from '@asam-ui/ui';\n\nexport const provider: AsamDataProvider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: '准备',\n\t\t\t\t\tvalue: 'ready',\n\t\t\t\t\tchildren: [{ label: '就绪', value: 'available' }]\n\t\t\t\t},\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/basic/js/Demo.vue",
									"sha256": "293f5706d7cdc7d77a48ef30f8803297edd8fff7ae66ef839ef635d427233289",
									"source": "<template>\n\t<div ref=\"host\" />\n</template>\n\n<script setup>\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { provider } from './provider.js';\n\ndefineOptions({ name: 'AsamDictTreeSelectBasicDemoExample' });\n\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tapp = createApp(Child);\n\tprovideAsamData(app, provider, { scope: 'doc-status' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/basic/js/Child.vue",
									"sha256": "f18cab522b620301389e16746477bbeeb8cf41567997d2466546eefdfba8a5c7",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"doc-status\"\n\t\t\t:active=\"active\"\n\t\t\tsize=\"default\"\n\t\t\tplaceholder=\"请选择或输入\"\n\t\t\t@error=\"error = $event.message\"\n\t\t\t@success=\"error = ''\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">{{ option?.label ?? data.label }}</template>\n\t\t</AsamDictTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"control?.cancel()\"\n\t\t\t>取消请求</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\">{{ result }} {{ error }}</p>\n\t\t<pre>{{ value }}</pre>\n\t</section>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictTreeSelect } from '@asam-ui/ui';\n\ndefineOptions({ name: 'AsamDictTreeSelectBasicChildExample' });\nconst value = ref(null);\nconst active = ref(true);\nconst control = ref();\nconst error = ref('');\nconst result = ref('');\nasync function reload() {\n\tconst response = await control.value?.reload({ force: true });\n\tresult.value = response?.status ?? 'cancelled';\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/basic/js/provider.js",
									"sha256": "c4dd208add177b01abaf143035de2c9f40b6b1909112a86928d9dc242f2b8de6",
									"source": "export const provider = {\n\tdict: {\n\t\tasync refresh(context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t},\n\t\tasync get(dictType, context) {\n\t\t\tcontext.signal.throwIfAborted();\n\t\t\tif (dictType !== 'doc-status') throw new Error('未知演示字典');\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: '准备',\n\t\t\t\t\tvalue: 'ready',\n\t\t\t\t\tchildren: [{ label: '就绪', value: 'available' }]\n\t\t\t\t},\n\t\t\t\t{ label: '进行', value: 'running' }\n\t\t\t];\n\t\t}\n\t}\n};\n"
								}
							]
						}
					]
				},
				{
					"id": "complete-tree",
					"title": "完整树、对象多选与失败恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/complete-tree/ts/Demo.vue",
									"sha256": "365fb3094bd54765339e378cd589fe4d80d36eb9b8c6c57aa59dd40d5cd29cf0",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictTreeSelectCompleteTreeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/complete-tree/ts/Child.vue",
									"sha256": "b07dc330619f7caa4505971d537af7c48af0b736cc968b22bbca3992ac2a0ba3",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tshow-checkbox\n\t\t\t:render-after-expand=\"false\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamDictTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\">取消慢请求</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取勾选节点</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\">清空模型</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictTreeSelectCompleteTreeChild' });\nimport { inject, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictTreeSelect } from '@asam-ui/ui';\nimport type {\n\tAsamTreeSelectDataEmits,\n\tAsamValue,\n\tAsamDataError,\n\tAsamDictTreeSelectExpose,\n\tAsamOption\n} from '@asam-ui/ui';\nimport type { Member, DemoState } from './provider.js';\nconst state = inject<DemoState>('complete-tree-demo');\nif (!state) throw new Error('演示 provider 尚未安装');\nconst { active, failure, slow } = state;\nconst value = ref<readonly AsamOption<string, Member>[]>([]);\nconst control = ref<AsamDictTreeSelectExpose<string, Member>>();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\ntype DataEmits = AsamTreeSelectDataEmits<AsamValue, object>;\nconst events = ref<readonly { readonly name: string; readonly payload: unknown }[]>([]);\nfunction recordEvent(name: string, payload: unknown) {\n\tconst snapshot: unknown = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload: DataEmits['update:modelValue'][0]) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload: DataEmits['change'][0]) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload: DataEmits['success'][0]) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload: AsamDataError) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/complete-tree/ts/provider.ts",
									"sha256": "355ae023f9cf083a45208751b21b5e4321d19687027d56e35225cddcae64915f",
									"source": "import { ref } from 'vue';\nimport type { AsamDictEntry, AsamDataProvider } from '@asam-ui/ui';\nexport interface Member extends AsamDictEntry {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/complete-tree/js/Demo.vue",
									"sha256": "a41508b7e352b5ea15f9d01a7f164a85ef18e2075c4c61ff5b8ce7c5feef93d9",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictTreeSelectCompleteTreeDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/complete-tree/js/Child.vue",
									"sha256": "cf8f0cc714182be4996ca89f3cc3f425a85bffcdfc79375e6d1fecfb8fe3fa39",
									"source": "<template>\n\t<section class=\"data-demo demo-spacing-1\">\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"active\">启用请求</AsamCheckboxItem>\n\t\t<!-- prettier-ignore -->\n\t\t<AsamCheckboxItem v-model=\"failure\">模拟接口失败</AsamCheckboxItem>\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tvalue-mode=\"object\"\n\t\t\t:active=\"active\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tshow-checkbox\n\t\t\t:render-after-expand=\"false\"\n\t\t\tplaceholder=\"选择成员\"\n\t\t\tsize=\"default\"\n\t\t\t@update:model-value=\"onModelUpdate\"\n\t\t\t@change=\"onModelChange\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t>\n\t\t\t<template #default=\"{ option, data }\">\n\t\t\t\t<span :data-member=\"option?.raw.id\">{{ data.label }}</span>\n\t\t\t</template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"hierarchy-header\">完整组织树</p></template>\n\t\t\t<template #footer><p class=\"example-paragraph\" data-testid=\"hierarchy-footer\">冻结成员不能勾选</p></template>\n\t\t</AsamDictTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"!active\" @click=\"reload\"\n\t\t\t>强制重载</AsamButton\n\t\t>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"cancelSlow\">取消慢请求</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\">读取勾选节点</AsamButton>\n\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = []\">清空模型</AsamButton>\n\t\t<p class=\"example-paragraph\" role=\"status\">结果：{{ result }}；成功次数：{{ successes }}；{{ error }}</p>\n\t\t<pre data-testid=\"tree-model\">{{ JSON.stringify(value) }}</pre>\n\t\t<pre data-testid=\"checked-count\">{{ checkedCount }}</pre>\n\t\t<pre data-testid=\"hierarchy-data-events\">{{ JSON.stringify(events) }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictTreeSelectCompleteTreeChild' });\nimport { inject, ref } from 'vue';\nimport { AsamCheckboxItem, AsamButton, AsamDictTreeSelect } from '@asam-ui/ui';\nconst state = inject('complete-tree-demo');\nif (!state) throw new Error('演示 provider 尚未安装');\nconst { active, failure, slow } = state;\nconst value = ref([]);\nconst control = ref();\nconst result = ref('');\nconst successes = ref(0);\nconst error = ref('');\nconst checkedCount = ref(0);\nconst events = ref([]);\nfunction recordEvent(name, payload) {\n\tconst snapshot = JSON.parse(JSON.stringify(payload));\n\tevents.value = [...events.value, { name, payload: snapshot }];\n}\nfunction onModelUpdate(payload) {\n\trecordEvent('update:modelValue', payload);\n}\nfunction onModelChange(payload) {\n\trecordEvent('change', payload);\n}\nfunction onSuccess(payload) {\n\trecordEvent('success', payload);\n\tsuccesses.value++;\n\terror.value = '';\n}\nfunction onError(payload) {\n\trecordEvent('error', { kind: payload.kind, message: payload.message });\n\terror.value = payload.message;\n}\nasync function reload() {\n\tresult.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';\n}\nasync function cancelSlow() {\n\tslow.value = true;\n\tconst pending = control.value?.reload({ force: true });\n\tsetTimeout(() => control.value?.cancel(), 30);\n\tresult.value = (await pending)?.status ?? 'cancelled';\n\tslow.value = false;\n}\nfunction inspect() {\n\tcheckedCount.value = control.value?.getCheckedNodes(false)?.length ?? 0;\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/complete-tree/js/provider.js",
									"sha256": "6d8de77c40d9a9ca4c4e22a9d2345f946e6b5b826d2267e7d2ff830619408fd1",
									"source": "import { ref } from 'vue';\nexport const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "native-tree-presentation",
					"title": "父级选择、标签和树实例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/native-tree-presentation/ts/Demo.vue",
									"sha256": "513481720c9f85a443e7aadb50017eb27b80ed42a7e8b0e236015f9264924aa9",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictTreeSelectNativeTreePresentationDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/native-tree-presentation/ts/Child.vue",
									"sha256": "28332834a7b1df784ae473534924da5b8479e5164acbbdbe10e8ec148946a013",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearChecked\"\n\t\t\t\t>清空实例勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(false)\"\n\t\t\t\t>仅勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(true)\"\n\t\t\t\t>深层勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkDefault\"\n\t\t\t\t>默认深度勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkData\"\n\t\t\t\t>按节点数据深层勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkAbsent\"\n\t\t\t\t>勾选不存在的数字键</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"uncheckData\"\n\t\t\t\t>按节点数据递归取消勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\tshow-checkbox\n\t\t\t:check-strictly=\"strict\"\n\t\t\t:check-on-click-node=\"false\"\n\t\t\t:render-after-expand=\"false\"\n\t\t\t:popper-style=\"{ minWidth: '360px' }\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-if=\"option?.value === 'team'\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click.stop=\"rememberNode(data)\"\n\t\t\t\t>\n\t\t\t\t\t记住父节点键\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag, selectDisabled }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"selectDisabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictTreeSelect>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\thalfCheckedKeys,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\nimport { inject, ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDictTreeSelect } from '@asam-ui/ui';\nimport type { AsamDictTreeSelectExpose } from '@asam-ui/ui';\nimport type { DemoState, Member } from './provider.js';\nconst state = inject<DemoState>('complete-tree-demo');\nif (!state) throw new Error('Demo.vue must install its local dict provider');\nvoid state;\ndefineOptions({ name: 'AsamDictTreeSelectNativeTreePresentationChild' });\nconst control = ref<AsamDictTreeSelectExpose<string, Member>>();\nconst value = ref<readonly string[]>(['alpha', 'beta']);\nconst removed = ref<unknown[]>([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst checkedKeys = ref<unknown[]>([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedKeys(false) ?? [];\n\thalfCheckedKeys.value = control.value?.getHalfCheckedKeys() ?? [];\n}\nconst parentKey = ref<string | number>();\nconst parentData = shallowRef<Record<string, unknown>>();\nconst halfCheckedKeys = ref<unknown[]>([]);\nfunction rememberKey(key: unknown) {\n\tif (typeof key !== 'string' && typeof key !== 'number')\n\t\tthrow new Error('Expected public native node key');\n\tparentKey.value = key;\n}\nfunction rememberNode(data: Record<string, unknown>) {\n\trememberKey(data.value);\n\tparentData.value = data;\n}\nfunction clearChecked() {\n\tcontrol.value?.setCheckedKeys([], false);\n\tinspect();\n}\nfunction checkParent(deep: boolean) {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true, deep);\n\tinspect();\n}\nfunction checkDefault() {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true);\n\tinspect();\n}\nfunction checkData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, true, true);\n\tinspect();\n}\nfunction uncheckData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, false, true);\n\tinspect();\n}\nfunction checkAbsent() {\n\tcontrol.value?.setChecked(999, true, true);\n\tinspect();\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.ts",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/native-tree-presentation/ts/provider.ts",
									"sha256": "fa0f01b7304fa0776f7179bf5139ca0c5042863c4595d8f03c7dc52114edd0b2",
									"source": "import { ref } from 'vue';\nimport type { AsamDictEntry, AsamDataProvider } from '@asam-ui/ui';\nexport interface Member extends AsamDictEntry {\n\treadonly id: string;\n\treadonly label: string;\n\treadonly value: string;\n\treadonly disabled?: boolean;\n\treadonly children?: readonly Member[];\n}\nexport const members: readonly Member[] = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport type DemoState = ReturnType<typeof createDemoState>;\nexport function createDemoProvider(state: DemoState): AsamDataProvider {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise<void>((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/native-tree-presentation/js/Demo.vue",
									"sha256": "33613b9e44178b53bf4612b051a9743c8f27444860b592f31e9015b3324bc03a",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictTreeSelectNativeTreePresentationDemo' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createDemoState, createDemoProvider } from './provider.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst state = createDemoState();\n\tapp = createApp(Child);\n\tapp.provide('complete-tree-demo', state);\n\tprovideAsamData(app, createDemoProvider(state), { scope: 'complete-tree-demo' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/native-tree-presentation/js/Child.vue",
									"sha256": "d29b465aed817363687220c30bdfbfc7d549d8e88074996fc3ec5b199331931e",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<div class=\"demo-spacing-2\">\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"customTag = !customTag\"\n\t\t\t\t>切换树自定义标签</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"disabled = !disabled\"\n\t\t\t\t>切换树禁用</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"strict = !strict\"\n\t\t\t\t>切换父级独立选择</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"clearChecked\"\n\t\t\t\t>清空实例勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(false)\"\n\t\t\t\t>仅勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkParent(true)\"\n\t\t\t\t>深层勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkDefault\"\n\t\t\t\t>默认深度勾选父节点</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkData\"\n\t\t\t\t>按节点数据深层勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"checkAbsent\"\n\t\t\t\t>勾选不存在的数字键</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"uncheckData\"\n\t\t\t\t>按节点数据递归取消勾选</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"value = ['alpha', 'beta']\"\n\t\t\t\t>恢复树模型</AsamButton\n\t\t\t>\n\t\t\t<AsamButton type=\"default\" native-type=\"button\" @click=\"inspect\"\n\t\t\t\t>读取树勾选键</AsamButton\n\t\t\t>\n\t\t</div>\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\tdict-type=\"regions\"\n\t\t\tmultiple\n\t\t\tcollapse-tags\n\t\t\tcollapse-tags-tooltip\n\t\t\t:max-collapse-tags=\"1\"\n\t\t\t:disabled=\"disabled\"\n\t\t\tclearable\n\t\t\tfilterable\n\t\t\t:teleported=\"false\"\n\t\t\tstyle=\"width: 280px\"\n\t\t\tpopper-class=\"data009-tree-presentation-popper\"\n\t\t\tplaceholder=\"高级树展示\"\n\t\t\tshow-checkbox\n\t\t\t:check-strictly=\"strict\"\n\t\t\t:check-on-click-node=\"false\"\n\t\t\t:render-after-expand=\"false\"\n\t\t\t:popper-style=\"{ minWidth: '360px' }\"\n\t\t\t@remove-tag=\"removed.push($event)\"\n\t\t>\n\t\t\t<template #prefix><span data-testid=\"tree-presentation-prefix\">树前缀</span></template>\n\t\t\t<template #header><p class=\"example-paragraph\" data-testid=\"tree-presentation-header\">完整层级来源</p></template>\n\t\t\t<template #footer>\n\t\t\t\t<p class=\"example-paragraph\" data-testid=\"tree-presentation-footer\">禁用项保持禁用</p>\n\t\t\t</template>\n\t\t\t<template #empty><p class=\"example-paragraph\" data-testid=\"tree-presentation-empty\">未找到树节点</p></template>\n\t\t\t<template #default=\"{ data, node, option }\">\n\t\t\t\t<span\n\t\t\t\t\t:data-tree-presentation-key=\"data.value\"\n\t\t\t\t\t:data-leaf=\"node.isLeaf\"\n\t\t\t\t\t:data-original-id=\"option?.raw.id\"\n\t\t\t\t>\n\t\t\t\t\t{{ data.label }}\n\t\t\t\t</span>\n\t\t\t\t<AsamButton\n\t\t\t\t type=\"default\"\n\t\t\t\t\tv-if=\"option?.value === 'team'\"\n\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t@click.stop=\"rememberNode(data)\"\n\t\t\t\t>\n\t\t\t\t\t记住父节点键\n\t\t\t\t</AsamButton>\n\t\t\t</template>\n\n\t\t\t<template v-if=\"customTag\" #tag=\"{ data, deleteTag, selectDisabled }\">\n\t\t\t\t<div data-testid=\"tree-presentation-tag\">\n\t\t\t\t\t<span>已选 {{ data.length }} 项</span>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"selectDisabled || !data.length\"\n\t\t\t\t\t\t@click=\"deleteTag($event, data[0])\"\n\t\t\t\t\t>\n\t\t\t\t\t\t删除树首个标签\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictTreeSelect>\n\t\t<pre data-testid=\"tree-presentation-state\">{{\n\t\t\tJSON.stringify({\n\t\t\t\tvalue,\n\t\t\t\tremoved,\n\t\t\t\tstrict,\n\t\t\t\tdisabled,\n\t\t\t\tcustomTag,\n\t\t\t\thalfCheckedKeys,\n\t\t\t\tcheckedKeys\n\t\t\t})\n\t\t}}</pre>\n\t</section>\n</template>\n<script setup>\nimport { inject, ref, shallowRef } from 'vue';\nimport { AsamButton, AsamDictTreeSelect } from '@asam-ui/ui';\nconst state = inject('complete-tree-demo');\nif (!state) throw new Error('Demo.vue must install its local dict provider');\nvoid state;\ndefineOptions({ name: 'AsamDictTreeSelectNativeTreePresentationChild' });\nconst control = ref();\nconst value = ref(['alpha', 'beta']);\nconst removed = ref([]);\nconst strict = ref(false);\nconst disabled = ref(false);\nconst customTag = ref(false);\nconst checkedKeys = ref([]);\nfunction inspect() {\n\tcheckedKeys.value = control.value?.getCheckedKeys(false) ?? [];\n\thalfCheckedKeys.value = control.value?.getHalfCheckedKeys() ?? [];\n}\nconst parentKey = ref();\nconst parentData = shallowRef();\nconst halfCheckedKeys = ref([]);\nfunction rememberKey(key) {\n\tif (typeof key !== 'string' && typeof key !== 'number')\n\t\tthrow new Error('Expected public native node key');\n\tparentKey.value = key;\n}\nfunction rememberNode(data) {\n\trememberKey(data.value);\n\tparentData.value = data;\n}\nfunction clearChecked() {\n\tcontrol.value?.setCheckedKeys([], false);\n\tinspect();\n}\nfunction checkParent(deep) {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true, deep);\n\tinspect();\n}\nfunction checkDefault() {\n\tif (parentKey.value === undefined) throw new Error('Tree source has not settled');\n\tcontrol.value?.setChecked(parentKey.value, true);\n\tinspect();\n}\nfunction checkData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, true, true);\n\tinspect();\n}\nfunction uncheckData() {\n\tif (!parentData.value) throw new Error('Tree node data missing');\n\tcontrol.value?.setChecked(parentData.value, false, true);\n\tinspect();\n}\nfunction checkAbsent() {\n\tcontrol.value?.setChecked(999, true, true);\n\tinspect();\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n.demo-spacing-2 {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "provider.js",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/native-tree-presentation/js/provider.js",
									"sha256": "07540f9772c55dcbd1d5b37ecabdc35b86e5855c132beb6b9ba3b0b1ccc31da1",
									"source": "import { ref } from 'vue';\nexport const members = [\n\t{\n\t\tid: 'team',\n\t\tlabel: '研发组',\n\t\tvalue: 'team',\n\t\tchildren: [\n\t\t\t{ id: 'alpha', label: 'Alpha', value: 'alpha' },\n\t\t\t{ id: 'frozen', label: '冻结成员', value: 'frozen', disabled: true },\n\t\t\t{ id: 'beta', label: 'Beta', value: 'beta' }\n\t\t]\n\t},\n\t{\n\t\tid: 'large',\n\t\tlabel: '大型分组',\n\t\tvalue: 'large',\n\t\tchildren: Array.from({ length: 200 }, (_, index) => ({\n\t\t\tid: 'member-' + index,\n\t\t\tlabel: '成员 ' + index,\n\t\t\tvalue: 'member-' + index\n\t\t}))\n\t}\n];\nexport function createDemoState() {\n\treturn { active: ref(true), failure: ref(false), slow: ref(false) };\n}\nexport function createDemoProvider(state) {\n\treturn {\n\t\tdict: {\n\t\t\tasync refresh(context) {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t},\n\t\t\tasync get(type, context) {\n\t\t\t\tawait new Promise((done) => setTimeout(done, state.slow.value ? 500 : 100));\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\tif (state.failure.value) throw new Error('演示完整树字典失败');\n\t\t\t\tif (type !== 'regions') throw new Error('未知演示字典');\n\t\t\t\treturn members;\n\t\t\t}\n\t\t}\n\t};\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "local-error",
					"title": "局部错误定制、等待重试与过期恢复",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/local-error/ts/Demo.vue",
									"sha256": "b7b618b6afcf40402f2cf42290104a0a02c3204c626d586380a0f862fe611be3",
									"source": "<template><div ref=\"host\" /></template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictTreeSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport type { App } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref<HTMLElement>();\nlet app: App | undefined;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictTreeSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/local-error/ts/Child.vue",
									"sha256": "bbc6d3a8627bda2973b619205ecc361a88833d00fe431c26dfc9ccc2ff732b91",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script lang=\"ts\" setup>\ndefineOptions({ name: 'AsamDictTreeSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictTreeSelect, defineAsamDictSource } from '@asam-ui/ui';\nimport type { AsamRemoteTreeSelectExpose, AsamTreeSelectDataSlots } from '@asam-ui/ui';\nimport type { Transport } from './transport.js';\n\nconst props = defineProps<{ readonly transport: Transport }>();\nconst transport = props.transport;\nconst value = ref<string | null>(null);\nconst control = ref<AsamRemoteTreeSelectExpose<string, object>>();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(\n\tretry: Parameters<NonNullable<AsamTreeSelectDataSlots<string, object>['error']>>[0]['retry']\n) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.ts",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/local-error/ts/transport.ts",
									"sha256": "90fe0a679f9b051d1cefe27eb2a1af359e01a52df438a328e9a3c876714a6049",
									"source": "import { ref } from 'vue';\nimport type { AsamDataProvider } from '@asam-ui/ui';\nexport interface Item {\n\treadonly id: number;\n\treadonly value: string;\n\treadonly label: string;\n}\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t] satisfies readonly Item[];\n\t};\n\tconst provider: AsamDataProvider = {\n\t\tdict: {\n\t\t\tget: async (\n\t\t\t\t_type: string,\n\t\t\t\tcontext: Parameters<NonNullable<AsamDataProvider['dict']>['get']>[1]\n\t\t\t) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\nexport type Transport = ReturnType<typeof createTransport>;\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/local-error/js/Demo.vue",
									"sha256": "c1f6c544da392098d14e35f8149efe1011f541b12470dbb01b8f0a3a8cfa3697",
									"source": "<template><div ref=\"host\" /></template>\n<script setup>\ndefineOptions({ name: 'AsamDictTreeSelectDemoLocalErrorExample' });\nimport { createApp, onMounted, onBeforeUnmount, ref } from 'vue';\nimport { provideAsamData } from '@asam-ui/ui';\nimport Child from './Child.vue';\nimport { createTransport } from './transport.js';\nconst host = ref();\nlet app;\nonMounted(() => {\n\tif (!host.value) return;\n\tconst transport = createTransport();\n\tapp = createApp(Child, { transport });\n\tprovideAsamData(app, transport.provider, { scope: 'AsamDictTreeSelect-local-error' });\n\tapp.mount(host.value);\n});\nonBeforeUnmount(() => app?.unmount());\n</script>\n"
								},
								{
									"name": "Child.vue",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/local-error/js/Child.vue",
									"sha256": "b3eb2285a5925148e72a0528f6b55de113168f4d7edf72f134da7955c1b027e5",
									"source": "<template>\n\t<section class=\"demo-spacing-1\">\n\t\t<AsamDictTreeSelect\n\t\t\tref=\"control\"\n\t\t\tv-model=\"value\"\n\t\t\t:data-source=\"dataSource\"\n\t\t\t:immediate=\"false\"\n\t\t>\n\t\t\t<template #error=\"{ error, stale, retry }\">\n\t\t\t\t<div role=\"alert\" data-testid=\"local-error\">\n\t\t\t\t\t<p class=\"example-paragraph\">{{ error.message }}（{{ error.kind }}）</p>\n\t\t\t\t\t<p class=\"example-paragraph\" v-if=\"stale\">已保留上次成功结果。</p>\n\t\t\t\t\t<AsamButton\n\t\t\t\t\t type=\"default\"\n\t\t\t\t\t\tnative-type=\"button\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\t@click=\"recover(retry)\"\n\t\t\t\t\t>\n\t\t\t\t\t\t恢复并重试\n\t\t\t\t\t</AsamButton>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</AsamDictTreeSelect>\n\t\t<AsamButton type=\"default\" native-type=\"button\" :disabled=\"busy\" @click=\"failAgain\"\n\t\t\t>模拟更新失败</AsamButton\n\t\t>\n\t\t<p class=\"example-paragraph\" role=\"status\" data-testid=\"retry-result\">{{ result }}</p>\n\t\t<p class=\"example-paragraph\" data-testid=\"transport-count\">\n\t\t\t请求 {{ transport.calls.value }} 次，字典刷新 {{ transport.refreshes.value }} 次\n\t\t</p>\n\t\t<pre data-testid=\"local-model\">{{ value }}</pre>\n\t</section>\n</template>\n<script setup>\ndefineOptions({ name: 'AsamDictTreeSelectChildLocalErrorExample' });\nimport { ref, onMounted } from 'vue';\nimport { AsamButton, AsamDictTreeSelect, defineAsamDictSource } from '@asam-ui/ui';\n\nconst props = defineProps({ transport: { type: Object, required: true } });\nconst transport = props.transport;\nconst value = ref(null);\nconst control = ref();\nconst busy = ref(false),\n\tresult = ref('');\nconst dataSource = defineAsamDictSource({ dictType: 'local-error-status' });\nonMounted(async () => {\n\tconst response = await control.value?.reload();\n\tresult.value = response?.status ?? 'cancelled';\n});\nasync function recover(retry) {\n\tbusy.value = true;\n\ttransport.failing.value = false;\n\ttry {\n\t\tconst response = await retry();\n\t\tresult.value = response.status;\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\nasync function failAgain() {\n\tbusy.value = true;\n\ttransport.failing.value = true;\n\ttry {\n\t\tconst response = await control.value?.reload({ force: true });\n\t\tresult.value = response?.status ?? 'cancelled';\n\t} finally {\n\t\tbusy.value = false;\n\t}\n}\n</script>\n\n<style scoped>\n.demo-spacing-1 {\n\tdisplay: grid;\n\tgap: var(--asam-space-md);\n}\n</style>\n\n<style scoped>\np:where(.example-paragraph) {\n\tmargin-block: 16px;\n\tline-height: 1.8;\n\toverflow-wrap: anywhere;\n}\n</style>\n"
								},
								{
									"name": "transport.js",
									"sourcePath": "apps/website/examples/AsamDictTreeSelect/local-error/js/transport.js",
									"sha256": "d51b18b78212c5c65678925285897f2a9f7b1c9a6a1a21f34b19a8aa74266eb0",
									"source": "import { ref } from 'vue';\nexport function createTransport() {\n\tconst failing = ref(true),\n\t\tcalls = ref(0),\n\t\trefreshes = ref(0);\n\tconst api = async () => {\n\t\tcalls.value++;\n\t\tif (failing.value) throw Error('演示请求暂不可用');\n\t\treturn [\n\t\t\t{ id: 1, value: 'ready', label: '准备' },\n\t\t\t{ id: 2, value: 'running', label: '进行' }\n\t\t];\n\t};\n\tconst provider = {\n\t\tdict: {\n\t\t\tget: async (_type, context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\treturn api();\n\t\t\t},\n\t\t\trefresh: async (context) => {\n\t\t\t\tcontext.signal.throwIfAborted();\n\t\t\t\trefreshes.value++;\n\t\t\t}\n\t\t}\n\t};\n\treturn { failing, calls, refreshes, api, provider };\n}\n"
								}
							]
						}
					]
				}
			]
		},
		{
			"name": "Framework",
			"documentation": "/component-Framework.html",
			"demos": [
				{
					"id": "button",
					"title": "按钮与多文件示例",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/_framework/button/ts/Demo.vue",
									"sha256": "70058b432b9e61b34d1cf3c24169a5e3b8d54456a5becb74278cf92cdd5c4f20",
									"source": "<template>\n\t<div class=\"framework-button-example\">\n\t\t<CirclePlus aria-hidden=\"true\" width=\"20\" height=\"20\" />\n\t\t<AsamButton type=\"default\" @click=\"count++\">增加计数</AsamButton>\n\t\t<Status :count=\"count\" />\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport Status from './Status.vue';\nimport { CirclePlus } from '@asam-ui/icons-vue';\n\ndefineOptions({ name: 'FrameworkButtonDemo' });\n\nconst count = ref(0);\n</script>\n\n<style scoped>\n.framework-button-example {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-spacing-md, 16px);\n}\n</style>\n"
								},
								{
									"name": "Status.vue",
									"sourcePath": "apps/website/examples/_framework/button/ts/Status.vue",
									"sha256": "ad3858809ea41c1bb26e5921f4178ed2f6e709a9fc46cdf6e0606b2232ca2a16",
									"source": "<template>\n\t<output aria-live=\"polite\">{{ formatCount(count) }}</output>\n</template>\n\n<script lang=\"ts\" setup>\nimport { formatCount } from './data.js';\n\ndefineOptions({ name: 'FrameworkCountStatus' });\n\ndefineProps<{ count: number }>();\n</script>\n"
								},
								{
									"name": "data.ts",
									"sourcePath": "apps/website/examples/_framework/button/ts/data.ts",
									"sha256": "19be2c3098962ab7942ab0214732eca5bf09ee40a1180506b64bafd10fdf1137",
									"source": "export function formatCount(count: number): string {\n\treturn `当前计数：${count}`;\n}\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/_framework/button/js/Demo.vue",
									"sha256": "dc0b3c5a66bb4cdf8e076a975a677a2793e76efbf8e6cc3643b380790ecd3c7b",
									"source": "<template>\n\t<div class=\"framework-button-example\">\n\t\t<CirclePlus aria-hidden=\"true\" width=\"20\" height=\"20\" />\n\t\t<AsamButton type=\"default\" @click=\"count++\">增加计数</AsamButton>\n\t\t<Status :count=\"count\" />\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamButton } from '@asam-ui/ui';\nimport Status from './Status.vue';\nimport { CirclePlus } from '@asam-ui/icons-vue';\n\ndefineOptions({ name: 'FrameworkButtonDemo' });\n\nconst count = ref(0);\n</script>\n\n<style scoped>\n.framework-button-example {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: var(--asam-spacing-md, 16px);\n}\n</style>\n"
								},
								{
									"name": "Status.vue",
									"sourcePath": "apps/website/examples/_framework/button/js/Status.vue",
									"sha256": "b6c635786cdcf80c64937221301d21b1ba085d22b18565a038798e80dc3f59dd",
									"source": "<template>\n\t<output aria-live=\"polite\">{{ formatCount(count) }}</output>\n</template>\n\n<script setup>\nimport { formatCount } from './data.js';\n\ndefineOptions({ name: 'FrameworkCountStatus' });\n\ndefineProps({ count: { type: Number, required: true } });\n</script>\n"
								},
								{
									"name": "data.js",
									"sourcePath": "apps/website/examples/_framework/button/js/data.js",
									"sha256": "d662a3a74bf11d03fd10f3935c8be53a65f6db4cfc009b1a2a6a806e8df0a647",
									"source": "export function formatCount(count) {\n\treturn `当前计数：${count}`;\n}\n"
								}
							]
						}
					]
				},
				{
					"id": "input",
					"title": "输入与双向绑定",
					"variants": [
						{
							"language": "ts",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/_framework/input/ts/Demo.vue",
									"sha256": "3480528ad4787e392d20e1bb962705a7eb5fd02f38e8829c27e1cd3680b9baa7",
									"source": "<template>\n\t<div class=\"framework-input-example\">\n\t\t<label for=\"framework-input\">示例名称</label>\n\t\t<AsamInput\n\t\t\tid=\"framework-input\"\n\t\t\tv-model=\"value\"\n\t\t\tplaceholder=\"请输入名称\"\n\t\t\t:clearable=\"true\"\n\t\t/>\n\t\t<output aria-live=\"polite\">当前值：{{ value || '空' }}</output>\n\t</div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\n\ndefineOptions({ name: 'FrameworkInputDemo' });\n\nconst value = ref('ASAM');\n</script>\n\n<style scoped>\n.framework-input-example {\n\tdisplay: grid;\n\tgap: var(--asam-spacing-sm, 8px);\n\tmax-width: 320px;\n}\n</style>\n"
								}
							]
						},
						{
							"language": "js",
							"entry": "Demo.vue",
							"files": [
								{
									"name": "Demo.vue",
									"sourcePath": "apps/website/examples/_framework/input/js/Demo.vue",
									"sha256": "28dce4bdd82bfc01ed7ef9a6eb1b7fc96e98c143fc6d8b4b565bdd8fdc44988c",
									"source": "<template>\n\t<div class=\"framework-input-example\">\n\t\t<label for=\"framework-input\">示例名称</label>\n\t\t<AsamInput\n\t\t\tid=\"framework-input\"\n\t\t\tv-model=\"value\"\n\t\t\tplaceholder=\"请输入名称\"\n\t\t\t:clearable=\"true\"\n\t\t/>\n\t\t<output aria-live=\"polite\">当前值：{{ value || '空' }}</output>\n\t</div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AsamInput } from '@asam-ui/ui';\n\ndefineOptions({ name: 'FrameworkInputDemo' });\n\nconst value = ref('ASAM');\n</script>\n\n<style scoped>\n.framework-input-example {\n\tdisplay: grid;\n\tgap: var(--asam-spacing-sm, 8px);\n\tmax-width: 320px;\n}\n</style>\n"
								}
							]
						}
					]
				}
			]
		}
	]
}
