[stdf]Publish [email protected]

any-tdf · Dec 16, 2024 · b942673 · b942673
1 parent af3c49c
commit b942673
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 23 deletions.
diff --git a/docs/mds/components/cell/version.md b/docs/mds/components/cell/version.md
@@ -1,3 +1,8 @@
+## 1.0.0-next.7
+
+- [!tag|B|3|]修复右侧箭头未垂直居中问题。
+- [!tag|O|0|]减少左右两侧间距。
+
 ## 0.2.11
 
 - [!tag|B|2|]修复左右区域上下居中对齐问题。

diff --git a/docs/mds/components/cell/version_en.md b/docs/mds/components/cell/version_en.md
@@ -1,3 +1,8 @@
+## 1.0.0-next.7
+
+- [!tag|B|3|]Fix the problem that the right arrow is not vertically centered.
+- [!tag|O|0|]Reduce the distance between the left and right sides.
+
 ## 0.2.11
 
 - [!tag|B|2|]Fix the problem of up and down alignment in the left and right areas.

diff --git a/docs/mds/components/navBar/api.md b/docs/mds/components/navBar/api.md
@@ -1,13 +1,14 @@
 ## NavBar Props
 
-| 名称     | 类型                                                                      | 默认值                  | 必传 | 说明                                                       |
-| -------- | ------------------------------------------------------------------------- | ----------------------- | ---- | ---------------------------------------------------------- |
-| title    | `string`                                                                  | 当前语言的 navBar.title | N    | 标题。                                                     |
-| left     | `'back'\|null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `'back'`                | N    | 左侧内容，`'back'` 返回图标，`null` 无内容，否则渲染图标。 |
-| rights   | [`Icon[]`](https://stdf.design/#/components?nav=icon&tab=1)               | `[]`                    | N    | 右侧内容，Icon Props 组成的数组，建议不超过三个。          |
-| line     | `boolean`                                                                 | `true`                  | N    | 是否显示底部分割线。                                       |
-| injClass | `string`                                                                  | `''`                    | N    | 注入 CSS 名称。                                            |
-| love     | `boolean`                                                                 | `false`                 | N    | 是否开启关爱版。                                           |
+| 名称       | 类型                                                                      | 默认值                  | 必传 | 说明                                                       |
+| ---------- | ------------------------------------------------------------------------- | ----------------------- | ---- | ---------------------------------------------------------- |
+| title      | `string`                                                                  | 当前语言的 navBar.title | N    | 标题。                                                     |
+| titleAlign | `'left'\|'center'\|'right'`                                               | `'left'`                | N    | 标题对齐方式。                                             |
+| left       | `'back'\|null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `'back'`                | N    | 左侧内容，`'back'` 返回图标，`null` 无内容，否则渲染图标。 |
+| rights     | [`Icon[]`](https://stdf.design/#/components?nav=icon&tab=1)               | `[]`                    | N    | 右侧内容，Icon Props 组成的数组，建议不超过三个。          |
+| line       | `boolean`                                                                 | `true`                  | N    | 是否显示底部分割线。                                       |
+| injClass   | `string`                                                                  | `''`                    | N    | 注入 CSS 名称。                                            |
+| love       | `boolean`                                                                 | `false`                 | N    | 是否开启关爱版。                                           |
 
 ## NavBar Events
 

diff --git a/docs/mds/components/navBar/api_en.md b/docs/mds/components/navBar/api_en.md
@@ -1,13 +1,14 @@
 ## NavBar Props
 
-| Name     | Type                                                                      | Default                       | Required | Description                                                                         |
-| -------- | ------------------------------------------------------------------------- | ----------------------------- | -------- | ----------------------------------------------------------------------------------- |
-| title    | `string`                                                                  | Current language navBar.title | N        | Title text.                                                                         |
-| left     | `'back'\|null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `'back'`                      | N        | Left content, `'back'` for back icon, `null` for no content, otherwise render icon. |
-| rights   | [`Icon[]`](https://stdf.design/#/components?nav=icon&tab=1)               | `[]`                          | N        | Right content array of Icon Props, recommend no more than 3 icons.                  |
-| line     | `boolean`                                                                 | `true`                        | N        | Whether to show bottom divider line.                                                |
-| injClass | `string`                                                                  | `''`                          | N        | Inject CSS class name.                                                              |
-| love     | `boolean`                                                                 | `false`                       | N        | Whether to enable care version.                                                     |
+| Name       | Type                                                                      | Default                       | Required | Description                                                                         |
+| ---------- | ------------------------------------------------------------------------- | ----------------------------- | -------- | ----------------------------------------------------------------------------------- |
+| title      | `string`                                                                  | Current language navBar.title | N        | Title text.                                                                         |
+| titleAlign | `'left'\|'center'\|'right'`                                               | `'left'`                      | N        | Title alignment.                                                                    |
+| left       | `'back'\|null`\|[`Icon`](https://stdf.design/#/components?nav=icon&tab=1) | `'back'`                      | N        | Left content, `'back'` for back icon, `null` for no content, otherwise render icon. |
+| rights     | [`Icon[]`](https://stdf.design/#/components?nav=icon&tab=1)               | `[]`                          | N        | Right content array of Icon Props, recommend no more than 3 icons.                  |
+| line       | `boolean`                                                                 | `true`                        | N        | Whether to show bottom divider line.                                                |
+| injClass   | `string`                                                                  | `''`                          | N        | Inject CSS class name.                                                              |
+| love       | `boolean`                                                                 | `false`                       | N        | Whether to enable care version.                                                     |
 
 ## NavBar Events
 

diff --git a/docs/mds/components/navBar/version.md b/docs/mds/components/navBar/version.md
@@ -0,0 +1,3 @@
+## 1.0.0-next.7
+
+- [!tag|A|0|]新增 titleAlign 属性。
diff --git a/docs/mds/components/navBar/version_en.md b/docs/mds/components/navBar/version_en.md
@@ -0,0 +1,3 @@
+## 1.0.0-next.7
+
+- [!tag|A|0|]Add titleAlign property.
diff --git a/docs/mds/guide/changelog.md b/docs/mds/guide/changelog.md
@@ -1,3 +1,7 @@
+## 1.0.0-next.7 <font size=1>2024-12-16</font>
+
+- 增强 NavBar 组件，详见 [NavBar](https://next.stdf.design/components?nav=navBar&tab=4)。
+
 ## 1.0.0-next.6 <font size=1>2024-12-03</font>
 
 - 新增多语言文件。

diff --git a/docs/mds/guide/changelog_en.md b/docs/mds/guide/changelog_en.md
@@ -1,3 +1,7 @@
+## 1.0.0-next.7 <font size=1>2024-12-16</font>
+
+- Enhanced NavBar component, please see [NavBar](https://next.stdf.design/components?nav=navBar&tab=4).
+
 ## 1.0.0-next.6 <font size=1>2024-12-03</font>
 
 - Added multi-language files.

diff --git a/packages/stdf/package.json b/packages/stdf/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "1.0.0-next.6",
+	"version": "1.0.0-next.7",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"author": "any-tdf",
 	"funding": "https://stdf.design?fund",

diff --git a/packages/stdf/src/lib/components/cell/Cell.svelte b/packages/stdf/src/lib/components/cell/Cell.svelte
@@ -88,14 +88,14 @@
 </script>
 
 <div
-	class="bg-white px-4 dark:bg-gray-800{clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} {myClass[my] ||
+	class="bg-white px-3 dark:bg-gray-800{clickAll ? ' active:bg-gray-100 dark:active:bg-gray-600' : ''} {myClass[my] ||
 		myClass['4']}{mxClass[mx] || mxClass['2']}{radiusObj[radius] || radiusObj['lg']} {shadowClass[shadow] || shadowClass['sm']}{love
 		? ' text-xl'
 		: ''} {injClass}"
 >
 	<button
 		onclick={setClickFun}
-		class="flex w-full justify-between gap-4 py-4{line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}"
+		class="flex w-full items-center justify-between gap-4 py-4{line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}"
 	>
 		<div class="flex items-center justify-between">
 			{#if leftChild}
@@ -110,7 +110,7 @@
 				<div class="text-xs text-gray-500 dark:text-gray-400">{subTitle}</div>
 			</div>
 		</div>
-		<div class="flex items-center justify-between">
+		<div class="11 flex items-center justify-between">
 			<div class="flex flex-col {info === '' ? 'justify-center' : 'justify-between'} text-right">
 				{#if detailChild}
 					{@render detailChild?.()}

diff --git a/packages/stdf/src/lib/components/navBar/NavBar.svelte b/packages/stdf/src/lib/components/navBar/NavBar.svelte
@@ -11,6 +11,7 @@
 
 	let {
 		title = navBarLang.title,
+		titleAlign = 'left',
 		left = 'back',
 		rights = [],
 		line = true,
@@ -26,6 +27,10 @@
 	//图标大小
 	//Icon size
 	const iconSize = love ? 30 : 24;
+
+	// 标题对齐方式
+	// Title alignment
+	const titleAlignClass = { left: 'text-left', center: 'text-center', right: 'text-right' };
 </script>
 
 <div
@@ -50,7 +55,7 @@
 		{#if titleChild}
 			{@render titleChild()}
 		{:else}
-			{title}
+			<div class={titleAlignClass[titleAlign] || titleAlignClass['left']}>{title}</div>
 		{/if}
 	</div>
 	<div class="flex">

diff --git a/packages/stdf/src/lib/types/index.ts b/packages/stdf/src/lib/types/index.ts
@@ -388,6 +388,7 @@ export type ModalProps = {
 
 export type NavBarProps = {
 	title?: string;
+	titleAlign?: 'left' | 'center' | 'right';
 	left?: 'back' | null | IconProps;
 	rights?: IconProps[];
 	line?: boolean;

diff --git a/packages/stdf/src/routes/navBar/en_US/+page.svelte b/packages/stdf/src/routes/navBar/en_US/+page.svelte
@@ -16,6 +16,7 @@
 <div class="flex flex-col space-y-8 py-8">
 	<NavBar title="Basic usage" />
 	<NavBar title="Use Icon on the right side" rights={icons1} />
+	<NavBar title="Title centered" titleAlign="center" rights={[{ name: 'ri-command-line' }]} />
 	<NavBar title="Click on the left" onclickLeft={() => (visible1 = true)} />
 	<Toast bind:visible={visible1} message="Clicked on the left!" />
 	<NavBar
@@ -43,7 +44,7 @@
 		{/snippet}
 		{#snippet rightChild()}
 			<div>
-				<button class="h-12 w-12 cursor-pointer text-center text-primary dark:text-dark" onclick={() => (visible3 = true)}>Hello</button>
+				<button class="text-primary dark:text-dark h-12 w-12 cursor-pointer text-center" onclick={() => (visible3 = true)}>Hello</button>
 			</div>
 		{/snippet}
 	</NavBar>

diff --git a/packages/stdf/src/routes/navBar/zh_CN/+page.svelte b/packages/stdf/src/routes/navBar/zh_CN/+page.svelte
@@ -16,6 +16,7 @@
 <div class="flex flex-col space-y-8 py-8">
 	<NavBar title="基础用法" />
 	<NavBar title="右侧使用 Icon" rights={icons1} />
+	<NavBar title="标题居中" titleAlign="center" rights={[{ name: 'ri-command-line' }]} />
 	<NavBar title="点击左侧" onclickLeft={() => (visible1 = true)} />
 	<Toast bind:visible={visible1} message="点击了左侧！" />
 	<NavBar
@@ -43,7 +44,7 @@
 		{/snippet}
 		{#snippet rightChild()}
 			<div>
-				<button class="h-12 w-12 cursor-pointer text-center text-primary dark:text-dark" onclick={() => (visible3 = true)}>Hello</button>
+				<button class="text-primary dark:text-dark h-12 w-12 cursor-pointer text-center" onclick={() => (visible3 = true)}>Hello</button>
 			</div>
 		{/snippet}
 	</NavBar>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## 1.0.0-next.7

		- [!tag\|A\|0\|]新增 titleAlign 属性。
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## 1.0.0-next.7

		- [!tag\|A\|0\|]Add titleAlign property.