Skip to content

Commit

Permalink
[stdf]Publish v1.0.0-next.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@dufu1991
dufu1991 committed Dec 23, 2024
1 parent 4813a33 commit fd0ccb8
Show file tree
Hide file tree
Showing 12 changed files with 122 additions and 87 deletions.
48 changes: 25 additions & 23 deletions docs/mds/components/numKeyboard/api.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
## NumKeyboard Props

| 名称 | 类型 | 默认值 | 必传 | 说明 |
| ------------ | ---------------------------------------------------------------------- | ---------------------- | ---- | -------------------- |
| type | `'button'`\|`'block'` | `'button'` | N | 键盘样式类型。 |
| visible | `boolean` | `false` | N | 是否显示键盘。 |
| height | `'8'`\|`'10'`\|`'12'`\|`'14'`\|`'16'`\|`'20'` | `'12'` | N | 按键高度。 |
| space | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'` | `'2'` | N | 按键间距。 |
| p | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'` | `'2'` | N | 键盘内边距。 |
| reverse | `boolean` | `false` | N | 数字是否上下反向。 |
| done | `boolean` | `true` | N | 是否显示完成按钮。 |
| dot | `boolean` | `true` | N | 是否显示小数点。 |
| close | `boolean` | `false` | N | 是否显示关闭按钮。 |
| doneText | `string` | 当前语言的 common.done | N | 完成按钮文案。 |
| doneDisabled | `boolean` | `false` | N | 完成按钮是否禁用。 |
| radius | `'none'`\|`'base'`\|`'md'`\|`'lg'`\|`'xl'`\|`'2xl'`\|`'3xl'`\|`'full'` | `'base'` | N | 按键圆角。 |
| panelClass | `string` | `''` | N | 键盘面板注入 Class。 |
| keyClass | `string` | `''` | N | 按键注入 Class。 |
| doneClass | `string` | `''` | N | 完成按键注入 Class。 |
| popup | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}` | N | 弹出层参数。 |
| 名称 | 类型 | 默认值 | 必传 | 说明 |
| ------------ | ----------------------------------------------------------- | ---------------------- | ---- | -------------------- |
| value | `string` | `''` | N | 输入内容。 |
| type | `'button'`\|`'block'` | `'button'` | N | 键盘样式类型。 |
| visible | `boolean` | `false` | N | 是否显示键盘。 |
| height | `'8'\|'10'\|'12'\|'14'\|'16'\|'20'` | `'12'` | N | 按键高度。 |
| space | `'0'\|'1'\|'2'\|'3'\|'4'` | `'2'` | N | 按键间距。 |
| p | `'0'\|'1'\|'2'\|'3'\|'4'` | `'2'` | N | 键盘内边距。 |
| reverse | `boolean` | `false` | N | 数字是否上下反向。 |
| done | `boolean` | `true` | N | 是否显示完成按钮。 |
| dot | `boolean` | `true` | N | 是否显示小数点。 |
| close | `boolean` | `false` | N | 是否显示关闭按钮。 |
| doneText | `string` | 当前语言的 common.done | N | 完成按钮文案。 |
| doneDisabled | `boolean` | `false` | N | 完成按钮是否禁用。 |
| radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'` | `'base'` | N | 按键圆角。 |
| clear | `boolean` | `false` | N | 打开时是否清空内容。 |
| panelClass | `string` | `''` | N | 键盘面板注入 Class。 |
| keyClass | `string` | `''` | N | 按键注入 Class。 |
| doneClass | `string` | `''` | N | 完成按键注入 Class。 |
| popup | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}` | N | 弹出层参数。 |

## NumKeyboard Events

| 名称 | 类型 | 参数 | 描述 |
| ------- | --------------------------------------- | --------------------------------------------------------- | ---------------------- |
| onclick | `(numStr: string, key: string) => void` | numStr - 输入的数字字符内容<br />key - 本次点击的键盘 key | 每次点击任意按键触发。 |
| onopen | `(height: number) => void` | height - 键盘高度 | 键盘打开时触发。 |
| onclose | `() => void` | - | 键盘关闭时触发。 |
| 名称 | 类型 | 参数 | 描述 |
| ------- | -------------------------- | ------------------------ | ---------------------- |
| onclick | `(key: string) => void` | key - 本次点击的键盘 key | 每次点击任意按键触发。 |
| onopen | `(height: number) => void` | height - 键盘高度 | 键盘打开时触发。 |
| onclose | `() => void` | - | 键盘关闭时触发。 |
48 changes: 25 additions & 23 deletions docs/mds/components/numKeyboard/api_en.md
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
## NumKeyboard Props

| Name | Type | Default | Required | Description |
| ------------ | ---------------------------------------------------------------------- | ------------------------------ | -------- | -------------------------------- |
| type | `'button'`\|`'block'` | `'button'` | N | Keyboard style type. |
| visible | `boolean` | `false` | N | Whether to show keyboard. |
| height | `'8'`\|`'10'`\|`'12'`\|`'14'`\|`'16'`\|`'20'` | `'12'` | N | Key height. |
| space | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'` | `'2'` | N | Key spacing. |
| p | `'0'`\|`'1'`\|`'2'`\|`'3'`\|`'4'` | `'2'` | N | Keyboard padding. |
| reverse | `boolean` | `false` | N | Whether to reverse number order. |
| done | `boolean` | `true` | N | Whether to show done button. |
| dot | `boolean` | `true` | N | Whether to show decimal point. |
| close | `boolean` | `false` | N | Whether to show close button. |
| doneText | `string` | Current language's common.done | N | Done button text. |
| doneDisabled | `boolean` | `false` | N | Whether to disable done button. |
| radius | `'none'`\|`'base'`\|`'md'`\|`'lg'`\|`'xl'`\|`'2xl'`\|`'3xl'`\|`'full'` | `'base'` | N | Key border radius. |
| panelClass | `string` | `''` | N | Inject class for keyboard panel. |
| keyClass | `string` | `''` | N | Inject class for keys. |
| doneClass | `string` | `''` | N | Inject class for done button. |
| popup | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}` | N | Popup parameters. |
| Name | Type | Default | Required | Description |
| ------------ | ----------------------------------------------------------- | ------------------------------ | -------- | ----------------------------------- |
| value | `string` | `''` | N | Input content. |
| type | `'button'`\|`'block'` | `'button'` | N | Keyboard style type. |
| visible | `boolean` | `false` | N | Whether to show keyboard. |
| height | `'8'\|'10'\|'12'\|'14'\|'16'\|'20'` | `'12'` | N | Key height. |
| space | `'0'\|'1'\|'2'\|'3'\|'4'` | `'2'` | N | Key spacing. |
| p | `'0'\|'1'\|'2'\|'3'\|'4'` | `'2'` | N | Keyboard padding. |
| reverse | `boolean` | `false` | N | Whether to reverse number order. |
| done | `boolean` | `true` | N | Whether to show done button. |
| dot | `boolean` | `true` | N | Whether to show decimal point. |
| close | `boolean` | `false` | N | Whether to show close button. |
| doneText | `string` | Current language's common.done | N | Done button text. |
| doneDisabled | `boolean` | `false` | N | Whether to disable done button. |
| radius | `'none'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'\|'3xl'\|'full'` | `'base'` | N | Key border radius. |
| clear | `boolean` | `false` | N | Whether to clear content when open. |
| panelClass | `string` | `''` | N | Inject class for keyboard panel. |
| keyClass | `string` | `''` | N | Inject class for keys. |
| doneClass | `string` | `''` | N | Inject class for done button. |
| popup | [`Popup`](https://stdf.design/#/components?nav=popup&tab=1) | `{}` | N | Popup parameters. |

## NumKeyboard Events

| Name | Type | Parameters | Description |
| ------- | --------------------------------------- | ------------------------------------------------------------ | ---------------------------------- |
| onclick | `(numStr: string, key: string) => void` | numStr - Input number string<br />key - Clicked keyboard key | Triggered when any key is clicked. |
| onopen | `(height: number) => void` | height - Keyboard height | Triggered when keyboard opens. |
| onclose | `() => void` | - | Triggered when keyboard closes. |
| Name | Type | Parameters | Description |
| ------- | -------------------------- | -------------------------- | ---------------------------------- |
| onclick | `(key: string) => void` | key - Clicked keyboard key | Triggered when any key is clicked. |
| onopen | `(height: number) => void` | height - Keyboard height | Triggered when keyboard opens. |
| onclose | `() => void` | - | Triggered when keyboard closes. |
4 changes: 4 additions & 0 deletions docs/mds/components/numKeyboard/version.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
## 1.0.0-next.9

- [!tag|A|0|]新增 `value` 与 `clear` 属性，关联 Issue [#36](https://github.com/any-tdf/stdf/issues/36)。[!issue|sbscan|]
- [!tag|O|0|]输入值不再通过 `onclick` 事件获取，而是通过 `value` 绑定。
4 changes: 4 additions & 0 deletions docs/mds/components/numKeyboard/version_en.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
## 1.0.0-next.9

- [!tag|A|0|]Add `value` and `clear` properties, related to Issue [#36](https://github.com/any-tdf/stdf/issues/36). [!issue|sbscan|]
- [!tag|O|0|]Input value is no longer obtained through the `onclick` event, but through the `value` binding.
4 changes: 4 additions & 0 deletions docs/mds/guide/changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 1.0.0-next.9 <font size=1>2024-12-23</font>

- 增强 NumKeyboard 组件，详见 [NumKeyboard](https://next.stdf.design/components?nav=numKeyboard&tab=4)。

## 1.0.0-next.8 <font size=1>2024-12-16</font>

- 增强 NavBar 组件，详见 [NavBar](https://next.stdf.design/components?nav=navBar&tab=4)。
Expand Down
4 changes: 4 additions & 0 deletions docs/mds/guide/changelog_en.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 1.0.0-next.9 <font size=1>2024-12-23</font>

- Enhanced NumKeyboard component, please see [NumKeyboard](https://next.stdf.design/components?nav=numKeyboard&tab=4).

## 1.0.0-next.8 <font size=1>2024-12-16</font>

- Enhanced NavBar component, please see [NavBar](https://next.stdf.design/components?nav=navBar&tab=4).
Expand Down
2 changes: 1 addition & 1 deletion packages/stdf/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "stdf",
"version": "1.0.0-next.8",
"version": "1.0.0-next.9",
"description": "Mobile web component library based on Svelte and Tailwind",
"author": "any-tdf",
"funding": "https://stdf.design?fund",
Expand Down
30 changes: 14 additions & 16 deletions packages/stdf/src/lib/components/numKeyboard/NumKeyboard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
let {
type = 'button',
value = $bindable(''),
visible = $bindable(true),
height = '12',
space = '2',
Expand All @@ -23,6 +24,7 @@
doneText = commonLang.done,
doneDisabled = $bindable(false),
radius = 'base',
clear = false,
panelClass = '',
keyClass = '',
doneClass = '',
Expand Down Expand Up @@ -104,39 +106,35 @@
}
};
// 输入的数字字符
// Input number character
let numStr = '';
// 点击按键事件
// Click the button event
const clickFunc = (key: string | number) => {
const clickFunc = (key: string) => {
// 当 key 不是 close 或 done 时，拼接字符串，是删除时，删除最后一个字符
// When key is not close or done, splice the string, delete the last character when it is deleted
if (key !== 'close' && key !== 'done') {
if (key === 'delete') {
numStr = numStr.slice(0, numStr.length - 1);
value = value.slice(0, value.length - 1);
} else {
numStr += key;
value += key;
}
}
// 如果 key 是数字处理为字符串
// If key is a number, process it as a string
const keyStr = typeof key === 'number' ? key.toString() : key;
// close 和 done 事件都回关闭
// close 和 done 事件都会关闭
// Both close and done events will be closed
if (keyStr === 'close' || (keyStr === 'done' && !doneDisabled)) {
if (key === 'close' || (key === 'done' && !doneDisabled)) {
visible = false;
}
// 派发事件，传递出两个参数，输入的数字字符串和本次点击的类型
// Dispatch events, pass out two parameters, the input number string and the type of this click
onclick?.(numStr, keyStr);
onclick?.(key);
};
// 激活与关闭键盘事件
// Activate and close the keyboard event
$effect(() => {
if (visible) {
if (clear) {
value = '';
}
onopen?.(keyboardHeight());
} else {
onclose?.();
Expand All @@ -150,15 +148,15 @@
'p-2'}{panelClass ? ' ' + panelClass : ''}"
>
<div class="grid {type === 'button' ? gapClass[space] || 'gap-2' : 'gap-px'} {done ? 'grid-cols-4' : 'grid-cols-3'}">
{#each reverse ? [7, 8, 9] : [1, 2, 3] as item}
{#each reverse ? ['7', '8', '9'] : ['1', '2', '3'] as item}
<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
{/each}
{#if done}
<button class={baseClassFunc('delete')} onclick={() => clickFunc('delete')}>
<Icon name="ri-delete-back-2-line" size={Number(height) * 2} />
</button>
{/if}
{#each [4, 5, 6] as item}
{#each ['4', '5', '6'] as item}
<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
{/each}
{#if done}
Expand All @@ -171,7 +169,7 @@
{doneText}
</button>
{/if}
{#each reverse ? [1, 2, 3] : [7, 8, 9] as item}
{#each reverse ? ['1', '2', '3'] : ['7', '8', '9'] as item}
<button class={baseClassFunc(item)} onclick={() => clickFunc(item)}>{item} </button>
{/each}
{#if dot}
Expand Down
7 changes: 2 additions & 5 deletions packages/stdf/src/lib/components/popup/Popup.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,15 +239,12 @@
transitionParams={transitionParamsFun()}
transitionOutParams={transitionOutParamsFun()}
>
<button
<div
class="w-full h-full{transparent ? ' bg-transparent' : ' bg-white dark:bg-gray-950'} {radiusFun()} overflow-y-auto"
class:popup-container={hideScrollbar}
onclick={(e) => {
e.stopPropagation();
}}
>
{@render children?.()}
</button>
</div>
</Transition>
</div>
{/if}
Expand Down
4 changes: 3 additions & 1 deletion packages/stdf/src/lib/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,7 @@ export type NoticeBarProps = {
};

export type NumKeyboardProps = {
value?: string;
type?: 'button' | 'block';
visible?: boolean;
height?: '8' | '10' | '12' | '14' | '16' | '20';
Expand All @@ -430,11 +431,12 @@ export type NumKeyboardProps = {
doneText?: string;
doneDisabled?: boolean;
radius?: 'none' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
clear?: boolean;
panelClass?: string;
keyClass?: string;
doneClass?: string;
popup?: PopupProps;
onclick?: (numStr: string, key: string) => void;
onclick?: (key: string) => void;
onopen?: (height: number) => void;
onclose?: () => void;
};
Expand Down
Loading

0 comments on commit fd0ccb8

Please sign in to comment.