ソースを参照

[stdf]Add JSDoc

dufu1991 2 年 前
コミット
d123b8095c
1 ファイル変更94 行追加70 行削除
  1. 94 70
      packages/stdf/components/button/Button.svelte

+ 94 - 70
packages/stdf/components/button/Button.svelte

@@ -1,79 +1,123 @@
 <script>
-	// 填充模式:base/line/lineTheme/text/textTheme/colorLight
-	// Fill mode: base/line/lineTheme/text/textTheme/colorLight
+	/**
+	 * 填充模式
+	 * Fill mode
+	 * @type {'base' | 'line' | 'lineLight' | 'lineTheme' | 'text' | 'textTheme' | 'colorLight'}
+	 * @default 'base'
+	 */
 	export let fill = 'base';
 
-	// 状态:theme/success/warning/error/info
-	// State: theme/success/warning/error/info
+	/**
+	 * 状态
+	 * State
+	 * @type {'theme' | 'success' | 'warning' | 'error' | 'info'}
+	 * @default 'theme'
+	 */
 	export let state = 'theme';
 
-	// 圆角风格:none/base/xl/full
-	// Corner style: none/base/xl/full
+	/**
+	 * 圆角风格
+	 * Corner style
+	 * @type {'none' | 'base' | 'xl' | '2xl' | 'full'}
+	 * @default 'base'
+	 */
 	export let radius = 'base';
 
-	// 尺寸:full/big/md/sm/auto
-	// Size: full/big/md/sm/auto
+	/**
+	 * 尺寸
+	 * Size
+	 * @type {'full' | 'big' | 'md' | 'sm' | 'auto'}
+	 * @default 'big'
+	 */
 	export let size = 'big';
 
-	// 边框风格:solid/dashed/dotted
-	// Border style: solid/dashed/dotted
+	/**
+	 * 边框风格
+	 * Border style
+	 * @type {'solid' | 'dashed' | 'dotted'}
+	 * @default 'solid'
+	 */
 	export let line = 'solid';
 
-	// 注入CSS
-	// Inject CSS
+	/**
+	 * 注入类
+	 * Inject class
+	 * @type {string}
+	 * @default ''
+	 */
 	export let injClass = '';
 
-	// 是否开启关爱版
-	// Whether to open the care version
+	/**
+	 * 是否开启关爱版
+	 * Whether to open the care version
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let love = false;
 
-	// 按钮外部高度
-	// Button outer height
+	/**
+	 * 按钮外部高度
+	 * Button outer height
+	 * @type {'0' | '1' | '2' | '3' | '4'}
+	 * @default '2'
+	 */
 	export let heightOut = '2';
 
-	// 按钮高度
-	// Button height
+	/**
+	 * 按钮内部高度
+	 * Button inner height
+	 * @type {'0' | '1' | '2' | '3' | '4'}
+	 * @default '3'
+	 */
 	export let heightIn = '3';
 
-	// 是否使用按钮组
-	// Whether to use button group
+	/**
+	 * 是否使用按钮组
+	 * Whether to use button group
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let group = false;
 
-	// 是否禁用
-	// Whether to disable
+	/**
+	 * 是否禁用
+	 * Whether to disable
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let disabled = false;
 
-	// 是否自定义大小
-	// Whether to customize size
+	/**
+	 * 是否自定义大小
+	 * Whether to customize size
+	 * @type {boolean}
+	 * @default false
+	 */
 	export let customSize = false;
 
-	// 自定义宽度
-	// Custom width
+	/**
+	 * 自定义宽度
+	 * Custom width
+	 * @type {number}
+	 * @default 0
+	 */
 	export let customWidth = 0;
 
-	// 自定义高度
-	// Custom height
+	/**
+	 * 自定义高度
+	 * Custom height
+	 * @type {number}
+	 * @default 0
+	 */
 	export let customHeight = 0;
 
 	// 状态样式
 	// State style
-	const stateObj = {
-		theme: 'bg-primary dark:bg-dark',
-		success: 'bg-success',
-		warning: 'bg-warning',
-		error: 'bg-error',
-		info: 'bg-info',
-	};
+	const stateObj = { theme: 'bg-primary dark:bg-dark', success: 'bg-success', warning: 'bg-warning', error: 'bg-error', info: 'bg-info' };
 
 	// 圆角风格样式
 	// Corner style style
-	const radiusObj = {
-		none: 'rounded-none',
-		base: 'rounded',
-		xl: 'rounded-xl',
-		'2xl': 'rounded-2xl',
-		full: 'rounded-full',
-	};
+	const radiusObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' };
 
 	// 填充模式样式
 	// Fill mode style
@@ -89,47 +133,27 @@
 
 	// 尺寸样式
 	// Size style
-	const sizeObj = {
-		full: 'w-full',
-		big: 'w-full',
-		md: 'w-1/2',
-		sm: 'w-1/4',
-		auto: 'w-auto',
-	};
+	const sizeObj = { full: 'w-full', big: 'w-full', md: 'w-1/2', sm: 'w-1/4', auto: 'w-auto' };
 
 	// 边框风格样式
 	// Border style style
-	const lineObj = {
-		solid: 'border-solid',
-		dashed: 'border-dashed',
-		dotted: 'border-dotted',
-	};
+	const lineObj = { solid: 'border-solid', dashed: 'border-dashed', dotted: 'border-dotted' };
 
 	// 按钮外部高度样式
 	// Button outer height style
-	const heightOutObj = {
-		'0': 'py-0',
-		'1': 'py-1',
-		'2': 'py-2',
-		'3': 'py-3',
-		'4': 'py-4',
-	};
+	const heightOutObj = { '0': 'py-0', '1': 'py-1', '2': 'py-2', '3': 'py-3', '4': 'py-4' };
 
 	// 按钮高度样式
 	// Button height style
-	const heightInObj = {
-		'0': 'py-0',
-		'1': 'py-1',
-		'2': 'py-2',
-		'3': 'py-3',
-		'4': 'py-4',
-	};
+	const heightInObj = { '0': 'py-0', '1': 'py-1', '2': 'py-2', '3': 'py-3', '4': 'py-4' };
 
 	// 是否块级元素
-	$: block = (size === 'full' || size === 'big') && !customSize;
+	// Whether it is a block element
+	const block = (size === 'full' || size === 'big') && !customSize;
 
 	// 文字颜色
-	$: textColor = state === 'theme' ? 'text-white dark:text-black' : 'text-white';
+	// Text color
+	const textColor = state === 'theme' ? 'text-white dark:text-black' : 'text-white';
 </script>
 
 <div