[stdf]Update NoticeBar compoent, demo and documents.

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

@@ -8,7 +8,7 @@
 		'2. This is the second notice!',
 	];
 
-	let visible = false;
+	let visible = $state(false);
 </script>
 
 <div class="m-4 mt-8 font-bold text-lg">Basic usage</div>
@@ -24,22 +24,31 @@
 <NoticeBar speed={100} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Right arrow (listen for click events)</div>
-<NoticeBar rightIcon="arrow" {textList} on:clickright={() => (visible = true)}></NoticeBar>
+<NoticeBar rightIcon="arrow" {textList} onclickRight={() => (visible = true)}></NoticeBar>
 <Toast bind:visible message="Click the right arrow!"></Toast>
 
 <div class="m-4 mt-8 font-bold text-lg">No content on the right</div>
-<NoticeBar rightIcon="none" {textList}></NoticeBar>
+<NoticeBar rightIcon={null} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Nothing on the left</div>
-<NoticeBar leftIcon="none" {textList}></NoticeBar>
+<NoticeBar leftIcon={null} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Set text size</div>
 <NoticeBar fontSize="lg" {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Custom left</div>
 <NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, top: -1 }} {textList}></NoticeBar>
+<div class="my-4"></div>
 <NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, top: -1 }} {textList}></NoticeBar>
-<NoticeBar leftIcon="slot" {textList}>🥳</NoticeBar>
+<div class="my-4"></div>
+<NoticeBar {textList}>
+	{#snippet leftChild()}🥳{/snippet}
+</NoticeBar>
+
+<div class="m-4 mt-8 font-bold text-lg">Custom right</div>
+<NoticeBar {textList}>
+	{#snippet rightChild()}🥳{/snippet}
+</NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">Vertical rolling</div>
 <NoticeBar vertical {textList}></NoticeBar>
@@ -58,6 +67,8 @@
 
 <div class="m-4 mt-8 font-bold text-lg">Custom style</div>
 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
+<div class="my-4"></div>
 <NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
+<div class="my-4"></div>
 <NoticeBar injClass="!text-extend0 !bg-extend0/10" {textList}></NoticeBar>
 <div class="pb-8"></div>

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

@@ -5,7 +5,7 @@
 	let textList = ['1. 这是第一条通告内容！', '2. 这是第二条通告内容！'];
 	let textLongList = ['1. 这条通告超长长长长长长长长长长长长长长长长长长长长长！', '2. 这是第二条通告内容！'];
 
-	let visible = false;
+	let visible = $state(false);
 </script>
 
 <div class="m-4 mt-8 font-bold text-lg">基础用法</div>
@@ -21,22 +21,31 @@
 <NoticeBar speed={100} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">右侧箭头（监听点击事件）</div>
-<NoticeBar rightIcon="arrow" {textList} on:clickright={() => (visible = true)}></NoticeBar>
+<NoticeBar rightIcon="arrow" {textList} onclickRight={() => (visible = true)}></NoticeBar>
 <Toast bind:visible message="点击了右侧箭头！"></Toast>
 
 <div class="m-4 mt-8 font-bold text-lg">右侧无内容</div>
-<NoticeBar rightIcon="none" {textList}></NoticeBar>
+<NoticeBar rightIcon={null} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">左侧无内容</div>
-<NoticeBar leftIcon="none" {textList}></NoticeBar>
+<NoticeBar leftIcon={null} {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">设定文字大小</div>
 <NoticeBar fontSize="lg" {textList}></NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">自定义左侧</div>
 <NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, top: -1 }} {textList}></NoticeBar>
+<div class="my-4"></div>
 <NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, top: -1 }} {textList}></NoticeBar>
-<NoticeBar leftIcon="slot" {textList}>🥳</NoticeBar>
+<div class="my-4"></div>
+<NoticeBar {textList}>
+	{#snippet leftChild()}🥳{/snippet}
+</NoticeBar>
+
+<div class="m-4 mt-8 font-bold text-lg">自定义右侧</div>
+<NoticeBar {textList}>
+	{#snippet rightChild()}🥳{/snippet}
+</NoticeBar>
 
 <div class="m-4 mt-8 font-bold text-lg">垂直滚动</div>
 <NoticeBar vertical {textList}></NoticeBar>
@@ -55,6 +64,8 @@
 
 <div class="m-4 mt-8 font-bold text-lg">自定义样式</div>
 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
+<div class="my-4"></div>
 <NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
+<div class="my-4"></div>
 <NoticeBar injClass="!text-extend0 !bg-extend0/10" {textList}></NoticeBar>
 <div class="pb-8"></div>

doc/components/noticeBar/api.md

@@ -1,26 +1,27 @@
 ## NoticeBar Props
 
-| 属性      | 类型          | 默认值                                           | 可选值                   | 必传 | 说明                          |
-| --------- | ------------- | ------------------------------------------------ | ------------------------ | ---- | ----------------------------- |
-| textList  | Array         | []                                               | -                        | Y    | 通告内容组成的数组。          |
-| leftIcon  | Object/String | {name: 'ri-volume-down-line', size: 20, top: -1} | Icon Props/'slot'/'none' | N    | 左侧内容。                    |
-| rightIcon | String        | 'close'                                          | 'close'/'arrow'/'none'   | N    | 右侧内容。                    |
-| fontSize  | String        | 'sm'                                             | 'xs'/'sm'/'base'/'lg'    | N    | 通告字体大小。                |
-| space     | Number        | 100                                              | -                        | N    | 通告间距，单位是 px。         |
-| speed     | Number        | 30                                               | -                        | N    | 横向滚动速度，单位是 px/s。   |
-| vertical  | Boolean       | false                                            | true/false               | N    | 是否垂直滚动。                |
-| duration  | Number        | 500                                              | 100/300/500/700/1000     | N    | 垂直滚动过渡时间，单位是 ms。 |
-| interval  | Number        | 4                                                | -                        | N    | 垂直滚动间隔时间，单位是 s。  |
-| injClass  | String        | ''                                               | Class                    | N    | 注入 CSS 名称。               |
+| 名称      | 类型                                                              | 默认值    | 必传 | 说明                          |
+| --------- | ----------------------------------------------------------------- | --------- | ---- | ----------------------------- |
+| textList  | `string[]`                                                        | `[]`      | Y    | 通告内容组成的数组。          |
+| leftIcon  | `null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=0) | `{}`      | N    | 左侧内容。                    |
+| rightIcon | `'close'`\|`'arrow'`\|`null`                                      | `'close'` | N    | 右侧内容。                    |
+| fontSize  | `'xs'\|'sm'\|'base'\|'lg'`                                        | `'sm'`    | N    | 通告字体大小。                |
+| space     | `number`                                                          | `100`     | N    | 通告间距，单位是 px。         |
+| speed     | `number`                                                          | `30`      | N    | 横向滚动速度，单位是 px/s。   |
+| vertical  | `boolean`                                                         | `false`   | N    | 是否垂直滚动。                |
+| duration  | `100`\|`300`\|`500`\|`700`\|`1000`                                | `500`     | N    | 垂直滚动过渡时间，单位是 ms。 |
+| interval  | `number`                                                          | `4`       | N    | 垂直滚动间隔时间，单位是 s。  |
+| injClass  | `string`                                                          | `''`      | N    | 注入 CSS 名称。               |
 
 ## NoticeBar Events
 
-| 名称       | 参数 | 描述               |
-| ---------- | ---- | ------------------ |
-| clickright | -    | 点击右侧区域触发。 |
+| 名称         | 类型         | 参数 | 描述               |
+| ------------ | ------------ | ---- | ------------------ |
+| onclickRight | `() => void` | -    | 点击右侧区域触发。 |
 
-## NoticeBar Slots
+## NoticeBar Snippets
 
-| 名称 | 说 明                                 |
-| ---- | ------------------------------------- |
-| -    | 当 leftIcon 为 'slot' 时的左侧内容 。 |
+| 名称       | 类型                                                                | 参数 | 说明                     |
+| ---------- | ------------------------------------------------------------------- | ---- | ------------------------ |
+| leftChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染左侧内容区域。 |
+| rightChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 传入时渲染右侧内容区域。 |

doc/components/noticeBar/api_en.md

@@ -1,26 +1,27 @@
 ## NoticeBar Props
 
-| Name      | Type          | Default                                          | Options                  | Required | Description                              |
-| --------- | ------------- | ------------------------------------------------ | ------------------------ | -------- | ---------------------------------------- |
-| textList  | Array         | []                                               | -                        | Y        | An array of announcement content.        |
-| leftIcon  | Object/String | {name: 'ri-volume-down-line', size: 20, top: -1} | Icon Props/'slot'/'none' | N        | Left content.                            |
-| rightIcon | String        | 'close'                                          | 'close'/'arrow'/'none'   | N        | Right content.                           |
-| fontSize  | String        | 'sm'                                             | 'xs'/'sm'/'base'/'lg'    | N        | Font size of the announcement.           |
-| space     | Number        | 100                                              | -                        | N        | Spacing between announcements (px).      |
-| speed     | Number        | 30                                               | -                        | N        | Horizontal scrolling speed (px/s).       |
-| vertical  | Boolean       | false                                            | true/false               | N        | Whether to vertically scroll.            |
-| duration  | Number        | 500                                              | 100/300/500/700/1000     | N        | Vertical scrolling transition time (ms). |
-| interval  | Number        | 4                                                | -                        | N        | Vertical scrolling interval time (s).    |
-| injClass  | String        | ''                                               | Class                    | N        | Injected CSS class name.                 |
+| Name      | Type                                                              | Default   | Required | Description                                   |
+| --------- | ----------------------------------------------------------------- | --------- | -------- | --------------------------------------------- |
+| textList  | `string[]`                                                        | `[]`      | Y        | Array of announcement contents.               |
+| leftIcon  | `null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=0) | `{}`      | N        | Left content.                                 |
+| rightIcon | `'close'`\|`'arrow'`\|`null`                                      | `'close'` | N        | Right content.                                |
+| fontSize  | `'xs'\|'sm'\|'base'\|'lg'`                                        | `'sm'`    | N        | Font size of the announcement.                |
+| space     | `number`                                                          | `100`     | N        | Space between announcements in px.            |
+| speed     | `number`                                                          | `30`      | N        | Horizontal scrolling speed in px/s.           |
+| vertical  | `boolean`                                                         | `false`   | N        | Whether to scroll vertically.                 |
+| duration  | `100`\|`300`\|`500`\|`700`\|`1000`                                | `500`     | N        | Vertical scrolling transition duration in ms. |
+| interval  | `number`                                                          | `4`       | N        | Vertical scrolling interval time in seconds.  |
+| injClass  | `string`                                                          | `''`      | N        | Injected CSS class name.                      |
 
 ## NoticeBar Events
 
-| Name       | Parameters | Description                             |
-| ---------- | ---------- | --------------------------------------- |
-| clickright | -          | Triggered when clicking the right area. |
+| Name         | Type         | Params | Description                           |
+| ------------ | ------------ | ------ | ------------------------------------- |
+| onclickRight | `() => void` | -      | Triggered when right area is clicked. |
 
-## NoticeBar Slots
+## NoticeBar Snippets
 
-| Name | Description                                      |
-| ---- | ------------------------------------------------ |
-| -    | The left content when leftIcon is set to 'slot'. |
+| Name       | Type                                                                | Params | Description                           |
+| ---------- | ------------------------------------------------------------------- | ------ | ------------------------------------- |
+| leftChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Renders left content area if passed.  |
+| rightChild | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -      | Renders right content area if passed. |

doc/components/noticeBar/guide.md

@@ -8,11 +8,11 @@
 
 ## leftIcon 与 rightIcon
 
-左侧区域 leftIcon 除了默认的小喇叭图标，可以传入 Icon Props 实现其他图标显示，还可以自定义任何内容，通过插槽实现，而右侧区域 rightIcon 只允许关闭、箭头、不显示三种情况，请参考示例。
+左侧区域 leftIcon 除了默认的小喇叭图标，可以传入 Icon Props 实现其他图标显示，还可以自定义任何内容，通过 leftChild 这个 Snippet 实现，而右侧区域 rightIcon 只允许关闭、箭头、不显示三种情况，也可以通过 rightChild 这个 Snippet 实现自定义内容，请参考示例。
 
-## clickright 事件
+## onclickRight 事件
 
-当点击右侧区域时，如果 rightIcon 为 close 会关闭当前通告栏；而 rightIcon 无论是 close 还是 arrow 都会派发 clickright 事件，可以通过监听该事件来实现自定义的业务逻辑。
+当点击右侧区域时，如果 rightIcon 为 close 会关闭当前通告栏；而 rightIcon 无论是 close 还是 arrow 都会派发 onclickRight 事件，可以通过监听该事件来实现自定义的业务逻辑。
 
 ## CSS 注入
 

doc/components/noticeBar/guide_en.md

@@ -1,21 +1,21 @@
-> NoticeBar uses the icons ri-volume-down-line and ri-close-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+> NoticeBar uses icons ri-volume-down-line and ri-close-line. Please ensure these icons are included in your project's symbol.svg file. For more details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
 
 ## Description
 
-When placed horizontally, NoticeBar will automatically scroll horizontally if the total length of the content plus the spacing between each content exceeds the width of the container, otherwise it will not scroll.
+When placed horizontally, regardless of the number of content items, NoticeBar will automatically scroll horizontally if the total length of all content plus the spacing between them exceeds the container width. Otherwise, it will not scroll.
 
-When placed vertically, it will automatically scroll vertically if there is more than one piece of content, and if a single piece of content is too long it will overflow.
+When placed vertically, it will automatically scroll vertically if there is more than one content item. Single content items that are too long will overflow.
 
-## `leftIcon` and `rightIcon`
+## leftIcon and rightIcon
 
-The `leftIcon` area, in addition to the default small speaker icon, can display other icons with Icon Props or any custom content through a slot. The `rightIcon` area, on the other hand, only allows for the options of close, arrow, or not showing, please refer to the example.
+The left area (leftIcon), besides the default speaker icon, can display other icons by passing Icon Props. It can also be customized with any content through the leftChild Snippet. The right area (rightIcon) only allows three states: close, arrow, or hidden. It can also be customized through the rightChild Snippet. Please refer to the examples.
 
-## `clickright` event
+## onclickRight Event
 
-When clicking on the right area, if `rightIcon` is "close", it will close the current notice bar. Whether `rightIcon` is "close" or "arrow", it will dispatch a `clickright` event, which can be used to implement custom business logic by listening to the event.
+When clicking the right area, if rightIcon is set to close, it will close the current notice bar. Whether rightIcon is set to close or arrow, it will dispatch the onclickRight event, which can be listened to implement custom business logic.
 
-## CSS injection
+## CSS Injection
 
-The `injClass` parameter can inject a CSS classname (not limited to Tailwind CSS) into the outermost element within the component, which provides more customization options for the component's style. In the example, custom background color and text color are achieved through `injClass`.
+Through the injClass parameter, you can inject CSS class names (not limited to Tailwind CSS) into the component's outermost element. This provides more possibilities for custom styling. In the example, injClass is used to implement custom background and text colors.
 
-If the injected class does not take effect, add a "!" before the injected class name, as shown in the [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier) documentation.
+If the injected class doesn't take effect, please add "!" before the class name. You can refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).

packages/stdf/components/noticeBar/NoticeBar.svelte

@@ -6,7 +6,7 @@
 	/** @type {NoticeBarProps} */
 	let {
 		textList = [],
-		leftIcon = { name: 'ri-volume-down-line', size: 20, top: -1 },
+		leftIcon = {},
 		rightIcon = 'close',
 		fontSize = 'sm',
 		space = 100,
@@ -16,6 +16,7 @@
 		interval = 4,
 		injClass = '',
 		leftChild,
+		rightChild,
 		onclickRight,
 	} = $props();
 
@@ -121,28 +122,26 @@
 
 {#if isShowClose}
 	<div
-		class={`flex justify-between bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark${
-			fontSizeClass[fontSize] || fontSizeClass['sm']
-		} p-2${!rightIcon ? ' pr-2' : ' pr-0'} transition-all duration-300${isShow ? '' : ' scale-0'}${injClass === '' ? '' : ` ${injClass}`}`}
+		class="flex justify-between bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark{fontSizeClass[fontSize] ||
+			fontSizeClass['sm']} p-2{!rightIcon ? ' pr-2' : ' pr-0'} transition-all duration-300{isShow ? '' : ' scale-0'}{injClass === ''
+			? ''
+			: ` ${injClass}`}"
 	>
-		<div class={`${!leftIcon ? '' : 'mr-1'}`}>
+		<div class={!leftIcon ? '' : 'mr-1'}>
 			{#if leftChild}
 				{@render leftChild()}
-			{:else if !leftIcon}
-				<!--none-->
-			{:else}
-				<Icon {...leftIcon} />
+			{:else if !leftIcon}{:else}
+				<Icon name="ri-volume-down-line" size={20} top={-1} {...leftIcon} />
 			{/if}
 		</div>
 		{#if vertical}
 			<div class="grow" bind:this={outBoxDom}>
-				<div class="relative overflow-hidden" style={`height:${outBoxHeight}px;`}>
+				<div class="relative overflow-hidden" style="height:{outBoxHeight}px;">
 					{#each textListVertical as item, i}
 						<div
-							class={`absolute truncate${isTransition ? ' transition-all' : ' transition-none'}${
-								durationClass[duration] || durationClass['500']
-							}`}
-							style={`top:${-(currentIndex - i) * outBoxHeight}px;width:${outBoxWidth}px`}
+							class="absolute truncate{isTransition ? ' transition-all' : ' transition-none'}{durationClass[duration] ||
+								durationClass['500']}"
+							style="top:{-(currentIndex - i) * outBoxHeight}px;width:{outBoxWidth}px"
 						>
 							{item}
 						</div>
@@ -158,14 +157,14 @@
 				</div>
 			</div>
 		{/if}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class={`${!rightIcon ? '' : 'pl-2 pr-4'}`} onclick={clickFun}>
-			{#if rightIcon === 'close'}
+		<button class={!rightIcon ? '' : 'pl-2 pr-4'} onclick={clickFun}>
+			{#if rightChild}
+				{@render rightChild()}
+			{:else if !rightIcon}{:else if rightIcon === 'close'}
 				<Icon name="ri-close-line" size={20} top={-1} />
 			{:else if rightIcon === 'arrow'}
 				<Icon name="ri-arrow-right-s-line" size={20} top={-1} />
 			{/if}
-		</div>
+		</button>
 	</div>
 {/if}