[stdf]Cell add clickAll props.

demo/src/pages/cell/CellDemo.svelte

@@ -13,6 +13,7 @@
 			<span slot="detail" class="text-primary dark:text-dark text-xs">我是插槽内容</span>
 		</Cell>
 		<Cell title="右侧无箭头" right="none" />
+		<Cell title="纯展示，无点击效果" right="none" clickAll={false} />
 		<Cell title="点击事件" detail="请点击我" on:click={() => (visible = true)} />
 		<Toast bind:visible message="你戳到我了！" />
 		<Cell title="右侧有详情无箭头" detail="归零者" right="none" />
@@ -20,6 +21,7 @@
 		<Cell title="开关带详情" detail="解释一下" right={{ type: 'switch' }} />
 		<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
 		<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
+		<Cell title="仅点击开关触发" clickAll={false} right={{ type: 'switch' }} />
 		<Cell title="左侧使用 Icon 组件" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
 		<Cell title="右侧使用 Icon 组件" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
 		<Cell title="左侧自定义图片" left="slot">

demo/src/pages/cell/CellDemo_en.svelte

@@ -13,6 +13,7 @@
 			<span slot="detail" class="text-primary dark:text-dark text-xs">I am a slot content</span>
 		</Cell>
 		<Cell title="There is no arrow on the right" right="none" />
+		<Cell title="Pure display, no click effect" right="none" clickAll={false} />
 		<Cell title="Click event" detail="Please click me" on:click={() => (visible = true)} />
 		<Toast bind:visible message="You poke to me!" />
 		<Cell title="There are details on the right without arrows" detail="Zero" right="none" />
@@ -20,6 +21,7 @@
 		<Cell title="Switch with details" detail="explain" right={{ type: 'switch' }} />
 		<Cell title="Switch with text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
 		<Cell title="Switch full round corner" right={{ type: 'switch', switch: { radius: 'full' } }} />
+		<Cell title="Just click on the switch to trigger" clickAll={false} right={{ type: 'switch' }} />
 		<Cell title="Use on the left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
 		<Cell title="Use on the right side Icon" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
 		<Cell title="Left custom picture" left="slot">

doc/components/cell/api.md

@@ -1,21 +1,22 @@
 ## Cell Props
 
-| 属性      | 类型                                | 默认值  | 可选值                                        | 必传 | 说明                 |
-| --------- | ----------------------------------- | ------- | --------------------------------------------- | ---- | -------------------- |
-| title     | String                              | ''      | -                                             | Y    | 标题。               |
-| detail    | String/slot                         | ''      | 任何字符/'slot'                               | N    | 右侧详情。           |
-| left      | String/Icon Props/slot              | ''      | ''/Icon Props/'slot'                          | N    | 最左侧内容。         |
-| right     | String/Icon Props/Switch Props/slot | 'arrow' | 'none'/'arrow'/Switch Props/Icon Props/'slot' | N    | 最右侧内容。         |
-| subTitle  | String                              | ''      | -                                             | N    | 左侧次级标题。       |
-| info      | String                              | ''      | -                                             | N    | 右侧次级信息。       |
-| line      | Boolean                             | false   | true/false                                    | N    | 是否显示底部分割线。 |
-| my        | String                              | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N    | 上下间距。           |
-| mx        | String                              | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N    | 左右间距。           |
-| radius    | String                              | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full'     | N    | 圆角风格。           |
-| shadow    | String                              | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'       | N    | 阴影风格。           |
-| switcheck | Boolean                             | false   | true/false                                    | N    | 开关状态。           |
-| injClass  | String                              | ''      | Class                                         | N    | 注入 CSS 名称。      |
-| love      | Boolean                             | false   | true/false                                    | N    | 是否开启关爱版。     |
+| 属性      | 类型                                | 默认值  | 可选值                                        | 必传 | 说明                   |
+| --------- | ----------------------------------- | ------- | --------------------------------------------- | ---- | ---------------------- |
+| title     | String                              | ''      | -                                             | Y    | 标题。                 |
+| detail    | String/slot                         | ''      | 任何字符/'slot'                               | N    | 右侧详情。             |
+| left      | String/Icon Props/slot              | ''      | ''/Icon Props/'slot'                          | N    | 最左侧内容。           |
+| right     | String/Icon Props/Switch Props/slot | 'arrow' | 'none'/'arrow'/Switch Props/Icon Props/'slot' | N    | 最右侧内容。           |
+| subTitle  | String                              | ''      | -                                             | N    | 左侧次级标题。         |
+| info      | String                              | ''      | -                                             | N    | 右侧次级信息。         |
+| line      | Boolean                             | false   | true/false                                    | N    | 是否显示底部分割线。   |
+| my        | String                              | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N    | 上下间距。             |
+| mx        | String                              | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N    | 左右间距。             |
+| radius    | String                              | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full'     | N    | 圆角风格。             |
+| shadow    | String                              | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'       | N    | 阴影风格。             |
+| switcheck | Boolean                             | false   | true/false                                    | N    | 开关状态。             |
+| injClass  | String                              | ''      | Class                                         | N    | 注入 CSS 名称。        |
+| love      | Boolean                             | false   | true/false                                    | N    | 是否开启关爱版。       |
+| clickAll  | Boolean                             | true    | true/false                                    | N    | 是否点击整行触发事件。 |
 
 ## Cell Events
 

doc/components/cell/api_en.md

@@ -1,21 +1,22 @@
 ## Cell Props
 
-| Property  | Type                                         | Default | Options                                       | Required | Description                              |
-| --------- | -------------------------------------------- | ------- | --------------------------------------------- | -------- | ---------------------------------------- |
-| title     | String                                       | ''      | -                                             | Y        | Title.                                   |
-| detail    | String or Slot                               | ''      | Any character/'slot'                          | N        | Detail on the right side.                |
-| left      | String or Icon Props or Slot                 | ''      | ''/Icon Props/'slot'                          | N        | The leftmost content.                    |
-| right     | String or Icon Props or Switch Props or Slot | 'arrow' | 'none'/'arrow'/Switch Props/Icon Props/'slot' | N        | The content on the far right.            |
-| subTitle  | String                                       | ''      | -                                             | N        | Secondary title on the left.             |
-| info      | String                                       | ''      | -                                             | N        | Secondary information on the right.      |
-| line      | Boolean                                      | false   | true/false                                    | N        | Whether to display bottom dividing line. |
-| my        | String                                       | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N        | Top and bottom margin.                   |
-| mx        | String                                       | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N        | Left and right margin.                   |
-| radius    | String                                       | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full'     | N        | Rounded style.                           |
-| shadow    | String                                       | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'       | N        | Shadow style.                            |
-| switcheck | Boolean                                      | false   | true/false                                    | N        | Switch status.                           |
-| injClass  | String                                       | ''      | Class                                         | N        | Inject CSS name.                         |
-| love      | Boolean                                      | false   | true/false                                    | N        | Whether to enable the Loving version.    |
+| Property  | Type                                         | Default | Options                                       | Required | Description                                              |
+| --------- | -------------------------------------------- | ------- | --------------------------------------------- | -------- | -------------------------------------------------------- |
+| title     | String                                       | ''      | -                                             | Y        | Title.                                                   |
+| detail    | String or Slot                               | ''      | Any character/'slot'                          | N        | Detail on the right side.                                |
+| left      | String or Icon Props or Slot                 | ''      | ''/Icon Props/'slot'                          | N        | The leftmost content.                                    |
+| right     | String or Icon Props or Switch Props or Slot | 'arrow' | 'none'/'arrow'/Switch Props/Icon Props/'slot' | N        | The content on the far right.                            |
+| subTitle  | String                                       | ''      | -                                             | N        | Secondary title on the left.                             |
+| info      | String                                       | ''      | -                                             | N        | Secondary information on the right.                      |
+| line      | Boolean                                      | false   | true/false                                    | N        | Whether to display bottom dividing line.                 |
+| my        | String                                       | '4'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N        | Top and bottom margin.                                   |
+| mx        | String                                       | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'                   | N        | Left and right margin.                                   |
+| radius    | String                                       | 'lg'    | 'none'/'base'/'md'/'lg'/'xl'/'2xl'/'full'     | N        | Rounded style.                                           |
+| shadow    | String                                       | 'sm'    | 'none'/'sm'/'base'/'md'/'lg'/'xl'/'2xl'       | N        | Shadow style.                                            |
+| switcheck | Boolean                                      | false   | true/false                                    | N        | Switch status.                                           |
+| injClass  | String                                       | ''      | Class                                         | N        | Inject CSS name.                                         |
+| love      | Boolean                                      | false   | true/false                                    | N        | Whether to enable the Loving version.                    |
+| clickAll  | Boolean                                      | true    | true/false                                    | N        | Whether to trigger the event by clicking the entire row. |
 
 ## Cell Events
 

doc/components/cell/guide.md

@@ -20,6 +20,10 @@ right 也支持传入 Icon Props，考虑右侧使用开关的场景较多，为
 
 具体 Icon Props 与 Switch Props 请查看对应组件 API。
 
+## clickAll
+
+移动端考虑交互的友好性，Cell 默认点击整行都会触发事件，但是考虑场景的多样性，你可以通过将 clickAll 参数设置为 false 来禁用这个功能。只是在特定区域触发事件，比如实例中配合 Switch 组件使用，仅在点击 Switch 时触发事件。
+
 ## switcheck
 
 switcheck 值仅在 right 的 type 为 switch 时生效，表示开关状态值。注意，此时 Cell 内部 Switch 的 check 由 switcheck 决定，**请不要在 switch 内部再传入 check**。

doc/components/cell/guide_en.md

@@ -20,6 +20,10 @@ Optimization: When the right side is a switch, clicking on the entire Cell area
 
 Please refer to the respective component API for specific Icon Props and Switch Props.
 
+## clickAll
+
+Considering the user-friendliness of mobile interaction, by default, clicking on any part of a cell on a mobile device will trigger an event. However, to accommodate different scenarios, you can disable this feature by setting the `clickAll` parameter to false. This means that events will only be triggered in specific areas, such as when using the Switch component in the example, where the event will only be triggered when clicking on the Switch.
+
 ## switcheck
 
 The switcheck value only takes effect when the type of right is switch, indicating the switch state value. Please note that the check inside the Cell Switch is determined by switcheck. **Please do not pass check inside the switch again**.

doc/components/cell/version.md

@@ -1,3 +1,7 @@
+## 0.2.10
+
+- [!tag|A|0|]增加 `clickAll` 参数，用于控制是否点击整行都触发事件。关联 [Issues](https://github.com/dufu1991/stdf/issues/7)。[!issue|yuedanlabs|]
+
 ## 0.0.10
 
 - [!tag|O|0|]增加 title 与右侧 detail 间距。[!contribute|893358308|]

doc/components/cell/version_en.md

@@ -1,3 +1,7 @@
+## 0.2.10
+
+- [!tag|A|0|]Add the `clickAll` parameter to control whether clicking on the entire row triggers an event. Related [Issues](https://github.com/dufu1991/stdf/issues/7). [!issue|yuedanlabs|]
+
 ## 0.0.10
 
 - [!tag|O|0|]Increase the distance between title and right detail. [!contribute|893358308|]

doc/guide/changelog.md

@@ -1,3 +1,7 @@
+## 0.2.10
+
+- 增强 Cell 组件，详见 [Cell](https://stdf.design/#/components?nav=cell&tab=4)。
+
 ## 0.2.9
 
 - 修复 NPM 缺少的文件。

doc/guide/changelog_en.md

@@ -1,3 +1,7 @@
+## 0.2.10
+
+- Enhanced the Cell component. For details, see [Cell](https://stdf.design/#/components?nav=cell&tab=4).
+
 ## 0.2.9
 
 - Fixed missing files in NPM package.

packages/stdf/components/cell/Cell.svelte

@@ -69,6 +69,10 @@
 	// Whether to open the care version
 	export let love = false;
 
+	// 是否点击整个 Cell 都触发事件
+	// Whether to click the entire Cell to trigger the event
+	export let clickAll = true;
+
 	// 圆角风格样式
 	// Rounded style style
 	const radiusObj = {
@@ -120,12 +124,14 @@
 	// 点击事件
 	// Click event
 	const setClickFun = () => {
-		if (right?.constructor === Object && right.type === 'switch' && !right.switch?.disabled) {
-			switcheck = right.switch?.async ? switcheck : !switcheck;
+		if (clickAll) {
+			if (right?.constructor === Object && right.type === 'switch' && !right.switch?.disabled) {
+				switcheck = right.switch?.async ? switcheck : !switcheck;
+			}
+			// 派发事件
+			// Dispatch event
+			dispatch('click');
 		}
-		// 派发事件
-		// Dispatch event
-		dispatch('click');
 	};
 </script>
 
@@ -133,9 +139,11 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	on:click={setClickFun}
-	class={`px-4 cursor-pointer bg-white dark:bg-gray1 active:bg-gray8 dark:active:bg-gray4 ${myClass[my] || myClass['4']}${
-		mxClass[mx] || mxClass['2']
-	}${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${love ? ' text-xl' : ''} ${injClass}`}
+	class={`px-4 cursor-pointer bg-white dark:bg-gray1${clickAll ? ' active:bg-gray8 dark:active:bg-gray4' : ''} ${
+		myClass[my] || myClass['4']
+	}${mxClass[mx] || mxClass['2']}${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${
+		love ? ' text-xl' : ''
+	} ${injClass}`}
 >
 	<div class={`flex justify-between gap-4 py-4${line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}`}>
 		<!-- left -->

packages/stdf/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "0.2.9",
+	"version": "0.2.10",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"main": "./components/index.js",
 	"svelte": "./components/index.js",
@@ -9,6 +9,7 @@
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"author": "dufu1991",
+	"funding": "https://paypal.me/dufu1991",
 	"license": "MIT",
 	"homepage": "https://stdf.design",
 	"keywords": [