@omit-design/preset-mobile 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/OmDialog.tsx +2 -2
- package/components/OmNumpad.tsx +2 -2
- package/components/OmOrderFooter.tsx +2 -2
- package/components/OmProductCard.tsx +2 -2
- package/components/OmSearchBar.tsx +1 -1
- package/components/OmSheet.tsx +1 -1
- package/package.json +1 -1
- package/templates/dashboard.tmpl.tsx +6 -6
- package/templates/detail-view.tmpl.tsx +8 -8
- package/templates/dialog-view.tmpl.tsx +6 -6
- package/templates/form-view.tmpl.tsx +6 -6
- package/templates/list-view.tmpl.tsx +6 -6
- package/templates/sheet-action.tmpl.tsx +5 -5
- package/templates/tab-view.tmpl.tsx +8 -8
- package/templates/welcome-view.tmpl.tsx +4 -4
package/components/OmDialog.tsx
CHANGED
|
@@ -39,7 +39,7 @@ export function OmDialog({
|
|
|
39
39
|
iconColor = "primary",
|
|
40
40
|
title,
|
|
41
41
|
subtitle,
|
|
42
|
-
confirmText = "
|
|
42
|
+
confirmText = "OK",
|
|
43
43
|
confirmColor = "primary",
|
|
44
44
|
confirmHref,
|
|
45
45
|
onConfirm,
|
|
@@ -81,7 +81,7 @@ export function OmDialog({
|
|
|
81
81
|
<>
|
|
82
82
|
{hasCancel && (
|
|
83
83
|
<OmButton variant="outline" color="medium" onClick={handleCancel}>
|
|
84
|
-
{cancelText ?? "
|
|
84
|
+
{cancelText ?? "Cancel"}
|
|
85
85
|
</OmButton>
|
|
86
86
|
)}
|
|
87
87
|
<OmButton color={confirmColor} onClick={handleConfirm}>
|
package/components/OmNumpad.tsx
CHANGED
|
@@ -63,14 +63,14 @@ export function OmNumpad({
|
|
|
63
63
|
{/* 右下角 */}
|
|
64
64
|
{clearMode ? (
|
|
65
65
|
<button className="om-numpad__key pos-numpad__key--clear" type="button" onClick={() => onClear?.()}>
|
|
66
|
-
|
|
66
|
+
Clear
|
|
67
67
|
</button>
|
|
68
68
|
) : showBackspace ? (
|
|
69
69
|
<button
|
|
70
70
|
className="om-numpad__key pos-numpad__key--ghost"
|
|
71
71
|
type="button"
|
|
72
72
|
onClick={() => onBackspace?.()}
|
|
73
|
-
aria-label="
|
|
73
|
+
aria-label="Backspace"
|
|
74
74
|
>
|
|
75
75
|
<IonIcon icon={backspaceOutline} />
|
|
76
76
|
</button>
|
|
@@ -43,7 +43,7 @@ export function OmOrderFooter({
|
|
|
43
43
|
className="om-order-footer__cart"
|
|
44
44
|
type="button"
|
|
45
45
|
onClick={onCartClick}
|
|
46
|
-
aria-label="
|
|
46
|
+
aria-label="Cart"
|
|
47
47
|
>
|
|
48
48
|
<IonIcon icon={cartOutline} />
|
|
49
49
|
{typeof cartCount === "number" && cartCount > 0 && (
|
|
@@ -55,7 +55,7 @@ export function OmOrderFooter({
|
|
|
55
55
|
<button className="om-order-footer__discount" type="button" onClick={onDiscountClick}>
|
|
56
56
|
<span className="om-order-footer__discount-amount">{discountLabel}</span>
|
|
57
57
|
<span className="om-order-footer__discount-label">
|
|
58
|
-
|
|
58
|
+
Discount details
|
|
59
59
|
<IonIcon icon={chevronForward} aria-hidden />
|
|
60
60
|
</span>
|
|
61
61
|
</button>
|
|
@@ -55,12 +55,12 @@ export function OmProductCard({
|
|
|
55
55
|
<span className="om-product__price-value">{price.toFixed(2)}</span>
|
|
56
56
|
</span>
|
|
57
57
|
<span className="om-product__unit">/{unit}</span>
|
|
58
|
-
<span className="om-product__stock"
|
|
58
|
+
<span className="om-product__stock">Stock {stock}</span>
|
|
59
59
|
</div>
|
|
60
60
|
<button
|
|
61
61
|
className="om-product__add"
|
|
62
62
|
type="button"
|
|
63
|
-
aria-label={
|
|
63
|
+
aria-label={`Add ${name}`}
|
|
64
64
|
onClick={(e) => {
|
|
65
65
|
e.stopPropagation();
|
|
66
66
|
onAdd?.();
|
package/components/OmSheet.tsx
CHANGED
|
@@ -37,7 +37,7 @@ export function OmSheet({ title, children, onDismiss, dismissHref, size = "auto"
|
|
|
37
37
|
{title && (
|
|
38
38
|
<div className="om-sheet__head">
|
|
39
39
|
<span className="om-sheet__title">{title}</span>
|
|
40
|
-
<button className="om-sheet__close" type="button" onClick={dismiss} aria-label="
|
|
40
|
+
<button className="om-sheet__close" type="button" onClick={dismiss} aria-label="Close">
|
|
41
41
|
<IonIcon icon={closeOutline} />
|
|
42
42
|
</button>
|
|
43
43
|
</div>
|
package/package.json
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
// 3. 给 TILES 加合适 ionicons + href
|
|
6
6
|
|
|
7
7
|
export const meta = {
|
|
8
|
-
name: "TODO
|
|
8
|
+
name: "TODO Dashboard",
|
|
9
9
|
pattern: "dashboard",
|
|
10
|
-
description: "TODO
|
|
10
|
+
description: "TODO one-line description",
|
|
11
11
|
source: "prd",
|
|
12
12
|
} as const;
|
|
13
13
|
|
|
@@ -41,13 +41,13 @@ interface Tile {
|
|
|
41
41
|
|
|
42
42
|
// TODO: 替换为真实 mock import
|
|
43
43
|
const STATS: Stat[] = [
|
|
44
|
-
{ label: "
|
|
45
|
-
{ label: "
|
|
44
|
+
{ label: "Today's revenue", value: "$0.00", caption: "Includes settled amount" },
|
|
45
|
+
{ label: "Order count", value: "0", caption: "orders" },
|
|
46
46
|
];
|
|
47
47
|
|
|
48
48
|
const TILES: Tile[] = [
|
|
49
49
|
{ id: "pos", icon: cashOutline, label: "POS", href: "/designs/TODO" },
|
|
50
|
-
{ id: "orders", icon: receiptOutline, label: "
|
|
50
|
+
{ id: "orders", icon: receiptOutline, label: "Orders", href: "/designs/TODO" },
|
|
51
51
|
];
|
|
52
52
|
|
|
53
53
|
export function TodoDashboardPage() {
|
|
@@ -56,7 +56,7 @@ export function TodoDashboardPage() {
|
|
|
56
56
|
padding="lg"
|
|
57
57
|
header={
|
|
58
58
|
<OmHeader
|
|
59
|
-
title="TODO
|
|
59
|
+
title="TODO Dashboard"
|
|
60
60
|
start={<IonBackButton defaultHref="/designs/TODO-from" />}
|
|
61
61
|
/>
|
|
62
62
|
}
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
// 4. 主操作改成业务跳转
|
|
7
7
|
|
|
8
8
|
export const meta = {
|
|
9
|
-
name: "TODO
|
|
9
|
+
name: "TODO Detail page",
|
|
10
10
|
pattern: "detail-view",
|
|
11
|
-
description: "TODO
|
|
11
|
+
description: "TODO one-line description",
|
|
12
12
|
source: "prd",
|
|
13
13
|
} as const;
|
|
14
14
|
|
|
@@ -30,9 +30,9 @@ interface Record {
|
|
|
30
30
|
// TODO: 替换为真实 mock import
|
|
31
31
|
const RECORD: Record = {
|
|
32
32
|
id: "TODO",
|
|
33
|
-
title: "
|
|
33
|
+
title: "Sample title",
|
|
34
34
|
amount: 0,
|
|
35
|
-
status: "TODO
|
|
35
|
+
status: "TODO status",
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
export function TodoDetailPage() {
|
|
@@ -41,19 +41,19 @@ export function TodoDetailPage() {
|
|
|
41
41
|
padding="lg"
|
|
42
42
|
header={
|
|
43
43
|
<OmHeader
|
|
44
|
-
title="TODO
|
|
44
|
+
title="TODO Detail"
|
|
45
45
|
start={<IonBackButton defaultHref="/designs/TODO" />}
|
|
46
46
|
/>
|
|
47
47
|
}
|
|
48
48
|
>
|
|
49
49
|
<OmCard title={RECORD.title} subtitle={`#${RECORD.id}`}>
|
|
50
|
-
<p
|
|
51
|
-
<p
|
|
50
|
+
<p>Amount: ${RECORD.amount.toFixed(2)}</p>
|
|
51
|
+
<p>Status: {RECORD.status}</p>
|
|
52
52
|
</OmCard>
|
|
53
53
|
|
|
54
54
|
{/* TODO: 关联信息分块 —— 增加更多 OmCard */}
|
|
55
55
|
|
|
56
|
-
<OmButton expand="block"
|
|
56
|
+
<OmButton expand="block">Primary action</OmButton>
|
|
57
57
|
</OmPage>
|
|
58
58
|
);
|
|
59
59
|
}
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
// 4. iconColor / confirmColor 按场景设(danger / warning / success / primary)
|
|
7
7
|
|
|
8
8
|
export const meta = {
|
|
9
|
-
name: "TODO
|
|
9
|
+
name: "TODO Dialog",
|
|
10
10
|
pattern: "dialog-view",
|
|
11
|
-
description: "TODO
|
|
11
|
+
description: "TODO one-line description",
|
|
12
12
|
source: "prd",
|
|
13
13
|
} as const;
|
|
14
14
|
|
|
@@ -21,11 +21,11 @@ export function TodoDialogPage() {
|
|
|
21
21
|
<OmDialog
|
|
22
22
|
icon={informationCircleOutline}
|
|
23
23
|
iconColor="primary"
|
|
24
|
-
title="TODO
|
|
25
|
-
subtitle="TODO
|
|
26
|
-
cancelText="
|
|
24
|
+
title="TODO Title"
|
|
25
|
+
subtitle="TODO subtitle description."
|
|
26
|
+
cancelText="Cancel"
|
|
27
27
|
cancelHref="/designs/TODO-from"
|
|
28
|
-
confirmText="
|
|
28
|
+
confirmText="Confirm"
|
|
29
29
|
confirmHref="/designs/TODO-next"
|
|
30
30
|
/>
|
|
31
31
|
</OmPage>
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
// 4. IonBackButton defaultHref 改成上一级
|
|
7
7
|
|
|
8
8
|
export const meta = {
|
|
9
|
-
name: "TODO
|
|
9
|
+
name: "TODO Form page",
|
|
10
10
|
pattern: "form-view",
|
|
11
|
-
description: "TODO
|
|
11
|
+
description: "TODO one-line description",
|
|
12
12
|
source: "prd",
|
|
13
13
|
} as const;
|
|
14
14
|
|
|
@@ -32,19 +32,19 @@ export function TodoFormPage() {
|
|
|
32
32
|
padding="lg"
|
|
33
33
|
header={
|
|
34
34
|
<OmHeader
|
|
35
|
-
title="TODO
|
|
35
|
+
title="TODO Form"
|
|
36
36
|
start={<IonBackButton defaultHref="/designs/TODO" />}
|
|
37
37
|
/>
|
|
38
38
|
}
|
|
39
39
|
>
|
|
40
|
-
<OmInput label="
|
|
41
|
-
<OmInput label="
|
|
40
|
+
<OmInput label="Field one" value={field1} onChange={setField1} />
|
|
41
|
+
<OmInput label="Field two" value={field2} onChange={setField2} />
|
|
42
42
|
|
|
43
43
|
<OmButton
|
|
44
44
|
expand="block"
|
|
45
45
|
onClick={() => navigate("/designs/TODO-next")}
|
|
46
46
|
>
|
|
47
|
-
|
|
47
|
+
Submit
|
|
48
48
|
</OmButton>
|
|
49
49
|
</OmPage>
|
|
50
50
|
);
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
// 4. 调整空态文案
|
|
7
7
|
|
|
8
8
|
export const meta = {
|
|
9
|
-
name: "TODO
|
|
9
|
+
name: "TODO List page",
|
|
10
10
|
pattern: "list-view",
|
|
11
|
-
description: "TODO
|
|
11
|
+
description: "TODO one-line description",
|
|
12
12
|
source: "prd",
|
|
13
13
|
} as const;
|
|
14
14
|
|
|
@@ -28,8 +28,8 @@ interface Item {
|
|
|
28
28
|
|
|
29
29
|
// TODO: 替换为 import { items } from ""./mock/<group>" 相对路径";
|
|
30
30
|
const ITEMS: Item[] = [
|
|
31
|
-
{ id: "1", title: "
|
|
32
|
-
{ id: "2", title: "
|
|
31
|
+
{ id: "1", title: "Sample item 1", detail: "Subinfo" },
|
|
32
|
+
{ id: "2", title: "Sample item 2" },
|
|
33
33
|
];
|
|
34
34
|
|
|
35
35
|
export function TodoListPage() {
|
|
@@ -38,13 +38,13 @@ export function TodoListPage() {
|
|
|
38
38
|
padding="none"
|
|
39
39
|
header={
|
|
40
40
|
<OmHeader
|
|
41
|
-
title="TODO
|
|
41
|
+
title="TODO Title"
|
|
42
42
|
start={<IonBackButton defaultHref="/designs/TODO" />}
|
|
43
43
|
/>
|
|
44
44
|
}
|
|
45
45
|
>
|
|
46
46
|
{ITEMS.length === 0 ? (
|
|
47
|
-
<OmEmptyState title="
|
|
47
|
+
<OmEmptyState title="No data" description="TODO empty-state description" />
|
|
48
48
|
) : (
|
|
49
49
|
<IonList lines="none">
|
|
50
50
|
{ITEMS.map((it) => (
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
// 3. dismissHref 改成来源页路径
|
|
6
6
|
|
|
7
7
|
export const meta = {
|
|
8
|
-
name: "TODO
|
|
8
|
+
name: "TODO Action menu",
|
|
9
9
|
pattern: "sheet-action",
|
|
10
|
-
description: "TODO
|
|
10
|
+
description: "TODO one-line description",
|
|
11
11
|
source: "prd",
|
|
12
12
|
} as const;
|
|
13
13
|
|
|
@@ -24,15 +24,15 @@ interface MenuItem {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
const ITEMS: MenuItem[] = [
|
|
27
|
-
{ label: "TODO
|
|
28
|
-
{ label: "TODO
|
|
27
|
+
{ label: "TODO Item one", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
|
|
28
|
+
{ label: "TODO Item two", icon: ellipsisHorizontalOutline, href: "/designs/TODO" },
|
|
29
29
|
];
|
|
30
30
|
|
|
31
31
|
export function TodoSheetActionPage() {
|
|
32
32
|
const navigate = useNavigate();
|
|
33
33
|
return (
|
|
34
34
|
<OmPage padding="none">
|
|
35
|
-
<OmSheet title="TODO
|
|
35
|
+
<OmSheet title="TODO Title" dismissHref="/designs/TODO-from">
|
|
36
36
|
<div>
|
|
37
37
|
{ITEMS.map((it) => (
|
|
38
38
|
<button
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
// 本 template 展示扁平结构,首批落地后可重构为 shell。
|
|
9
9
|
|
|
10
10
|
export const meta = {
|
|
11
|
-
name: "TODO Tab
|
|
11
|
+
name: "TODO Tab page",
|
|
12
12
|
pattern: "tab-view",
|
|
13
|
-
description: "TODO
|
|
13
|
+
description: "TODO one-line description",
|
|
14
14
|
source: "prd",
|
|
15
15
|
} as const;
|
|
16
16
|
|
|
@@ -28,21 +28,21 @@ import {
|
|
|
28
28
|
} from "@omit-design/preset-mobile";
|
|
29
29
|
|
|
30
30
|
const TABS: OmTabItem[] = [
|
|
31
|
-
{ tab: "stored", href: "/designs/TODO-stored", label: "
|
|
32
|
-
{ tab: "orders", href: "/designs/TODO-orders", label: "
|
|
33
|
-
{ tab: "member", href: "/designs/TODO-member", label: "
|
|
34
|
-
{ tab: "settings", href: "/designs/TODO-settings", label: "
|
|
31
|
+
{ tab: "stored", href: "/designs/TODO-stored", label: "Stored", icon: cubeOutline },
|
|
32
|
+
{ tab: "orders", href: "/designs/TODO-orders", label: "Orders", icon: receiptOutline },
|
|
33
|
+
{ tab: "member", href: "/designs/TODO-member", label: "Members", icon: peopleOutline },
|
|
34
|
+
{ tab: "settings", href: "/designs/TODO-settings", label: "Settings", icon: settingsOutline },
|
|
35
35
|
];
|
|
36
36
|
|
|
37
37
|
export function TodoTabPage() {
|
|
38
38
|
return (
|
|
39
39
|
<OmPage
|
|
40
40
|
padding="lg"
|
|
41
|
-
header={<OmAppBar variant="brand" brandTitle="TODO
|
|
41
|
+
header={<OmAppBar variant="brand" brandTitle="TODO Brand" />}
|
|
42
42
|
>
|
|
43
43
|
<div>
|
|
44
44
|
{/* TODO: 主体内容 —— 表单 / 列表 / 空态 */}
|
|
45
|
-
<h1>TODO Tab
|
|
45
|
+
<h1>TODO Tab page body</h1>
|
|
46
46
|
</div>
|
|
47
47
|
<OmTabBar items={TABS} />
|
|
48
48
|
</OmPage>
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
// 4. tagline / version 走 mock 或常量
|
|
7
7
|
|
|
8
8
|
export const meta = {
|
|
9
|
-
name: "TODO
|
|
9
|
+
name: "TODO Welcome page",
|
|
10
10
|
pattern: "welcome-view",
|
|
11
|
-
description: "TODO
|
|
11
|
+
description: "TODO one-line description",
|
|
12
12
|
source: "prd",
|
|
13
13
|
} as const;
|
|
14
14
|
|
|
@@ -23,14 +23,14 @@ export function TodoWelcomePage() {
|
|
|
23
23
|
{/* TODO: 替换为品牌 logo 组件 */}
|
|
24
24
|
<div>
|
|
25
25
|
<h1>Welcome</h1>
|
|
26
|
-
<p>TODO
|
|
26
|
+
<p>TODO welcome message</p>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
29
|
<OmButton
|
|
30
30
|
expand="block"
|
|
31
31
|
onClick={() => navigate("/designs/TODO-next")}
|
|
32
32
|
>
|
|
33
|
-
|
|
33
|
+
Get started
|
|
34
34
|
</OmButton>
|
|
35
35
|
</OmPage>
|
|
36
36
|
);
|