apptify 0.5.1 → 0.6.0
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/README.md +19 -66
- package/dist/apptify.css +1 -1
- package/dist/apptify.js +2298 -2140
- package/dist/components/AppleCard.vue.d.ts +76 -0
- package/dist/components/button.d.ts +3 -3
- package/dist/components/content.d.ts +0 -90
- package/dist/components/foundation.d.ts +201 -129
- package/dist/components/link.d.ts +31 -0
- package/dist/components/overlays.d.ts +8 -2
- package/dist/core/context.d.ts +11 -0
- package/dist/core/overlay-surface.d.ts +6 -0
- package/dist/core/popup-motion.d.ts +5 -5
- package/dist/core/popup-placement.d.ts +3 -2
- package/dist/index.d.ts +144 -79
- package/docs/COMPONENTS.md +23 -9
- package/docs/INPUT-WORKSHOP.md +59 -0
- package/docs/PLAYGROUND-TEMPLATE.md +9 -9
- package/package.json +5 -1
- package/templates/playground/README.md +4 -4
- package/templates/playground/index.html +1 -1
- package/templates/playground/package.json +6 -2
- package/templates/playground/source-snapshot.json +138 -53
- package/templates/playground/{playground → src}/App.vue +5 -4
- package/templates/playground/{playground → src}/ComponentDemo.vue +9 -10
- package/templates/playground/{playground → src}/catalog.ts +3 -4
- package/templates/playground/src/components/ComponentIndex.vue +43 -0
- package/templates/playground/src/components/DirectoryDialog.vue +20 -0
- package/templates/playground/src/components/PageFooter.vue +7 -0
- package/templates/playground/{playground → src}/components/UserMenu.vue +11 -11
- package/templates/playground/src/editor/AppleInputExample.vue +78 -0
- package/templates/playground/src/editor/AppleInputPreview.vue +82 -0
- package/templates/playground/src/editor/ComponentDocumentLink.vue +19 -0
- package/templates/playground/src/editor/ComponentWorkshop.vue +81 -0
- package/templates/playground/src/editor/ConfigurableEditor.vue +35 -0
- package/templates/playground/src/editor/LiveVueEditor.vue +133 -0
- package/templates/playground/src/editor/apple-input-source.ts +2 -0
- package/templates/playground/src/editor/apple-input.ts +48 -0
- package/templates/playground/src/editor/contract.ts +14 -0
- package/templates/playground/src/editor/documents.ts +20 -0
- package/templates/playground/src/editor/input-playground.ts +59 -0
- package/templates/playground/src/editor/runtime.ts +5 -0
- package/templates/playground/src/editor/sections.ts +10 -0
- package/templates/playground/{playground → src}/style.css +40 -39
- package/templates/playground/{playground → src}/views/[...all].vue +2 -2
- package/templates/playground/src/views/component-docs/[component].vue +162 -0
- package/templates/playground/src/views/components.vue +148 -0
- package/templates/playground/src/views/index.vue +73 -0
- package/templates/playground/src/views/settings.vue +224 -0
- package/templates/playground/tooling/playground-editor.mjs +114 -0
- package/templates/playground/tooling/prepare-input-source.mjs +38 -0
- package/templates/playground/tsconfig.json +2 -2
- package/templates/playground/vite.config.ts +3 -1
- package/tooling/playground-editor.mjs +114 -0
- package/tooling/prepare-input-source.mjs +38 -0
- package/tooling/prepare-playground.mjs +27 -14
- package/tooling/test-create-apptify.mjs +15 -5
- package/tooling/test-playground-package.mjs +25 -11
- package/templates/playground/playground/components/ComponentIndex.vue +0 -62
- package/templates/playground/playground/components/PageFooter.vue +0 -3
- package/templates/playground/playground/views/components.vue +0 -126
- package/templates/playground/playground/views/index.vue +0 -75
- package/templates/playground/playground/views/settings.vue +0 -98
- /package/templates/playground/{playground → src}/components/not-found-paper-scene.vue +0 -0
- /package/templates/playground/{playground → src}/components/not-found-paper-story.ts +0 -0
- /package/templates/playground/{playground → src}/env.d.ts +0 -0
- /package/templates/playground/{playground → src}/main.ts +0 -0
- /package/templates/playground/{playground → src}/router/index.ts +0 -0
|
@@ -21,18 +21,18 @@ npm run dev
|
|
|
21
21
|
|
|
22
22
|
| 位置 | 用途 |
|
|
23
23
|
| --- | --- |
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
24
|
+
| `src/App.vue` | 布局、导航项与账号入口 |
|
|
25
|
+
| `src/views/` | 页面与自动生成的路由 |
|
|
26
|
+
| `src/router/index.ts` | 滚动恢复、hash 定位与页面标题 |
|
|
27
|
+
| `src/components/UserMenu.vue` | 账号菜单与登录/注册表单 |
|
|
28
|
+
| `src/views/settings.vue` | 主题、动效与玻璃设置 |
|
|
29
|
+
| `src/views/[...all].vue` | 404 页面 |
|
|
30
|
+
| `src/style.css` | 应用样式 |
|
|
31
31
|
| `public/images/` | 示例图片与来源说明 |
|
|
32
32
|
|
|
33
33
|
可删除 `views/index.vue` 和 `views/components.vue`，再创建业务页面。删除后重启开发服务；导航会隐藏不存在的页面。删除组件总览后，可一并删除 `ComponentDemo.vue`、`catalog.ts` 和 `components/ComponentIndex.vue`。
|
|
34
34
|
|
|
35
|
-
例如 `
|
|
35
|
+
例如 `src/views/orders.vue` 自动对应 `/orders`；在 `App.vue` 的 `navigation` 数组添加入口即可显示导航。`index.vue` 对应首页。
|
|
36
36
|
|
|
37
37
|
组件通过 `apptify` 导入，样式通过 `apptify/style.css` 导入；`apptify/vite` 提供文件路由插件。已有项目接入时需安装 `vue-router` 和 `vite-plugin-pages`，模板已配置这些依赖。
|
|
38
38
|
|
|
@@ -42,7 +42,7 @@ npm run dev
|
|
|
42
42
|
|
|
43
43
|
复制出的应用使用 `npm run typecheck` 和 `npm run build` 检查。
|
|
44
44
|
|
|
45
|
-
库开发者编辑原仓库的 `playground
|
|
45
|
+
库开发者编辑原仓库的 `playground/`，打包时将其映射为模板的 `src/`。`npm pack` 自动构建组件库并准备模板；本地安装生成的 tgz 后，也可运行 `npx --no-install apptify-playground ../my-app`。
|
|
46
46
|
|
|
47
47
|
`npm run test:package` 验证包内容、独立安装、模板复制、类型检查、构建与浏览器交互，并检查删除示例页面后的行为。命令输出临时目录与验收结果路径。验证指定归档：
|
|
48
48
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "apptify",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "An Apple-inspired, responsive Vue 3 component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -61,8 +61,12 @@
|
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@playwright/test": "^1.51.1",
|
|
63
63
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
64
|
+
"@vue/repl": "4.7.2",
|
|
64
65
|
"@vue/test-utils": "^2.4.6",
|
|
66
|
+
"es-module-shims": "^2.8.4",
|
|
67
|
+
"esbuild": "^0.25.12",
|
|
65
68
|
"jsdom": "^26.0.0",
|
|
69
|
+
"postcss": "^8.5.28",
|
|
66
70
|
"typescript": "^5.8.2",
|
|
67
71
|
"vite": "^6.3.4",
|
|
68
72
|
"vite-plugin-pages": "^0.32.5",
|
|
@@ -9,10 +9,10 @@ npm run dev
|
|
|
9
9
|
|
|
10
10
|
检查：`npm run typecheck`、`npm run build`。
|
|
11
11
|
|
|
12
|
-
- 页面：`
|
|
13
|
-
- 布局与导航：`
|
|
14
|
-
- 账号表单：`
|
|
15
|
-
- 样式：`
|
|
12
|
+
- 页面：`src/views/`，文件路由自动生成。
|
|
13
|
+
- 布局与导航：`src/App.vue` 的 `navigation` 数组。
|
|
14
|
+
- 账号表单：`src/components/UserMenu.vue`，需要接入自己的后端。
|
|
15
|
+
- 样式：`src/style.css`；图片与来源：`public/images/`。
|
|
16
16
|
|
|
17
17
|
可删除 `views/index.vue` 和 `views/components.vue`，再添加业务页面；删除后重启开发服务。删除组件总览后，可一并删除 `ComponentDemo.vue`、`catalog.ts` 和 `components/ComponentIndex.vue`。
|
|
18
18
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"preview": "vite preview --host 127.0.0.1"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"apptify": "^0.
|
|
13
|
+
"apptify": "^0.6.0",
|
|
14
14
|
"vue": "^3.5.0",
|
|
15
15
|
"vue-router": "^4.6.4",
|
|
16
16
|
"vuetify": "^3.9.0",
|
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
"typescript": "^5.8.2",
|
|
22
22
|
"vite": "^6.3.4",
|
|
23
23
|
"vite-plugin-pages": "^0.32.5",
|
|
24
|
-
"vue-tsc": "^2.2.8"
|
|
24
|
+
"vue-tsc": "^2.2.8",
|
|
25
|
+
"@vue/repl": "4.7.2",
|
|
26
|
+
"es-module-shims": "^2.8.4",
|
|
27
|
+
"esbuild": "^0.25.12",
|
|
28
|
+
"postcss": "^8.5.28"
|
|
25
29
|
}
|
|
26
30
|
}
|
|
@@ -1,24 +1,8 @@
|
|
|
1
1
|
{
|
|
2
|
-
"createdAt": "2026-10-
|
|
3
|
-
"libraryVersion": "0.
|
|
2
|
+
"createdAt": "2026-10-04T14:04:37.104Z",
|
|
3
|
+
"libraryVersion": "0.6.0",
|
|
4
4
|
"files": {
|
|
5
5
|
"index.html": "75f6d93e3962ddca97a13b666a04d98ba9b263b6c288171383db764215034fea",
|
|
6
|
-
"playground/App.vue": "ef3f06f80758a3d4198ee90eb05f766a89b6156b4899fd566f8dca9b42e0ffc9",
|
|
7
|
-
"playground/ComponentDemo.vue": "0801a9eba5aa2e06f3bbd972b25647fed145ee6d630fd4d183eb016862f25ad4",
|
|
8
|
-
"playground/catalog.ts": "80b10ca45b18a611baec19361c70a967da655690c04091d23541192cd02fcecd",
|
|
9
|
-
"playground/components/ComponentIndex.vue": "2223f76786ef3dd1658fbb1ce29246e9bd155343d2e9bea9cb0674bc4a4ef879",
|
|
10
|
-
"playground/components/PageFooter.vue": "29c3ae396450c961aa13f3edc7d6b15f9dd12e95033242328fbe2093fb5ff0eb",
|
|
11
|
-
"playground/components/UserMenu.vue": "e584cc4c97c8e5a582be259f5aafc0ac355f4339133f6f572f079d979aa96c10",
|
|
12
|
-
"playground/components/not-found-paper-scene.vue": "39f12c23f04d72131d9da51e9a960894b621f2581c25e5b18463f7b458127209",
|
|
13
|
-
"playground/components/not-found-paper-story.ts": "b7c02528ce58080662f0e55bc4a6b11c170fc987b3b5e377ff7c0db8f77ddf10",
|
|
14
|
-
"playground/env.d.ts": "daae3800510e936d8308b7a9ebb0cb28d8f3fcd449e41386feea05d29bd12540",
|
|
15
|
-
"playground/main.ts": "efa30fb81f5c5f46ca21dc32a96fb08b32665b2d7de9d426e52c617662203285",
|
|
16
|
-
"playground/router/index.ts": "fe5f1c4b53f2f636bcb25727013b5cfb1e96bcadfd7f1a841537583fc98eccf5",
|
|
17
|
-
"playground/style.css": "940d33a07191f6143b1aef319bf7d09db479d2c0b3b3f6743a4362f8ea9c9e8b",
|
|
18
|
-
"playground/views/[...all].vue": "6d1cd2b7a67cc9e2b2935555633cda148dd81b5ca441bcb9b43029b8f719d3f9",
|
|
19
|
-
"playground/views/components.vue": "5edb34d2100f192d18fb7789a188b880c26daccad9597fe68d319927ac14e15a",
|
|
20
|
-
"playground/views/index.vue": "703fc1a39c31aaff17c8f6c69f418d455b9a16af5bb1b977403d77b09ef3f1e4",
|
|
21
|
-
"playground/views/settings.vue": "43e1074d8a17104ad88f72e7c7787a390b76e7948fa321b1c667e7ba41c9cae6",
|
|
22
6
|
"public/images/SOURCES.md": "24ccb6625b1168e48550b7651e9fc20cb747324d87666d39199608c7db20541b",
|
|
23
7
|
"public/images/airpods-max-orange.jpg": "f365fe9e374e2cede88f3e68487f6a773a767873978bcf20e4b21dee08aca966",
|
|
24
8
|
"public/images/architecture.jpg": "928ea321954f0edabc1eed3c908c6b1fc93b247badcbd89d8dc5ba237420c26b",
|
|
@@ -31,21 +15,105 @@
|
|
|
31
15
|
"public/images/mountains.jpg": "57aae81c2886f3404c582dd637ed325559616621466c027d2d1039bd918a213a",
|
|
32
16
|
"public/images/snow.jpg": "59fec6d2bbf9df11b7c697c57a253b7bd4b5a097489ce1017fb5209b9ee54b8e",
|
|
33
17
|
"public/images/sunset.jpg": "4ee91e88f1e341143a807ef48fdfc24d63aa045d99351b4ea8ad7efcfef6ef9b",
|
|
34
|
-
"public/images/waterfall.jpg": "cfd55ff5f41d3a58e91793d0e26a9ca90c86760aa401da033fbfa77d3364f238"
|
|
18
|
+
"public/images/waterfall.jpg": "cfd55ff5f41d3a58e91793d0e26a9ca90c86760aa401da033fbfa77d3364f238",
|
|
19
|
+
"src/App.vue": "1c794c9a04e5830cde04e2884a7ab3116e36283a9def63fc4d16cf9eea7151e0",
|
|
20
|
+
"src/ComponentDemo.vue": "7f8ba3f3fc5c0c4a212383c6bd9d390271f5d9cc058802393ebd18b06be2aaa6",
|
|
21
|
+
"src/catalog.ts": "688145825314fed7dfb41a22c121a895f8114e3abf96dc812bc7c5186a16fa0c",
|
|
22
|
+
"src/components/ComponentIndex.vue": "55c021899113b7fe26dcf42075f188a49d996e04a992ec9c86410eadc29e68a0",
|
|
23
|
+
"src/components/DirectoryDialog.vue": "ec6191422dad07dff2d710748a3f024bf7828be8b9b70fa16ab474f36ed878d2",
|
|
24
|
+
"src/components/PageFooter.vue": "5e9c1b4ba8866c05216993fb8d605fa826a09739a5ced15068b24334e4814fac",
|
|
25
|
+
"src/components/UserMenu.vue": "85e910f1de5815d23b2adb70a7ffba6a427f8d3bbdfd1cf6a203ace4035c67be",
|
|
26
|
+
"src/components/not-found-paper-scene.vue": "39f12c23f04d72131d9da51e9a960894b621f2581c25e5b18463f7b458127209",
|
|
27
|
+
"src/components/not-found-paper-story.ts": "b7c02528ce58080662f0e55bc4a6b11c170fc987b3b5e377ff7c0db8f77ddf10",
|
|
28
|
+
"src/editor/AppleInputExample.vue": "b563cdcb1ec6b033a3a19878f68e7fe4cf39da9d3e838887b591b2364e1aad90",
|
|
29
|
+
"src/editor/AppleInputPreview.vue": "e88a71316c62c4cb763d1f285b4b9fc8fbcb4a35c6282dc95b32d5824c87dc77",
|
|
30
|
+
"src/editor/ComponentDocumentLink.vue": "f4e1c88666b315a13e48386e9353c5da733fc149fba97ecc084804abd9d0067c",
|
|
31
|
+
"src/editor/ComponentWorkshop.vue": "0071a843cab7a8e25697c36755f911c8939c7657bd6264ec6c01a982da9f2647",
|
|
32
|
+
"src/editor/ConfigurableEditor.vue": "e2af7d67bdade43a31c9942bfca7d5d09e13883d0458582934bf85c29ae4e5e7",
|
|
33
|
+
"src/editor/LiveVueEditor.vue": "0559a63bba3dc2ffb2d54ad78e7b6c4577381280f3c08e1d3493e189fa6ff0d5",
|
|
34
|
+
"src/editor/apple-input-source.ts": "4092f61af0d77326a4e95213c9dc2e63afbe1e2d6e05b4854a04176e344538aa",
|
|
35
|
+
"src/editor/apple-input.ts": "54546ef9b04c991e3bedd7f718cd4b03855d0ef9a7449ad4459be615d080a141",
|
|
36
|
+
"src/editor/contract.ts": "0d39a03a7c20de6e214d91a68c67329e5dd3a62a79fd1f14475a41820a1e9443",
|
|
37
|
+
"src/editor/documents.ts": "22afdd9cc1b3388c34e8a4133f5aaa09369454503a477e95fc785bc63b91f3df",
|
|
38
|
+
"src/editor/input-playground.ts": "458ec5f8cb796b663d3d223cf018931b1f706f8f4836aa8a3c6dfce3add30d79",
|
|
39
|
+
"src/editor/runtime.ts": "09cd19ee9bf4f38a2f5bef013caae4f5ffd48677882550f19f2b9c266441faa9",
|
|
40
|
+
"src/editor/sections.ts": "614fecd6a895d6afb0e6d59cfb1e345317fa26bcc0aba916e0da2d164e82dd82",
|
|
41
|
+
"src/env.d.ts": "daae3800510e936d8308b7a9ebb0cb28d8f3fcd449e41386feea05d29bd12540",
|
|
42
|
+
"src/main.ts": "efa30fb81f5c5f46ca21dc32a96fb08b32665b2d7de9d426e52c617662203285",
|
|
43
|
+
"src/router/index.ts": "fe5f1c4b53f2f636bcb25727013b5cfb1e96bcadfd7f1a841537583fc98eccf5",
|
|
44
|
+
"src/style.css": "c952ec3900ee3952cc757e95e603abcfed62f7848eef02c9a03d30b32028e078",
|
|
45
|
+
"src/views/[...all].vue": "98797a9c353d390c7bf96da245feb9387e5e0cbec1a9f180ade457ae65c7484e",
|
|
46
|
+
"src/views/component-docs/[component].vue": "3f505550dacb1d8151417df61d0598940aa7d218518179e532ddc962b0632a5e",
|
|
47
|
+
"src/views/components.vue": "a19c4ca87a6a2ed43c4a6dc6eb52d3071733ce787024e1ab305db99b6acc6333",
|
|
48
|
+
"src/views/index.vue": "9afc860da88aebe4879668784da24c657ecba19e5bc3ddad9dbcdd72f84db245",
|
|
49
|
+
"src/views/settings.vue": "1d36c866d1d5b1ec426d1254b31649e54585d3f3b4313ec8eb924f6a0eba456a",
|
|
50
|
+
"tooling/playground-editor.mjs": "128b1ffa1b5660b04f7652130d5474c1f31686c2c8e0e2866f1ebde2594d0b5b",
|
|
51
|
+
"tooling/prepare-input-source.mjs": "91bea35dcfa09735dbaeb5fbed7a70abfe447c3d133f4b4381e6ba0d0d4f9f6a"
|
|
52
|
+
},
|
|
53
|
+
"sourcePaths": {
|
|
54
|
+
"index.html": "index.html",
|
|
55
|
+
"public/images/SOURCES.md": "public/images/SOURCES.md",
|
|
56
|
+
"public/images/airpods-max-orange.jpg": "public/images/airpods-max-orange.jpg",
|
|
57
|
+
"public/images/architecture.jpg": "public/images/architecture.jpg",
|
|
58
|
+
"public/images/city.jpg": "public/images/city.jpg",
|
|
59
|
+
"public/images/coast.jpg": "public/images/coast.jpg",
|
|
60
|
+
"public/images/desert.jpg": "public/images/desert.jpg",
|
|
61
|
+
"public/images/food.jpg": "public/images/food.jpg",
|
|
62
|
+
"public/images/forest.jpg": "public/images/forest.jpg",
|
|
63
|
+
"public/images/lake.jpg": "public/images/lake.jpg",
|
|
64
|
+
"public/images/mountains.jpg": "public/images/mountains.jpg",
|
|
65
|
+
"public/images/snow.jpg": "public/images/snow.jpg",
|
|
66
|
+
"public/images/sunset.jpg": "public/images/sunset.jpg",
|
|
67
|
+
"public/images/waterfall.jpg": "public/images/waterfall.jpg",
|
|
68
|
+
"src/App.vue": "playground/App.vue",
|
|
69
|
+
"src/ComponentDemo.vue": "playground/ComponentDemo.vue",
|
|
70
|
+
"src/catalog.ts": "playground/catalog.ts",
|
|
71
|
+
"src/components/ComponentIndex.vue": "playground/components/ComponentIndex.vue",
|
|
72
|
+
"src/components/DirectoryDialog.vue": "playground/components/DirectoryDialog.vue",
|
|
73
|
+
"src/components/PageFooter.vue": "playground/components/PageFooter.vue",
|
|
74
|
+
"src/components/UserMenu.vue": "playground/components/UserMenu.vue",
|
|
75
|
+
"src/components/not-found-paper-scene.vue": "playground/components/not-found-paper-scene.vue",
|
|
76
|
+
"src/components/not-found-paper-story.ts": "playground/components/not-found-paper-story.ts",
|
|
77
|
+
"src/editor/AppleInputExample.vue": "playground/editor/AppleInputExample.vue",
|
|
78
|
+
"src/editor/AppleInputPreview.vue": "playground/editor/AppleInputPreview.vue",
|
|
79
|
+
"src/editor/ComponentDocumentLink.vue": "playground/editor/ComponentDocumentLink.vue",
|
|
80
|
+
"src/editor/ComponentWorkshop.vue": "playground/editor/ComponentWorkshop.vue",
|
|
81
|
+
"src/editor/ConfigurableEditor.vue": "playground/editor/ConfigurableEditor.vue",
|
|
82
|
+
"src/editor/LiveVueEditor.vue": "playground/editor/LiveVueEditor.vue",
|
|
83
|
+
"src/editor/apple-input-source.ts": "playground/editor/apple-input-source.ts",
|
|
84
|
+
"src/editor/apple-input.ts": "playground/editor/apple-input.ts",
|
|
85
|
+
"src/editor/contract.ts": "playground/editor/contract.ts",
|
|
86
|
+
"src/editor/documents.ts": "playground/editor/documents.ts",
|
|
87
|
+
"src/editor/input-playground.ts": "playground/editor/input-playground.ts",
|
|
88
|
+
"src/editor/runtime.ts": "playground/editor/runtime.ts",
|
|
89
|
+
"src/editor/sections.ts": "playground/editor/sections.ts",
|
|
90
|
+
"src/env.d.ts": "playground/env.d.ts",
|
|
91
|
+
"src/main.ts": "playground/main.ts",
|
|
92
|
+
"src/router/index.ts": "playground/router/index.ts",
|
|
93
|
+
"src/style.css": "playground/style.css",
|
|
94
|
+
"src/views/[...all].vue": "playground/views/[...all].vue",
|
|
95
|
+
"src/views/component-docs/[component].vue": "playground/views/component-docs/[component].vue",
|
|
96
|
+
"src/views/components.vue": "playground/views/components.vue",
|
|
97
|
+
"src/views/index.vue": "playground/views/index.vue",
|
|
98
|
+
"src/views/settings.vue": "playground/views/settings.vue",
|
|
99
|
+
"tooling/playground-editor.mjs": "tooling/playground-editor.mjs",
|
|
100
|
+
"tooling/prepare-input-source.mjs": "tooling/prepare-input-source.mjs"
|
|
35
101
|
},
|
|
36
102
|
"buildSources": {
|
|
37
|
-
"src/components/
|
|
38
|
-
"src/components/
|
|
39
|
-
"src/components/
|
|
40
|
-
"src/components/
|
|
41
|
-
"src/components/
|
|
103
|
+
"src/components/AppleCard.vue": "b9de02769367840d8dfade7616e01d36c23744b6fabb9334e54b40223ae60134",
|
|
104
|
+
"src/components/button.ts": "affab78ead984c2d54511774758755a87e80ff6024faaf5027e82def40a2b940",
|
|
105
|
+
"src/components/content.ts": "a8110557a3aa9acef8c40e1b302d211ac2bf638af8d07e98f81d2ff8cf5c1a5d",
|
|
106
|
+
"src/components/date-picker.ts": "96f292972ca0deea95f91003d061b30df8213420d22e0a22203027ee373513ae",
|
|
107
|
+
"src/components/forms.ts": "9f006178836f71f2427f1883817a167bd799c14480ff0bc61cd808a72499ef2c",
|
|
108
|
+
"src/components/foundation.ts": "75f42e20f9deea3e7c6044f03a38486daee041651e86761880f76950df1f0347",
|
|
42
109
|
"src/components/gallery-scrollbar.ts": "3763c0f05629fed9d8b82514339f768d305120b56308f8ae8a9460c9853719bb",
|
|
110
|
+
"src/components/link.ts": "f5d4acc163c205b4dfabffc62084e236aa4759f91b041367a8a4a185cca0a9e4",
|
|
43
111
|
"src/components/mobile-image-viewer.ts": "66cecdf485a731c231823d1137cffc26c92cde45d94ef8def5b0bff070de48f4",
|
|
44
|
-
"src/components/motion.ts": "
|
|
112
|
+
"src/components/motion.ts": "c8bd5928efe5cfeeae7486171e595a233603835620d009c5d1ffe611070fd0eb",
|
|
45
113
|
"src/components/navibar.ts": "01c58cc6563273006ae91c43853283f60499de9fc88ba3a072ca64ef07f7eb2c",
|
|
46
|
-
"src/components/overlays.ts": "
|
|
114
|
+
"src/components/overlays.ts": "09a6cbfd64000c1a0f30b87368f40aa5ebb31c66c0d818c60f77c340a60c2882",
|
|
47
115
|
"src/components/tabs.ts": "a80fdf41efff49c2870859d6c0a97e5bbba69055706309acd5b53eafe8c02f9d",
|
|
48
|
-
"src/core/context.ts": "
|
|
116
|
+
"src/core/context.ts": "7ab1669799d0dc4abf30ce7d3ee069f7ad962bb30680bd99c82c787f10089fd9",
|
|
49
117
|
"src/core/desktop-image-enter.ts": "6852f1a0a5d6cccfbe50509934729fea9e82ccd4c0cf9bdeda629eed2d9e3ef0",
|
|
50
118
|
"src/core/desktop-image-return.ts": "cfb4e9fc6cea3cd8dd614b940345e5314b6e74f4748c6066ab1cc6b4c535fe08",
|
|
51
119
|
"src/core/device.ts": "da97e64aa1a041d88c77818a836cee0e2401fb73a532bc173c2e19fa471ca97f",
|
|
@@ -53,34 +121,50 @@
|
|
|
53
121
|
"src/core/image-geometry.ts": "6eb4d4e2a2afd078ccce010ec8aae32d89bf70a1e8c2c522b5e81040a97a1037",
|
|
54
122
|
"src/core/image-motion.ts": "da1eded52a297332d314c9c1e27dc34ce031e07b6acce147ab2ae6eb9d7895d5",
|
|
55
123
|
"src/core/layers.ts": "fe15fa50c82155e894f2e42a80340bd61bda2cfa4d3e9646a69f556c49fc5b04",
|
|
56
|
-
"src/core/motion.ts": "
|
|
57
|
-
"src/core/
|
|
58
|
-
"src/core/popup-
|
|
124
|
+
"src/core/motion.ts": "00e87ecb6778797d3ff66e5426fba6a82e7725213c3b1ee8b395dd14e61b9b98",
|
|
125
|
+
"src/core/overlay-surface.ts": "4d2ac300dca02d158f4522369d97dc767068059439c18610c30a20876cd94e52",
|
|
126
|
+
"src/core/popup-motion.ts": "7d2d6a49660f2a0032cbac76af433251a042831a2653bff3de93715f369443d7",
|
|
127
|
+
"src/core/popup-placement.ts": "1a8ec6466aa641d1281800011ad22bad5f78c3053641ee18647a58e106034016",
|
|
59
128
|
"src/core/preview-navigation.ts": "8de5cc0f62b16b0590f212de6f7bb234859ec483a612673a87dd8fe9e260a813",
|
|
60
129
|
"src/index.ts": "75e2a540a1310aeda2e2eb64ffd8e1c93f83f2fab915f8f73432c4f554a67d55",
|
|
61
|
-
"src/styles/base.css": "
|
|
62
|
-
"src/styles/content.css": "
|
|
63
|
-
"src/styles/date-picker.css": "
|
|
64
|
-
"src/styles/forms.css": "
|
|
65
|
-
"src/styles/navibar.css": "
|
|
66
|
-
"src/styles/overlays.css": "
|
|
130
|
+
"src/styles/base.css": "f124496025d4da23202b1025bf29b3231fe96268a3840ded4b00e1bf442abcaf",
|
|
131
|
+
"src/styles/content.css": "c38a3e24a4f297012145f226939c4c908608df8b72020b62c19827ad292c73d4",
|
|
132
|
+
"src/styles/date-picker.css": "932055e5f66794ce60f78f9c77f031683bd26b41864953b7686b22dbeb340f4f",
|
|
133
|
+
"src/styles/forms.css": "4474eb5482b7ad4e8601a7b6b8963068e87e1508b18522f314dd2a2bd3e4a42d",
|
|
134
|
+
"src/styles/navibar.css": "9324acda9cb31d442dd5e5ac70b013a53f552f526065a39a858eb40e9efa7c47",
|
|
135
|
+
"src/styles/overlays.css": "bb3d5f7bfc1b3e7a0ecf5ab4f632a65be3f496cb5de0e8c885bd6b6e5dc0f97a",
|
|
67
136
|
"src/styles/ripple.css": "df0a5f661a862b5232bac256958f4bae6f555dd1f4a9c1432f61e85de71bdfea",
|
|
68
|
-
"playground/App.vue": "
|
|
69
|
-
"playground/ComponentDemo.vue": "
|
|
70
|
-
"playground/catalog.ts": "
|
|
71
|
-
"playground/components/ComponentIndex.vue": "
|
|
72
|
-
"playground/components/
|
|
73
|
-
"playground/components/
|
|
137
|
+
"playground/App.vue": "1c794c9a04e5830cde04e2884a7ab3116e36283a9def63fc4d16cf9eea7151e0",
|
|
138
|
+
"playground/ComponentDemo.vue": "7f8ba3f3fc5c0c4a212383c6bd9d390271f5d9cc058802393ebd18b06be2aaa6",
|
|
139
|
+
"playground/catalog.ts": "688145825314fed7dfb41a22c121a895f8114e3abf96dc812bc7c5186a16fa0c",
|
|
140
|
+
"playground/components/ComponentIndex.vue": "55c021899113b7fe26dcf42075f188a49d996e04a992ec9c86410eadc29e68a0",
|
|
141
|
+
"playground/components/DirectoryDialog.vue": "ec6191422dad07dff2d710748a3f024bf7828be8b9b70fa16ab474f36ed878d2",
|
|
142
|
+
"playground/components/PageFooter.vue": "5e9c1b4ba8866c05216993fb8d605fa826a09739a5ced15068b24334e4814fac",
|
|
143
|
+
"playground/components/UserMenu.vue": "85e910f1de5815d23b2adb70a7ffba6a427f8d3bbdfd1cf6a203ace4035c67be",
|
|
74
144
|
"playground/components/not-found-paper-scene.vue": "39f12c23f04d72131d9da51e9a960894b621f2581c25e5b18463f7b458127209",
|
|
75
145
|
"playground/components/not-found-paper-story.ts": "b7c02528ce58080662f0e55bc4a6b11c170fc987b3b5e377ff7c0db8f77ddf10",
|
|
146
|
+
"playground/editor/AppleInputExample.vue": "b563cdcb1ec6b033a3a19878f68e7fe4cf39da9d3e838887b591b2364e1aad90",
|
|
147
|
+
"playground/editor/AppleInputPreview.vue": "e88a71316c62c4cb763d1f285b4b9fc8fbcb4a35c6282dc95b32d5824c87dc77",
|
|
148
|
+
"playground/editor/ComponentDocumentLink.vue": "f4e1c88666b315a13e48386e9353c5da733fc149fba97ecc084804abd9d0067c",
|
|
149
|
+
"playground/editor/ComponentWorkshop.vue": "0071a843cab7a8e25697c36755f911c8939c7657bd6264ec6c01a982da9f2647",
|
|
150
|
+
"playground/editor/ConfigurableEditor.vue": "e2af7d67bdade43a31c9942bfca7d5d09e13883d0458582934bf85c29ae4e5e7",
|
|
151
|
+
"playground/editor/LiveVueEditor.vue": "0559a63bba3dc2ffb2d54ad78e7b6c4577381280f3c08e1d3493e189fa6ff0d5",
|
|
152
|
+
"playground/editor/apple-input-source.ts": "4092f61af0d77326a4e95213c9dc2e63afbe1e2d6e05b4854a04176e344538aa",
|
|
153
|
+
"playground/editor/apple-input.ts": "54546ef9b04c991e3bedd7f718cd4b03855d0ef9a7449ad4459be615d080a141",
|
|
154
|
+
"playground/editor/contract.ts": "0d39a03a7c20de6e214d91a68c67329e5dd3a62a79fd1f14475a41820a1e9443",
|
|
155
|
+
"playground/editor/documents.ts": "22afdd9cc1b3388c34e8a4133f5aaa09369454503a477e95fc785bc63b91f3df",
|
|
156
|
+
"playground/editor/input-playground.ts": "458ec5f8cb796b663d3d223cf018931b1f706f8f4836aa8a3c6dfce3add30d79",
|
|
157
|
+
"playground/editor/runtime.ts": "09cd19ee9bf4f38a2f5bef013caae4f5ffd48677882550f19f2b9c266441faa9",
|
|
158
|
+
"playground/editor/sections.ts": "614fecd6a895d6afb0e6d59cfb1e345317fa26bcc0aba916e0da2d164e82dd82",
|
|
76
159
|
"playground/env.d.ts": "daae3800510e936d8308b7a9ebb0cb28d8f3fcd449e41386feea05d29bd12540",
|
|
77
160
|
"playground/main.ts": "efa30fb81f5c5f46ca21dc32a96fb08b32665b2d7de9d426e52c617662203285",
|
|
78
161
|
"playground/router/index.ts": "fe5f1c4b53f2f636bcb25727013b5cfb1e96bcadfd7f1a841537583fc98eccf5",
|
|
79
|
-
"playground/style.css": "
|
|
80
|
-
"playground/views/[...all].vue": "
|
|
81
|
-
"playground/views/
|
|
82
|
-
"playground/views/
|
|
83
|
-
"playground/views/
|
|
162
|
+
"playground/style.css": "c952ec3900ee3952cc757e95e603abcfed62f7848eef02c9a03d30b32028e078",
|
|
163
|
+
"playground/views/[...all].vue": "98797a9c353d390c7bf96da245feb9387e5e0cbec1a9f180ade457ae65c7484e",
|
|
164
|
+
"playground/views/component-docs/[component].vue": "3f505550dacb1d8151417df61d0598940aa7d218518179e532ddc962b0632a5e",
|
|
165
|
+
"playground/views/components.vue": "a19c4ca87a6a2ed43c4a6dc6eb52d3071733ce787024e1ab305db99b6acc6333",
|
|
166
|
+
"playground/views/index.vue": "9afc860da88aebe4879668784da24c657ecba19e5bc3ddad9dbcdd72f84db245",
|
|
167
|
+
"playground/views/settings.vue": "1d36c866d1d5b1ec426d1254b31649e54585d3f3b4313ec8eb924f6a0eba456a",
|
|
84
168
|
"public/images/SOURCES.md": "24ccb6625b1168e48550b7651e9fc20cb747324d87666d39199608c7db20541b",
|
|
85
169
|
"public/images/airpods-max-orange.jpg": "f365fe9e374e2cede88f3e68487f6a773a767873978bcf20e4b21dee08aca966",
|
|
86
170
|
"public/images/architecture.jpg": "928ea321954f0edabc1eed3c908c6b1fc93b247badcbd89d8dc5ba237420c26b",
|
|
@@ -94,18 +178,19 @@
|
|
|
94
178
|
"public/images/snow.jpg": "59fec6d2bbf9df11b7c697c57a253b7bd4b5a097489ce1017fb5209b9ee54b8e",
|
|
95
179
|
"public/images/sunset.jpg": "4ee91e88f1e341143a807ef48fdfc24d63aa045d99351b4ea8ad7efcfef6ef9b",
|
|
96
180
|
"public/images/waterfall.jpg": "cfd55ff5f41d3a58e91793d0e26a9ca90c86760aa401da033fbfa77d3364f238",
|
|
97
|
-
"docs/COMPONENTS.md": "
|
|
98
|
-
"docs/
|
|
181
|
+
"docs/COMPONENTS.md": "5593cd13aa87ed60ccd9e7671260b9f5e6240d4fc9fc51c10521c21ad306909a",
|
|
182
|
+
"docs/INPUT-WORKSHOP.md": "82ea6db156d2d9be4cfee233675b107c837aaa30a849f92010e988e1df7ce3a0",
|
|
183
|
+
"docs/PLAYGROUND-TEMPLATE.md": "e476d6622e89d8cb04d9acdd54c090e5d559d666bb49f266bcf36d3f3bf8fe67",
|
|
99
184
|
"docs/VALIDATION.md": "3c1755f4699d6b7d8febb44b2b0b00eb416b86559c26d8b69e46a1c98271af5f",
|
|
100
|
-
"README.md": "
|
|
101
|
-
"package.json": "
|
|
185
|
+
"README.md": "1e24796cf31d3d93f34e4edd32b8e1629b1dfdc175f74df573e14b4eb12186ed",
|
|
186
|
+
"package.json": "677a70164d41c33517f36c661d773d17b4103d6e22fd55f8dc1df3c3bb3d2729",
|
|
102
187
|
"index.html": "75f6d93e3962ddca97a13b666a04d98ba9b263b6c288171383db764215034fea",
|
|
103
|
-
"vite.config.ts": "
|
|
188
|
+
"vite.config.ts": "e2fee737d17c721cefaa33c955c6a7fcd47b46d51a95365768208eb16b608585",
|
|
104
189
|
"vite.lib.config.ts": "f877c1772da70c9fed5174118ca36a0fc25fd46cce49b71280a5f91c4f8003a3",
|
|
105
190
|
"tsconfig.json": "09590870bfbf6e90614d8a34af38b9a72902e8747ecd1a76be47ab24c842f9ea",
|
|
106
191
|
"tsconfig.lib.json": "c885806b003cee01192cddcaf32df3e7c6d369e645360398aa088c14b1c4792f",
|
|
107
192
|
"tooling/create-playground.mjs": "c45480c5982a64efd06f69dfb4620c65fd8ea35d01877b8574e7e2b30c095606",
|
|
108
|
-
"tooling/prepare-playground.mjs": "
|
|
193
|
+
"tooling/prepare-playground.mjs": "3a624b4966613a14e4f44a25555f25c564ea0fe69e5c68922c2ff5d21e1e2769",
|
|
109
194
|
"tooling/prepare-package.mjs": "cf57a112eec798412e2a68089d1b2d25b984600d6ffef99397ec253abf2fca57"
|
|
110
195
|
}
|
|
111
196
|
}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
<component :is="Component" :key="route.path" />
|
|
12
12
|
</div>
|
|
13
13
|
</router-view>
|
|
14
|
+
<div class="site-footer"><PageFooter /></div>
|
|
14
15
|
</apple-provider>
|
|
15
16
|
</template>
|
|
16
17
|
|
|
@@ -20,6 +21,7 @@ import { useRoute, useRouter } from 'vue-router'
|
|
|
20
21
|
import { useApple } from 'apptify'
|
|
21
22
|
import { animateEntrance } from 'apptify'
|
|
22
23
|
import UserMenu from './components/UserMenu.vue'
|
|
24
|
+
import PageFooter from './components/PageFooter.vue'
|
|
23
25
|
|
|
24
26
|
const router = useRouter()
|
|
25
27
|
const route = useRoute()
|
|
@@ -41,12 +43,11 @@ function cancelEntrance() {
|
|
|
41
43
|
function queueEntrance() {
|
|
42
44
|
cancelEntrance()
|
|
43
45
|
// Let the router restore the scroll position before animating the page.
|
|
44
|
-
// Animate the fixed sidebar itself so it shares the entrance without changing its containing block.
|
|
45
46
|
entranceFrame = requestAnimationFrame(() => {
|
|
46
|
-
const targets = [routePage.value?.querySelector<HTMLElement>('main')
|
|
47
|
-
targets.forEach(
|
|
47
|
+
const targets = [routePage.value?.querySelector<HTMLElement>('main')]
|
|
48
|
+
targets.forEach(element => {
|
|
48
49
|
if (!element) return
|
|
49
|
-
const animation = animateEntrance(element,
|
|
50
|
+
const animation = animateEntrance(element, 'y')
|
|
50
51
|
if (animation) entrances.push(animation)
|
|
51
52
|
})
|
|
52
53
|
})
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<apple-button @click="notify('操作已完成')">继续</apple-button>
|
|
5
5
|
<apple-button variant="secondary" @click="notify('已选择次要操作')">稍后再说</apple-button>
|
|
6
6
|
<apple-button variant="outline" @click="notify('已加入收藏')">加入收藏</apple-button>
|
|
7
|
-
<apple-
|
|
7
|
+
<apple-link as="button" :icon="icons.ArrowUpRight" @click="notify('正在查看详情')">了解更多</apple-link>
|
|
8
8
|
<apple-button :icon="icons.Plus" icon-only label="添加" @click="notify('已添加')" />
|
|
9
9
|
<apple-button loading>处理中</apple-button><apple-button disabled>暂不可用</apple-button>
|
|
10
10
|
</apple-stack>
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
<apple-stack v-else-if="name === 'AppleGrid'">
|
|
44
44
|
<apple-slider v-model="gridMin" label="最小列宽" :min="120" :max="320" :step="40" />
|
|
45
45
|
<apple-grid :min="gridMin" :gap="16">
|
|
46
|
-
<
|
|
46
|
+
<apple-card v-for="(section, index) in layoutItems" :key="section" class="demo-layout-tile"><span>0{{ index + 1 }}</span><strong>{{ section }}</strong></apple-card>
|
|
47
47
|
</apple-grid>
|
|
48
48
|
</apple-stack>
|
|
49
49
|
<apple-card v-else-if="name === 'AppleCard'" class="demo-product" title="AirPods Max" subtitle="每个音符，都更动听。" eyebrow="声音，出类拔萃。">
|
|
50
50
|
<apple-image :gallery="{ src: '/images/airpods-max-orange.jpg', alt: '橙色 AirPods Max 耳机' }" aspect-ratio="1" fit="contain" />
|
|
51
|
-
<template #actions><apple-button @click="notify('已加入购物袋')">加入购物袋</apple-button><apple-
|
|
51
|
+
<template #actions><apple-button @click="notify('已加入购物袋')">加入购物袋</apple-button><apple-link as="button" :icon="icons.Heart" icon-only label="收藏" @click="notify('已收藏')" /></template>
|
|
52
52
|
</apple-card>
|
|
53
53
|
<apple-stack v-else-if="name === 'AppleImage'" class="demo-image">
|
|
54
54
|
<apple-segmented-control v-model="imageLayout" :items="[{label:'省空间',value:'compact'},{label:'平铺',value:'tiled'},{label:'换行平铺',value:'tiled-wrap'}]" label="图片组布局" />
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
</apple-stack>
|
|
59
59
|
<apple-stack v-else-if="name === 'AppleAvatar'"><apple-slider v-model="avatarSize" label="头像尺寸" :min="24" :max="72" :step="8" /><apple-stack direction="row" align="center"><apple-avatar name="林初" :size="avatarSize" /><apple-avatar name="Alex" :size="avatarSize" /><apple-avatar name="Taylor" :size="avatarSize" square /></apple-stack></apple-stack>
|
|
60
60
|
<apple-stack v-else-if="name === 'AppleAvatarGroup'"><apple-stepper v-model="avatarMax" label="显示人数" :min="1" :max="5" /><apple-avatar-group :items="people" :max="avatarMax" :size="44" label="设计团队" /></apple-stack>
|
|
61
|
-
<apple-stack v-else-if="name === 'AppleBadge'" direction="row" align="center"><apple-badge :value="unread"><apple-
|
|
62
|
-
<apple-stack v-else-if="name === 'AppleTag'" class="demo-tag-row" direction="row" align="center" :gap="10"><apple-tag>默认标签</apple-tag><apple-tag tone="success">已完成</apple-tag><apple-tag tone="info">进行中</apple-tag><apple-tag tone="warning">待确认</apple-tag><apple-tag v-if="tag" label="设计系统" closable @close="tag = false">设计系统</apple-tag><apple-button v-else
|
|
61
|
+
<apple-stack v-else-if="name === 'AppleBadge'" direction="row" align="center"><apple-badge :value="unread"><apple-link variant="secondary" :icon="icons.Bell" @click="unread++">新消息</apple-link></apple-badge><apple-link as="button" :disabled="!unread" @click="unread = 0">全部已读</apple-link></apple-stack>
|
|
62
|
+
<apple-stack v-else-if="name === 'AppleTag'" class="demo-tag-row" direction="row" align="center" :gap="10"><apple-tag>默认标签</apple-tag><apple-tag tone="success">已完成</apple-tag><apple-tag tone="info">进行中</apple-tag><apple-tag tone="warning">待确认</apple-tag><apple-tag v-if="tag" label="设计系统" closable @close="tag = false">设计系统</apple-tag><apple-link as="button" v-else :icon="icons.Plus" @click="tag = true">添加标签</apple-link></apple-stack>
|
|
63
63
|
<apple-stack v-else-if="name === 'AppleDivider'"><apple-switch v-model="dividerVertical" label="纵向分隔" /><apple-stack :direction="dividerVertical ? 'row' : 'column'" :gap="0" align="center"><span>配送到家</span><apple-divider :vertical="dividerVertical" :label="dividerVertical ? undefined : '更多选择'" /><span>到店取货</span></apple-stack></apple-stack>
|
|
64
64
|
<apple-input v-else-if="name === 'AppleInput'" v-model="text" label="姓名" placeholder="怎么称呼你" clearable />
|
|
65
65
|
<apple-textarea v-else-if="name === 'AppleTextarea'" v-model="bio" label="个人简介" placeholder="写下你的想法" :maxlength="160" counter />
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
<apple-form-field v-else-if="name === 'AppleFormField'" label="个人网站" :error="website && !website.startsWith('https://') ? '请输入以 https:// 开头的网址' : ''" hint="你的公开主页">
|
|
86
86
|
<template #default="field"><input v-bind="field" v-model="website" class="apple-control" type="url" placeholder="https://example.com" /></template>
|
|
87
87
|
</apple-form-field>
|
|
88
|
-
<apple-navibar v-else-if="name === 'AppleNavibar'" v-model="tab" brand="Apptify" :fixed="false" :items="tabs" label="示例导航"><template #actions><apple-
|
|
88
|
+
<apple-navibar v-else-if="name === 'AppleNavibar'" v-model="tab" brand="Apptify" :fixed="false" :items="tabs" label="示例导航"><template #actions><apple-link as="button" :icon="icons.Bell" icon-only label="通知" @click="notify('暂无新通知')" /></template></apple-navibar>
|
|
89
89
|
<apple-aside v-else-if="name === 'AppleAside'" :hide-on-preview="false" aria-label="示例侧栏"><apple-list v-model="setting" :items="settings" selectable /></apple-aside>
|
|
90
90
|
<apple-tabs v-else-if="name === 'AppleTabs'" v-model="tab" :items="tabs"><template #default="{ value }"><p class="demo-copy">{{ value === 'overview' ? '这里是产品概览。' : value === 'spec' ? '这里是技术规格。' : '你的服务与支持。' }}</p></template></apple-tabs>
|
|
91
91
|
<apple-tab-bar v-else-if="name === 'AppleTabBar'" v-model="tab" :items="tabs"><template #default="{ value }"><p class="demo-copy">{{ value === 'overview' ? '这里是产品概览。' : value === 'spec' ? '这里是技术规格。' : '你的服务与支持。' }}</p></template></apple-tab-bar>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
<apple-stack v-else-if="name === 'AppleTable'"><apple-switch v-model="virtualTable" label="虚拟滚动 · 5000 行" /><apple-table :columns="columns" :rows="virtualTable ? virtualRows : rows" selectable :virtual="virtualTable" :height="360" :page-size="virtualTable ? 0 : 3" /></apple-stack>
|
|
97
97
|
<apple-tree v-else-if="name === 'AppleTree'" v-model="tree" :items="folders" />
|
|
98
98
|
<apple-list v-else-if="name === 'AppleList'" v-model="setting" :items="settings" selectable @select="notify('已选择设置项')" />
|
|
99
|
-
<apple-stack v-else-if="name === 'AppleTimeline'"><apple-segmented-control v-model="timelineDirection" :items="[{label:'纵向',value:'vertical'},{label:'横向',value:'horizontal'}]" label="时间线方向" /><apple-timeline :items="events" :orientation="timelineDirection" /><apple-
|
|
99
|
+
<apple-stack v-else-if="name === 'AppleTimeline'"><apple-segmented-control v-model="timelineDirection" :items="[{label:'纵向',value:'vertical'},{label:'横向',value:'horizontal'}]" label="时间线方向" /><apple-timeline :items="events" :orientation="timelineDirection" /><apple-link variant="secondary" @click="updateDelivery">{{ delivered ? '查看配送过程' : '确认签收' }}</apple-link></apple-stack>
|
|
100
100
|
<apple-stack v-else-if="name === 'AppleStatistic'"><apple-segmented-control v-model="period" :items="periods" label="统计周期" /><apple-statistic :label="period === 'day' ? '今日访问' : period === 'week' ? '本周访问' : '本月访问'" :value="period === 'day' ? 428 : period === 'week' ? 2996 : 12840" suffix="次" description="最新访问数据" /></apple-stack>
|
|
101
101
|
<apple-stack v-else-if="name === 'AppleDialog'" direction="row"><apple-button @click="openDialog">打开对话框</apple-button><apple-button variant="secondary" @click="openStack">多层对话框</apple-button></apple-stack>
|
|
102
102
|
<template v-else-if="name === 'AppleDrawer'"><apple-button @click="drawer = true">打开抽屉</apple-button><apple-drawer v-model="drawer" title="偏好设置"><apple-stack><apple-switch v-model="checked" label="接收通知" /><apple-slider v-model="volume" label="音量" /></apple-stack></apple-drawer></template>
|
|
@@ -123,9 +123,8 @@
|
|
|
123
123
|
</apple-action-sheet>
|
|
124
124
|
</template>
|
|
125
125
|
<apple-pull-refresh v-else-if="name === 'ApplePullRefresh'" @refresh="refresh"><apple-list :items="[{label:'最新内容',value:'latest',description:refreshText},{label:'最近更新',value:'recent',description:'所有内容已同步'}]" /></apple-pull-refresh>
|
|
126
|
-
<apple-infinite-scroll v-else-if="name === 'AppleInfiniteScroll'" :finished="itemsCount >= 12" @load="loadMore"><apple-list :items="Array.from({length:itemsCount}, (_, i) => ({label:`灵感收藏 ${i+1}`, value:i, description:'刚刚更新'}))" /></apple-infinite-scroll>
|
|
127
126
|
<template v-else-if="name === 'AppleBackTop'"><apple-button :icon="icons.ArrowUp" variant="secondary" @click="toTop">回到顶部</apple-button><apple-back-top :threshold="0" :fixed="false" /></template>
|
|
128
|
-
<template v-else-if="name === 'AppleFloatingGroup'"><apple-button variant="secondary" @click="notify('快捷操作已就绪')">快捷操作</apple-button><apple-
|
|
127
|
+
<template v-else-if="name === 'AppleFloatingGroup'"><apple-button variant="secondary" @click="notify('快捷操作已就绪')">快捷操作</apple-button><apple-card class="demo-floating-preview"><apple-provider><apple-floating-group :threshold="0" /></apple-provider></apple-card></template>
|
|
129
128
|
<apple-stack v-else-if="name === 'AppleAutoSize'"><apple-switch v-model="checked" label="显示详情" /><apple-auto-size><apple-list :items="checked ? settings : settings.slice(0,1)" selectable /></apple-auto-size></apple-stack>
|
|
130
129
|
<apple-stack v-else-if="name === 'AppleTransition'">
|
|
131
130
|
<apple-segmented-control v-model="period" :items="periods" label="统计周期" />
|
|
@@ -135,7 +134,7 @@
|
|
|
135
134
|
</apple-transition>
|
|
136
135
|
</div>
|
|
137
136
|
</apple-stack>
|
|
138
|
-
<apple-
|
|
137
|
+
<apple-infinite-scroll v-else-if="name === 'AppleInfiniteScroll'" :finished="itemsCount >= 12" @load="loadMore"><apple-list :items="Array.from({length:itemsCount}, (_, i) => ({label:`灵感收藏 ${i+1}`, value:i, description:'刚刚更新'}))" /></apple-infinite-scroll>
|
|
139
138
|
</div>
|
|
140
139
|
</template>
|
|
141
140
|
|
|
@@ -8,7 +8,7 @@ export const catalog: CatalogItem[] = [
|
|
|
8
8
|
item('AppleContainer', '内容容器', '基础', '在不同屏幕上保留合适的内容宽度。', 'width(number|string) | slot: default', '<apple-container :width="960">\n <apple-stack>内容</apple-stack>\n</apple-container>'),
|
|
9
9
|
item('AppleStack', '弹性布局', '基础', '有序排列，自然换行。', 'direction(row|column) · gap · align · wrap | slot: default', '<apple-stack direction="row" :gap="16" align="center">\n <apple-button>继续</apple-button>\n <apple-button variant="secondary">取消</apple-button>\n</apple-stack>'),
|
|
10
10
|
item('AppleGrid', '网格布局', '基础', '让列数随内容空间变化。', 'min(number) · gap(number) | slot: default', '<apple-grid :min="240" :gap="20">\n <div v-for="item in items" :key="item.id">{{ item.label }}</div>\n</apple-grid>'),
|
|
11
|
-
item('AppleCard', '卡片', '基础', '来自 Apple Store 的产品表达。', 'title · subtitle · text · image · zoom · shadow · motion | slots: media, title, icon, actions', '<apple-card title="AirPods Max" subtitle="声音，出类拔萃。" motion="auto"
|
|
11
|
+
item('AppleCard', '卡片', '基础', '来自 Apple Store 的产品表达。', 'title · subtitle · text · image · zoom · shadow · motion | slots: media, title, icon, actions', '<apple-card title="AirPods Max" subtitle="声音，出类拔萃。" motion="auto">\n <template #actions><apple-button>进一步了解</apple-button></template>\n</apple-card>'),
|
|
12
12
|
item('AppleImage', '图片与预览', '基础', '让值得细看的内容更近一步。', 'gallery(object|array) · index · preview · carousel · disabled · label · galleryLayout(compact|tiled|tiled-wrap) · v-model:index | item({item,index,active}) · squared · aspectRatio · fit', '<apple-image :gallery="images" gallery-layout="compact" :index="0" />'),
|
|
13
13
|
item('AppleAvatar', '头像', '基础', '为每一位用户保留位置。', 'src · name · size', '<apple-avatar name="林初" :size="48" />'),
|
|
14
14
|
item('AppleAvatarGroup', '头像组', '基础', '一起参与的人，一眼可见。', 'items[{name,src,value}] · max · size · label | slot: default', '<apple-avatar-group :items="members" :max="4" :size="40" label="项目成员" />'),
|
|
@@ -60,12 +60,11 @@ export const catalog: CatalogItem[] = [
|
|
|
60
60
|
item('AppleMenu', '下拉菜单', '反馈', '按需展开的操作列表。', 'v-model · items[{label,value,disabled,danger,icon,description}] · label · selected | select(value,item)', '<apple-menu :items="actions" label="更多操作" @select="onAction" />'),
|
|
61
61
|
item('AppleActionSheet', '动作面板', '移动交互', '熟悉、直接的移动操作。', 'v-model · title · message · items[{label,value,disabled,danger}] · cancelText | default slot {select(item),close(value)} | select(value,item)', '<apple-action-sheet v-model="open" title="选择操作" @select="onAction">\n <template #default="{ select }">\n <apple-button @click="select({ label: \'收藏\', value: \'favorite\' })">加入收藏</apple-button>\n </template>\n</apple-action-sheet>'),
|
|
62
62
|
item('ApplePullRefresh', '下拉刷新', '移动交互', '轻轻下拉，获取新内容。', 'v-model(refreshing) · threshold · label · disabled | refresh(done)', '<apple-pull-refresh @refresh="async done => { await reload(); done() }">内容</apple-pull-refresh>'),
|
|
63
|
-
item('AppleInfiniteScroll', '无限滚动', '移动交互', '浏览，不必被翻页打断。', 'loading · finished · error · disabled · distance | load(done), retry(done)', '<apple-infinite-scroll :finished="finished" @load="async done => { await loadMore(); done() }">内容</apple-infinite-scroll>'),
|
|
64
63
|
item('AppleBackTop', '回到顶部', '移动交互', '回到开始，毫不费力。', 'threshold · label', '<apple-back-top :threshold="400" />'),
|
|
65
|
-
item('AppleFloatingGroup', '悬浮操作组', '移动交互', '常用操作，触手可及。', 'backTop · threshold · target · label · motion | default', '<apple-floating-group :threshold="300"
|
|
64
|
+
item('AppleFloatingGroup', '悬浮操作组', '移动交互', '常用操作，触手可及。', 'backTop · threshold · target · label · motion | default', '<apple-floating-group :threshold="300" />'),
|
|
66
65
|
item('AppleAutoSize', '自适应尺寸', '基础', '内容变化，布局随行。', 'axis(height|both) · motion | default', '<apple-auto-size><div v-if="expanded">详情内容</div></apple-auto-size>'),
|
|
67
66
|
item('AppleTransition', '动效容器', '基础', '为页面保留连续感。', 'name(page|slide-x|slide-y|fade) · mode · appear · motion | default', '<apple-transition name="page"><router-view /></apple-transition>'),
|
|
68
|
-
item('
|
|
67
|
+
item('AppleInfiniteScroll', '无限滚动', '移动交互', '浏览，不必被翻页打断。', 'loading · finished · error · disabled · distance | load(done), retry(done)', '<apple-infinite-scroll :finished="finished" @load="async done => { await loadMore(); done() }">内容</apple-infinite-scroll>'),
|
|
69
68
|
]
|
|
70
69
|
export const groups = ['全部组件', '基础', '表单', '导航', '数据展示', '反馈', '移动交互']
|
|
71
70
|
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<nav class="component-index" aria-label="组件定位">
|
|
3
|
+
<AppleTree :items="treeItems" :model-value="activeId || activeGroup" :expanded="expandedGroups" label="组件目录树" @update:expanded="expanded = $event" @select="navigate" />
|
|
4
|
+
<p v-if="!treeItems.length" class="index-empty" role="status">未找到组件，请尝试其他关键词。</p>
|
|
5
|
+
</nav>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script setup lang="ts">
|
|
9
|
+
import { computed } from 'vue'
|
|
10
|
+
import { useRoute, useRouter } from 'vue-router'
|
|
11
|
+
import { AppleTree } from 'apptify'
|
|
12
|
+
import type { AppleTreeItem, AppleValue } from 'apptify'
|
|
13
|
+
import { sections, componentId } from '../catalog'
|
|
14
|
+
|
|
15
|
+
const props = defineProps<{ activeGroup: string; activeId: string; search?: string }>()
|
|
16
|
+
const emit = defineEmits<{ navigate: [] }>()
|
|
17
|
+
const router = useRouter()
|
|
18
|
+
const route = useRoute()
|
|
19
|
+
const expanded = defineModel<AppleValue[]>('expanded', { default: () => sections.map(section => section.id) })
|
|
20
|
+
const query = computed(() => props.search?.trim().toLocaleLowerCase() ?? '')
|
|
21
|
+
const treeItems = computed<AppleTreeItem[]>(() => sections.flatMap(section => {
|
|
22
|
+
const groupMatches = section.label.toLocaleLowerCase().includes(query.value)
|
|
23
|
+
const items = section.items.filter(item => groupMatches || `${item.label} ${item.name} ${componentId(item.name)} ${item.description}`.toLocaleLowerCase().includes(query.value))
|
|
24
|
+
return items.length ? [{ label: section.label, value: section.id, children: items.map(item => ({ label: item.label, value: componentId(item.name) })) }] : []
|
|
25
|
+
}))
|
|
26
|
+
const expandedGroups = computed(() => query.value ? treeItems.value.map(item => item.value) : expanded.value)
|
|
27
|
+
function navigate(item: AppleTreeItem) {
|
|
28
|
+
if (item.children?.length) return
|
|
29
|
+
const hash = `#${item.value}`
|
|
30
|
+
if (route.hash === hash) {
|
|
31
|
+
const target = document.getElementById(String(item.value))
|
|
32
|
+
if (target) window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 96, behavior: 'instant' })
|
|
33
|
+
} else void router.push(`/components${hash}`)
|
|
34
|
+
emit('navigate')
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<style scoped>
|
|
39
|
+
.component-index { min-width: 0; }
|
|
40
|
+
.component-index :deep(.apple-tree__row) { min-height: 34px; }
|
|
41
|
+
.component-index :deep(.apple-tree__row > span:last-child) { min-width: 0; overflow-wrap: anywhere; }
|
|
42
|
+
.index-empty { margin: 12px 8px; font-size: 12px; line-height: 1.7; color: var(--apple-secondary); }
|
|
43
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<apple-floating-group label="页面导航">
|
|
3
|
+
<apple-button class="directory-toggle" variant="secondary" icon-only :icon="Menu" :label="`展开${title}`" aria-haspopup="dialog" :aria-expanded="modelValue" @click="modelValue = true" />
|
|
4
|
+
</apple-floating-group>
|
|
5
|
+
<apple-dialog v-model="modelValue" :title="title" :show-footer="false" width="480px">
|
|
6
|
+
<div class="directory-dialog-content"><slot /></div>
|
|
7
|
+
</apple-dialog>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script setup lang="ts">
|
|
11
|
+
import { Menu } from 'lucide-vue-next'
|
|
12
|
+
defineProps<{ title: string }>()
|
|
13
|
+
const modelValue = defineModel<boolean>({ default: false })
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<style scoped>
|
|
17
|
+
.directory-toggle { display: none; order: 1001; width: 44px; height: 44px; padding: 0; border-radius: 50%; box-shadow: var(--apple-shadow); }
|
|
18
|
+
.directory-dialog-content { min-width: 0; }
|
|
19
|
+
@media (max-width: 900px) { .directory-toggle { display: inline-flex; } }
|
|
20
|
+
</style>
|