[stdf]Add JSDoc. v0.4.2

packages/stdf/components/checkbox/Checkbox.svelte

@@ -2,28 +2,52 @@
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	// 标识符
-	// Identifier
+	/**
+	 * 标识符
+	 * Identifier
+	 * @type {string}
+	 * @default ''
+	 */
 	export let name = '';
 
-	// Checkbox 所在的 CheckboxGroup 内所有选定项标识符组成的数组
-	// Array of all selected identifiers in the CheckboxGroup
+	/**
+	 * Checkbox 所在的 CheckboxGroup 内所有选定项标识符组成的数组
+	 * Array of all selected identifiers in the CheckboxGroup
+	 * @type {string[]}
+	 * @default []
+	 */
 	export let checkeds = [];
 
-	// 选中状态是否由外部控制
-	// Whether the selected state is controlled by the outside
+	/**
+	 * 选中状态是否由外部控制
+	 * Whether the selected state is controlled by the outside
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let outControl = false;
 
-	// 选项内容区域位置
-	// Option content area position
+	/**
+	 * 选项内容区域位置
+	 * Option content area position
+	 * @type {'l' | 'r' | 't' | 'b'}
+	 * @default 'r'
+	 */
 	export let textPosition = 'r';
 
-	// 未选中选项图标区域内容
-	// Unselected option icon area content
+	/**
+	 * 未选中选项图标区域内容
+	 * Unselected option icon area content
+	 * @type {'none' | 'default' | Object}
+	 * @default 'default'
+	 */
 	export let icon = 'default';
 
-	// 选中选项图标区域内容
-	// Selected option icon area content
+	/**
+	 * 选中选项图标区域内容
+	 * Selected option icon area content
+	 * @type {'none' | 'default' | Object}
+	 * @default 'default'
+	 */
 	export let iconChecked = 'default';
 
 	// 父组件传过来的选定值
@@ -38,8 +62,10 @@
 	// Current selected value
 	$: currentChecked = outControl ? checkeds.includes(name) : $STDF_checkboxCheckedsStore.includes(name);
 
-	// 父组件传过来的排列方式
-	// Layout type passed from parent component
+	/**
+	 * 父组件传过来的排列方式
+	 * Layout type passed from parent component
+	 */
 	const STDF_checkboxLayoutStore = getContext('STDF_checkboxLayoutContext');
 
 	// 点击选项事件
@@ -63,7 +89,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={`${$STDF_checkboxLayoutStore === 'inline' ? 'inline-block' : 'flex'} grow active:opacity-80 ${
-		textPosition === 'l' && !$STDF_checkboxLayoutStore === 'v' ? 'justify-between' : ''
+		textPosition === 'l' && $STDF_checkboxLayoutStore != 'v' ? 'justify-between' : ''
 	} ${
 		textPosition === 'b' || textPosition === 't'
 			? 'flex-col items-center'

packages/stdf/components/checkbox/CheckboxGroup.svelte

@@ -6,8 +6,12 @@
 	// Define event dispatcher
 	const dispatch = createEventDispatcher();
 
-	// 排列方式，h水平 v垂直,inline行内
-	// layout type, h horizontal, v vertical, inline inline
+	/**
+	 * 排列方式
+	 * layout type
+	 * @type {'h' | 'v' | 'inline'}
+	 * @default 'v'
+	 */
 	export let layout = 'v';
 
 	// 选中的值

packages/stdf/components/icon/Icon.svelte

@@ -10,7 +10,7 @@
 	/**
 	 * 图标大小
 	 * Icon size
-	 * @type {number}
+	 * @type {number|string}
 	 * @default 24
 	 */
 	export let size = 24;

packages/stdf/components/noticeBar/NoticeBar.svelte

@@ -12,44 +12,83 @@
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const commonLang = currentLang.common;
 
-	// 通告内容组成的数组
-	// Array of notice content
+	/**
+	 * 通告内容组成的数组
+	 * Array of notice content
+	 * @type {string[]}
+	 */
 	export let textList = [];
 
-	//左侧内容
-	//Left content
+	/**
+	 * 左侧内容
+	 * Left content
+	 * @type {'slot'|'none'|object}
+	 * @default { name: 'ri-volume-down-line', size: 20, top: -1 }
+	 */
 	export let leftIcon = { name: 'ri-volume-down-line', size: 20, top: -1 };
 
-	//右侧内容，'close'/'arrow'/'none'
-	//Right content, 'close'/'arrow'/'none'
+	/**
+	 * 右侧内容
+	 * Right content
+	 * @type {'close'|'arrow'|'none'}
+	 * @default 'close'
+	 */
 	export let rightIcon = 'close';
 
-	// 通告字体大小
-	// Notice font size
+	/**
+	 * 通告字体大小
+	 * Notice font size
+	 * @type {'xs'|'sm'|'base'|'lg'}
+	 * @default 'sm'
+	 */
 	export let fontSize = 'sm';
 
-	// 通告间距
-	// Notice spacing
+	/**
+	 * 通告间距，单位是 px
+	 * Notice spacing, unit is px
+	 * @type {number}
+	 * @default 100
+	 */
 	export let space = 100;
 
-	// 横向滚动速度，单位是 px/s
-	// Horizontal scroll speed, unit is px/s
+	/**
+	 * 横向滚动速度，单位是 px/s
+	 * Horizontal scroll speed, unit is px/s
+	 * @type {number}
+	 * @default 30
+	 */
 	export let speed = 30;
 
-	// 是否垂直滚动
-	// Whether to scroll vertically
+	/**
+	 * 是否垂直滚动
+	 * Whether to scroll vertically
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let vertical = false;
 
-	// 垂直滚动过渡时间
-	// Vertical scroll transition time
+	/**
+	 * 垂直滚动过渡时间，单位是 ms
+	 * Vertical scroll transition time, unit is ms
+	 * @type {100|300|500|700|1000}
+	 * @default 500
+	 */
 	export let duration = 500;
 
-	// 垂直滚动间隔时间
-	// Vertical scroll interval time
+	/**
+	 * 垂直滚动间隔时间，单位是 s
+	 * Vertical scroll interval time，unit is s
+	 * @type {number}
+	 * @default 4
+	 */
 	export let interval = 4;
 
-	// 注入 CSS 名称
-	// Inject CSS name
+	/**
+	 * 注入 CSS 名称
+	 * Inject CSS name
+	 * @type {string}
+	 * @default ''
+	 */
 	export let injClass = '';
 
 	//如果 textList 不是数组给出中英文报错
@@ -64,12 +103,7 @@
 
 	// 字体大小样式
 	// Font size style
-	const fontSizeClass = {
-		xs: ' text-xs',
-		sm: ' text-sm',
-		base: ' text-base',
-		lg: ' text-lg',
-	};
+	const fontSizeClass = { xs: ' text-xs', sm: ' text-sm', base: ' text-base', lg: ' text-lg' };
 
 	// 动画时长样式
 	// Animation duration style
@@ -200,9 +234,9 @@
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div class={`${rightIcon === 'none' ? '' : 'pl-2 pr-4'}`} on:click={clickFun}>
 			{#if rightIcon === 'close'}
-				<Icon name="ri-close-line" size={20} top="-1" />
+				<Icon name="ri-close-line" size={20} top={-1} />
 			{:else if rightIcon === 'arrow'}
-				<Icon name="ri-arrow-right-s-line" size="20" top="-1" />
+				<Icon name="ri-arrow-right-s-line" size={20} top={-1} />
 			{/if}
 		</div>
 	</div>

packages/stdf/components/numKeyboard/NumKeyboard.svelte

@@ -13,111 +13,149 @@
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const commonLang = currentLang.common;
 
-	// 键盘样式类型，按钮式或块式
-	// Keyboard style type, button or block
+	/**
+	 * 键盘样式类型，按钮式或块式
+	 * Keyboard style type, button or block
+	 * @type {'button'|'block'}
+	 * @default 'button'
+	 */
 	export let type = 'button';
 
-	// 是否显示
-	// Whether to show
+	/**
+	 * 是否显示
+	 * Whether to show
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let visible = true;
 
-	// 每一个按键的高度
-	// Height of each key
+	/**
+	 * 每一个按键的高度
+	 * Height of each key
+	 * @type {'8'|'10'|'12'|'14'|'16'|'20'}
+	 * @default '12'
+	 */
 	export let height = '12';
 
-	// 间距
-	// the spacing
+	/**
+	 * 间距
+	 * the spacing
+	 * @type {'0'|'1'|'2'|'3'|'4'}
+	 * @default '2'
+	 */
 	export let gap = '2';
 
-	// 键盘内边距
-	// Keyboard padding
+	/**
+	 * 键盘内边距
+	 * Keyboard padding
+	 * @type {'0'|'1'|'2'|'3'|'4'}
+	 * @default '2'
+	 */
 	export let p = '2';
 
-	// 数字键盘上下反向
-	// Number keyboard up and down reverse
+	/**
+	 * 数字键盘上下反向
+	 * Number keyboard up and down reverse
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let reverse = false;
 
-	// 是否显示完成按钮
-	// Whether to show the done button
+	/**
+	 * 是否显示完成按钮
+	 * Whether to show the done button
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let done = true;
 
-	// 显示小数点
-	// Show decimal point
+	/**
+	 * 显示小数点
+	 * Show decimal point
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let dot = true;
 
-	// 显示关闭按钮
-	// Show close button
+	/**
+	 * 显示关闭按钮
+	 * Show close button
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let close = false;
 
-	// 完成按钮文本
-	// Done button text
+	/**
+	 * 完成按钮文本
+	 * Done button text
+	 * @type {string}
+	 * @default Current language numKeyboard.done
+	 */
 	export let doneText = commonLang.done;
 
-	// 完成按钮是否禁用
-	// Whether the done button is disabled
+	/**
+	 * 完成按钮是否禁用
+	 * Whether the done button is disabled
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let doneDisabled = false;
 
-	// 按钮圆角
-	// Button rounded corners
+	/**
+	 * 按钮圆角
+	 * Button rounded corners
+	 * @type {'none'|'base'|'md'|'lg'|'xl'|'2xl'|'3xl'|'full'}
+	 * @default 'base'
+	 */
 	export let radius = 'base';
 
-	// 键盘面板注入 class
-	// Keyboard panel injection class
+	/**
+	 * 键盘面板注入 class
+	 * Keyboard panel injection class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let panelClass = '';
 
-	// 按键注入 class
-	// Key injection class
+	/**
+	 * 按键注入 class
+	 * Key injection class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let keyClass = '';
 
-	// 完成按键注入 class
-	// Done key injection class
+	/**
+	 * 完成按键注入 class
+	 * Done key injection class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let doneClass = '';
 
-	// popup 参数
-	// popup parameter
+	/**
+	 * popup 参数
+	 * popup parameter
+	 * @type {object}
+	 * @default {}
+	 */
 	export let popup = {};
 
 	// 高度 class
 	// Height class
-	const heightClass = {
-		'8': 'h-8',
-		'10': 'h-10',
-		'12': 'h-12',
-		'14': 'h-14',
-		'16': 'h-16',
-		'20': 'h-20',
-	};
+	const heightClass = { '8': 'h-8', '10': 'h-10', '12': 'h-12', '14': 'h-14', '16': 'h-16', '20': 'h-20' };
 
 	// 根据高度动态数字大小
 	// Dynamic number size based on height
-	const fontSizeClass = {
-		'8': 'text-sm',
-		'10': 'text-base',
-		'12': 'text-xl',
-		'14': 'text-2xl',
-		'16': 'text-2xl',
-		'20': 'text-2xl',
-	};
+	const fontSizeClass = { '8': 'text-sm', '10': 'text-base', '12': 'text-xl', '14': 'text-2xl', '16': 'text-2xl', '20': 'text-2xl' };
 
 	// 间距 class
 	// spacing class
-	const gapClass = {
-		'0': 'gap-0',
-		'1': 'gap-1',
-		'2': 'gap-2',
-		'3': 'gap-3',
-		'4': 'gap-4',
-	};
+	const gapClass = { '0': 'gap-0', '1': 'gap-1', '2': 'gap-2', '3': 'gap-3', '4': 'gap-4' };
 
 	// 内边距 class
 	// padding class
-	const pClass = {
-		'0': 'p-0',
-		'1': 'p-1',
-		'2': 'p-2',
-		'3': 'p-3',
-		'4': 'p-4',
-	};
+	const pClass = { '0': 'p-0', '1': 'p-1', '2': 'p-2', '3': 'p-3', '4': 'p-4' };
 
 	// 圆角 class
 	// radius class
@@ -232,7 +270,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 				<div class={baseClassFunc('delete')} on:click={() => clickFunc('delete')}>
-					<Icon name="ri-delete-back-2-line" size={height * 2} />
+					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
 				</div>
 			{/if}
 			{#each [4, 5, 6] as item}
@@ -270,7 +308,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 				<div class={baseClassFunc('close')} on:click={() => clickFunc('close')}>
-					<Icon name="ri-skip-down-line" size={height * 2} />
+					<Icon name="ri-skip-down-line" size={Number(height) * 2} />
 				</div>
 			{/if}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -280,7 +318,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 				<div class={baseClassFunc('delete')} on:click={() => clickFunc('delete')}>
-					<Icon name="ri-delete-back-2-line" size={height * 2} />
+					<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
 				</div>
 			{/if}
 		</div>

packages/stdf/components/pagination/Pagination.svelte

@@ -16,69 +16,121 @@
 	const commonLang = currentLang.common;
 	const paginationLang = currentLang.pagination;
 
-	// 总条数
-	// total
+	/**
+	 * 总条数
+	 * total
+	 * @type {number}
+	 * @default 0
+	 */
 	export let total = 0;
 
-	// 每页条数
-	// pageSize
+	/**
+	 * 每页条数
+	 * pageSize
+	 * @type {number}
+	 * @default 10
+	 */
 	export let pageSize = 10;
 
-	// 当前页
-	// current
+	/**
+	 * 当前页
+	 * current
+	 * @type {number}
+	 * @default 1
+	 */
 	export let current = 1;
 
-	// 最大显示页码数，允许 5/7/9/11
-	// maxShowPage, can be 5/7/9/11
+	/**
+	 * 最大显示页码数
+	 * max show page
+	 * @type {5|7|9|11}
+	 * @default 7
+	 */
 	export let maxShowPage = 7;
 
-	// 圆角
-	// radius
-	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
-
-	// 高亮页码类型
-	// highlight page type
-	export let type = 'bold'; // 'border'/'block'/'bold'
-
-	// 省略页码列数
-	// second level page column
+	/**
+	 * 圆角
+	 * radius
+	 * @type {'base'|'md'|'lg'|'xl'|'full'|'none'}
+	 * @default 'md'
+	 */
+	export let radius = 'md';
+
+	/**
+	 * 高亮页码类型
+	 * highlight page type
+	 * @type {'border'|'block'|'bold'}
+	 * @default 'bold'
+	 */
+	export let type = 'bold';
+
+	/**
+	 * 省略页码列数
+	 * second level page column
+	 * @type {number}
+	 * @default 3
+	 */
 	export let pageCol = 3;
 
-	// 是否显示后省略号的省略页码
-	// show second level page in next ellipsis
+	/**
+	 * 是否显示后省略号的省略页码
+	 * show second level page in next ellipsis
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let showNextOmitPage = false;
 
-	// 是否显示前省略号的省略页码
-	// show second level page in pre ellipsis
+	/**
+	 * 是否显示前省略号的省略页码
+	 * show second level page in pre ellipsis
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let showPreOmitPage = false;
 
-	// 注入CSS
-	// Inject CSS
+	/**
+	 * 注入CSS
+	 * Inject CSS
+	 * @type {string}
+	 * @default ''
+	 */
 	export let injClass = '';
 
-	// 无数据文本
-	// No data text
+	/**
+	 * 无数据文本
+	 * No data text
+	 * @type {string}
+	 * @default Current language common.noData
+	 */
 	export let noDataText = commonLang.noData;
 
-	// 仅一页文本
-	// only one page text
+	/**
+	 * 仅一页文本
+	 * only one page text
+	 * @type {string}
+	 * @default Current language pagination.defaultOnlyOnePage
+	 */
 	export let onePageText = paginationLang.defaultOnlyOnePage;
 
-	// 连续模式
-	// continuous mode
+	/**
+	 * 连续模式
+	 * continuous mode
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let continuous = false;
 
 	// 总页数
 	// totalPage
-	$: totalPage = Math.ceil(total / pageSize);
+	const totalPage = Math.ceil(total / pageSize);
 
 	// 当前页码大于等于 maxShowPage-3 时，不显示前面的省略号
 	// current >= maxShowPage-3, not show pre ellipsis
-	$: showPreEllipsis = current > maxShowPage - 2;
+	const showPreEllipsis = current > maxShowPage - 2;
 
 	// 当前页码小于等于 totalPage - (maxShowPage-3) 时，不显示后面的省略号
 	// current <= totalPage - (maxShowPage-3), not show next ellipsis
-	$: showNextEllipsis = current <= maxShowPage - 2 || current <= totalPage - (maxShowPage - 3);
+	const showNextEllipsis = current <= maxShowPage - 2 || current <= totalPage - (maxShowPage - 3);
 
 	// 当显示前面的省略号时，中间显示的页码数 middleShowPage 个数为 maxShowPage - 4，内容为当前页码（maxShowPage为5）或者当前页码和前后一项（maxShowPage为7）或者当前页码和前后两项（maxShowPage为9）
 	// when show pre ellipsis, middleShowPage length is maxShowPage - 4, content is current page (maxShowPage is 5) or current page and pre/next one (maxShowPage is 7) or current page and pre/next two (maxShowPage is 9)
@@ -213,14 +265,7 @@
 
 	// 圆角样式
 	// radius class
-	const radiusClass = {
-		base: 'rounded',
-		md: 'rounded-md',
-		lg: 'rounded-lg',
-		xl: 'rounded-xl',
-		full: 'rounded-full',
-		none: 'rounded-none',
-	};
+	const radiusClass = { base: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', full: 'rounded-full', none: 'rounded-none' };
 </script>
 
 <div class="py-1 bg-white dark:bg-black flex justify-between text-center text-sm relative {injClass}">

packages/stdf/components/picker/Picker.svelte

@@ -13,64 +13,148 @@
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const pickerLang = currentLang.picker;
 
-	// 是否显示
-	// Whether to show
+	/**
+	 * 是否显示
+	 * Whether to show
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let visible = false;
 
-	// 所有列数据
-	// All column data
+	/**
+	 * @typedef {Object} datasObj - 每一列的数据
+	 * @property {Array} data - 每一列的数据
+	 * @property {'left'|'center'|'right'} [align] - 对齐方式
+	 * @property {3|5|7} [showRow] - 每列显示行数
+	 * @property {Number} [initIndex] - 初始选中项
+	 * @property {Boolean} [useAnimation] - 是否使用动画
+	 * @property {String} [labelKey] - 显示文本的 key
+	 * @property {Number} [flex] - 每列的宽度
+	 * @property {Number} [lastSelectedIndex] - 上次选中项
+	 */
+
+	/**
+	 * @typedef {Object} isLinkageObject - 对象类型的定义，必须包含两个属性，第一个属性的值为字符，第二个属性的值为数组
+	 * @property {String} [label] - 显示文本
+	 * @property {Array} [children] - 下级数据
+	 * @property {Number} [initIndex] - 初始选中项
+	 * @property {Array} [data] - 每一列的数据
+	 * @property {3|5|7} [showRow] - 每列显示行数
+	 * @property {String} [labelKey] - 显示文本的 key
+	 * @property {Boolean} [useAnimation] - 是否使用动画
+	 * @property {'left'|'center'|'right'} [align] - 对齐方式
+	 * @property {Number} [flex] - 每列的宽度
+	 */
+
+	/**
+	 * 所有列数据
+	 * All column data
+	 * @type {Array<datasObj>|Array<isLinkageObject>}
+	 * @default []
+	 */
 	export let datas = [];
 
-	// 是否自动滚动到上次的选中项
-	// Whether to automatically scroll to the last selected item
+	/**
+	 * 是否自动滚动到上次的选中项
+	 * Whether to automatically scroll to the last selected item
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let autoScrollToLast = true;
 
-	// 取消选项文本
-	// Cancel option text
+	/**
+	 * 取消选项文本
+	 * Cancel option text
+	 * @type {string}
+	 * @default Current language picker.cancelText
+	 */
 	export let cancelText = pickerLang.defaultCancel;
 
-	// 确定选项文本
-	// Confirm option text
+	/**
+	 * 确定选项文本
+	 * Confirm option text
+	 * @type {string}
+	 * @default Current language picker.confirmText
+	 */
 	export let confirmText = pickerLang.defaultConfirm;
 
-	// 中间选项文本
-	// Middle option text
+	/**
+	 * 中间选项文本
+	 * Middle option text
+	 * @type {string}
+	 * @default Current language picker.defaultTitle
+	 */
 	export let title = pickerLang.defaultTitle;
 
-	// 是否多级联动
-	// Whether multi-level linkage
+	/**
+	 * 是否多级联动
+	 * Whether multi-level linkage
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let isLinkage = false;
 
-	// 如果是多级联动，可以通过传入的 linkageInitIndexs 来设置初始选中项
-	// If it is multi-level linkage, you can set the initial selected item by passing in linkageInitIndexs
+	/**
+	 * 如果是多级联动，可以通过传入的 linkageInitIndexs 来设置初始选中项
+	 * If it is multi-level linkage, you can set the initial selected item by passing in linkageInitIndexs
+	 * @type {Array<Number>}
+	 * @default []
+	 */
 	export let linkageInitIndexs = [];
 
-	// 如果是多级联动，可以通过传入的 linkageShowRows 来设置每列显示行数
-	// If it is multi-level linkage, you can set the number of rows displayed in each column by passing in linkageShowRows
+	/**
+	 * 如果是多级联动，可以通过传入的 linkageShowRows 来设置每列显示行数
+	 * If it is multi-level linkage, you can set the number of rows displayed in each column by passing in linkageShowRows
+	 * @type {Array<3|5|7>}
+	 * @default []
+	 */
 	export let linkageShowRows = [];
 
-	// 如果是多级联动，可以通过传入的 linkageFlexs 来设置每列的宽度
-	// If it is multi-level linkage, you can set the width of each column by passing in linkageFlexs
+	/**
+	 * 如果是多级联动，可以通过传入的 linkageFlexs 来设置每列的宽度
+	 * If it is multi-level linkage, you can set the width of each column by passing in linkageFlexs
+	 * @type {Array<Number>}
+	 * @default []
+	 */
 	export let linkageFlexs = [];
 
-	// 如果是多级联动，可以通过传入的 linkageLabelKeys 来设置每列的 labelKey
-	// If it is multi-level linkage, you can set the labelKey of each column by passing in linkageLabelKeys
+	/**
+	 * 如果是多级联动，可以通过传入的 linkageLabelKeys 来设置每列的 labelKey
+	 * If it is multi-level linkage, you can set the labelKey of each column by passing in linkageLabelKeys
+	 * @type {Array<String>}
+	 * @default []
+	 */
 	export let linkageLabelKeys = [];
 
-	// 如果是多级联动，可以通过传入的 linkageAligns 来设置每列的对齐方式
-	// If it is multi-level linkage, you can set the alignment of each column by passing in linkageAligns
+	/**
+	 * 如果是多级联动，可以通过传入的 linkageAligns 来设置每列的对齐方式
+	 * If it is multi-level linkage, you can set the alignment of each column by passing in linkageAligns
+	 * @type {Array<'left'|'center'|'right'>}
+	 * @default []
+	 */
 	export let linkageAligns = [];
 
-	// 如果是多级联动，可以通过传入上下级 children 的 key 来设置
-	// If it is multi-level linkage, you can set the key of the children of the upper and lower levels by passing it in
+	/**
+	 * 如果是多级联动，可以通过传入上下级 children 的 key 来设置
+	 * If it is multi-level linkage, you can set the key of the children of the upper and lower levels by passing it in
+	 * @type {string}
+	 * @default 'children'
+	 */
 	export let linkageChildrenKey = 'children';
 
-	// 弹出层参数
-	// Popup parameters
+	/**
+	 * 弹出层参数
+	 * Popup parameters
+	 * @type {Object}
+	 * @default {}
+	 */
 	export let popup = {};
 
-	// 定义内部使用的datas
-	// Define datas used internally
+	/**
+	 * 内部使用的 datas
+	 * Datas used internally
+	 * @type {Array<datasObj>|Array<isLinkageObject>}
+	 */
 	let newDatas = datas;
 
 	// 如果是多级联动，对 newDatas 进行处理，使其结构符合 ScrollRadio 组件的结构

packages/stdf/components/placeholder/Placeholder.svelte

@@ -1,44 +1,51 @@
 <script>
-	// 上下内边距
-	// up down padding
+	/**
+	 * 上下内边距
+	 * up down padding
+	 * @type {'0'|'1'|'2'|'3'|'4'}
+	 * @default '4'
+	 */
 	export let py = '4';
 
-	// 高度
-	// height
+	/**
+	 * 高度
+	 * height
+	 * @type {'full'|'1'|'2'|'4'|'8'|'16'|'24'|'32'|'48'|'64'|'96'}
+	 * @default 'full'
+	 */
 	export let height = 'full';
 
-	// 圆角风格
-	// radius style
+	/**
+	 * 圆角风格
+	 * radius style
+	 * @type {'none'|'base'|'md'|'xl'|'2xl'|'3xl'|'full'}
+	 * @default 'base'
+	 */
 	export let radius = 'md';
 
-	// 阴影风格
-	// shadow style
+	/**
+	 * 阴影风格
+	 * shadow style
+	 * @type {'none'|'sm'|'md'|'lg'|'xl'|'2xl'}
+	 * @default 'none'
+	 */
 	export let shadow = 'none';
 
-	// 注入class
-	// inject class
+	/**
+	 * 注入class
+	 * inject class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let injClass = '';
 
 	// 上下内边距样式
 	// up down padding style
-	const pyObj = {
-		'0': ' py-0',
-		'1': ' py-1',
-		'2': ' py-2',
-		'4': ' py-4',
-		'8': ' py-8',
-	};
+	const pyObj = { '0': ' py-0', '1': ' py-1', '2': ' py-2', '4': ' py-4', '8': ' py-8' };
 
 	// 阴影样式
 	// shadow style
-	const shadowObj = {
-		none: ' shadow-none',
-		sm: ' shadow-sm',
-		md: ' shadow-md',
-		lg: ' shadow-lg',
-		xl: ' shadow-xl',
-		'2xl': ' shadow-2xl',
-	};
+	const shadowObj = { none: ' shadow-none', sm: ' shadow-sm', md: ' shadow-md', lg: ' shadow-lg', xl: ' shadow-xl', '2xl': ' shadow-2xl' };
 
 	// 圆角样式
 	// radius style

packages/stdf/components/popup/Popup.svelte

@@ -8,79 +8,156 @@
 	// Define event dispatcher
 	const dispatch = createEventDispatcher();
 
-	// 是否显示
-	// Whether to show
+	/**
+	 * 是否显示
+	 * Whether to show
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let visible = false;
 
-	// 弹出层大小，值为 0 时由内部元素决定
-	// Popup size, value of 0 is determined by internal elements
+	/**
+	 * 弹出层大小，值为 0 时由内部元素决定
+	 * Popup size, value of 0 is determined by internal elements
+	 * @type {number}
+	 * @range 0 - 100
+	 * @default 40
+	 */
 	export let size = 40;
 
-	// 弹出层位置，center,top,bottom,left,right
-	// Popup position, center, top, bottom, left, right
+	/**
+	 * 弹出层位置
+	 * Popup position
+	 * @type {'center'|'top'|'bottom'|'left'|'right'}
+	 * @default 'bottom'
+	 */
 	export let position = 'bottom';
 
-	// 过渡动画出现时间
-	// Transition animation appearance time
+	/**
+	 * 过渡动画出现时间，单位毫秒
+	 * Transition animation appearance time (ms)
+	 * @type {number}
+	 * @default 450
+	 */
 	export let duration = 450;
 
-	// 过渡动画退出时间
-	// Transition animation exit time
+	/**
+	 * 过渡动画退出时间，单位毫秒
+	 * Transition animation exit time (ms)
+	 * @type {number}
+	 * @default 240
+	 */
 	export let outDuration = 240;
 
-	// 过渡动画进入类型
-	// Transition animation entry type
+	/**
+	 * 过渡动画进入类型
+	 * Transition animation entry type
+	 * @type {'linear'|'quadIn'|'quadOut'|'quadInOut'|'cubicIn'|'cubicOut'|'cubicInOut'|'quartIn'|'quartOut'|'quartInOut'|'quintIn'|'quintOut'|'quintInOut'|'sineIn'|'sineOut'|'sineInOut'|'expoIn'|'expoOut'|'expoInOut'|'circIn'|'circOut'|'circInOut'|'backIn'|'backOut'|'backInOut'|'elasticIn'|'elasticOut'|'elasticInOut'|'bounceIn'|'bounceOut'|'bounceInOut'}
+	 * @default 'cubicOut'
+	 */
 	export let easeType = 'cubicOut';
 
-	// 过渡动画退出类型
-	// Transition animation exit type
+	/**
+	 * 过渡动画退出类型
+	 * Transition animation exit type
+	 * @type {'linear'|'quadIn'|'quadOut'|'quadInOut'|'cubicIn'|'cubicOut'|'cubicInOut'|'quartIn'|'quartOut'|'quartInOut'|'quintIn'|'quintOut'|'quintInOut'|'sineIn'|'sineOut'|'sineInOut'|'expoIn'|'expoOut'|'expoInOut'|'circIn'|'circOut'|'circInOut'|'backIn'|'backOut'|'backInOut'|'elasticIn'|'elasticOut'|'elasticInOut'|'bounceIn'|'bounceOut'|'bounceInOut'}
+	 * @default 'cubicOut'
+	 */
 	export let easeOutType = 'cubicOut';
 
-	// 左右间距
-	// Left and right spacing
+	/**
+	 * 左右间距
+	 * Left and right spacing
+	 * @type {'0'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10'|'12'|'16'|'20'}
+	 * @default '0'
+	 */
 	export let px = '0';
 
-	// 上下间距
-	// Top and bottom spacing
+	/**
+	 * 上下间距
+	 * Top and bottom spacing
+	 * @type {'0'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10'|'12'|'16'|'24'|'32'|'48'|'64'}
+	 * @default '0'
+	 */
 	export let py = '0';
 
-	// 遮罩层参数
-	// Mask layer parameters
+	/**
+	 * 遮罩层参数
+	 * Mask layer parameters
+	 * @type {object}
+	 * @default {}
+	 */
 	export let mask = {};
 
-	// 点击遮罩层是否关闭
-	// Click mask layer to close
+	/**
+	 * 点击遮罩层是否关闭
+	 * Click mask layer to close
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let maskClosable = true;
 
-	// 圆角位置
-	// Corner position
+	/**
+	 * 圆角位置
+	 * Corner position
+	 * @type {'all'|'top'|'bottom'|'left'|'right'}
+	 * @default 'top'
+	 */
 	export let radiusPosition = 'top';
 
-	// 圆角大小
-	// Corner size
+	/**
+	 * 圆角大小
+	 * Corner size
+	 * @type {'none'|'base'|'md'|'lg'|'xl'|'2xl'|'3xl'|'full'}
+	 * @default 'md'
+	 */
 	export let radius = 'none';
 
-	// 动画距离，当弹出层大小由内部元素决定时生效
-	// Animation distance, effective when popup size is determined by internal elements
+	/**
+	 * 动画距离，当弹出层大小由内部元素决定时生效，单位 px
+	 * Animation distance, effective when popup size is determined by internal elements (px)
+	 * @type {number}
+	 * @default 0
+	 */
 	export let transitionDistance = 0;
 
-	// 背景是否透明
-	// Whether the background is transparent
+	/**
+	 * 背景是否透明
+	 * Whether the background is transparent
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let transparent = false;
 
-	// 是否允许 body 滚动
-	// Whether to allow body scrolling
+	/**
+	 * 是否允许 body 滚动
+	 * Whether to allow body scrolling
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let allowBodyScroll = false;
 
-	// z-index
+	/**
+	 * z-index
+	 * @type {number}
+	 * @default 600
+	 */
 	export let zIndex = 600;
 
-	// 是否动态固定
-	// Whether to dynamically fix
+	/**
+	 * 是否动态固定
+	 * Whether to dynamically fix
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let dynamicFixed = true;
 
-	// 是否隐藏滚动区域滚动条
-	// Whether to hide the scroll bar of the scroll area
+	/**
+	 * 是否隐藏滚动区域滚动条
+	 * Whether to hide the scroll bar of the scroll area
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let hideScrollbar = false;
 
 	// 通过不同位置结合圆角参数，生成不同的 class

packages/stdf/components/popup/Transition.svelte

@@ -9,13 +9,7 @@
 	export let px = '0'; //左右间距
 	export let py = '0'; //上下间距
 
-	const sizeClass = {
-		bottom: 'w-full',
-		top: 'w-full',
-		left: 'h-full',
-		right: 'h-full',
-		center: 'w-full',
-	};
+	const sizeClass = { bottom: 'w-full', top: 'w-full', left: 'h-full', right: 'h-full', center: 'w-full' };
 	const sizeStyle = {
 		bottom: `height:${size === 0 ? 'auto' : size + '%'}`,
 		top: `height:${size === 0 ? 'auto' : size + '%'}`,

packages/stdf/components/progress/Progress.svelte

@@ -1,60 +1,93 @@
 <script>
-	// 百分比
-	// percent
+	/**
+	 * 百分比
+	 * percent
+	 * @type {number}
+	 * @range 0 - 100
+	 * @default 66
+	 */
 	export let percent = 66;
 
-	// 百分比位置，inner内部，right右侧，block块状，none不显示
-	// percentPosition, inner, right, block, none
+	/**
+	 * 百分比位置
+	 * percent position
+	 * @type {'inner'|'right'|'block'|'none'}
+	 * @default 'right'
+	 */
 	export let percentPosition = 'right';
 
-	// 高度
-	// height
+	/**
+	 * 高度
+	 * height
+	 * @type {'1'|'2'|'3'|'4'}
+	 * @default '2'
+	 */
 	export let height = '2';
 
-	// 圆角，full圆满，base圆角，none无
-	// radius, full, base, none
+	/**
+	 * 圆角
+	 * radius
+	 * @type {'full'|'base'|'none'}
+	 * @default 'full'
+	 */
 	export let radius = 'full';
 
-	// 是否禁用
-	// inactive
+	/**
+	 * 是否禁用
+	 * inactive
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let inactive = false;
 
-	// percentPosition 为 inner 时，内部文字溢出时百分比阀值
-	// percentPosition is inner, overflowPercent is percent value when inner text overflow
+	/**
+	 * percentPosition 为 inner 时，内部文字溢出时百分比阀值
+	 * percentPosition is inner, overflowPercent is percent value when inner text overflow
+	 * @type {number}
+	 * @range 0 - 100
+	 * @default 10
+	 */
 	export let overflowPercent = 10;
 
-	// 是否使用slot
-	// useSlot
+	/**
+	 * 是否使用slot
+	 * useSlot
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let useSlot = false;
 
-	// 注入class
-	// injClass
+	/**
+	 * 注入class
+	 * inject class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let injClass = '';
 
-	// 轨道注入class
-	// tranck injClass
+	/**
+	 * 轨道注入class
+	 * tranck inject class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let trackInjClass = '';
 
-	// 动画时间
-	// duration
+	/**
+	 * 动画时间
+	 * duration
+	 * @type {'150'|'300'|'500'|'700'|'1000'}
+	 * @default '300'
+	 */
 	export let duration = '300';
 
 	// 高度样式
 	// height class
-	const heightClass = {
-		'1': ' h-1',
-		'2': ' h-2',
-		'3': ' h-3',
-		'4': ' h-4',
-	};
+	const heightClass = { '1': ' h-1', '2': ' h-2', '3': ' h-3', '4': ' h-4' };
 
 	// 圆角样式
 	// radius class
-	const radiusClass = {
-		full: ' rounded-full',
-		base: ' rounded',
-		none: ' rounded-none',
-	};
+	const radiusClass = { full: ' rounded-full', base: ' rounded', none: ' rounded-none' };
 
 	// 动画时间样式
 	// duration class

packages/stdf/components/progressLoop/ProgressLoop.svelte

@@ -1,47 +1,85 @@
 <script>
-	// 百分比
-	//  percent
+	/**
+	 * 百分比
+	 * percent
+	 * @type {number}
+	 * @range 0 - 100
+	 * @default 66
+	 */
 	export let percent = 66;
 
-	// 圆环宽度
-	// circle width
+	/**
+	 * 圆环宽度
+	 * circle width
+	 * @type {number}
+	 * @range 0 - 12
+	 * @default 2
+	 */
 	export let strokeWidth = 2;
 
-	// 是否直角
-	// is butt
+	/**
+	 * 是否直角
+	 * is butt
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let butt = false;
 
-	// 是否反向
-	// is reverse
+	/**
+	 * 是否反向
+	 * is reverse
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let reverse = false;
 
-	// 动画时间
-	// animation duration
+	/**
+	 * 动画时间
+	 * animation duration
+	 * @type {'150'|'300'|'500'|'700'|'1000'}
+	 * @default '300'
+	 */
 	export let duration = '300';
 
-	// 渐变色
-	// gradient color
+	/**
+	 * 渐变色
+	 * gradient color
+	 * @type {string[]}
+	 * @default []
+	 */
 	export let gradient = [];
 
-	// 是否使用slot
-	// is use slot
+	/**
+	 * 是否使用slot
+	 * is use slot
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let useSlot = false;
 
-	// 注入class
-	// inject class
+	/**
+	 * 注入class
+	 * inject class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let injClass = '';
 
-	// 轨道注入class
-	// track inject class
+	/**
+	 * 轨道注入class
+	 * tranck inject class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let trackInjClass = '';
 
 	// 通过百分比计算半径
 	// calculate radius by percent
-	let r = 12 - strokeWidth / 2;
+	const r = 12 - strokeWidth / 2;
 
 	// 计算圆周长
 	// calculate circle length
-	let circleLen = 2 * Math.PI * r;
+	const circleLen = 2 * Math.PI * r;
 
 	// 动画时间class
 	// animation duration class

packages/stdf/components/radio/Radio.svelte

@@ -2,21 +2,38 @@
 	import { getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	// 名称
-	// name
+	/**
+	 * 名称
+	 * name
+	 * @type {string}
+	 * @default ''
+	 */
 	export let name = '';
 
-	// 文本位置
-	// text position
+	/**
+	 * 文本位置
+	 * text position
+	 * @type {'l'|'r'|'t'|'b'}
+	 * @default 'r'
+	 */
 	export let textPosition = 'r';
 
-	// 图标
-	// icon
+	/**
+	 * 图标
+	 * icon
+	 * @type {'defaulr'|'none'|Object}
+	 * @default 'default'
+	 */
 	export let icon = 'default';
 
-	// 选中图标
-	// icon checked
+	/**
+	 * 选中图标
+	 * icon checked
+	 * @type {'defaulr'|'none'|Object}
+	 * @default 'default'
+	 */
 	export let iconChecked = 'default';
+
 	const STDF_radioValueStore = getContext('STDF_radioValueContext');
 	const STDF_radioHorizontalStore = getContext('STDF_radioHorizontalContext');
 	const clickRadioFun = () => {

packages/stdf/components/radio/RadioGroup.svelte

@@ -2,8 +2,21 @@
 	import { setContext, createEventDispatcher } from 'svelte';
 	import { writable } from 'svelte/store';
 
-	export let value = ''; //值
-	export let horizontal = false; //是否水平排列
+	/**
+	 * 值，对应 Radio Props 的 name
+	 * value, corresponding to Radio Props name
+	 * @type {string}
+	 * @default ''
+	 */
+	export let value = '';
+
+	/**
+	 * 是否水平排列
+	 * horizontal
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let horizontal = false;
 
 	const STDF_radioValueStore = writable(value);
 	const STDF_radioHorizontalStore = writable(horizontal);

packages/stdf/components/rate/Rate.svelte

@@ -2,56 +2,109 @@
 	import { createEventDispatcher, getContext } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	// 默认值
-	// default value
+	/**
+	 * 默认值
+	 * default value
+	 * @type {number}
+	 * @range 0 - total
+	 * @default 4
+	 */
 	export let value = 4;
 
-	// 总数
-	// total number of stars
-	export let total = 5; //total number of stars
+	/**
+	 * 总数
+	 * total number of stars
+	 * @type {number}
+	 * @default 5
+	 */
+	export let total = 5;
 
-	// 高度
-	// height of the star
+	/**
+	 * 高度
+	 * height of the star
+	 * @type {number}
+	 * @default 24
+	 */
 	export let height = 24;
 
-	// 宽度
-	// width of the star
+	/**
+	 * 宽度
+	 * width of the star
+	 * @type {number}
+	 * @default 24
+	 */
 	export let width = 24;
 
-	// 未选中透明度
-	// opacity of the unselected star
-	export let opacity = 0.2;
+	/**
+	 * 未选中透明度
+	 * opacity of the unselected star
+	 * @type {'0.1'|'0.2'|'0.3'|'0.4'|'0.5'|'0.6'|'0.7'|'0.8'|'0.9'|'1'}
+	 * @default '0.2'
+	 */
+	export let opacity = '0.2';
 
-	// 间距
-	// space between stars
+	/**
+	 * 间距
+	 * space between stars
+	 * @type {'0'|'1'|'2'|'3'|'4'|'8'}
+	 * @default '3'
+	 */
 	export let space = '3';
 
-	// 是否允许半选
-	// whether to allow half selection
+	/**
+	 * 是否允许半选
+	 * whether to allow half selection
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let half = false;
 
-	// 是否允许0分
-	// whether to allow 0 points
+	/**
+	 * 是否允许0分
+	 * whether to allow 0 points
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let zero = false;
 
-	// 是否垂直半选
-	// whether to allow vertical half selection
+	/**
+	 * 是否垂直半选
+	 * whether to allow vertical half selection
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let vertical = false;
 
-	// 是否禁用
-	// whether to disable
+	/**
+	 * 是否禁用
+	 * whether to disable
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let disabled = false;
 
-	// 是否只读
-	// whether to read only
+	/**
+	 * 是否只读
+	 * whether to read only
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let readonly = false;
 
-	// 是否自定义
-	// whether to customize
+	/**
+	 * 是否自定义
+	 * whether to customize
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let custom = false;
 
-	// 点击动画类型，current 表示仅点击的图标有动画，active 表示激活的图标有动画，none 表示无动画
-	// click animation type, current means that only the clicked icon has animation, active means that the activated icon has animation, and none means no animation
+	/**
+	 * 点击动画类型，current 表示仅点击的图标有动画，active 表示激活的图标有动画，none 表示无动画
+	 * click animation type, current means that only the clicked icon has animation, active means that the activated icon has animation, and none means no animation
+	 * @type {'current'|'active'|'none'}
+	 * @default 'current'
+	 */
 	export let animation = 'current';
 
 	// 当前语言
@@ -82,14 +135,7 @@
 
 	// 间距样式
 	// space style
-	const spaceObj = {
-		'0': ' gap-0',
-		'1': ' gap-1',
-		'2': ' gap-2',
-		'3': ' gap-3',
-		'4': ' gap-4',
-		'8': ' gap-8',
-	};
+	const spaceObj = { '0': ' gap-0', '1': ' gap-1', '2': ' gap-2', '3': ' gap-3', '4': ' gap-4', '8': ' gap-8' };
 
 	// 透明度样式
 	// opacity style

packages/stdf/components/scrollRadio/ScrollRadio.svelte

@@ -43,11 +43,7 @@
 
 	// 对齐方式样式
 	// Alignment style
-	const alignClass = {
-		center: 'text-center',
-		left: 'text-left',
-		right: 'text-right',
-	};
+	const alignClass = { center: 'text-center', left: 'text-left', right: 'text-right' };
 
 	// 单条高度对象
 	// Single height object

packages/stdf/components/skeleton/Skeleton.svelte

@@ -1,14 +1,61 @@
 <script>
 	import Icon from '../icon/Icon.svelte';
 
-	// Skeleton类型，支持div、p、img、video、code、qrcode、barcode。
-	// Skeleton type, support div, p, img, video, code, qrcode, barcode.
+	/**
+	 * Skeleton 类型
+	 * Skeleton type
+	 * @type {'div'|'p'|'img'|'video'|'code'|'qrcode'|'barcode'}
+	 * @default 'div'
+	 */
 	export let type = 'div';
+
+	/**
+	 * 宽度
+	 * Width
+	 * @type {'full'|'2'|'4'|'6'|'8'|'12'|'16'|'24'|'32'|'48'|'64'|'96'}
+	 * @default '6'
+	 */
 	export let width = '6';
+
+	/**
+	 * 高度
+	 * Height
+	 * @type {'1'|'2'|'4'|'6'|'8'|'12'|'16'|'24'|'32'|'48'|'64'|'96'}
+	 * @default '6'
+	 */
 	export let height = '6';
+
+	/**
+	 * 圆角
+	 * Radius
+	 * @type {'none'|'base'|'md'|'xl'|'2xl'|'3xl'|'full'}
+	 * @default 'base'
+	 */
 	export let radius = 'base';
+
+	/**
+	 * 间距
+	 * Space
+	 * @type {'0.5'|'1'|'2'|'4'|'8'}
+	 * @default '1'
+	 */
 	export let padding = '1';
+
+	/**
+	 * 行数
+	 * Lines
+	 * @type {number}
+	 * @default 3
+	 */
 	export let lines = 3;
+
+	/**
+	 * 图标占比
+	 * Icon ratio
+	 * @type {number}
+	 * @range 0- 1
+	 * @default 0.6
+	 */
 	export let iconRatio = 0.6;
 
 	const radiusObj = {
@@ -48,12 +95,7 @@
 		'64': ' h-64',
 		'96': ' h-96',
 	};
-	const paddingObj = {
-		'0.5': ' p-0.5',
-		'1': ' p-1',
-		'2': ' p-2',
-		'4': ' p-4',
-	};
+	const paddingObj = { '0.5': ' p-0.5', '1': ' p-1', '2': ' p-2', '4': ' p-4' };
 	const randomArr = ['w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-2/5', 'w-3/5', 'w-4/5', 'w-5/6'];
 	const typeIconFun = type => {
 		switch (type) {

packages/stdf/components/slider/Slider.svelte

@@ -1,58 +1,111 @@
 <script>
 	import { onMount, createEventDispatcher } from 'svelte';
 	import { fly } from 'svelte/transition';
-	import { debounce, stepNumberFun } from '../utils';
+	import { throttle, stepNumberFun } from '../utils';
 
-	// 当前值
-	// Current value
+	/**
+	 * 当前值
+	 * Current value
+	 * @type {number}
+	 * @range minRange - maxRange
+	 * @default 40
+	 */
 	export let value = 40;
 
-	// 步长
-	// Step length
+	/**
+	 * 步长
+	 * Step length
+	 * @type {number}
+	 * @default 1
+	 */
 	export let step = 1;
 
-	// 可选最小值
-	// Optional minimum value
+	/**
+	 * 可选最小值
+	 * Optional minimum value
+	 * @type {number}
+	 * @default 0
+	 */
 	export let minRange = 0;
 
-	// 可选最大值
-	// Optional maximum value
+	/**
+	 * 可选最大值
+	 * Optional maximum value
+	 * @type {number}
+	 * @default 100
+	 */
 	export let maxRange = 100;
 
-	// 是否为区间选择
-	// is range
+	/**
+	 * 是否为区间选择
+	 * is range
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let isRange = false;
 
-	// 区间选择开始值
-	// Range selection start value
+	/**
+	 * 区间选择开始值
+	 * Range selection start value
+	 * @type {number}
+	 * @default 20
+	 */
 	export let startValue = 20;
 
-	// 区间选择结束值
-	// Range selection end value
+	/**
+	 * 区间选择结束值
+	 * Range selection end value
+	 * @type {number}
+	 * @default 60
+	 */
 	export let endValue = 60;
 
-	// 提示显示方式
-	// Tip display method
+	/**
+	 * 提示显示方式
+	 * Tip display method
+	 * @type {'always'|'touch'|'never'}
+	 * @default 'touch'
+	 */
 	export let showTip = 'touch';
 
-	// 圆角
-	// radius
+	/**
+	 * 圆角
+	 * Radius
+	 * @type {'none'|'base'|'xl'|'full'}
+	 * @default 'full'
+	 */
 	export let radius = 'full';
 
-	// 滑块是否为线框
-	// is line block
+	/**
+	 * 滑块是否为线框
+	 * is line block
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let lineBlock = false;
 
-	// 是否使用slot
-	// is use slot
+	/**
+	 * 是否使用slot
+	 * is use slot
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let useSlot = false;
 
-	// 是否禁用
-	// is disabled
+	/**
+	 * 是否禁用
+	 * is disabled
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let disabled = false;
 
-	// 是否只读
-	// is readonly
+	/**
+	 * 是否只读
+	 * is readonly
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let readonly = false;
 
 	let lineDom = null; //滑动条dom slider dom
@@ -163,12 +216,7 @@
 		currentMove = 'none';
 		isDown = false;
 	};
-	const radiusObj = {
-		none: ' rounded-none',
-		base: ' rounded',
-		xl: ' rounded-xl',
-		full: ' rounded-full',
-	};
+	const radiusObj = { none: ' rounded-none', base: ' rounded', xl: ' rounded-xl', full: ' rounded-full' };
 	onMount(() => {
 		lineDomStartX = lineDom.getBoundingClientRect().left;
 		lineDomEndX = lineDom.getBoundingClientRect().right;
@@ -185,7 +233,7 @@
 <div class={`relative h-7${disabled ? ' opacity-50' : ''}`}>
 	<div
 		on:pointerdown={touchLineStart}
-		on:pointermove={debounce(touchLineMove, 5)}
+		on:pointermove={throttle(touchLineMove)}
 		on:pointerup={touchLineEnd}
 		class="absolute flex flex-col justify-center h-7 w-full touch-none cursor-move"
 		bind:this={lineDom}

packages/stdf/components/steps/Steps.svelte

@@ -1,31 +1,67 @@
 <script>
 	import Icon from '../icon/Icon.svelte';
 
-	// 步骤
-	// Steps
+	/**
+	 * @typedef {Object} step
+	 * @property {String} title 标题
+	 * @property {String} [desc] 描述
+	 * @property {Object|String} [bar] 进度条
+	 * @property {Object} [injComponent] 注入组件
+	 */
+
+	/**
+	 * @typedef {Object} finishStep
+	 * @property {String} title 标题
+	 * @property {String} [desc] 描述
+	 * @property {Object|String} [bar] 进度条
+	 * @property {Object} [injComponent] 注入组件
+	 */
+
+	/**
+	 * @typedef {Number} height
+	 */
+
+	/**
+	 * 步骤
+	 * Steps
+	 * @type {Array<{step: step, finishStep?: finishStep, height?: height}>}
+	 */
 	export let steps = [];
 
-	// 当前步骤
-	// Current step
+	/**
+	 * 当前步骤
+	 * Current step
+	 * @type {Number}
+	 * @range 1 - steps.length
+	 * @default 1
+	 */
 	export let current = 1;
 
-	// 圆角风格：none/base/xl/full
-	// Radius style: none/base/xl/full
+	/**
+	 * 圆角风格
+	 * Radius style
+	 * @type {String}
+	 * @default base
+	 */
 	export let radius = 'base';
 
-	// 图标是否带边框
-	// Whether the icon has a border
+	/**
+	 * 图标是否带边框
+	 * Whether the icon has a border
+	 * @type {Boolean}
+	 * @default true
+	 */
 	export let barBorder = true;
 
-	// 是否纵向
-	// Whether vertical
+	/**
+	 * 是否纵向
+	 * Whether vertical
+	 * @type {Boolean}
+	 * @default false
+	 */
 	export let vertical = false;
-	const radiusObj = {
-		none: 'rounded-none',
-		base: 'rounded',
-		xl: 'rounded-xl',
-		full: 'rounded-full',
-	};
+
+	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };
 	let width = 0;
 </script>
 

packages/stdf/components/swiper/Swiper.svelte

@@ -5,54 +5,253 @@
 	// event dispatcher
 	const dispatch = createEventDispatcher();
 
-	// 数据
-	// data
+	/**
+	 * @typedef {Object} img
+	 * @property {'img'} type 类型
+	 * @property {String} url 图片地址
+	 */
+
+	/**
+	 * @typedef {Object} component
+	 * @property {'component'} type 类型
+	 * @property {Object} component 组件
+	 */
+
+	/**
+	 * 数据
+	 * Data
+	 * @type {Array<img|component>}
+	 * @default []
+	 */
 	export let data = [];
 
-	// 间隔时间
-	// interval time
+	/**
+	 * 间隔时间，单位秒
+	 * Interval time (seconds)
+	 * @type {Number}
+	 * @default 4
+	 */
 	export let interval = 4;
 
-	// 过渡时间
-	// duration time
+	/**
+	 * 过渡时间，单位毫秒
+	 * Duration time (milliseconds)
+	 * @type {Number}
+	 * @range 0 - interval*1000
+	 * @default 1000
+	 */
 	export let duration = 1000;
 
-	// 是否自动播放
-	// is autoplay
+	/**
+	 * 是否自动播放
+	 * Is autoplay
+	 * @type {Boolean}
+	 * @default true
+	 */
 	export let autoplay = true;
-	export let lazyplay = true; //是否懒轮播 is lazyplay
-	export let initActive = 0; //初始激活索引 init active index
-	export let indicatePosition = 'inner'; //指示器位置，'inner'/'out'/'none' indicate position
-	export let indicateAlign = 'center'; //指示器对齐方式，'center'/'right'/'left' indicate align
-	export let indicateStyle = 'pointLine'; //指示器样式，'point'/'line'/'pointLine'/'longLine' indicate style
-	export let indicateRadius = true; //指示器是否圆角 indicate radius
-	export let indicateInjClass = ''; //指示器注入 Class indicate inject class
-	export let indicateColor = ''; //指示器颜色 indicate color
-	export let indicateActiveColor = ''; //指示器激活颜色 indicate active color
-	export let aspectRatio = [16, 9]; //容器宽高比 container aspect ratio
-	export let containerWidth = 0; //容器宽度 container width
-	export let px = '0'; //容器横向内边距,0/1/2/4/6/8/12/16/24 container padding x
-	export let py = '0'; //容器纵向内边距,0/1/2/4/6/8/12 container padding y
-	export let translateX = 0; //未激活容器X方向偏移值 no active container translate x
-	export let translateZ = 0; //未激活容器Z方向偏移值 no active container translate z
-	export let rotateX = 0; //未激活容器X轴旋转值 no active container rotate x
-	export let rotateY = 0; //未激活容器Y轴旋转值 no active container rotate y
-	export let rotateZ = 0; //未激活容器Z轴旋转值 no active container rotate z
-	export let activeInjClass = ''; //激活容器注入 Class active container inject class
-	export let notActiveInjClass = ''; //未激活容器注入 Class no active container inject class
-	export let radius = 'none'; //容器内部区域圆角,none/base/xl/2xl/full container inner radius
+
+	/**
+	 * 是否懒轮播
+	 * Is lazyplay
+	 * @type {Boolean}
+	 * @default true
+	 */
+	export let lazyplay = true;
+
+	/**
+	 * 初始激活索引
+	 * init active index
+	 * @type {Number}
+	 * @range 0 - data.length-1
+	 * @default 0
+	 */
+	export let initActive = 0;
+
+	/**
+	 * 指示器位置
+	 * indicate position
+	 * @type {'inner'|'out'|'none'}
+	 * @default 'inner'
+	 */
+	export let indicatePosition = 'inner';
+
+	/**
+	 * 指示器对齐方式
+	 * indicate align
+	 * @type {'center'|'right'|'left'}
+	 * @default 'center'
+	 */
+	export let indicateAlign = 'center';
+
+	/**
+	 * 指示器样式
+	 * indicate style
+	 * @type {'point'|'line'|'pointLine'|'longLine'}
+	 * @default 'pointLine'
+	 */
+	export let indicateStyle = 'pointLine';
+
+	/**
+	 * 指示器是否圆角
+	 * indicate radius
+	 * @type {Boolean}
+	 * @default true
+	 */
+	export let indicateRadius = true;
+
+	/**
+	 * 指示器注入 Class
+	 * indicate inject class
+	 * @type {String}
+	 * @default ''
+	 */
+	export let indicateInjClass = '';
+
+	/**
+	 * 指示器颜色，注入 Class
+	 * indicate color, inject class
+	 * @type {String}
+	 * @default ''
+	 */
+	export let indicateColor = '';
+
+	/**
+	 * 指示器激活颜色，注入 Class
+	 * indicate active color, inject class
+	 * @type {String}
+	 * @default ''
+	 */
+	export let indicateActiveColor = '';
+
+	/**
+	 * 容器宽高比
+	 * container aspect ratio
+	 * @type {[Number, Number]}
+	 * @default [16, 9]
+	 */
+	export let aspectRatio = [16, 9];
+
+	/**
+	 * 容器宽度
+	 * container width
+	 * @type {Number}
+	 * @default 0
+	 */
+	export let containerWidth = 0;
+
+	/**
+	 * 容器横向内边距
+	 * container padding x
+	 * @type {'0'|'1'|'2'|'4'|'6'|'8'|'12'|'16'|'24'}
+	 * @default '0'
+	 */
+	export let px = '0';
+
+	/**
+	 * 容器纵向内边距
+	 * container padding y
+	 * @type {'0'|'1'|'2'|'4'|'6'|'8'|'12'}
+	 * @default '0'
+	 */
+	export let py = '0';
+
+	/**
+	 * 未激活容器X方向偏移值，单位 px
+	 * no active container translate x (px)
+	 * @type {Number}
+	 * @default 0
+	 */
+	export let translateX = 0;
+
+	/**
+	 * 未激活容器Z方向偏移值，单位 px
+	 * no active container translate z (px)
+	 * @type {Number}
+	 * @default 0
+	 */
+	export let translateZ = 0;
+
+	/**
+	 * 未激活容器X轴旋转值，单位 px
+	 * no active container rotate x (px)
+	 * @type {Number}
+	 * @default 0
+	 */
+	export let rotateX = 0;
+
+	/**
+	 * 未激活容器Y轴旋转值，单位 px
+	 * no active container rotate y (px)
+	 * @type {Number}
+	 * @default 0
+	 */
+	export let rotateY = 0;
+
+	/**
+	 * 未激活容器Z轴旋转值，单位 px
+	 * no active container rotate z (px)
+	 * @type {Number}
+	 * @default 0
+	 */
+	export let rotateZ = 0;
+
+	/**
+	 * 激活容器注入 Class
+	 * active container inject class
+	 * @type {String}
+	 * @default ''
+	 */
+	export let activeInjClass = '';
+
+	/**
+	 * 未激活容器注入 Class
+	 * no active container inject class
+	 * @type {String}
+	 * @default ''
+	 */
+	export let notActiveInjClass = '';
+
+	/**
+	 * 容器内部区域圆角
+	 * container inner radius
+	 * @type {'none'|'base'|'xl'|'2xl'|'full'}
+	 * @default 'none'
+	 */
+	export let radius = 'none';
+
+	/**
+	 * 容器内部元素注入 Class
+	 * container inner inject class
+	 * @type {String}
+	 * @default ''
+	 */
 	export let innerInjClass = ''; //容器内部元素注入 Class container inner inject class
 
-	// 始终触发的滑动距离百分比
-	// touch move distance percent
+	/**
+	 * 始终触发的滑动距离百分比
+	 * Always trigger the percentage of the sliding distance
+	 * @type {Number}
+	 * @range 0 - 100
+	 * @default 30
+	 */
 	export let triggerLong = 30;
 
-	// 始终不触发的滑动距离百分比
-	// not touch move distance percent
+	/**
+	 * 始终不触发的滑动距离百分比
+	 * The percentage of the sliding distance that is never triggered
+	 * @type {Number}
+	 * @range 0 - 100
+	 * @default 10
+	 */
 	export let notTriggerLong = 10;
 
-	// 触发的滑动速度系数
-	// touch move speed coefficient
+	/**
+	 * 触发的滑动速度系数
+	 * Touch move speed coefficient
+	 * @type {Number}
+	 * @range 0 - 1
+	 * @default 0.5
+	 */
 	export let triggerSpeed = 0.5;
 
 	let width = containerWidth === 0 ? document.body.clientWidth : containerWidth; //宽度 width
@@ -78,38 +277,10 @@
 			: data.length === 1
 			? [data[data.length - 1], ...data, data[0]]
 			: data; //实现无限轮播，复制一个新数组，防止改变原数组 implement infinite loop, copy a new array to prevent change original array
-	const indicateAlignObj = {
-		left: 'justify-start',
-		center: 'justify-center',
-		right: 'justify-end',
-	};
-	const pxObj = {
-		'0': '',
-		'1': 'px-1',
-		'2': 'px-2',
-		'4': 'px-4',
-		'6': 'px-6',
-		'8': 'px-8',
-		'12': 'px-12',
-		'16': 'px-16',
-		'24': 'px-24',
-	};
-	const pyObj = {
-		'0': '',
-		'1': 'py-1',
-		'2': 'py-2',
-		'4': 'py-4',
-		'6': 'py-6',
-		'8': 'py-8',
-		'12': 'py-12',
-	};
-	const radiusObj = {
-		none: 'rounded-none',
-		base: 'rounded-base',
-		xl: 'rounded-xl',
-		'2xl': 'rounded-2xl',
-		full: 'rounded-full',
-	};
+	const indicateAlignObj = { left: 'justify-start', center: 'justify-center', right: 'justify-end' };
+	const pxObj = { '0': '', '1': 'px-1', '2': 'px-2', '4': 'px-4', '6': 'px-6', '8': 'px-8', '12': 'px-12', '16': 'px-16', '24': 'px-24' };
+	const pyObj = { '0': '', '1': 'py-1', '2': 'py-2', '4': 'py-4', '6': 'py-6', '8': 'py-8', '12': 'py-12' };
+	const radiusObj = { none: 'rounded-none', base: 'rounded-base', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
 	//根据 indicateStyle 和是否激活生成不同样式的 indicate
 	//generate different style indicate according to indicateStyle and isActive
 	const indicateStyleInnerFun = (indicateStyle, isActive, indicateColor, indicateActiveColor) => {
@@ -457,22 +628,16 @@
 					i === active ? activeInjClass : notActiveInjClass
 				}`}
 				style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;left:{width * (i - active) +
-					moveX}px;transition-duration: {duration}ms;z-index:{zIndexFun(
+					moveX}px;transition-duration: {duration}ms;z-index:{zIndexFun(i, active, dataNew)};transform:translateX({translateXFun(
 					i,
 					active,
-					dataNew,
-					movePercent,
-				)};transform:translateX({translateXFun(i, active, translateX, movePercent)}) translateZ({translateZFun(
-					i,
-					active,
-					translateZ,
-					movePercent,
-				)}) rotateX({rotateXFun(i, active, rotateX, movePercent)}) rotateY({rotateYFun(
+					translateX,
+				)}) translateZ({translateZFun(i, active, translateZ, movePercent)}) rotateX({rotateXFun(
 					i,
 					active,
-					rotateY,
+					rotateX,
 					movePercent,
-				)}) rotateZ({rotateZFun(i, active, rotateZ, movePercent)});"
+				)}) rotateY({rotateYFun(i, active, rotateY, movePercent)}) rotateZ({rotateZFun(i, active, rotateZ, movePercent)});"
 			>
 				{#if item.type === 'img'}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->

packages/stdf/components/switch/Switch.svelte

@@ -2,20 +2,64 @@
 	import { createEventDispatcher } from 'svelte';
 	import Loading from '../loading/Loading.svelte';
 
-	export let check = false; // 是否选中 is checked
-	export let radius = 'base'; // 圆角风格：none/base/full rounded style: none/base/full
-	export let inside = []; // 内部内容 inside content
-	export let injClass = ''; // 注入 CSS injection CSS
-	export let disabled = false; // 是否禁用 is disabled
-	export let async = false; // 是否异步  is async
+	/**
+	 * 是否选中
+	 * Whether to select
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let check = false;
+
+	/**
+	 * 圆角风格
+	 * Rounded style
+	 * @type {'none' | 'base' | 'full'}
+	 * @default 'base'
+	 */
+	export let radius = 'base';
+
+	/**
+	 * 内部内容
+	 * Inside content
+	 * @type {'state' | 'loading' | 'slot' | [string, string]|''}
+	 * @default ''
+	 */
+	export let inside = '';
+
+	/**
+	 * 注入 CSS
+	 * Injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let injClass = '';
+
+	/**
+	 * 是否禁用
+	 * is disabled
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let disabled = false;
+
+	/**
+	 * 是否异步
+	 * is async
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let async = false;
+
+	/**
+	 * 加载状态
+	 * loading status
+	 * @type {object}
+	 * @default {}
+	 */
 	export let loading = {}; // 加载状态  loading status
 
 	let isLong = false; // 是否处于纵向拉长状态  is in the vertical elongation state
-	const radiusObj = {
-		none: 'rounded-none',
-		base: 'rounded',
-		full: 'rounded-full',
-	};
+	const radiusObj = { none: 'rounded-none', base: 'rounded', full: 'rounded-full' };
 	const dispatch = createEventDispatcher();
 	const setChangeFun = () => {
 		if (!disabled) {
@@ -59,7 +103,7 @@
 		{:else if inside === 'slot'}
 			<span class={check ? '' : 'hidden'}><slot name="true" /></span>
 			<span class={!check ? '' : 'hidden'}> <slot name="false" /></span>
-		{:else if Array.isArray(inside) && inside.length !== 0}
+		{:else if Array.isArray(inside) && inside.length === 2}
 			<span class={check ? '' : 'hidden'}>{inside[1]} </span>
 			<span class={!check ? '' : 'hidden'}>{inside[0]} </span>
 		{:else}

packages/stdf/components/tabBar/TabBar.svelte

@@ -2,15 +2,87 @@
 	import { createEventDispatcher } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	export let labels = []; //选项卡内容组  label group of TabBar
-	export let active = 0; //当前选中的选项卡索引  index of active label
-	export let line = false; //底部是否显示线条  whether to show line at the bottom
-	export let lineW = 4; //线条占当前Tab宽度的比例  line width ratio of current Tab
-	export let love = false; //是否开启关爱版  whether to open love version
-	export let injClass = ''; //TabBar最外层注入CSS  TabBar outermost layer injection CSS
-	export let tabInjClass = ''; //tab注入CSS  tab injection CSS
-	export let activeTabInjClass = ''; //选中tab注入CSS   selected tab injection CSS
-	export let activeInjClass = ''; //线条注入CSS  line injection CSS
+	/**
+	 * 选项卡内容
+	 * label of TabBar
+	 * @typedef {Object} Label
+	 * @property {string} [text] - 选项卡文字  TabBar text
+	 * @property {Object} [icon] - 选项卡图标  TabBar icon
+	 * @property {Object} [activeIcon] - 选项卡选中时的图标  TabBar icon when selected
+	 */
+
+	/**
+	 * 选项卡组
+	 * label group of TabBar
+	 * @type {Label[]}
+	 * @default []
+	 */
+	export let labels = [];
+
+	/**
+	 * 当前选中的选项卡索引
+	 * index of active label
+	 * @type {number}
+	 * @range 0 - labels.length - 1
+	 * @default 0
+	 */
+	export let active = 0;
+
+	/**
+	 * 底部是否显示线条
+	 * whether to show line at the bottom
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let line = false;
+
+	/**
+	 * 线条占当前Tab宽度的比例
+	 * line width ratio of current Tab
+	 * @type {number}
+	 * @default 4
+	 */
+	export let lineW = 4;
+
+	/**
+	 * 是否开启关爱版
+	 * whether to open love version
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let love = false;
+
+	/**
+	 * TabBar最外层注入CSS
+	 * TabBar outermost layer injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let injClass = '';
+
+	/**
+	 * Tab注入CSS
+	 * Tab injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let tabInjClass = '';
+
+	/**
+	 * 选中tab注入CSS
+	 * selected tab injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let activeTabInjClass = '';
+
+	/**
+	 * 线条注入CSS
+	 * line injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let activeInjClass = '';
 
 	const dispatch = createEventDispatcher(); //事件派发器  event dispatcher
 

packages/stdf/components/tabs/Tab.svelte

@@ -2,31 +2,113 @@
 	import { createEventDispatcher } from 'svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	export let labels = []; //选项卡内容组  content group of tabs
-	export let active = 0; //当前选中的选项卡索引  index of active tab
-	export let lineType = false; //是否使用线性风格,layout为v时失效  whether to use linear style, invalid when layout is v
-	export let radius = 'base'; //圆角风格：none/base/xl/full  radius style:none/base/xl/full
-	export let duration = 'base'; //过渡时间fast/base/slow/slower  transition time:fast/base/slow/slower
-	export let layout = 'h'; //布局，h/v，对应tabs的placement  layout,h/v,corresponding to placement of tabs
-	export let love = false; //是否开启关爱版  whether to open love version
-	export let injClass = ''; //Tab最外层注入CSS  Tab outermost layer injection CSS
-	export let tabInjClass = ''; //tab注入CSS  tab injection CSS
-	export let activeTabInjClass = ''; //选中tab注入CSS  selected tab injection CSS
-	export let activeInjClass = ''; //指示器注入CSS  indicator injection CSS
-	export let mx = '4'; //左右间距  left and right spacing
-
-	const radiusObj = {
-		none: 'rounded-none',
-		base: 'rounded',
-		xl: 'rounded-xl',
-		full: 'rounded-full',
-	};
-	const durationObj = {
-		fast: 'duration-150',
-		base: 'duration-300',
-		slow: 'duration-500',
-		slower: 'duration-1000',
-	};
+	/**
+	 * 选项卡
+	 * label
+	 * @typedef {Object} Label
+	 * @property {string} [text] - 选项卡文字
+	 * @property {Object} [icon] - 选项卡图标
+	 */
+
+	/**
+	 * 选项卡组
+	 * label group
+	 * @type {Label[]}
+	 * @default []
+	 */
+	export let labels = [];
+
+	/**
+	 * 当前选中的选项卡索引
+	 * index of active tab
+	 * @type {number}
+	 * @range 0 - labels.length - 1
+	 * @default 0
+	 */
+	export let active = 0;
+
+	/**
+	 * 是否使用线性风格，layout 为 v 时失效
+	 * whether to use linear style, invalid when layout is v
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let lineType = false;
+
+	/**
+	 * 圆角风格
+	 * radius style
+	 * @type {'none'|'base'|'xl'|'full'}
+	 * @default 'base'
+	 */
+	export let radius = 'base';
+
+	/**
+	 * 过渡时间
+	 * transition time
+	 * @type {'fast'|'base'|'slow'|'slower'}
+	 * @default 'base'
+	 */
+	export let duration = 'base';
+
+	/**
+	 * 布局，h/v，对应tabs的placement
+	 * layout,h/v,corresponding to placement of tabs
+	 * @type {'h'|'v'}
+	 * @default 'h'
+	 */
+	export let layout = 'h';
+
+	/**
+	 * 是否开启关爱版
+	 * whether to open love version
+	 * @type {boolean}
+	 * @default false
+	 */
+	export let love = false;
+
+	/**
+	 * Tab 最外层注入 CSS
+	 * Tab outermost layer injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let injClass = '';
+
+	/**
+	 * Tab 注入 CSS
+	 * Tab injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let tabInjClass = '';
+
+	/**
+	 * 选中 tab 注入 CSS
+	 * selected tab injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let activeTabInjClass = '';
+
+	/**
+	 * 指示器注入 CSS
+	 * indicator injection CSS
+	 * @type {string}
+	 * @default ''
+	 */
+	export let activeInjClass = '';
+
+	/**
+	 * 左右间距
+	 * left and right spacing
+	 * @type {'0'|'1'|'2'|'3'|'4'|'6'|'8'|'12'|'16'|'20'}
+	 * @default '4'
+	 */
+	export let mx = '4';
+
+	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };
+	const durationObj = { fast: 'duration-150', base: 'duration-300', slow: 'duration-500', slower: 'duration-1000' };
 	const mxClass = {
 		'0': ' mx-0',
 		'1': ' mx-1',

packages/stdf/components/tabs/TabContent.svelte

@@ -1,5 +1,11 @@
 <script>
-	export let show = true; //是否显示
+	/**
+	 * 是否显示
+	 * whether to show
+	 * @type {boolean}
+	 * @default true
+	 */
+	export let show = true;
 </script>
 
 <div class:hidden={!show} class="flex-1">

packages/stdf/components/tabs/Tabs.svelte

@@ -2,11 +2,72 @@
 	import { createEventDispatcher } from 'svelte';
 	import Tab from './Tab.svelte';
 
-	export let tab = {}; //数据
-	export let duration = 'base'; //过渡时间fast/base/slow/slower/slowest
-	export let placement = 't'; //选项卡Tab位置t/b/l/r
-	export let transition = true; //是否使用过渡动画
-	export let active = 0; //当前选中的选项卡索引
+	/**
+	 * 选项卡
+	 * label
+	 * @typedef {Object} Label
+	 * @property {string} [text] - 选项卡文字 Label text
+	 * @property {Object} [icon] - 选项卡图标 Label icon
+	 */
+
+	/**
+	 * 选项
+	 * tab
+	 * @typedef {Object} Tab
+	 * @property {Label[]} [labels] - 选项卡组 label group
+	 * @property {number} [active] - 当前选中的选项卡索引 index of active tab
+	 * @property {boolean} [lineType] - 是否使用线性风格，layout 为 v 时失效 whether to use linear style, invalid when layout is v
+	 * @property {'none'|'base'|'xl'|'full'} [radius] - 圆角风格 radius style
+	 * @property {'fast'|'base'|'slow'|'slower'} [duration] - 过渡时间 transition time
+	 * @property {'0'|'1'|'2'|'3'|'4'|'6'|'8'|'12'|'16'|'20'} [mx] - 左右间距 left and right margin
+	 * @property {'h'|'v'} [layout] - 布局，h/v，对应tabs的placement layout,h/v,corresponding to placement of tabs
+	 * @property {Boolean} [love] - 是否使用爱心样式 whether to use heart style
+	 * @property {String} [injClass] - Tab 最外层注入 CSS 类 Tab outermost injection CSS class
+	 * @property {String} [tabInjClass] - Tab 注入 CSS 类 Tab injection CSS class
+	 * @property {String} [activeTabInjClass] -  选中 Tab 注入 CSS 类 Selected Tab injection CSS class
+	 * @property {String} [activeInjClass] - 指示器注入 CSS 类 Indicator injection CSS class
+	 */
+
+	/**
+	 * 选项卡组对象
+	 * tab object
+	 * @type {Tab}
+	 * @default {}
+	 */
+	export let tab = {};
+
+	/**
+	 * 过渡时间
+	 * transition time
+	 * @type {'fast'|'base'|'slow'|'slower'}
+	 * @default 'base'
+	 */
+	export let duration = 'base';
+
+	/**
+	 * 选项卡 Tab 位置
+	 * placement of tabs
+	 * @type {'t'|'b'|'l'|'r'}
+	 * @default 't'
+	 */
+	export let placement = 't';
+
+	/**
+	 * 是否使用过渡动画
+	 * whether to use transition animation
+	 * @type {boolean}
+	 * @default true
+	 */
+	export let transition = true;
+
+	/**
+	 * 当前选中的选项卡索引
+	 * index of active tab
+	 * @type {number}
+	 * @range 0 - tab.labels.length - 1
+	 * @default 0
+	 */
+	export let active = 0;
 
 	const dispatch = createEventDispatcher(); //事件派发器
 

packages/stdf/components/timePicker/TimePicker.svelte

@@ -14,121 +14,279 @@
 	const currentLang = getContext('STDF_lang') || zh_CN;
 	const timePickerLang = currentLang.timePicker;
 
-	// 是否显示
-	// Whether to show
+	/**
+	 * 是否显示
+	 * Whether to show
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let visible = false;
 
-	// 时间类型，由 Y M D h m s 组合而成
-	// Time type, composed of Y M D h m s
+	/**
+	 * 时间类型
+	 * Time type
+	 * @type {'Y'|'M'|'h'|'m'|'s'|'YM'|'hm'|'ms'|'YMD'|'hms'|'YMDh'|'YMDhm'|'YMDhms'}
+	 * @default 'YMDhms'
+	 */
 	export let type = 'YMDhms';
 
-	// 年月日时分秒参数，包含所占比例 flex，每行显示数量 showRow
-	// Year month day hour minute second parameter, including the proportion of flex, the number of rows displayed per line
+	/**
+	 * 单项选项属性
+	 * Single option attribute
+	 * @typedef {Object} ItemProps
+	 * @property {number} [flex] - flex 值 flex value
+	 * @property {3|5|7} [showRow] - 每行显示数量 number of rows displayed per line
+	 * @property {'left'|'center'|'right'} [align] - 对齐方式 alignment
+	 */
+
+	/**
+	 * 年参数
+	 * Year parameter
+	 * @type {ItemProps}
+	 * @default {}
+	 */
 	export let yearProps = {};
+
+	/**
+	 * 月参数
+	 * Month parameter
+	 * @type {ItemProps}
+	 * @default {}
+	 */
 	export let monthProps = {};
+
+	/**
+	 * 日参数
+	 * Day parameter
+	 * @type {ItemProps}
+	 * @default {}
+	 */
 	export let dayProps = {};
+
+	/**
+	 * 时参数
+	 * Hour parameter
+	 * @type {ItemProps}
+	 * @default {}
+	 */
 	export let hourProps = {};
+
+	/**
+	 * 分参数
+	 * Minute parameter
+	 * @type {ItemProps}
+	 * @default {}
+	 */
 	export let minuteProps = {};
+
+	/**
+	 * 秒参数
+	 * Second parameter
+	 * @type {ItemProps}
+	 * @default {}
+	 */
 	export let secondProps = {};
 
-	// 初始选定的年份
-	// The initial selected year
+	/**
+	 * 初始选定的年份
+	 * The initial selected year
+	 * @type {string}
+	 * @default ''
+	 */
 	export let initYear = '';
 
-	// 初始选定的月份
-	// The initial selected month
+	/**
+	 * 初始选定的月份
+	 * The initial selected month
+	 * @type {string}
+	 * @default ''
+	 */
 	export let initMonth = '';
 
-	// 初始选定的天数
-	// The initial selected day
+	/**
+	 * 初始选定的天数
+	 * The initial selected day
+	 * @type {string}
+	 * @default ''
+	 */
 	export let initDay = '';
 
-	// 初始选定的小时
-	// The initial selected hour
+	/**
+	 * 初始选定的小时
+	 * The initial selected hour
+	 * @type {string}
+	 * @default ''
+	 */
 	export let initHour = '';
 
-	// 初始选定的分钟
-	// The initial selected minute
+	/**
+	 * 初始选定的分钟
+	 * The initial selected minute
+	 * @type {string}
+	 * @default ''
+	 */
 	export let initMinute = '';
 
-	// 初始选定的秒数
-	// The initial selected second
+	/**
+	 * 初始选定的秒数
+	 * The initial selected second
+	 * @type {string}
+	 * @default ''
+	 */
 	export let initSecond = '';
 
-	// 分钟步长
-	// Minute step
+	/**
+	 * 分钟步长
+	 * Minute step
+	 * @type {number}
+	 * @range 1 - 59
+	 * @default 1
+	 */
 	export let minuteStep = 1;
 
-	// 秒钟步长
-	// Second step
+	/**
+	 * 秒钟步长
+	 * Second step
+	 * @type {number}
+	 * @range 1 - 59
+	 * @default 1
+	 */
 	export let secondStep = 1;
 
-	// 年份区间，数组，第一个值为开始年份，第二个值为结束年份
-	// Year range, array, the first value is the start year, and the second value is the end year
+	/**
+	 * 年份区间
+	 * Year range
+	 * @type {[number, number]|[]}
+	 * @default []
+	 */
 	export let yearRange = [];
 
-	// 月份区间，数组，第一个值为开始月份，第二个值为结束月份
-	// Month range, array, the first value is the start month, and the second value is the end month
+	/**
+	 * 月份区间
+	 * Month range
+	 * @type {[number, number]}
+	 * @default [1, 12]
+	 */
 	export let monthRange = [1, 12];
 
-	// 小时区间，数组，第一个值为开始小时，第二个值为结束小时
-	// Hour range, array, the first value is the start hour, and the second value is the end hour
+	/**
+	 * 小时区间
+	 * Hour range
+	 * @type {[number, number]}
+	 * @default [0, 23]
+	 */
 	export let hourRange = [0, 23];
 
-	// 分钟区间，数组，第一个值为开始分钟，第二个值为结束分钟
-	// Minute range, array, the first value is the start minute, and the second value is the end minute
+	/**
+	 * 分钟区间
+	 * Minute range
+	 * @type {[number, number]}
+	 * @default [0, 59]
+	 */
 	export let minuteRange = [0, 59];
 
-	// 秒数区间，数组，第一个值为开始秒数，第二个值为结束秒数
-	// Second range, array, the first value is the start second, and the second value is the end second
+	/**
+	 * 秒数区间
+	 * Second range
+	 * @type {[number, number]}
+	 * @default [0, 59]
+	 */
 	export let secondRange = [0, 59];
 
-	// 顶部是否显示提示文字
-	// Whether to display a prompt at the top
+	/**
+	 * 顶部是否显示提示文字
+	 * Whether to display a prompt at the top
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let showTips = true;
 
-	// 取消选项文本
-	// Cancel option text
+	/**
+	 * 取消选项文本
+	 * Cancel option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultCancel
+	 */
 	export let cancelText = timePickerLang.defaultCancel;
 
-	// 确定选项文本
-	// Confirm option text
+	/**
+	 * 确定选项文本
+	 * Confirm option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultConfirm
+	 */
 	export let confirmText = timePickerLang.defaultConfirm;
 
-	// 中间选项文本
-	// Middle option text
+	/**
+	 * 中间选项文本
+	 * Middle option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultTitle
+	 */
 	export let title = timePickerLang.defaultTitle;
 
-	// 年选项文本
-	// Year option text
+	/**
+	 * 年选项文本
+	 * Year option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultYear
+	 */
 	export let yearText = timePickerLang.defaultYear;
 
-	// 月选项文本
-	// Month option text
+	/**
+	 * 月选项文本
+	 * Month option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultMonth
+	 */
 	export let monthText = timePickerLang.defaultMonth;
 
-	// 日选项文本
-	// Day option text
+	/**
+	 * 日选项文本
+	 * Day option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultDay
+	 */
 	export let dayText = timePickerLang.defaultDay;
 
-	// 时选项文本
-	// Hour option text
+	/**
+	 * 时选项文本
+	 * Hour option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultHour
+	 */
 	export let hourText = timePickerLang.defaultHour;
 
-	// 分选项文本
-	// Minute option text
+	/**
+	 * 分选项文本
+	 * Minute option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultMinute
+	 */
 	export let minuteText = timePickerLang.defaultMinute;
 
-	// 秒选项文本
-	// Second option text
+	/**
+	 * 秒选项文本
+	 * Second option text
+	 * @type {string}
+	 * @default Current language timePicker.defaultSecond
+	 */
 	export let secondText = timePickerLang.defaultSecond;
 
-	// 返回数据格式
-	// Return data format
+	/**
+	 * 返回数据格式
+	 * Return data format
+	 * @type {string}
+	 * @default ''
+	 */
 	export let outFormat = '';
 
-	// 弹出层参数
-	// Popup parameters
+	/**
+	 * 弹出层参数
+	 * Popup parameters
+	 * @type {Object}
+	 * @default {}
+	 */
 	export let popup = {};
 
 	// 获取当前时间，取出对应的年月日时分秒，转成字符，月、日、时、分、秒小于 10 的前面补 0

packages/stdf/components/toast/Toast.svelte

@@ -5,71 +5,139 @@
 	import Mask from '../mask/Mask.svelte';
 	import Transition from './Transition.svelte';
 
-	// 提示内容
-	// toast content
+	/**
+	 * 提示内容
+	 * toast content
+	 * @type {string}
+	 * @default ''
+	 */
 	export let message = '';
 
-	// 是否显示
-	// is show
+	/**
+	 * 是否显示
+	 * is show
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let visible = false;
 
-	// 显示时间,ms
-	// show time,ms
+	/**
+	 * 显示时间，ms
+	 * show time, ms
+	 * @type {number}
+	 * @default 2000
+	 */
 	export let duration = 2000;
 
-	// 显示位置,center,top,bottom
-	// show position,center,top,bottom
+	/**
+	 * 显示位置
+	 * show position
+	 * @type {'center'|'top'|'bottom'}
+	 * @default 'center'
+	 */
 	export let position = 'center';
 
-	// top和bottom时距离顶部或底部的距离
-	// top and bottom distance from top or bottom
+	/**
+	 * top 和 bottom 时距离顶部或底部的距离
+	 * top and bottom distance from top or bottom
+	 * @type {'0'|'10'|'20'|'40'|'60'|'80'}
+	 * @default '20'
+	 */
 	export let py = '0';
 
-	// 圆角
-	// radius
+	/**
+	 * 圆角
+	 * radius
+	 * @type {'base'|'full'|'none'|'sm'|'md'|'lg'|'xl'|'2xl'}
+	 * @default 'base'
+	 */
 	export let radius = 'base';
 
-	// 是否使用slot
-	// is use slot
+	/**
+	 * 是否使用 slot
+	 * is use slot
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let useSlot = false;
 
-	// 过渡动画类型，可选值：fade, fly，scale，slide,none
-	// transition type,fade, fly，scale，slide,none
+	/**
+	 * 过渡动画类型
+	 * transition type
+	 * @type {'fade'|'fly'|'scale'|'slide'|'none'|'blur'}
+	 * @default 'scale'
+	 */
 	export let transitionType = 'scale';
 
-	// 过渡动画参数
-	// transition params
+	/**
+	 * 过渡动画参数，参考 https://svelte.dev/docs/svelte-transition
+	 * transition params, see https://svelte.dev/docs/svelte-transition
+	 * @type {object}
+	 * @default {}
+	 */
 	export let transitionParams = {};
 
-	// 过渡动画退出时间
-	// transition out duration
+	/**
+	 * 过渡动画退出时间
+	 * transition out duration
+	 * @type {number}
+	 * @default 0
+	 */
 	export let outDuration = 0;
 
-	// z-index
+	/**
+	 * z-index
+	 * @type {number}
+	 * @default 1000
+	 */
 	export let zIndex = 1000;
 
-	// 提示类型，success、error、warning、info、loading，不传则不显示图标
-	// toast type,success,error,warning,info,loading
+	/**
+	 * 提示类型
+	 * toast type
+	 * @type {'success'|'error'|'warning'|'info'|'loading'|''|string}
+	 * @default ''
+	 */
 	export let type = '';
 
-	// 遮罩层参数
-	// mask params
+	/**
+	 * 遮罩层参数
+	 * mask params
+	 * @type {object}
+	 * @default {}
+	 */
 	export let mask = {};
 
-	// loading 参数
-	// loading params
+	/**
+	 * loading 参数
+	 * loading params
+	 * @type {object}
+	 * @default {}
+	 */
 	export let loading = {};
 
-	// 图标参数
-	// icon params
+	/**
+	 * 图标参数
+	 * icon params
+	 * @type {object}
+	 * @default {}
+	 */
 	export let icon = {};
 
-	// 是否可点击穿透
-	// is clickable
+	/**
+	 * 是否可点击穿透
+	 * is clickable
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let clickable = false;
 
-	// 是否动态固定
-	// is dynamic fixed
+	/**
+	 * 是否动态固定
+	 * is dynamic fixed
+	 * @type {boolean}
+	 * @default true
+	 */
 	export let dynamicFixed = true;
 
 	// 创建事件派发器
@@ -91,25 +159,9 @@
 		}
 	}
 
-	const typeObj = {
-		success: 'checkbox-circle',
-		error: 'close-circle',
-		warning: 'error-warning',
-		info: 'information',
-	};
-	const positionClass = {
-		center: ' justify-center',
-		top: ' justify-start',
-		bottom: ' justify-end',
-	};
-	const pyClass = {
-		'0': ' py-0',
-		'10': ' py-10',
-		'20': ' py-20',
-		'40': ' py-40',
-		'60': ' py-60',
-		'80': ' py-80',
-	};
+	const typeObj = { success: 'checkbox-circle', error: 'close-circle', warning: 'error-warning', info: 'information' };
+	const positionClass = { center: ' justify-center', top: ' justify-start', bottom: ' justify-end' };
+	const pyClass = { '0': ' py-0', '10': ' py-10', '20': ' py-20', '40': ' py-40', '60': ' py-60', '80': ' py-80' };
 	const radiusClass = {
 		base: ' rounded',
 		full: ' rounded-full',

packages/stdf/components/utils/index.js

@@ -4,6 +4,9 @@
  * @param {Function} fn
  * @param {Number} delay
  * @returns {Function}
+ * @example
+ * const fn = () => console.log('hello world');
+ * const debounceFn = debounce(fn, 1000);
  */
 export const debounce = (fn, delay = 10) => {
 	let timer = null;
@@ -11,7 +14,7 @@ export const debounce = (fn, delay = 10) => {
 		if (timer) {
 			clearTimeout(timer);
 		}
-		timer = setTimeout(() => {
+		timer = setTimeout(function () {
 			//模拟触发change事件
 			// Simulate triggering change event
 			fn.apply(this, arguments);
@@ -21,22 +24,29 @@ export const debounce = (fn, delay = 10) => {
 		}, delay);
 	};
 };
-/*
- 节流
- throttle
-*/
+
+/**
+ * 节流
+ * throttle
+ * @param {Function} fn
+ * @param {Number} delay
+ * @returns {Function}
+ */
 export const throttle = (fn, delay = 50) => {
 	let timer = null;
 	return function () {
 		if (timer) {
 			return;
 		}
-		timer = setTimeout(() => {
-			fn.apply(this, arguments);
+		let context = this;
+		let args = arguments;
+		timer = setTimeout(function () {
+			fn.apply(context, args);
 			timer = null;
 		}, delay);
 	};
 };
+
 /**
  * 将数字按照步长进行四舍五入
  *  Round the number according to the step length
@@ -46,7 +56,6 @@ export const throttle = (fn, delay = 50) => {
  * @example
  * stepNumberFun(18, 5) // 20
  */
-
 export const stepNumberFun = (num, step = 1) => {
 	//将step乘10，转换为整数，避免小数计算精度问题
 	// Multiply step by 10, convert to integer, avoid decimal calculation precision problem
@@ -165,8 +174,8 @@ export const getStartDay = yearMonth => {
 /**
  * 传入正数或者负数 n，返回当前月往前或者往后的 n 个月的年月数据，格式为 YYYYMM，不足两位的月份前面补 0
  * Pass in a positive or negative number n, return the year and month data of the current month forward or backward n months, the format is YYYYMM, and the month less than two digits is filled with 0
- * @param {Number} n
- * @returns {String}
+ * @param {Number} n 正整数或者负整数
+ * @returns {String} 指定月份的年月数据 YYYYMM
  * @example
  * getYearMonth(1) // '202006'
  */
@@ -203,6 +212,7 @@ export const getCalendarData = (yearMonth, startSunday) => {
 		data.push({ day: '' });
 	}
 	for (let i = 1; i <= dayNum; i++) {
+		// @ts-ignore
 		data.push({ day: i.toString().padStart(2, '0') });
 	}
 	for (let i = 0; i < 42 - startDay - (startSunday ? 0 : 1) - dayNum; i++) {
@@ -224,6 +234,7 @@ export const getCalendarData = (yearMonth, startSunday) => {
 	// Loop data, if day is not '', then calculate that day is what day of the week, put it in week
 	data.forEach(item => {
 		if (item.day !== '') {
+			// @ts-ignore
 			item.week = new Date(`${year}-${month}-${item.day}`).getDay();
 		}
 	});
@@ -231,7 +242,9 @@ export const getCalendarData = (yearMonth, startSunday) => {
 	// Loop data, if today is the end of the month, endDay is true, otherwise it is false
 	data.forEach((item, index) => {
 		if (item.day !== '') {
+			// @ts-ignore
 			item.endDay = index === data.length - 1;
+			// @ts-ignore
 			item.startDay = item.day === '01';
 		}
 	});
@@ -240,14 +253,18 @@ export const getCalendarData = (yearMonth, startSunday) => {
 	if (!startSunday) {
 		data.forEach(item => {
 			if (item.day !== '') {
+				// @ts-ignore
 				item.weekStartDay = item.week === 1;
+				// @ts-ignore
 				item.weekEndDay = item.week === 0;
 			}
 		});
 	} else {
 		data.forEach(item => {
 			if (item.day !== '') {
+				// @ts-ignore
 				item.weekStartDay = item.week === 0;
+				// @ts-ignore
 				item.weekEndDay = item.week === 6;
 			}
 		});
@@ -256,7 +273,9 @@ export const getCalendarData = (yearMonth, startSunday) => {
 	// According to the startDay and weekStartDay of each day, endDay and weekEndDay, as long as one item is true, it is the first day of the month or the first day of the week, put it in start and end
 	data.forEach(item => {
 		if (item.day !== '') {
+			// @ts-ignore
 			item.start = item.startDay || item.weekStartDay;
+			// @ts-ignore
 			item.end = item.endDay || item.weekEndDay;
 		}
 	});
@@ -266,8 +285,8 @@ export const getCalendarData = (yearMonth, startSunday) => {
 /**
  * 传入格式为 YYYYMM 的开始与结束月份字符串，返回这两个月份之间的所有月份数据数组，格式为 YYYYMM，不足两位的月份前面补 0
  * Pass in the start and end month strings in the format of YYYYMM, return the data array of all months between these two months, the format is YYYYMM, and the month less than two digits is filled with 0
- * @param {String} startMonth
- * @param {String} endMonth
+ * @param {String} startMonthStr
+ * @param {String} endMonthStr
  * @returns {Array}
  * @example
  * getMonthRange('202005', '202007') // ['202005', '202006', '202007']
@@ -359,6 +378,7 @@ export const getCurrentWeek = (startSunday = false) => {
 			const newYear = newDate.getFullYear();
 			const newMonth = newDate.getMonth() + 1;
 			const newDateNum = newDate.getDate();
+			// @ts-ignore
 			weekDates.push(`${newYear}${newMonth.toString().padStart(2, '0')}${newDateNum.toString().padStart(2, '0')}`);
 		}
 	} else {
@@ -367,6 +387,7 @@ export const getCurrentWeek = (startSunday = false) => {
 			const newYear = newDate.getFullYear();
 			const newMonth = newDate.getMonth() + 1;
 			const newDateNum = newDate.getDate();
+			// @ts-ignore
 			weekDates.push(`${newYear}${newMonth.toString().padStart(2, '0')}${newDateNum.toString().padStart(2, '0')}`);
 		}
 	}
@@ -385,6 +406,7 @@ export const getCurrentMonth = () => {
 	const days = new Date(year, month, 0).getDate();
 	const dates = [];
 	for (let i = 1; i <= days; i++) {
+		// @ts-ignore
 		dates.push(`${year}${month.toString().padStart(2, '0')}${i.toString().padStart(2, '0')}`);
 	}
 	return dates;
@@ -406,6 +428,7 @@ export const getCurrentQuarter = () => {
 	for (let i = startMonth; i <= endMonth; i++) {
 		const daysInMonth = new Date(year, i, 0).getDate();
 		for (let j = 1; j <= daysInMonth; j++) {
+			// @ts-ignore
 			days.push(`${year}${i.toString().padStart(2, '0')}${j.toString().padStart(2, '0')}`);
 		}
 	}
@@ -415,7 +438,7 @@ export const getCurrentQuarter = () => {
 /**
  * 传入正数或负数天数 n 和是否从今天开始计算 today，返回对应的前后日期组成的数组，日期格式为 YYYYMMDD，月与日不足两位的前面补 0
  * Pass in a positive or negative number of days n, whether to include today hasToday, return the array of dates before and after the current day, the date format is YYYYMMDD, and the month and day less than two digits are filled with 0
- * @param {Number} days
+ * @param {Number} n
  * @param {Boolean} today
  * @returns {Array}
  */
@@ -436,6 +459,7 @@ export const getDaysRangeWithToday = (n = 0, today = true) => {
 	const dates = [];
 	for (let i = 0; i < Math.abs(n); i++) {
 		const date = new Date(fakeToday.getTime() + (n > 0 ? i : -i) * 24 * 60 * 60 * 1000);
+		// @ts-ignore
 		dates.push(`${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`);
 	}
 	// 对日期排序

packages/stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"main": "./components/index.js",
 	"svelte": "./components/index.js",

packages/stdf/theme/switchTheme.js

@@ -30,12 +30,51 @@ const setPropertyFunc = (name, value) => {
 	document.documentElement.style.setProperty(name, hexToRgb(value));
 };
 
+/**
+ * Primary and dark color object
+ * 主色系和暗黑色系对象
+ * @typedef {Object<string, string>} PrimaryAndDarkColor
+ * @property {string} 50
+ * @property {string} 100
+ * @property {string} 200
+ * @property {string} 300
+ * @property {string} 400
+ * @property {string} 500
+ * @property {string} default
+ * @property {string} 700
+ * @property {string} 800
+ * @property {string} 900
+ * @property {string} 950
+ */
+
+/**
+ * 主题对象
+ * Theme object
+ * @typedef {object} Theme
+ * @property {string} name 主题名称 Theme name
+ * @property {object} color 主题颜色 Theme color
+ * @property {PrimaryAndDarkColor} color.primary 主色系 Primary color
+ * @property {PrimaryAndDarkColor} color.dark 暗黑色系 Dark color
+ * @property {string} color.primaryBlack 主色系黑色 Primary color black
+ * @property {string} color.primaryWhite 主色系白色 Primary color white
+ * @property {string} color.darkBlack 暗黑色系黑色 Dark color black
+ * @property {string} color.darkWhite 暗黑色系白色 Dark color white
+ * @property {object} color.functional 功能色系 Functional color
+ * @property {string} color.functional.success 功能色系成功色 Functional color success
+ * @property {string} color.functional.warning 功能色系警告色 Functional color warning
+ * @property {string} color.functional.error 功能色系错误色 Functional color error
+ * @property {string} color.functional.info 功能色系信息色 Functional color info
+ * @property {Array<{color: string, alias: string}>|[]} color.extend 扩展色系 Extend color
+ */
+
 /**
  * 切换主题
  * Switch theme
- * @param {object} theme 主题对象，格式请参考 https://stdf.design/#/guide?nav=theme
- * @returns {void}
+ * @param {Theme} theme 主题对象 Theme object
+ * @returns {void} void
  * @example
+ * import { stdfTheme } from 'stdf/theme';
+ * switchTheme(stdfTheme);
  */
 export default theme => {
 	const { color } = theme;
@@ -53,7 +92,9 @@ export default theme => {
 	setPropertyFunc('--theme-color-primaryWhite', color.primaryWhite);
 	setPropertyFunc('--theme-color-darkBlack', color.darkBlack);
 	setPropertyFunc('--theme-color-darkWhite', color.darkWhite);
-	color.extend.forEach((item, i) => {
-		setPropertyFunc(`--theme-color-extend${i}`, item.color);
-	});
+	if (color.extend.length > 0) {
+		color.extend.forEach((item, i) => {
+			setPropertyFunc(`--theme-color-extend${i}`, item.color);
+		});
+	}
 };