[stdf]Add JSDoc

demo/src/routes/en_US/actionSheet/+page.svelte

@@ -15,30 +15,7 @@
 	let visible11 = false;
 	let visible12 = false;
 
-	const actions = [{ content: 'Option one' }, { content: 'Option twoion two' }, { content: 'Option three' }];
-	const actions1 = [
-		{ content: 'Conventional option' },
-		{ content: 'Theme option', style: 'theme' },
-		{ content: 'Disable option', style: 'disabled' },
-		{ content: 'Warning option', style: 'danger' },
-	];
-	const actions2 = [
-		{ content: 'Option one' },
-		{ content: 'Option two', desc: 'Here is description information description information' },
-		{ content: 'Option three', style: 'Here is description information' },
-	];
-	const action3 = [
-		{ content: 'Fire girl', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
-		{ content: 'calf', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
-		{ content: 'water man', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
-	];
-	const action4 = [
-		{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },
-		{ content: 'Google', showImg: true, imgSrc: '/assets/logos/google.png', imgRadius: 'none' },
-		{ content: 'Microsoft', showImg: true, imgSrc: '/assets/logos/microsoft.png', imgRadius: 'none' },
-		{ content: 'Adobe', showImg: true, imgSrc: '/assets/logos/adobe.png', imgRadius: 'none' },
-		{ content: 'Figma', showImg: true, imgSrc: '/assets/logos/figma.png', imgRadius: 'none' },
-	];
+	const actions = [{ content: 'Option one' }, { content: 'Option two' }, { content: 'Option three' }];
 
 	let toastVisible1 = false;
 	let toastVisible2 = false;
@@ -60,10 +37,26 @@
 	<ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
 
 	<Cell title="Different styles" on:click={() => (visible3 = true)} />
-	<ActionSheet bind:visible={visible3} actions={actions1} />
+	<ActionSheet
+		bind:visible={visible3}
+		actions={[
+			{ content: 'Conventional option' },
+			{ content: 'Theme option', style: 'theme' },
+			{ content: 'Disable option', style: 'disabled' },
+			{ content: 'Warning option', style: 'danger' },
+		]}
+	/>
 
 	<Cell title="Title and description information" on:click={() => (visible4 = true)} />
-	<ActionSheet bind:visible={visible4} actions={actions2} title="This is the title, which can be briefly explained." />
+	<ActionSheet
+		bind:visible={visible4}
+		actions={[
+			{ content: 'Option one' },
+			{ content: 'Option two', desc: 'Here is description information description information' },
+			{ content: 'Option three', desc: 'Here is description information' },
+		]}
+		title="This is the title, which can be briefly explained."
+	/>
 
 	<Cell title="Come on the top" on:click={() => (visible5 = true)} />
 	<ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
@@ -87,8 +80,25 @@
 	<ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
 
 	<Cell title="Options with pictures" on:click={() => (visible11 = true)} />
-	<ActionSheet bind:visible={visible11} actions={action3} />
+	<ActionSheet
+		bind:visible={visible11}
+		actions={[
+			{ content: 'Fire girl', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
+			{ content: 'calf', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
+			{ content: 'water man', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
+		]}
+	/>
 
 	<Cell title="Option left" on:click={() => (visible12 = true)} />
-	<ActionSheet bind:visible={visible12} actions={action4} align="left" />
+	<ActionSheet
+		bind:visible={visible12}
+		actions={[
+			{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },
+			{ content: 'Google', showImg: true, imgSrc: '/assets/logos/google.png', imgRadius: 'none' },
+			{ content: 'Microsoft', showImg: true, imgSrc: '/assets/logos/microsoft.png', imgRadius: 'none' },
+			{ content: 'Adobe', showImg: true, imgSrc: '/assets/logos/adobe.png', imgRadius: 'none' },
+			{ content: 'Figma', showImg: true, imgSrc: '/assets/logos/figma.png', imgRadius: 'none' },
+		]}
+		align="left"
+	/>
 </div>

demo/src/routes/zh_CN/actionSheet/+page.svelte

@@ -16,29 +16,6 @@
 	let visible12 = false;
 
 	const actions = [{ content: '选项一' }, { content: '选项二' }, { content: '选项三' }];
-	const actions1 = [
-		{ content: '常规选项' },
-		{ content: '主题选项', style: 'theme' },
-		{ content: '禁用选项', style: 'disabled' },
-		{ content: '警告选项', style: 'danger' },
-	];
-	const actions2 = [
-		{ content: '选项一' },
-		{ content: '选项二', desc: '这里是描述信息' },
-		{ content: '选项三', style: 'danger', desc: '这里是描述信息' },
-	];
-	const action3 = [
-		{ content: '火女', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
-		{ content: '小牛', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
-		{ content: '水人', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
-	];
-	const action4 = [
-		{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },
-		{ content: 'Google', showImg: true, imgSrc: '/assets/logos/google.png', imgRadius: 'none' },
-		{ content: 'Microsoft', showImg: true, imgSrc: '/assets/logos/microsoft.png', imgRadius: 'none' },
-		{ content: 'Adobe', showImg: true, imgSrc: '/assets/logos/adobe.png', imgRadius: 'none' },
-		{ content: 'Figma', showImg: true, imgSrc: '/assets/logos/figma.png', imgRadius: 'none' },
-	];
 
 	let toastVisible1 = false;
 	let toastVisible2 = false;
@@ -60,10 +37,26 @@
 	<ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
 
 	<Cell title="不同样式" on:click={() => (visible3 = true)} />
-	<ActionSheet bind:visible={visible3} actions={actions1} />
+	<ActionSheet
+		bind:visible={visible3}
+		actions={[
+			{ content: '常规选项' },
+			{ content: '主题选项', style: 'theme' },
+			{ content: '禁用选项', style: 'disabled' },
+			{ content: '警告选项', style: 'danger' },
+		]}
+	/>
 
 	<Cell title="带标题和描述信息" on:click={() => (visible4 = true)} />
-	<ActionSheet bind:visible={visible4} actions={actions2} title="这里是标题，可以简要说明以下操作。" />
+	<ActionSheet
+		bind:visible={visible4}
+		actions={[
+			{ content: '选项一' },
+			{ content: '选项二', desc: '这里是描述信息' },
+			{ content: '选项三', style: 'danger', desc: '这里是描述信息' },
+		]}
+		title="这里是标题，可以简要说明以下操作。"
+	/>
 
 	<Cell title="顶部来点圆角" on:click={() => (visible5 = true)} />
 	<ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
@@ -87,8 +80,25 @@
 	<ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
 
 	<Cell title="选项带图片" on:click={() => (visible11 = true)} />
-	<ActionSheet bind:visible={visible11} actions={action3} />
+	<ActionSheet
+		bind:visible={visible11}
+		actions={[
+			{ content: '火女', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
+			{ content: '小牛', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
+			{ content: '水人', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
+		]}
+	/>
 
 	<Cell title="选项左对齐" on:click={() => (visible12 = true)} />
-	<ActionSheet bind:visible={visible12} actions={action4} align="left" />
+	<ActionSheet
+		bind:visible={visible12}
+		actions={[
+			{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },
+			{ content: 'Google', showImg: true, imgSrc: '/assets/logos/google.png', imgRadius: 'none' },
+			{ content: 'Microsoft', showImg: true, imgSrc: '/assets/logos/microsoft.png', imgRadius: 'none' },
+			{ content: 'Adobe', showImg: true, imgSrc: '/assets/logos/adobe.png', imgRadius: 'none' },
+			{ content: 'Figma', showImg: true, imgSrc: '/assets/logos/figma.png', imgRadius: 'none' },
+		]}
+		align="left"
+	/>
 </div>

packages/stdf/components/actionSheet/ActionSheet.svelte

@@ -12,40 +12,86 @@
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const actionSheetLang = currentLang.actionSheet;
 
-	// 是否显示
-	// Whether to show
+	/**
+	 * 是否显示
+	 * Whether to show
+	 * @type {Boolean}
+	 * @default false
+	 */
 	export let visible = false;
 
-	// 标题
-	// Title
+	/**
+	 * 标题
+	 * Title
+	 * @type {String}
+	 * @default ''
+	 */
 	export let title = '';
 
-	//标题对齐方式
-	//Title alignment
+	/**
+	 * 标题对齐方式
+	 * Title alignment
+	 * @type {'left'|'center'|'right'}
+	 * @default 'center'
+	 */
 	export let titleAlign = 'center';
 
-	// 菜单项，style有 normal、theme、danger、disabled
-	// Menu items, style has normal, theme, danger, disabled
+	/**
+	 * @typedef {Object} action
+	 * @property {string} content 选项文本
+	 * @property {Boolean} [showImg] 是否显示图片
+	 * @property {'normal'|'theme'|'danger'|'disabled'} [style] 选项样式
+	 * @property {string} [desc] 选项描述
+	 * @property {'none'|'base'|'full'|'lg'} [imgRadius] 图片圆角
+	 * @property {string} [imgSrc] 图片地址
+	 */
+
+	/**
+	 * 选项
+	 * Options
+	 * @type {Array<action>}
+	 * @default []
+	 */
 	export let actions = [];
 
-	// 弹出层参数
-	// Popup parameters
+	/**
+	 * 弹出层参数
+	 * Popup parameters
+	 * @type {Object}
+	 * @default {}
+	 */
 	export let popup = {};
 
-	// 是否显示取消选项。
-	// Whether to show the cancel option.
+	/**
+	 * 是否显示取消选项
+	 * Whether to show the cancel option
+	 * @type {Boolean}
+	 * @default false
+	 */
 	export let showCancel = false;
 
-	// 取消选项文本
-	// Cancel option text
+	/**
+	 * 取消选项文本
+	 * Cancel option text
+	 * @type {String}
+	 * @default Current language actionSheet.cancelText
+	 */
 	export let cancelText = actionSheetLang.cancelText;
 
-	// 点击选项是否关闭
-	// Click option to close
+	/**
+	 * 点击选项是否关闭
+	 * Click option to close
+	 * @type {Boolean}
+	 * @default true
+	 */
 	export let actionClosable = true;
 
-	// 对齐方式
-	// Alignment
+	/**
+	 * 对齐方式
+	 * Alignment
+	 * @type {'left'|'center'|'right'}
+	 * @default 'center'
+	 */
 	export let align = 'center';
 
 	// 标题对齐方式