From 26839f5b22570fb06a711844c8a724ecff01bfa4 Mon Sep 17 00:00:00 2001 From: daguanren21 <1363917353@qq.com> Date: Sun, 13 Sep 2026 11:57:53 +0800 Subject: [PATCH 1/6] feat(ui): expand cross-platform controls and docs previews --- .changeset/rapid-input-number-icons.md | 10 + README.md | 8 + README.zh-CN.md | 8 + apps/docs/.vitepress/config.ts | 4 + apps/docs/.vitepress/theme/custom.css | 8 + apps/docs/.vitepress/theme/index.ts | 14 + apps/docs/components/badge.md | 2 - apps/docs/components/breadcrumb.md | 2 - apps/docs/components/button.md | 6 +- apps/docs/components/calendar-card.md | 2 - apps/docs/components/calendar.md | 2 - apps/docs/components/cascader.md | 2 - apps/docs/components/cell.md | 2 - apps/docs/components/checkbox.md | 2 - apps/docs/components/date-field.md | 32 + apps/docs/components/date-picker.md | 2 - apps/docs/components/dialog.md | 2 - apps/docs/components/divider.md | 2 - apps/docs/components/elevator.md | 2 - apps/docs/components/fixed-nav.md | 2 - apps/docs/components/form.md | 2 - apps/docs/components/grid.md | 2 - apps/docs/components/image.md | 2 - apps/docs/components/indicator.md | 2 - apps/docs/components/input-number.md | 25 +- apps/docs/components/input.md | 2 - apps/docs/components/layout.md | 2 - apps/docs/components/list.md | 27 + apps/docs/components/loading.md | 2 - apps/docs/components/menu.md | 2 - apps/docs/components/navbar.md | 2 - apps/docs/components/number-keyboard.md | 2 - apps/docs/components/overlay.md | 2 - apps/docs/components/pagination.md | 2 - apps/docs/components/picker.md | 32 +- apps/docs/components/popover.md | 2 - apps/docs/components/popup.md | 2 - apps/docs/components/pull-refresh.md | 30 + apps/docs/components/radio.md | 6 +- apps/docs/components/range.md | 2 - apps/docs/components/rate.md | 2 - apps/docs/components/region-picker.md | 2 - apps/docs/components/robot-chat.md | 2 - apps/docs/components/searchbar.md | 2 - apps/docs/components/select.md | 2 - apps/docs/components/short-password.md | 2 - apps/docs/components/side-navbar.md | 2 - apps/docs/components/signature.md | 31 + apps/docs/components/skeleton.md | 2 - apps/docs/components/space.md | 2 - apps/docs/components/sticky.md | 2 - apps/docs/components/switch.md | 6 +- apps/docs/components/tabbar.md | 2 - apps/docs/components/tabs.md | 2 - apps/docs/components/textarea.md | 2 - apps/docs/components/toast.md | 37 +- apps/docs/components/uploader.md | 2 - apps/docs/components/watermark.md | 29 + apps/docs/en/components/badge.md | 2 - apps/docs/en/components/breadcrumb.md | 2 - apps/docs/en/components/button.md | 6 +- apps/docs/en/components/calendar-card.md | 2 - apps/docs/en/components/calendar.md | 2 - apps/docs/en/components/cascader.md | 2 - apps/docs/en/components/cell.md | 2 - apps/docs/en/components/checkbox.md | 2 - apps/docs/en/components/date-field.md | 32 + apps/docs/en/components/date-picker.md | 2 - apps/docs/en/components/dialog.md | 2 - apps/docs/en/components/divider.md | 2 - apps/docs/en/components/elevator.md | 2 - apps/docs/en/components/fixed-nav.md | 2 - apps/docs/en/components/form.md | 2 - apps/docs/en/components/grid.md | 2 - apps/docs/en/components/image.md | 2 - apps/docs/en/components/indicator.md | 2 - apps/docs/en/components/input-number.md | 25 +- apps/docs/en/components/input.md | 2 - apps/docs/en/components/layout.md | 2 - apps/docs/en/components/list.md | 27 + apps/docs/en/components/loading.md | 2 - apps/docs/en/components/menu.md | 2 - apps/docs/en/components/navbar.md | 2 - apps/docs/en/components/number-keyboard.md | 2 - apps/docs/en/components/overlay.md | 2 - apps/docs/en/components/pagination.md | 2 - apps/docs/en/components/picker.md | 32 +- apps/docs/en/components/popover.md | 2 - apps/docs/en/components/popup.md | 2 - apps/docs/en/components/pull-refresh.md | 30 + apps/docs/en/components/radio.md | 6 +- apps/docs/en/components/range.md | 2 - apps/docs/en/components/rate.md | 2 - apps/docs/en/components/region-picker.md | 2 - apps/docs/en/components/robot-chat.md | 2 - apps/docs/en/components/searchbar.md | 2 - apps/docs/en/components/select.md | 2 - apps/docs/en/components/short-password.md | 2 - apps/docs/en/components/side-navbar.md | 2 - apps/docs/en/components/signature.md | 31 + apps/docs/en/components/skeleton.md | 2 - apps/docs/en/components/space.md | 2 - apps/docs/en/components/sticky.md | 2 - apps/docs/en/components/switch.md | 6 +- apps/docs/en/components/tabbar.md | 2 - apps/docs/en/components/tabs.md | 2 - apps/docs/en/components/textarea.md | 2 - apps/docs/en/components/toast.md | 45 +- apps/docs/en/components/uploader.md | 2 - apps/docs/en/components/watermark.md | 29 + apps/docs/en/guide/installation.md | 8 - apps/docs/en/primitives/accordion.md | 2 +- apps/docs/en/primitives/checkbox.md | 2 +- apps/docs/en/primitives/collapsible.md | 2 +- apps/docs/en/primitives/index.md | 6 +- apps/docs/en/primitives/popover.md | 2 +- apps/docs/en/primitives/radio-group.md | 2 +- apps/docs/en/primitives/select.md | 2 +- apps/docs/en/primitives/switch.md | 2 +- apps/docs/en/primitives/tabs.md | 4 +- apps/docs/guide/installation.md | 8 - apps/docs/primitives/accordion.md | 2 +- apps/docs/primitives/checkbox.md | 2 +- apps/docs/primitives/collapsible.md | 2 +- apps/docs/primitives/index.md | 6 +- apps/docs/primitives/popover.md | 2 +- apps/docs/primitives/radio-group.md | 2 +- apps/docs/primitives/select.md | 2 +- apps/docs/primitives/switch.md | 2 +- apps/docs/primitives/tabs.md | 4 +- apps/docs/src/component-catalog.ts | 7 +- apps/docs/src/components/DateFieldDemo.vue | 79 ++ .../src/components/FormComponentDemo.test.ts | 13 - .../docs/src/components/FormComponentDemo.vue | 61 -- .../src/components/InteractivePreview.vue | 13 - apps/docs/src/components/ListDemo.vue | 96 +++ apps/docs/src/components/PlatformTabsDemo.vue | 123 +--- apps/docs/src/components/PrimitiveExample.vue | 83 +-- .../PrimitiveExamplePreview.test.ts | 70 +- .../components/PrimitiveExamplePreview.vue | 126 ++-- apps/docs/src/components/PullRefreshDemo.vue | 105 +++ .../src/components/RegistryInstallStrip.vue | 14 +- apps/docs/src/components/SignatureDemo.vue | 63 ++ apps/docs/src/components/ToastDemo.vue | 150 ++++ apps/docs/src/components/WatermarkDemo.vue | 126 ++++ apps/docs/src/components/primitiveExamples.ts | 4 +- apps/docs/src/docs-navigation.test.ts | 15 +- .../src/components/ui/input-number.ts | 15 +- apps/playground-h5/src/components/ui/input.ts | 3 +- .../playground-h5/src/components/ui/select.ts | 2 +- apps/playground-h5/src/styles/varo.css | 667 ++++++++++++++--- apps/playground-weapp-preview/package.json | 6 +- .../scripts/smoke-motion-controls.mjs | 176 +++++ .../scripts/smoke-pull-refresh.mjs | 78 ++ .../scripts/verify-devtools-project.mjs | 6 + .../src/components/ui/date-utils.ts | 102 +++ .../src/components/ui/input-number.vue | 28 +- .../src/components/ui/select.vue | 19 +- .../src/components/ui/v-button.vue | 3 + .../src/components/ui/v-card.vue | 6 + .../src/components/ui/v-checkbox.vue | 3 + .../src/components/ui/v-date-field.vue | 145 ++++ .../src/components/ui/v-input.vue | 9 +- .../src/components/ui/v-picker.vue | 226 ++++++ .../src/components/ui/v-pull-refresh.vue | 64 ++ .../src/components/ui/v-radio.vue | 14 +- .../src/components/ui/v-signature.vue | 337 +++++++++ .../src/components/ui/v-switch.vue | 8 + .../src/components/ui/v-toast-region.vue | 36 + .../src/components/ui/v-toast.vue | 121 ++-- .../src/components/ui/v-watermark.vue | 89 +++ .../src/pages/web-preview/index.vue | 418 ++++++++++- .../src/registry-catalog/index/index.vue | 15 +- .../src/registry-expanded-smoke.ts | 10 + .../src/registry-expanded.test.ts | 52 +- apps/playground-weapp/src/signature.test.ts | 177 +++++ apps/playground-weapp/src/styles/varo.css | 624 +++++++++++++--- .../playground-weapp/src/toast-motion.test.ts | 124 ++++ apps/playground-weapp/src/watermark.test.ts | 40 + apps/playground-weapp/test/wevu.ts | 14 +- package.json | 1 + .../primitives-h5/src/number-field/index.ts | 3 +- packages/registry/src/index.ts | 9 + packages/registry/tests/registry.test.ts | 28 +- packages/theme/src/css.ts | 10 + packages/theme/tests/theme.test.ts | 5 + packages/ui-h5/src/date-field.ts | 133 ++++ packages/ui-h5/src/date-utils.ts | 50 +- packages/ui-h5/src/index.ts | 4 + packages/ui-h5/src/input-number.ts | 15 +- packages/ui-h5/src/input.ts | 3 +- packages/ui-h5/src/picker.ts | 169 +++-- packages/ui-h5/src/pull-refresh.ts | 226 ++++++ packages/ui-h5/src/select.ts | 2 +- packages/ui-h5/src/selection.ts | 4 +- packages/ui-h5/src/signature.ts | 294 ++++++++ packages/ui-h5/src/style.css | 667 ++++++++++++++--- packages/ui-h5/src/toast.ts | 50 +- packages/ui-h5/src/watermark.ts | 95 +++ .../tests/advanced-form-controls.test.ts | 77 ++ packages/ui-h5/tests/base-kit-missing.test.ts | 28 +- packages/ui-h5/tests/form-controls.test.ts | 18 +- packages/ui-h5/tests/input.test.ts | 2 + packages/ui-h5/tests/pull-refresh.test.ts | 103 +++ packages/ui-h5/tests/select.test.ts | 28 + packages/ui-h5/tests/signature.test.ts | 146 ++++ packages/ui-h5/tests/watermark.test.ts | 41 ++ packages/ui-weapp/src/date-field.ts | 133 ++++ packages/ui-weapp/src/date-utils.ts | 50 +- packages/ui-weapp/src/index.ts | 3 + packages/ui-weapp/src/input-number.ts | 15 +- packages/ui-weapp/src/input.ts | 3 +- packages/ui-weapp/src/picker.ts | 144 ++-- packages/ui-weapp/src/pull-refresh.ts | 43 ++ packages/ui-weapp/src/select.ts | 2 +- packages/ui-weapp/src/selection.ts | 4 +- packages/ui-weapp/src/style.css | 625 +++++++++++++--- packages/ui-weapp/src/toast.ts | 109 ++- packages/ui-weapp/src/watermark.ts | 95 +++ .../tests/advanced-form-controls.test.ts | 57 ++ .../ui-weapp/tests/base-kit-missing.test.ts | 28 +- packages/ui-weapp/tests/form-controls.test.ts | 15 +- packages/ui-weapp/tests/input.test.ts | 25 +- packages/ui-weapp/tests/p0-components.test.ts | 16 + packages/ui-weapp/tests/select.test.ts | 1 + .../weapp-web/src/runtime/native-elements.css | 12 + .../weapp-web/src/runtime/native-elements.ts | 683 +++++++++++++++--- .../weapp-web/src/runtime/native-templates.ts | 1 + packages/weapp-web/src/runtime/wx-host.ts | 70 +- packages/weapp-web/tests/wx-host.test.ts | 62 ++ registry/component-tiers.v0.1.json | 18 +- registry/components/button/weapp-vite.vue | 3 + registry/components/card/weapp-vite.vue | 6 + registry/components/checkbox/weapp-vite.vue | 3 + registry/components/date-field/date-field.ts | 134 ++++ registry/components/date-field/registry.json | 43 ++ .../components/date-field/v-date-field.vue | 145 ++++ .../components/input-number/input-number.ts | 15 +- .../components/input-number/registry.json | 3 +- .../components/input-number/weapp-vite.vue | 28 +- registry/components/input/input.ts | 3 +- registry/components/input/v-input.vue | 9 +- registry/components/list/registry.json | 2 +- registry/components/picker/picker.ts | 169 +++-- registry/components/picker/registry.json | 27 +- registry/components/picker/v-picker.vue | 226 ++++++ registry/components/pull-refresh/h5.ts | 227 ++++++ .../components/pull-refresh/registry.json | 41 ++ .../pull-refresh/v-pull-refresh.vue | 64 ++ registry/components/radio/selection.ts | 4 +- registry/components/radio/weapp-vite.vue | 14 +- registry/components/select/select.ts | 2 +- registry/components/select/weapp-vite.vue | 19 +- registry/components/signature/h5.ts | 295 ++++++++ registry/components/signature/registry.json | 41 ++ registry/components/signature/v-signature.vue | 337 +++++++++ registry/components/switch/weapp-vite.vue | 8 + registry/components/toast/registry.json | 9 +- registry/components/toast/toast.ts | 109 ++- registry/components/toast/v-toast-region.vue | 36 + registry/components/toast/v-toast.vue | 121 ++-- registry/components/watermark/h5.ts | 96 +++ registry/components/watermark/registry.json | 41 ++ registry/components/watermark/v-watermark.vue | 89 +++ registry/themes/base/h5.css | 667 ++++++++++++++--- registry/themes/base/weapp-vite.css | 625 +++++++++++++--- registry/utils/date-utils/date-utils.ts | 50 +- stylelint.config.js | 2 +- vitest.config.ts | 1 + 269 files changed, 11974 insertions(+), 1760 deletions(-) create mode 100644 .changeset/rapid-input-number-icons.md create mode 100644 apps/docs/components/date-field.md create mode 100644 apps/docs/components/list.md create mode 100644 apps/docs/components/pull-refresh.md create mode 100644 apps/docs/components/signature.md create mode 100644 apps/docs/components/watermark.md create mode 100644 apps/docs/en/components/date-field.md create mode 100644 apps/docs/en/components/list.md create mode 100644 apps/docs/en/components/pull-refresh.md create mode 100644 apps/docs/en/components/signature.md create mode 100644 apps/docs/en/components/watermark.md create mode 100644 apps/docs/src/components/DateFieldDemo.vue create mode 100644 apps/docs/src/components/ListDemo.vue create mode 100644 apps/docs/src/components/PullRefreshDemo.vue create mode 100644 apps/docs/src/components/SignatureDemo.vue create mode 100644 apps/docs/src/components/ToastDemo.vue create mode 100644 apps/docs/src/components/WatermarkDemo.vue create mode 100644 apps/playground-weapp-preview/scripts/smoke-motion-controls.mjs create mode 100644 apps/playground-weapp-preview/scripts/smoke-pull-refresh.mjs create mode 100644 apps/playground-weapp/src/components/ui/date-utils.ts create mode 100644 apps/playground-weapp/src/components/ui/v-date-field.vue create mode 100644 apps/playground-weapp/src/components/ui/v-picker.vue create mode 100644 apps/playground-weapp/src/components/ui/v-pull-refresh.vue create mode 100644 apps/playground-weapp/src/components/ui/v-signature.vue create mode 100644 apps/playground-weapp/src/components/ui/v-toast-region.vue create mode 100644 apps/playground-weapp/src/components/ui/v-watermark.vue create mode 100644 apps/playground-weapp/src/signature.test.ts create mode 100644 apps/playground-weapp/src/toast-motion.test.ts create mode 100644 apps/playground-weapp/src/watermark.test.ts create mode 100644 packages/ui-h5/src/date-field.ts create mode 100644 packages/ui-h5/src/pull-refresh.ts create mode 100644 packages/ui-h5/src/signature.ts create mode 100644 packages/ui-h5/src/watermark.ts create mode 100644 packages/ui-h5/tests/pull-refresh.test.ts create mode 100644 packages/ui-h5/tests/signature.test.ts create mode 100644 packages/ui-h5/tests/watermark.test.ts create mode 100644 packages/ui-weapp/src/date-field.ts create mode 100644 packages/ui-weapp/src/pull-refresh.ts create mode 100644 packages/ui-weapp/src/watermark.ts create mode 100644 packages/weapp-web/tests/wx-host.test.ts create mode 100644 registry/components/date-field/date-field.ts create mode 100644 registry/components/date-field/registry.json create mode 100644 registry/components/date-field/v-date-field.vue create mode 100644 registry/components/picker/v-picker.vue create mode 100644 registry/components/pull-refresh/h5.ts create mode 100644 registry/components/pull-refresh/registry.json create mode 100644 registry/components/pull-refresh/v-pull-refresh.vue create mode 100644 registry/components/signature/h5.ts create mode 100644 registry/components/signature/registry.json create mode 100644 registry/components/signature/v-signature.vue create mode 100644 registry/components/toast/v-toast-region.vue create mode 100644 registry/components/watermark/h5.ts create mode 100644 registry/components/watermark/registry.json create mode 100644 registry/components/watermark/v-watermark.vue diff --git a/.changeset/rapid-input-number-icons.md b/.changeset/rapid-input-number-icons.md new file mode 100644 index 00000000..03625a1d --- /dev/null +++ b/.changeset/rapid-input-number-icons.md @@ -0,0 +1,10 @@ +--- +"@varo-ui/h5": patch +"@varo-ui/weapp": patch +"@varo/weapp-web": patch +"@varo-ui/headless": patch +"@varo-ui/cli": patch +"@varo/registry": patch +--- + +Replace input-number ASCII steppers with named VIcon plus/minus controls and restore its compact inline geometry, pin textarea word-limit to the bottom-right, use a circular cancel-x on Input/Select without stretching Select on focus, avoid the native Input `focus` prop/handler collision, add dual-target multi-column Picker, DateField, PullRefresh, Signature, and Watermark Registry components while keeping Calendar independent, add shared motion tokens and Spectrum-inspired Button, Switch, Radio, Toast card, and VToastRegion interactions without changing the Varo palette, teach weapp-web native controls to preserve hover and ARIA semantics without Glass-Easel property warnings, pad docs API tables, preview compiled mini-program artifacts through weapp-web, and add a root `docs:dev` command with in-page H5 and Weapp primitive previews. diff --git a/README.md b/README.md index bbbbe08f..4e46229a 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,14 @@ pnpm --filter @varo/playground-weapp dev:ai `dev:ai` prepares the WeChat DevTools project, starts the MCP HTTP service, and forwards DevTools console output and uncaught errors to the active terminal. +## Documentation development + +```bash +pnpm run docs:dev +``` + +This starts VitePress at `http://127.0.0.1:5191` with in-page H5 and Weapp component previews. + ## Verification ```bash diff --git a/README.zh-CN.md b/README.zh-CN.md index f379f14a..eb4c5e09 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -70,6 +70,14 @@ pnpm --filter @varo/playground-weapp dev:ai `dev:ai` 会准备微信开发者工具项目、启动 MCP HTTP 服务，并将 DevTools console 与未捕获异常转发到当前终端。 +## 文档开发 + +```bash +pnpm run docs:dev +``` + +该命令会在 `http://127.0.0.1:5191` 启动 VitePress，并在文档页内提供 H5 与 Weapp 组件预览。 + ## 验证 ```bash diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts index dfd4750d..223c09be 100644 --- a/apps/docs/.vitepress/config.ts +++ b/apps/docs/.vitepress/config.ts @@ -21,17 +21,21 @@ export default defineConfig({ ['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#0b1016' }], ], vite: { + server: { host: '127.0.0.1', port: 5191, strictPort: true }, plugins: [tailwindcss()], resolve: { alias: { '@varo-ui/ai': workspacePath('../../../packages/agent-core/src/index.ts'), + '@varo/hooks': workspacePath('../../../packages/hooks/src/index.ts'), '@varo/shared': workspacePath('../../../packages/shared/src/index.ts'), '@varo/utils': workspacePath('../../../packages/utils/src/index.ts'), '@varo-ui/theme': workspacePath('../../../packages/theme/src/index.ts'), '@varo-ui/headless': workspacePath('../../../packages/primitives-core/src/index.ts'), '@varo/primitives-h5': workspacePath('../../../packages/primitives-h5/src/index.ts'), + '@varo/primitives-weapp': workspacePath('../../../packages/primitives-weapp/src/index.ts'), '@varo-ui/h5/source/style.css': workspacePath('../../../packages/ui-h5/src/style.css'), '@varo-ui/h5': workspacePath('../../../packages/ui-h5/src/index.ts'), + '@varo-ui/weapp/primitives': workspacePath('../../../packages/ui-weapp/src/primitives.ts'), '@varo-ui/weapp': workspacePath('../../../packages/ui-weapp/src/index.ts'), }, }, diff --git a/apps/docs/.vitepress/theme/custom.css b/apps/docs/.vitepress/theme/custom.css index c74c8e9d..c55d9842 100644 --- a/apps/docs/.vitepress/theme/custom.css +++ b/apps/docs/.vitepress/theme/custom.css @@ -580,6 +580,14 @@ html:not(.dark) .VPFeature:hover { width: 100%; overflow: hidden; table-layout: fixed; + border-spacing: 0; + border-collapse: separate; +} + +.vp-doc > table th, +.vp-doc > table td { + padding: 12px 16px; + vertical-align: top; } .vp-doc > table th { diff --git a/apps/docs/.vitepress/theme/index.ts b/apps/docs/.vitepress/theme/index.ts index a33519e5..696d88be 100644 --- a/apps/docs/.vitepress/theme/index.ts +++ b/apps/docs/.vitepress/theme/index.ts @@ -5,6 +5,7 @@ import { VCascader, VCheckbox, VCheckboxGroup, + VDateField, VDatePicker, VForm, VFormItem, @@ -29,17 +30,23 @@ import DefaultTheme from 'vitepress/theme' import AgentComponentDemo from '../../src/components/AgentComponentDemo.vue' import AgentComponentsDemo from '../../src/components/AgentComponentsDemo.vue' import ComponentCatalog from '../../src/components/ComponentCatalog.vue' +import DateFieldDemo from '../../src/components/DateFieldDemo.vue' import FormComponentDemo from '../../src/components/FormComponentDemo.vue' import InteractivePreview from '../../src/components/InteractivePreview.vue' +import ListDemo from '../../src/components/ListDemo.vue' import MapDemo from '../../src/components/MapDemo.vue' import MiniProgramBlocksGallery from '../../src/components/MiniProgramBlocksGallery.vue' import PlatformTabsDemo from '../../src/components/PlatformTabsDemo.vue' import PrimitiveCatalog from '../../src/components/PrimitiveCatalog.vue' import PrimitiveExample from '../../src/components/PrimitiveExample.vue' import PrimitiveInteractionDemo from '../../src/components/PrimitiveInteractionDemo.vue' +import PullRefreshDemo from '../../src/components/PullRefreshDemo.vue' import RegistryCoverageEvidence from '../../src/components/RegistryCoverageEvidence.vue' import RegistryInstallStrip from '../../src/components/RegistryInstallStrip.vue' import RobotChatDemo from '../../src/components/RobotChatDemo.vue' +import SignatureDemo from '../../src/components/SignatureDemo.vue' +import ToastDemo from '../../src/components/ToastDemo.vue' +import WatermarkDemo from '../../src/components/WatermarkDemo.vue' import DocsLayout from './DocsLayout.vue' import '@varo-ui/h5/source/style.css' import './tailwind.css' @@ -52,15 +59,21 @@ const theme: Theme = { enhanceApp({ app }) { app.component('AgentComponentsDemo', AgentComponentsDemo) app.component('AgentComponentDemo', AgentComponentDemo) + app.component('DateFieldDemo', DateFieldDemo) app.component('FormComponentDemo', FormComponentDemo) app.component('InteractivePreview', InteractivePreview) + app.component('ListDemo', ListDemo) app.component('ComponentCatalog', ComponentCatalog) app.component('MiniProgramBlocksGallery', MiniProgramBlocksGallery) app.component('MapDemo', MapDemo) app.component('RobotChatDemo', RobotChatDemo) app.component('PlatformTabsDemo', PlatformTabsDemo) + app.component('PullRefreshDemo', PullRefreshDemo) app.component('PrimitiveCatalog', PrimitiveCatalog) app.component('PrimitiveExample', PrimitiveExample) + app.component('SignatureDemo', SignatureDemo) + app.component('WatermarkDemo', WatermarkDemo) + app.component('ToastDemo', ToastDemo) app.component('RegistryInstallStrip', RegistryInstallStrip) app.component('RegistryCoverageEvidence', RegistryCoverageEvidence) app.component('PrimitiveInteractionDemo', PrimitiveInteractionDemo) @@ -69,6 +82,7 @@ const theme: Theme = { app.component('VCascader', VCascader) app.component('VCheckbox', VCheckbox) app.component('VCheckboxGroup', VCheckboxGroup) + app.component('VDateField', VDateField) app.component('VDatePicker', VDatePicker) app.component('VForm', VForm) app.component('VFormItem', VFormItem) diff --git a/apps/docs/components/badge.md b/apps/docs/components/badge.md index 89b5fdf8..c02e96ba 100644 --- a/apps/docs/components/badge.md +++ b/apps/docs/components/badge.md @@ -1,7 +1,5 @@ # Badge 徽标 - - ## 演示 diff --git a/apps/docs/components/breadcrumb.md b/apps/docs/components/breadcrumb.md index bb6854cf..4b1d16eb 100644 --- a/apps/docs/components/breadcrumb.md +++ b/apps/docs/components/breadcrumb.md @@ -1,7 +1,5 @@ # Breadcrumb 面包屑 - - ## 基础用法 ```vue diff --git a/apps/docs/components/button.md b/apps/docs/components/button.md index 5819f3d9..ae0820e8 100644 --- a/apps/docs/components/button.md +++ b/apps/docs/components/button.md @@ -1,11 +1,13 @@ # Button - - ## 演示 +## 交互设计 + +按钮保留 44px 默认命中高度和现有语义色。按压使用 140ms 的轻量缩放与内阴影反馈；Ghost 默认透明，仅在 hover 或按压时出现弱背景。减少动态效果时不执行空间缩放。 + ## 基础用法 ```vue diff --git a/apps/docs/components/calendar-card.md b/apps/docs/components/calendar-card.md index 62832163..5b8356b0 100644 --- a/apps/docs/components/calendar-card.md +++ b/apps/docs/components/calendar-card.md @@ -1,7 +1,5 @@ # CalendarCard 日历卡片 - - ## 演示 diff --git a/apps/docs/components/calendar.md b/apps/docs/components/calendar.md index 361315d4..e409ee3e 100644 --- a/apps/docs/components/calendar.md +++ b/apps/docs/components/calendar.md @@ -1,7 +1,5 @@ # Calendar 日历 - - ## 演示 diff --git a/apps/docs/components/cascader.md b/apps/docs/components/cascader.md index 02184eff..0866dcbf 100644 --- a/apps/docs/components/cascader.md +++ b/apps/docs/components/cascader.md @@ -1,7 +1,5 @@ # Cascader 级联选择器 - - ## 演示 diff --git a/apps/docs/components/cell.md b/apps/docs/components/cell.md index f3bd6555..87ae0779 100644 --- a/apps/docs/components/cell.md +++ b/apps/docs/components/cell.md @@ -1,7 +1,5 @@ # Cell - - ## 演示 diff --git a/apps/docs/components/checkbox.md b/apps/docs/components/checkbox.md index 4a64474f..0dd29d92 100644 --- a/apps/docs/components/checkbox.md +++ b/apps/docs/components/checkbox.md @@ -1,7 +1,5 @@ # Checkbox 复选按钮 - - ## 演示 diff --git a/apps/docs/components/date-field.md b/apps/docs/components/date-field.md new file mode 100644 index 00000000..b13781fc --- /dev/null +++ b/apps/docs/components/date-field.md @@ -0,0 +1,32 @@ +# DateField 日期字段 + +年 / 月 / 日三列选择，底层复用 `VPicker`。月历网格继续用 [Calendar](/components/calendar)，不要把 DateField 当成日历。 + +## 演示 + + + +## Props + +| Prop | 类型 | 默认值 | 描述 | +| ------------- | --------- | --------------- | --------------------- | +| `visible` | `boolean` | `false` | Picker 是否展示 | +| `value` | `string` | `undefined` | 当前日期 `YYYY-MM-DD` | +| `placeholder` | `string` | `'Select date'` | 空值文案 | +| `disabled` | `boolean` | `false` | 禁用字段 | +| `readonly` | `boolean` | `false` | 只读字段 | +| `minYear` | `number` | `1970` | 起始年份 | +| `maxYear` | `number` | `2100` | 结束年份 | +| `title` | `string` | `undefined` | Picker 标题 | +| `confirmText` | `string` | `'Confirm'` | 确认文案 | +| `cancelText` | `string` | `'Cancel'` | 取消文案 | + +## Events + +| Event | Payload | 描述 | +| ---------------- | --------- | -------------- | +| `update:value` | `string` | 确认后提交日期 | +| `update:visible` | `boolean` | Picker 显隐 | +| `change` | `string` | 草稿日期变化 | +| `confirm` | `string` | 确认并提交 | +| `cancel` | `void` | 取消并保留原值 | diff --git a/apps/docs/components/date-picker.md b/apps/docs/components/date-picker.md index 8b058794..c4372688 100644 --- a/apps/docs/components/date-picker.md +++ b/apps/docs/components/date-picker.md @@ -1,7 +1,5 @@ # DatePicker 日期选择器 - - ## 演示 diff --git a/apps/docs/components/dialog.md b/apps/docs/components/dialog.md index 909b78f5..035a46a7 100644 --- a/apps/docs/components/dialog.md +++ b/apps/docs/components/dialog.md @@ -2,8 +2,6 @@ Varo 的 Dialog 采用 parts 暴露方式：`VDialogRoot`、`VDialogTrigger`、`VDialogOverlay`、`VDialogContent` 与 `VDialogClose`。 - - ## 演示 diff --git a/apps/docs/components/divider.md b/apps/docs/components/divider.md index 98aede92..834f2407 100644 --- a/apps/docs/components/divider.md +++ b/apps/docs/components/divider.md @@ -1,7 +1,5 @@ # Divider - - ## 演示 diff --git a/apps/docs/components/elevator.md b/apps/docs/components/elevator.md index 3e4b1518..6c08c72d 100644 --- a/apps/docs/components/elevator.md +++ b/apps/docs/components/elevator.md @@ -2,8 +2,6 @@ `VElevator` 会在内容滚动时根据当前分组标题同步右侧索引；滚动到底部时固定到最后一组，点击索引只滚动组件内部列表，不移动浏览器页面。 - - ## 演示 diff --git a/apps/docs/components/fixed-nav.md b/apps/docs/components/fixed-nav.md index bf8c67cc..1686f049 100644 --- a/apps/docs/components/fixed-nav.md +++ b/apps/docs/components/fixed-nav.md @@ -1,7 +1,5 @@ # FixedNav 悬浮导航 - - ## 演示 diff --git a/apps/docs/components/form.md b/apps/docs/components/form.md index 73d2e1f9..7d9aeaf0 100644 --- a/apps/docs/components/form.md +++ b/apps/docs/components/form.md @@ -1,7 +1,5 @@ # Form 表单 - - ## 演示 diff --git a/apps/docs/components/grid.md b/apps/docs/components/grid.md index 74ac4c7b..6b81218f 100644 --- a/apps/docs/components/grid.md +++ b/apps/docs/components/grid.md @@ -1,7 +1,5 @@ # Grid - - ## 演示 diff --git a/apps/docs/components/image.md b/apps/docs/components/image.md index bf524f9b..df3676d9 100644 --- a/apps/docs/components/image.md +++ b/apps/docs/components/image.md @@ -1,7 +1,5 @@ # Image - - ## 演示 diff --git a/apps/docs/components/indicator.md b/apps/docs/components/indicator.md index e9148ba8..2a4ef62b 100644 --- a/apps/docs/components/indicator.md +++ b/apps/docs/components/indicator.md @@ -1,7 +1,5 @@ # Indicator 指示器 - - ## 演示 diff --git a/apps/docs/components/input-number.md b/apps/docs/components/input-number.md index 06b2228a..4f78a18f 100644 --- a/apps/docs/components/input-number.md +++ b/apps/docs/components/input-number.md @@ -1,23 +1,26 @@ # InputNumber 数字输入框 - - ## 演示 +InputNumber 默认使用紧凑的 128px 最小宽度，不会在横向商品行中挤压相邻内容；需要铺满容器时可通过 `class` 或父级布局显式设置宽度。 + ## 步进与精度 通过 `step` 控制步进，通过 `precision` 控制小数精度。 ## Props -| Prop | 类型 | 默认值 | 描述 | -| ----------- | --------- | ----------- | -------- | -| `value` | `number` | `0` | 当前值 | -| `min` | `number` | `-Infinity` | 最小值 | -| `max` | `number` | `Infinity` | 最大值 | -| `step` | `number` | `1` | 步进 | -| `precision` | `number` | `undefined` | 小数精度 | -| `disabled` | `boolean` | `false` | 禁用 | -| `readonly` | `boolean` | `false` | 只读 | +| Prop | 类型 | 默认值 | 描述 | +| ------------------- | --------- | ------------------ | ---------------------- | +| `decreaseAriaLabel` | `string` | `'Decrease value'` | 减少按钮的可访问名称 | +| `increaseAriaLabel` | `string` | `'Increase value'` | 增加按钮的可访问名称 | +| `inputAriaLabel` | `string` | `'Numeric value'` | 数值输入框的可访问名称 | +| `value` | `number` | `0` | 当前值 | +| `min` | `number` | `-Infinity` | 最小值 | +| `max` | `number` | `Infinity` | 最大值 | +| `step` | `number` | `1` | 步进 | +| `precision` | `number` | `undefined` | 小数精度 | +| `disabled` | `boolean` | `false` | 禁用 | +| `readonly` | `boolean` | `false` | 只读 | diff --git a/apps/docs/components/input.md b/apps/docs/components/input.md index 0d3e50b5..c400d45c 100644 --- a/apps/docs/components/input.md +++ b/apps/docs/components/input.md @@ -1,7 +1,5 @@ # Input - - ## 演示 diff --git a/apps/docs/components/layout.md b/apps/docs/components/layout.md index 41c86802..687147a1 100644 --- a/apps/docs/components/layout.md +++ b/apps/docs/components/layout.md @@ -1,7 +1,5 @@ # Layout - - ## 演示 diff --git a/apps/docs/components/list.md b/apps/docs/components/list.md new file mode 100644 index 00000000..cc99d82c --- /dev/null +++ b/apps/docs/components/list.md @@ -0,0 +1,27 @@ +# List 列表加载 + +`VList` 负责列表底部的触底/上拉加载；顶部下拉刷新使用 [PullRefresh](/components/pull-refresh)。 + +## 演示 + + + +## Props + +| Prop | 类型 | 默认值 | 描述 | +| ---------------- | --------- | -------------- | -------------- | +| `loading` | `boolean` | `false` | 正在加载 | +| `finished` | `boolean` | `false` | 已加载全部数据 | +| `disabled` | `boolean` | `false` | 禁止加载 | +| `immediate` | `boolean` | `true` | 挂载后立即请求 | +| `lowerThreshold` | `number` | `80` | 提前触发距离 | +| `loadingText` | `string` | `'加载中'` | 加载文案 | +| `finishedText` | `string` | `'没有更多了'` | 完成文案 | +| `errorText` | `string` | `undefined` | 可重试错误文案 | + +## Events + +| Event | Payload | 描述 | +| ------- | ------- | ------------ | +| `load` | `void` | 请求下一页 | +| `retry` | `void` | 重试失败加载 | diff --git a/apps/docs/components/loading.md b/apps/docs/components/loading.md index 2b807581..6ae3665f 100644 --- a/apps/docs/components/loading.md +++ b/apps/docs/components/loading.md @@ -2,8 +2,6 @@ `VLoading` 是 Base Kit 的低层加载指示器。 - - ## 演示 diff --git a/apps/docs/components/menu.md b/apps/docs/components/menu.md index 7b231f85..582d46f9 100644 --- a/apps/docs/components/menu.md +++ b/apps/docs/components/menu.md @@ -1,7 +1,5 @@ # Menu 菜单 - - ## 演示 diff --git a/apps/docs/components/navbar.md b/apps/docs/components/navbar.md index 22c9f6ef..ab20f564 100644 --- a/apps/docs/components/navbar.md +++ b/apps/docs/components/navbar.md @@ -1,7 +1,5 @@ # Navbar 头部导航 - - ## 演示 diff --git a/apps/docs/components/number-keyboard.md b/apps/docs/components/number-keyboard.md index a0683b7f..f2590c98 100644 --- a/apps/docs/components/number-keyboard.md +++ b/apps/docs/components/number-keyboard.md @@ -1,7 +1,5 @@ # NumberKeyboard 数字键盘 - - ## 演示 diff --git a/apps/docs/components/overlay.md b/apps/docs/components/overlay.md index 3d589c07..b866d7ba 100644 --- a/apps/docs/components/overlay.md +++ b/apps/docs/components/overlay.md @@ -1,7 +1,5 @@ # Overlay - - ## 演示 diff --git a/apps/docs/components/pagination.md b/apps/docs/components/pagination.md index 5ff0cbcd..63bde9ba 100644 --- a/apps/docs/components/pagination.md +++ b/apps/docs/components/pagination.md @@ -1,7 +1,5 @@ # Pagination 分页 - - ## 演示 diff --git a/apps/docs/components/picker.md b/apps/docs/components/picker.md index 6143a44b..ccd0ab31 100644 --- a/apps/docs/components/picker.md +++ b/apps/docs/components/picker.md @@ -1,28 +1,26 @@ # Picker 选择器 - - ## 演示 ## Props -| Prop | 类型 | 默认值 | 描述 | -| ------------- | ------------------ | ----------- | ---------- | -| `visible` | `boolean` | `false` | 是否展示 | -| `value` | `string \| number` | `undefined` | 当前选中值 | -| `columns` | `PickerOption[]` | `[]` | 选项列表 | -| `title` | `string` | `undefined` | 标题 | -| `confirmText` | `string` | `'Confirm'` | 确认文案 | -| `cancelText` | `string` | `'Cancel'` | 取消文案 | +| Prop | 类型 | 默认值 | 描述 | +| ------------- | ------------------------------------ | ----------- | -------------- | +| `visible` | `boolean` | `false` | 是否展示 | +| `value` | `string \| number \| Array` | `undefined` | 当前选中值 | +| `columns` | `PickerOption[] \| PickerOption[][]` | `[]` | 单列或多列选项 | +| `title` | `string` | `undefined` | 标题 | +| `confirmText` | `string` | `'Confirm'` | 确认文案 | +| `cancelText` | `string` | `'Cancel'` | 取消文案 | ## Events -| Event | Payload | 描述 | -| ---------------- | ------------------- | ------------ | -| `update:value` | `string \| number` | 选中值变化 | -| `update:visible` | `boolean` | 展示状态变化 | -| `change` | `{ value, option }` | 选择变化 | -| `confirm` | `{ value, option }` | 点击确认 | -| `cancel` | `void` | 点击取消 | +| Event | Payload | 描述 | +| ---------------- | --------------------------------- | -------------- | +| `update:value` | `string \| number \| Array` | 确认后提交值 | +| `update:visible` | `boolean` | 展示状态变化 | +| `change` | `{ value, option, columnIndex? }` | 草稿选择变化 | +| `confirm` | `{ value, option }` | 确认并提交 | +| `cancel` | `void` | 取消并恢复原值 | diff --git a/apps/docs/components/popover.md b/apps/docs/components/popover.md index 45350934..6100a0d8 100644 --- a/apps/docs/components/popover.md +++ b/apps/docs/components/popover.md @@ -1,7 +1,5 @@ # Popover 气泡浮层 - - ## 演示 diff --git a/apps/docs/components/popup.md b/apps/docs/components/popup.md index e383c11e..7a07d744 100644 --- a/apps/docs/components/popup.md +++ b/apps/docs/components/popup.md @@ -1,7 +1,5 @@ # Popup - - ## 演示 diff --git a/apps/docs/components/pull-refresh.md b/apps/docs/components/pull-refresh.md new file mode 100644 index 00000000..e2fad31a --- /dev/null +++ b/apps/docs/components/pull-refresh.md @@ -0,0 +1,30 @@ +# PullRefresh 下拉刷新 + +`VPullRefresh` 负责顶部下拉刷新；列表底部的上拉/触底加载继续使用 [List](/components/list)。 + +## 演示 + + + +## Props + +| Prop | 类型 | 默认值 | 描述 | +| ------------- | --------- | ------------ | -------------------- | +| `loading` | `boolean` | `false` | 受控刷新状态 | +| `disabled` | `boolean` | `false` | 禁止下拉刷新 | +| `threshold` | `number` | `64` | 触发刷新距离 | +| `headHeight` | `number` | `48` | H5-only 提示区域高度 | +| `pullText` | `string` | `'下拉刷新'` | H5-only 下拉提示 | +| `releaseText` | `string` | `'释放刷新'` | H5-only 阈值提示 | +| `loadingText` | `string` | `'加载中'` | 刷新中提示 | + +## Events + +| Event | Payload | 描述 | +| --------- | ------- | ------------------------ | +| `refresh` | `void` | 超过阈值释放或原生刷新时 | + +## 平台行为 + +- H5：仅在滚动容器顶部响应向下拖动。 +- 小程序：使用 `scroll-view` 原生 `refresher-*` 能力，由 `loading` 控制结束时机。 diff --git a/apps/docs/components/radio.md b/apps/docs/components/radio.md index 21d8a75e..66d69d0d 100644 --- a/apps/docs/components/radio.md +++ b/apps/docs/components/radio.md @@ -1,11 +1,13 @@ # Radio 单选按钮 - - ## 演示 +## 选中反馈 + +Radio 始终保留内点节点，选中时使用 180ms scale/fade 显示 Varo 主色内点，避免切换时布局重建。按压仅提供短促缩放；减少动态效果时状态即时切换。 + ## Props | Prop | 类型 | 默认值 | 描述 | diff --git a/apps/docs/components/range.md b/apps/docs/components/range.md index 8613bd70..43d791b3 100644 --- a/apps/docs/components/range.md +++ b/apps/docs/components/range.md @@ -1,7 +1,5 @@ # Range 区间选择器 - - ## 演示 diff --git a/apps/docs/components/rate.md b/apps/docs/components/rate.md index 7157cc89..b340707d 100644 --- a/apps/docs/components/rate.md +++ b/apps/docs/components/rate.md @@ -1,7 +1,5 @@ # Rate 评分 - - ## 演示 diff --git a/apps/docs/components/region-picker.md b/apps/docs/components/region-picker.md index 2fe4cfb6..692240f2 100644 --- a/apps/docs/components/region-picker.md +++ b/apps/docs/components/region-picker.md @@ -2,8 +2,6 @@ `VRegionPicker` 是受控的多级地区选择器。组件负责层级导航、快捷地区、禁用态、确认结果，以及根节点/子节点的异步加载反馈；接口实现、缓存、权限和坐标解析仍由业务层处理。 - - ## 演示 diff --git a/apps/docs/components/robot-chat.md b/apps/docs/components/robot-chat.md index dac2d7a0..0d76ebef 100644 --- a/apps/docs/components/robot-chat.md +++ b/apps/docs/components/robot-chat.md @@ -2,8 +2,6 @@ `VRobotChat` 是 `chatbotwidget` 小程序插件的 Wevu 封装，仅支持 `weapp` target，提供初始化状态、事件转发和可编辑输入区。 - - ## 演示 diff --git a/apps/docs/components/searchbar.md b/apps/docs/components/searchbar.md index acafa4e0..cefd9b24 100644 --- a/apps/docs/components/searchbar.md +++ b/apps/docs/components/searchbar.md @@ -1,7 +1,5 @@ # Searchbar 搜索栏 - - ## 演示 diff --git a/apps/docs/components/select.md b/apps/docs/components/select.md index 440dcaed..bd5f02d8 100644 --- a/apps/docs/components/select.md +++ b/apps/docs/components/select.md @@ -2,8 +2,6 @@ `VSelect` 是 Base Kit 的低层选择组件，用于表单、筛选和业务组件二次封装。H5 / 完整 Vue 封装与 `--target weapp` 安装的原生 Registry 组件面向不同运行时，API 以各自章节为准。 - - ## 演示 diff --git a/apps/docs/components/short-password.md b/apps/docs/components/short-password.md index c5a000b0..15a812d5 100644 --- a/apps/docs/components/short-password.md +++ b/apps/docs/components/short-password.md @@ -1,7 +1,5 @@ # ShortPassword 短密码 - - ## 演示 diff --git a/apps/docs/components/side-navbar.md b/apps/docs/components/side-navbar.md index 11dac16b..e67e5b39 100644 --- a/apps/docs/components/side-navbar.md +++ b/apps/docs/components/side-navbar.md @@ -1,7 +1,5 @@ # SideNavbar 侧边栏导航 - - ## 演示 diff --git a/apps/docs/components/signature.md b/apps/docs/components/signature.md new file mode 100644 index 00000000..5c07df28 --- /dev/null +++ b/apps/docs/components/signature.md @@ -0,0 +1,31 @@ +# Signature 签名 + +`VSignature` 使用归一化笔画数据作为跨端受控值。H5 使用 pointer canvas；小程序使用原生 canvas touch 事件。 + +## 演示 + + + +## Props + +| Prop | 类型 | 默认值 | 描述 | +| ------------ | ------------------- | ----------------- | -------------- | +| `value` | `SignatureStroke[]` | `[]` | 受控签名笔画 | +| `disabled` | `boolean` | `false` | 禁止绘制与清除 | +| `height` | `number` | `200` | 画布高度 | +| `lineColor` | `string` | `'#172033'` | 画笔颜色 | +| `lineWidth` | `number` | `2` | 画笔宽度 | +| `background` | `string` | `'#ffffff'` | 画布背景 | +| `showClear` | `boolean` | `true` | 显示清除按钮 | +| `clearText` | `string` | `'清除签名'` | 清除按钮文案 | +| `ariaLabel` | `string` | `'Signature pad'` | 画布可访问名称 | + +## Events + +| Event | Payload | 描述 | +| -------------- | ------------------- | ------------ | +| `update:value` | `SignatureStroke[]` | 提交笔画 | +| `change` | `SignatureStroke[]` | 签名变化 | +| `start` | `void` | 开始一笔 | +| `end` | `SignatureStroke` | 完成一笔 | +| `clear` | `void` | 清除全部笔画 | diff --git a/apps/docs/components/skeleton.md b/apps/docs/components/skeleton.md index 48c55039..94157562 100644 --- a/apps/docs/components/skeleton.md +++ b/apps/docs/components/skeleton.md @@ -2,8 +2,6 @@ `VSkeleton` 默认延迟 `180ms` 再显示骨架，避免短请求闪烁；同时覆盖文章、图片和视频布局，内容就绪后淡入默认 slot。 - - ## 演示 diff --git a/apps/docs/components/space.md b/apps/docs/components/space.md index 24edad29..199b57cd 100644 --- a/apps/docs/components/space.md +++ b/apps/docs/components/space.md @@ -1,7 +1,5 @@ # Space - - ## 演示 diff --git a/apps/docs/components/sticky.md b/apps/docs/components/sticky.md index e0de591e..7883e79c 100644 --- a/apps/docs/components/sticky.md +++ b/apps/docs/components/sticky.md @@ -1,7 +1,5 @@ # Sticky - - ## 演示 diff --git a/apps/docs/components/switch.md b/apps/docs/components/switch.md index bff6f1f9..2ccca983 100644 --- a/apps/docs/components/switch.md +++ b/apps/docs/components/switch.md @@ -2,12 +2,14 @@ `VSwitch` 是 Base Kit 的布尔值切换组件，适合设置项和表单字段。 - - ## 演示 +## 动效 + +Switch 的 thumb 使用 180ms 可逆位移。按住时 thumb 沿切换方向轻微拉伸，松开或快速反向操作会从当前视觉状态返回；减少动态效果时只保留即时位置变化。 + ## Props | Prop | 类型 | 默认值 | 描述 | diff --git a/apps/docs/components/tabbar.md b/apps/docs/components/tabbar.md index f739ad5e..b478da25 100644 --- a/apps/docs/components/tabbar.md +++ b/apps/docs/components/tabbar.md @@ -1,7 +1,5 @@ # Tabbar 标签栏 - - ## 演示 diff --git a/apps/docs/components/tabs.md b/apps/docs/components/tabs.md index 35749804..2a68787a 100644 --- a/apps/docs/components/tabs.md +++ b/apps/docs/components/tabs.md @@ -1,7 +1,5 @@ # Tabs 选项卡切换 - - ## 演示 diff --git a/apps/docs/components/textarea.md b/apps/docs/components/textarea.md index fb2e132c..3060a2d8 100644 --- a/apps/docs/components/textarea.md +++ b/apps/docs/components/textarea.md @@ -1,7 +1,5 @@ # Textarea 文本域 - - ## 演示 diff --git a/apps/docs/components/toast.md b/apps/docs/components/toast.md index 03fb164b..0128f6ba 100644 --- a/apps/docs/components/toast.md +++ b/apps/docs/components/toast.md @@ -1,27 +1,35 @@ # Toast 轻提示 -`VToast` 是 Base Kit 的受控轻提示组件。业务中的队列、全局调用和请求集成应在二次封装层实现。 - - +`VToast` 是受控的单条状态反馈，`VToastRegion` 负责多条提示的固定或行内布局。业务队列、自动关闭计时和请求集成仍由调用方持有。 ## 演示 - + + +## VToast Props + +| Prop | 类型 | 默认值 | 描述 | +| ------------- | ----------------------------------------------------------- | ------------ | ------------------ | +| `visible` | `boolean` | `false` | 是否显示 | +| `message` | `string` | `''` | 提示说明 | +| `title` | `string` | — | 可选标题 | +| `type` | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'` | 状态类型 | +| `position` | `'top' \| 'middle' \| 'bottom'` | `'middle'` | 独立使用时的位置 | +| `actionText` | `string` | — | 可选操作文案 | +| `actionLabel` | `string` | 操作文案 | 操作按钮无障碍名称 | +| `closeable` | `boolean` | `false` | 是否显示关闭按钮 | +| `closeLabel` | `string` | `'关闭通知'` | 关闭按钮无障碍名称 | -## Props +## VToastRegion Props -| Prop | 类型 | 默认值 | 描述 | -| ------------ | ----------------------------------------------------------- | ------------ | -------------------- | -| `visible` | `boolean` | `false` | 是否显示 | -| `message` | `string` | `''` | 提示文案 | -| `type` | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'` | 类型 | -| `position` | `'top' \| 'middle' \| 'bottom'` | `'middle'` | 位置 | -| `closeable` | `boolean` | `false` | 是否显示关闭按钮 | -| `closeLabel` | `string` | `'关闭通知'` | 关闭按钮的无障碍名称 | +| Prop | 类型 | 默认值 | 描述 | +| ---------- | ------------------------------- | ------- | ---------------------- | +| `position` | `'top' \| 'middle' \| 'bottom'` | `'top'` | 固定区域的位置 | +| `inline` | `boolean` | `false` | 作为普通文档流区域展示 | ## 动效与无障碍 -Toast 使用 220ms 进入和 160ms 退出过渡；顶部、居中和底部位置采用对应方向的轻量位移。`prefers-reduced-motion: reduce` 下仅保留即时淡入淡出。成功和普通反馈使用 `status`，警告和错误使用 `alert`。 +Toast 使用主题 motion token：220ms 进入、160ms 退出、180ms 状态变化。更新同一实例的 `type`、`title` 和 `message` 会在原位置改变状态，不依赖动画结束更新业务状态。`prefers-reduced-motion: reduce` 下移除空间位移。成功和普通反馈使用 `status`，警告和错误使用 `alert`。 ## Events @@ -29,3 +37,4 @@ Toast 使用 220ms 进入和 160ms 退出过渡；顶部、居中和底部位置 | ---------------- | --------- | ------------ | | `update:visible` | `boolean` | 显示状态更新 | | `close` | `void` | 关闭 | +| `action` | `void` | 触发可选操作 | diff --git a/apps/docs/components/uploader.md b/apps/docs/components/uploader.md index 4f789dc7..6da8195e 100644 --- a/apps/docs/components/uploader.md +++ b/apps/docs/components/uploader.md @@ -1,7 +1,5 @@ # Uploader 上传 - - ## 演示 diff --git a/apps/docs/components/watermark.md b/apps/docs/components/watermark.md new file mode 100644 index 00000000..20f4873c --- /dev/null +++ b/apps/docs/components/watermark.md @@ -0,0 +1,29 @@ +# Watermark 水印 + +`VWatermark` 在容器内容上覆盖不可交互、不可访问的重复文本。覆盖层不会截获指针事件，适合文档预览、审批结果与敏感信息展示。 + +水印仅用于视觉标记，不替代访问控制、内容加密或防篡改机制。 + +## 演示 + + + +## Props + +| Prop | 类型 | 默认值 | 描述 | +| ------------ | ------------------ | ----------- | -------------------------------- | +| `content` | `string` | `'Varo'` | 重复水印文本；空值隐藏 | +| `color` | `string` | `'#172033'` | 文本颜色 | +| `opacity` | `number` | `0.12` | 透明度，限制为 0–1 | +| `rotate` | `number` | `-22` | 旋转角度（deg） | +| `fontSize` | `number` | `14` | 字号（px），最小 1 | +| `fontWeight` | `number \| string` | `500` | 字重 | +| `gapX` | `number` | `160` | 水平单元宽度（px），最小 24 | +| `gapY` | `number` | `96` | 垂直单元高度（px），最小 24 | +| `offsetX` | `number` | `0` | 水平相位（px），按 `gapX` 归一化 | +| `offsetY` | `number` | `0` | 垂直相位（px），按 `gapY` 归一化 | +| `zIndex` | `number` | `9` | 容器内覆盖层级 | + +平铺行会在高容器中均匀拉伸，保持从顶部到底部都有水印，同时以 `gapY` 作为最小单元高度。 + +默认插槽承载被水印覆盖的内容。H5 使用 `class` 传入消费者样式；小程序 Registry SFC 使用 `className`。 diff --git a/apps/docs/en/components/badge.md b/apps/docs/en/components/badge.md index f78e46a9..be0e96d0 100644 --- a/apps/docs/en/components/badge.md +++ b/apps/docs/en/components/badge.md @@ -1,7 +1,5 @@ # Badge - - ## Demo diff --git a/apps/docs/en/components/breadcrumb.md b/apps/docs/en/components/breadcrumb.md index 5b05fc47..c4f3f26f 100644 --- a/apps/docs/en/components/breadcrumb.md +++ b/apps/docs/en/components/breadcrumb.md @@ -1,7 +1,5 @@ # Breadcrumb - - ## Basic Usage ```vue diff --git a/apps/docs/en/components/button.md b/apps/docs/en/components/button.md index 71226f38..986c4888 100644 --- a/apps/docs/en/components/button.md +++ b/apps/docs/en/components/button.md @@ -1,11 +1,13 @@ # Button - - ## Demo +## Interaction design + +Buttons retain the 44px default target and existing semantic colors. Press feedback uses a short 140ms scale plus inset shadow; Ghost stays transparent until hover or press. Spatial scaling is removed under reduced motion. + ## Basic Usage ```vue diff --git a/apps/docs/en/components/calendar-card.md b/apps/docs/en/components/calendar-card.md index 474fe9d0..19bf7015 100644 --- a/apps/docs/en/components/calendar-card.md +++ b/apps/docs/en/components/calendar-card.md @@ -1,7 +1,5 @@ # CalendarCard - - ## Demo diff --git a/apps/docs/en/components/calendar.md b/apps/docs/en/components/calendar.md index 9a1ef6b9..865e2078 100644 --- a/apps/docs/en/components/calendar.md +++ b/apps/docs/en/components/calendar.md @@ -1,7 +1,5 @@ # Calendar - - ## Demo diff --git a/apps/docs/en/components/cascader.md b/apps/docs/en/components/cascader.md index 8986fc5d..589363c0 100644 --- a/apps/docs/en/components/cascader.md +++ b/apps/docs/en/components/cascader.md @@ -1,7 +1,5 @@ # Cascader - - ## Demo diff --git a/apps/docs/en/components/cell.md b/apps/docs/en/components/cell.md index df7b262e..b6c359aa 100644 --- a/apps/docs/en/components/cell.md +++ b/apps/docs/en/components/cell.md @@ -1,7 +1,5 @@ # Cell - - ## Demo diff --git a/apps/docs/en/components/checkbox.md b/apps/docs/en/components/checkbox.md index 026290c4..9e799299 100644 --- a/apps/docs/en/components/checkbox.md +++ b/apps/docs/en/components/checkbox.md @@ -1,7 +1,5 @@ # Checkbox - - ## Demo diff --git a/apps/docs/en/components/date-field.md b/apps/docs/en/components/date-field.md new file mode 100644 index 00000000..f6b713da --- /dev/null +++ b/apps/docs/en/components/date-field.md @@ -0,0 +1,32 @@ +# DateField + +Year / month / day columns composed from `VPicker`. Keep the month grid on [Calendar](/en/components/calendar); DateField is not a calendar. + +## Demo + + + +## Props + +| Prop | Type | Default | Description | +| ------------- | --------- | --------------- | ------------------------- | +| `visible` | `boolean` | `false` | Whether Picker is shown | +| `value` | `string` | `undefined` | Current date `YYYY-MM-DD` | +| `placeholder` | `string` | `'Select date'` | Empty-value label | +| `disabled` | `boolean` | `false` | Disable the field | +| `readonly` | `boolean` | `false` | Make the field read-only | +| `minYear` | `number` | `1970` | First year | +| `maxYear` | `number` | `2100` | Last year | +| `title` | `string` | `undefined` | Picker title | +| `confirmText` | `string` | `'Confirm'` | Confirm label | +| `cancelText` | `string` | `'Cancel'` | Cancel label | + +## Events + +| Event | Payload | Description | +| ---------------- | --------- | ------------------------- | +| `update:value` | `string` | Commit after confirm | +| `update:visible` | `boolean` | Picker visibility changed | +| `change` | `string` | Draft date changed | +| `confirm` | `string` | Confirm and commit | +| `cancel` | `void` | Cancel and preserve value | diff --git a/apps/docs/en/components/date-picker.md b/apps/docs/en/components/date-picker.md index d967a6ef..106c4b5e 100644 --- a/apps/docs/en/components/date-picker.md +++ b/apps/docs/en/components/date-picker.md @@ -1,7 +1,5 @@ # DatePicker - - ## Demo diff --git a/apps/docs/en/components/dialog.md b/apps/docs/en/components/dialog.md index ee638547..a781bfe4 100644 --- a/apps/docs/en/components/dialog.md +++ b/apps/docs/en/components/dialog.md @@ -2,8 +2,6 @@ Varo exposes Dialog through composable parts: `VDialogRoot`, `VDialogTrigger`, `VDialogOverlay`, `VDialogContent`, and `VDialogClose`. - - ## Demo diff --git a/apps/docs/en/components/divider.md b/apps/docs/en/components/divider.md index 9573c390..ece41c98 100644 --- a/apps/docs/en/components/divider.md +++ b/apps/docs/en/components/divider.md @@ -1,7 +1,5 @@ # Divider - - ## Demo diff --git a/apps/docs/en/components/elevator.md b/apps/docs/en/components/elevator.md index 2abc896a..73ef2691 100644 --- a/apps/docs/en/components/elevator.md +++ b/apps/docs/en/components/elevator.md @@ -2,8 +2,6 @@ `VElevator` keeps the index rail synchronized with the group header currently crossing the content viewport. Reaching the bottom activates the final group, while index clicks scroll only the component list and never move the browser document. - - ## Demo diff --git a/apps/docs/en/components/fixed-nav.md b/apps/docs/en/components/fixed-nav.md index ca03472c..a290ac8b 100644 --- a/apps/docs/en/components/fixed-nav.md +++ b/apps/docs/en/components/fixed-nav.md @@ -1,7 +1,5 @@ # FixedNav - - ## Demo diff --git a/apps/docs/en/components/form.md b/apps/docs/en/components/form.md index a91092e6..c81de3a1 100644 --- a/apps/docs/en/components/form.md +++ b/apps/docs/en/components/form.md @@ -1,7 +1,5 @@ # Form - - ## Demo diff --git a/apps/docs/en/components/grid.md b/apps/docs/en/components/grid.md index 8fe30ae9..6a0463e9 100644 --- a/apps/docs/en/components/grid.md +++ b/apps/docs/en/components/grid.md @@ -1,7 +1,5 @@ # Grid - - ## Demo diff --git a/apps/docs/en/components/image.md b/apps/docs/en/components/image.md index a01f8312..4771e6d7 100644 --- a/apps/docs/en/components/image.md +++ b/apps/docs/en/components/image.md @@ -1,7 +1,5 @@ # Image - - ## Demo diff --git a/apps/docs/en/components/indicator.md b/apps/docs/en/components/indicator.md index 3d73713d..889e05be 100644 --- a/apps/docs/en/components/indicator.md +++ b/apps/docs/en/components/indicator.md @@ -1,7 +1,5 @@ # Indicator - - ## Demo diff --git a/apps/docs/en/components/input-number.md b/apps/docs/en/components/input-number.md index f387e87f..4f729d11 100644 --- a/apps/docs/en/components/input-number.md +++ b/apps/docs/en/components/input-number.md @@ -1,26 +1,29 @@ # InputNumber - - ## Demo +InputNumber defaults to a compact 128px minimum width so it does not squeeze adjacent content in horizontal rows. Set width explicitly through `class` or the parent layout when a full-width control is required. + ## Decimal Use `step` for increments and `precision` for decimal formatting. ## Props -| Prop | Type | Default | Description | -| ----------- | --------- | ----------- | ----------------- | -| `value` | `number` | `0` | Current value | -| `min` | `number` | `-Infinity` | Minimum value | -| `max` | `number` | `Infinity` | Maximum value | -| `step` | `number` | `1` | Step value | -| `precision` | `number` | `undefined` | Decimal precision | -| `disabled` | `boolean` | `false` | Disable component | -| `readonly` | `boolean` | `false` | Readonly state | +| Prop | Type | Default | Description | +| ------------------- | --------- | ------------------ | ---------------------------------------- | +| `decreaseAriaLabel` | `string` | `'Decrease value'` | Accessible name for the decrement button | +| `increaseAriaLabel` | `string` | `'Increase value'` | Accessible name for the increment button | +| `inputAriaLabel` | `string` | `'Numeric value'` | Accessible name for the numeric input | +| `value` | `number` | `0` | Current value | +| `min` | `number` | `-Infinity` | Minimum value | +| `max` | `number` | `Infinity` | Maximum value | +| `step` | `number` | `1` | Step value | +| `precision` | `number` | `undefined` | Decimal precision | +| `disabled` | `boolean` | `false` | Disable component | +| `readonly` | `boolean` | `false` | Readonly state | ## Events diff --git a/apps/docs/en/components/input.md b/apps/docs/en/components/input.md index 526a085f..c13336c3 100644 --- a/apps/docs/en/components/input.md +++ b/apps/docs/en/components/input.md @@ -1,7 +1,5 @@ # Input - - ## Demo diff --git a/apps/docs/en/components/layout.md b/apps/docs/en/components/layout.md index 085f9e70..3b36baf4 100644 --- a/apps/docs/en/components/layout.md +++ b/apps/docs/en/components/layout.md @@ -1,7 +1,5 @@ # Layout - - ## Demo diff --git a/apps/docs/en/components/list.md b/apps/docs/en/components/list.md new file mode 100644 index 00000000..7b0c3f22 --- /dev/null +++ b/apps/docs/en/components/list.md @@ -0,0 +1,27 @@ +# List + +`VList` owns bottom-edge incremental loading. Use [PullRefresh](/en/components/pull-refresh) for top-edge refresh. + +## Demo + + + +## Props + +| Prop | Type | Default | Description | +| ---------------- | --------- | -------------- | ---------------------- | +| `loading` | `boolean` | `false` | Loading the next page | +| `finished` | `boolean` | `false` | All records loaded | +| `disabled` | `boolean` | `false` | Disable loading | +| `immediate` | `boolean` | `true` | Request once on mount | +| `lowerThreshold` | `number` | `80` | Early trigger distance | +| `loadingText` | `string` | `'加载中'` | Loading label | +| `finishedText` | `string` | `'没有更多了'` | Completion label | +| `errorText` | `string` | `undefined` | Retryable error label | + +## Events + +| Event | Payload | Description | +| ------- | ------- | ----------------- | +| `load` | `void` | Request next page | +| `retry` | `void` | Retry failed load | diff --git a/apps/docs/en/components/loading.md b/apps/docs/en/components/loading.md index 2c9d0378..376493f9 100644 --- a/apps/docs/en/components/loading.md +++ b/apps/docs/en/components/loading.md @@ -2,8 +2,6 @@ `VLoading` is a low-level loading indicator. - - ## Demo diff --git a/apps/docs/en/components/menu.md b/apps/docs/en/components/menu.md index 0bfeb3e1..ea37d4f5 100644 --- a/apps/docs/en/components/menu.md +++ b/apps/docs/en/components/menu.md @@ -1,7 +1,5 @@ # Menu - - ## Demo diff --git a/apps/docs/en/components/navbar.md b/apps/docs/en/components/navbar.md index 0ec7bde7..b7e8d6a5 100644 --- a/apps/docs/en/components/navbar.md +++ b/apps/docs/en/components/navbar.md @@ -1,7 +1,5 @@ # Navbar - - ## Demo diff --git a/apps/docs/en/components/number-keyboard.md b/apps/docs/en/components/number-keyboard.md index f1ea53fb..eb6a3587 100644 --- a/apps/docs/en/components/number-keyboard.md +++ b/apps/docs/en/components/number-keyboard.md @@ -1,7 +1,5 @@ # NumberKeyboard - - ## Demo diff --git a/apps/docs/en/components/overlay.md b/apps/docs/en/components/overlay.md index c7d35fd0..9decb820 100644 --- a/apps/docs/en/components/overlay.md +++ b/apps/docs/en/components/overlay.md @@ -1,7 +1,5 @@ # Overlay - - ## Demo diff --git a/apps/docs/en/components/pagination.md b/apps/docs/en/components/pagination.md index 85efb72a..ab4a8654 100644 --- a/apps/docs/en/components/pagination.md +++ b/apps/docs/en/components/pagination.md @@ -1,7 +1,5 @@ # Pagination - - ## Demo diff --git a/apps/docs/en/components/picker.md b/apps/docs/en/components/picker.md index cd3c6a16..adeab2da 100644 --- a/apps/docs/en/components/picker.md +++ b/apps/docs/en/components/picker.md @@ -1,28 +1,26 @@ # Picker - - ## Demo ## Props -| Prop | Type | Default | Description | -| ------------- | ------------------ | ----------- | ----------------------------- | -| `visible` | `boolean` | `false` | Whether the picker is visible | -| `value` | `string \| number` | `undefined` | Selected value | -| `columns` | `PickerOption[]` | `[]` | Option list | -| `title` | `string` | `undefined` | Header title | -| `confirmText` | `string` | `'Confirm'` | Confirm button text | -| `cancelText` | `string` | `'Cancel'` | Cancel button text | +| Prop | Type | Default | Description | +| ------------- | ------------------------------------ | ----------- | ----------------------------- | +| `visible` | `boolean` | `false` | Whether the picker is visible | +| `value` | `string \| number \| Array` | `undefined` | Selected value or values | +| `columns` | `PickerOption[] \| PickerOption[][]` | `[]` | Single or multiple columns | +| `title` | `string` | `undefined` | Header title | +| `confirmText` | `string` | `'Confirm'` | Confirm button text | +| `cancelText` | `string` | `'Cancel'` | Cancel button text | ## Events -| Event | Payload | Description | -| ---------------- | ------------------- | ---------------------- | -| `update:value` | `string \| number` | Selected value changed | -| `update:visible` | `boolean` | Visibility changed | -| `change` | `{ value, option }` | Selection changed | -| `confirm` | `{ value, option }` | Click confirm | -| `cancel` | `void` | Click cancel | +| Event | Payload | Description | +| ---------------- | --------------------------------- | ------------------------------------- | +| `update:value` | `string \| number \| Array` | Commit after confirm | +| `update:visible` | `boolean` | Visibility changed | +| `change` | `{ value, option, columnIndex? }` | Draft selection changed | +| `confirm` | `{ value, option }` | Confirm and commit | +| `cancel` | `void` | Cancel and restore the original value | diff --git a/apps/docs/en/components/popover.md b/apps/docs/en/components/popover.md index 0bdd2614..47c96c6b 100644 --- a/apps/docs/en/components/popover.md +++ b/apps/docs/en/components/popover.md @@ -1,7 +1,5 @@ # Popover - - ## Demo diff --git a/apps/docs/en/components/popup.md b/apps/docs/en/components/popup.md index fd280f2d..51f1dd97 100644 --- a/apps/docs/en/components/popup.md +++ b/apps/docs/en/components/popup.md @@ -1,7 +1,5 @@ # Popup - - ## Demo diff --git a/apps/docs/en/components/pull-refresh.md b/apps/docs/en/components/pull-refresh.md new file mode 100644 index 00000000..d2400fa4 --- /dev/null +++ b/apps/docs/en/components/pull-refresh.md @@ -0,0 +1,30 @@ +# PullRefresh + +`VPullRefresh` owns top-edge pull-to-refresh. Keep bottom-edge incremental loading on [List](/en/components/list). + +## Demo + + + +## Props + +| Prop | Type | Default | Description | +| ------------- | --------- | ------------ | ------------------------ | +| `loading` | `boolean` | `false` | Controlled refresh state | +| `disabled` | `boolean` | `false` | Disable pull refresh | +| `threshold` | `number` | `64` | Refresh trigger distance | +| `headHeight` | `number` | `48` | H5-only indicator height | +| `pullText` | `string` | `'下拉刷新'` | H5-only pull hint | +| `releaseText` | `string` | `'释放刷新'` | H5-only threshold hint | +| `loadingText` | `string` | `'加载中'` | Loading hint | + +## Events + +| Event | Payload | Description | +| --------- | ------- | --------------------------------------- | +| `refresh` | `void` | Released after threshold or native pull | + +## Platform behavior + +- H5 responds to downward drag only at the scroll container's top edge. +- Mini-program uses native `scroll-view` `refresher-*` behavior; `loading` controls completion. diff --git a/apps/docs/en/components/radio.md b/apps/docs/en/components/radio.md index 9c882b07..9489792c 100644 --- a/apps/docs/en/components/radio.md +++ b/apps/docs/en/components/radio.md @@ -1,11 +1,13 @@ # Radio - - ## Demo +## Selection feedback + +Radio keeps its inner indicator mounted and reveals the Varo-primary dot with a 180ms scale/fade, avoiding layout reconstruction between states. Press feedback is brief; reduced motion switches state immediately. + ## Props | Prop | Type | Default | Description | diff --git a/apps/docs/en/components/range.md b/apps/docs/en/components/range.md index bfcd234e..b6219dc7 100644 --- a/apps/docs/en/components/range.md +++ b/apps/docs/en/components/range.md @@ -1,7 +1,5 @@ # Range - - ## Demo diff --git a/apps/docs/en/components/rate.md b/apps/docs/en/components/rate.md index 6004a8d9..684715ee 100644 --- a/apps/docs/en/components/rate.md +++ b/apps/docs/en/components/rate.md @@ -1,7 +1,5 @@ # Rate - - ## Demo diff --git a/apps/docs/en/components/region-picker.md b/apps/docs/en/components/region-picker.md index 4564e270..a6190ecf 100644 --- a/apps/docs/en/components/region-picker.md +++ b/apps/docs/en/components/region-picker.md @@ -2,8 +2,6 @@ `VRegionPicker` is a controlled hierarchical selector. It owns level navigation, shortcuts, disabled state, confirmation, and async root/child loading feedback; API implementation, caching policy, authorization, and coordinate resolution stay in application code. - - ## Demo diff --git a/apps/docs/en/components/robot-chat.md b/apps/docs/en/components/robot-chat.md index 43abf7e3..a5a2ab4b 100644 --- a/apps/docs/en/components/robot-chat.md +++ b/apps/docs/en/components/robot-chat.md @@ -2,8 +2,6 @@ `VRobotChat` is a Wevu wrapper for the `chatbotwidget` Mini Program plugin. It supports only the `weapp` target and provides initialization states, event forwarding, and an editable input area. - - ## Demo diff --git a/apps/docs/en/components/searchbar.md b/apps/docs/en/components/searchbar.md index d3f30363..2d803998 100644 --- a/apps/docs/en/components/searchbar.md +++ b/apps/docs/en/components/searchbar.md @@ -1,7 +1,5 @@ # Searchbar - - ## Demo diff --git a/apps/docs/en/components/select.md b/apps/docs/en/components/select.md index 3f360d9d..60e7048c 100644 --- a/apps/docs/en/components/select.md +++ b/apps/docs/en/components/select.md @@ -2,8 +2,6 @@ `VSelect` is the low-level Base Kit select component for forms, filters, and secondary business wrappers. The H5 / full Vue wrapper and the native Registry component installed by `--target weapp` target different runtimes; use the API section for the version you consume. - - ## Demo diff --git a/apps/docs/en/components/short-password.md b/apps/docs/en/components/short-password.md index 741169cb..4a9d9ce3 100644 --- a/apps/docs/en/components/short-password.md +++ b/apps/docs/en/components/short-password.md @@ -1,7 +1,5 @@ # ShortPassword - - ## Demo diff --git a/apps/docs/en/components/side-navbar.md b/apps/docs/en/components/side-navbar.md index 62ab90bb..58a125c5 100644 --- a/apps/docs/en/components/side-navbar.md +++ b/apps/docs/en/components/side-navbar.md @@ -1,7 +1,5 @@ # SideNavbar - - ## Demo diff --git a/apps/docs/en/components/signature.md b/apps/docs/en/components/signature.md new file mode 100644 index 00000000..12579688 --- /dev/null +++ b/apps/docs/en/components/signature.md @@ -0,0 +1,31 @@ +# Signature + +`VSignature` uses normalized stroke data as its cross-target controlled value. H5 uses pointer canvas input; mini-program uses native canvas touch events. + +## Demo + + + +## Props + +| Prop | Type | Default | Description | +| ------------ | ------------------- | ----------------- | ------------------------- | +| `value` | `SignatureStroke[]` | `[]` | Controlled signature | +| `disabled` | `boolean` | `false` | Disable drawing and clear | +| `height` | `number` | `200` | Canvas height | +| `lineColor` | `string` | `'#172033'` | Stroke color | +| `lineWidth` | `number` | `2` | Stroke width | +| `background` | `string` | `'#ffffff'` | Canvas background | +| `showClear` | `boolean` | `true` | Show the clear action | +| `clearText` | `string` | `'清除签名'` | Clear action label | +| `ariaLabel` | `string` | `'Signature pad'` | Canvas accessible name | + +## Events + +| Event | Payload | Description | +| -------------- | ------------------- | ------------------- | +| `update:value` | `SignatureStroke[]` | Commit strokes | +| `change` | `SignatureStroke[]` | Signature changed | +| `start` | `void` | Stroke started | +| `end` | `SignatureStroke` | Stroke completed | +| `clear` | `void` | All strokes cleared | diff --git a/apps/docs/en/components/skeleton.md b/apps/docs/en/components/skeleton.md index 97ab79f3..d2207cc8 100644 --- a/apps/docs/en/components/skeleton.md +++ b/apps/docs/en/components/skeleton.md @@ -2,8 +2,6 @@ `VSkeleton` waits `180ms` before showing placeholders by default, preventing flashes on short requests. It covers article, image, and video layouts, then fades loaded slot content in. - - ## Demo diff --git a/apps/docs/en/components/space.md b/apps/docs/en/components/space.md index 48006155..d8949046 100644 --- a/apps/docs/en/components/space.md +++ b/apps/docs/en/components/space.md @@ -1,7 +1,5 @@ # Space - - ## Demo diff --git a/apps/docs/en/components/sticky.md b/apps/docs/en/components/sticky.md index 8c242e85..fef247de 100644 --- a/apps/docs/en/components/sticky.md +++ b/apps/docs/en/components/sticky.md @@ -1,7 +1,5 @@ # Sticky - - ## Demo diff --git a/apps/docs/en/components/switch.md b/apps/docs/en/components/switch.md index 9999e60d..a0bf7987 100644 --- a/apps/docs/en/components/switch.md +++ b/apps/docs/en/components/switch.md @@ -2,12 +2,14 @@ `VSwitch` is a low-level boolean toggle for settings and form fields. - - ## Demo +## Motion + +The thumb uses a reversible 180ms translation. Holding the control briefly stretches the thumb along its travel direction; release or rapid reversal retargets from the current visual state. Reduced motion keeps only the immediate position change. + ## Props | Prop | Type | Default | Description | diff --git a/apps/docs/en/components/tabbar.md b/apps/docs/en/components/tabbar.md index 59f55cd7..228d9b6b 100644 --- a/apps/docs/en/components/tabbar.md +++ b/apps/docs/en/components/tabbar.md @@ -1,7 +1,5 @@ # Tabbar - - ## Demo diff --git a/apps/docs/en/components/tabs.md b/apps/docs/en/components/tabs.md index 93e58f81..4f8e6f8b 100644 --- a/apps/docs/en/components/tabs.md +++ b/apps/docs/en/components/tabs.md @@ -1,7 +1,5 @@ # Tabs - - ## Demo diff --git a/apps/docs/en/components/textarea.md b/apps/docs/en/components/textarea.md index f391cd53..df838665 100644 --- a/apps/docs/en/components/textarea.md +++ b/apps/docs/en/components/textarea.md @@ -1,7 +1,5 @@ # Textarea - - ## Demo diff --git a/apps/docs/en/components/toast.md b/apps/docs/en/components/toast.md index 3306b2b2..bb91285c 100644 --- a/apps/docs/en/components/toast.md +++ b/apps/docs/en/components/toast.md @@ -1,31 +1,40 @@ # Toast -`VToast` is a controlled low-level toast component. Queues, global APIs, and request integration belong in secondary wrappers. - - +`VToast` owns one controlled status message. `VToastRegion` lays out multiple notifications in a fixed or inline region. The caller still owns queue state, auto-dismiss timers, and request integration. ## Demo - + + +## VToast Props + +| Prop | Type | Default | Description | +| ------------- | ----------------------------------------------------------- | ------------ | ----------------------------- | +| `visible` | `boolean` | `false` | Whether the toast is visible | +| `message` | `string` | `''` | Supporting message | +| `title` | `string` | — | Optional title | +| `type` | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'` | Status type | +| `position` | `'top' \| 'middle' \| 'bottom'` | `'middle'` | Position when used standalone | +| `actionText` | `string` | — | Optional action label | +| `actionLabel` | `string` | action text | Accessible action name | +| `closeable` | `boolean` | `false` | Show the close button | +| `closeLabel` | `string` | `'关闭通知'` | Accessible close name | -## Props +## VToastRegion Props -| Prop | Type | Default | Description | -| ------------ | ----------------------------------------------------------- | ------------ | ------------------------------------ | -| `visible` | `boolean` | `false` | Visibility | -| `message` | `string` | `''` | Message text | -| `type` | `'text' \| 'success' \| 'warning' \| 'danger' \| 'loading'` | `'text'` | Toast type | -| `position` | `'top' \| 'middle' \| 'bottom'` | `'middle'` | Position | -| `closeable` | `boolean` | `false` | Show close button | -| `closeLabel` | `string` | `'关闭通知'` | Accessible name for the close button | +| Prop | Type | Default | Description | +| ---------- | ------------------------------- | ------- | ------------------------------ | +| `position` | `'top' \| 'middle' \| 'bottom'` | `'top'` | Fixed-region position | +| `inline` | `boolean` | `false` | Render in normal document flow | ## Motion and accessibility -Toast uses a 220ms entrance and 160ms exit transition with position-aware movement. Under `prefers-reduced-motion: reduce`, it falls back to an immediate opacity change. Success and neutral feedback use `status`; warnings and errors use `alert`. +Toast motion resolves through theme tokens: 220ms enter, 160ms exit, and 180ms status changes. Updating `type`, `title`, and `message` on the same instance changes its status in place; product state never depends on animation completion. Under `prefers-reduced-motion: reduce`, spatial movement is removed. Success and neutral feedback use `status`; warning and danger use `alert`. ## Events -| Event | Payload | Description | -| ---------------- | --------- | ------------------ | -| `update:visible` | `boolean` | Visibility updated | -| `close` | `void` | Closed | +| Event | Payload | Description | +| ---------------- | --------- | ------------------------- | +| `update:visible` | `boolean` | Visibility update | +| `close` | `void` | Dismissed | +| `action` | `void` | Optional action activated | diff --git a/apps/docs/en/components/uploader.md b/apps/docs/en/components/uploader.md index d5b86935..ad73000d 100644 --- a/apps/docs/en/components/uploader.md +++ b/apps/docs/en/components/uploader.md @@ -1,7 +1,5 @@ # Uploader - - ## Demo diff --git a/apps/docs/en/components/watermark.md b/apps/docs/en/components/watermark.md new file mode 100644 index 00000000..bc018769 --- /dev/null +++ b/apps/docs/en/components/watermark.md @@ -0,0 +1,29 @@ +# Watermark + +`VWatermark` places an inaccessible, non-interactive repeated text layer over container content. The overlay never intercepts pointer input, making it suitable for document previews, approvals, and sensitive data. + +A watermark is a visual marker, not a substitute for access control, encryption, or tamper resistance. + +## Demo + + + +## Props + +| Prop | Type | Default | Description | +| ------------ | ------------------ | ----------- | ---------------------------------------- | +| `content` | `string` | `'Varo'` | Repeated text; empty content hides it | +| `color` | `string` | `'#172033'` | Text color | +| `opacity` | `number` | `0.12` | Opacity clamped to 0–1 | +| `rotate` | `number` | `-22` | Rotation in degrees | +| `fontSize` | `number` | `14` | Font size in px, minimum 1 | +| `fontWeight` | `number \| string` | `500` | Font weight | +| `gapX` | `number` | `160` | Horizontal tile width in px, minimum 24 | +| `gapY` | `number` | `96` | Vertical tile height in px, minimum 24 | +| `offsetX` | `number` | `0` | Horizontal px phase normalized by `gapX` | +| `offsetY` | `number` | `0` | Vertical px phase normalized by `gapY` | +| `zIndex` | `number` | `9` | Overlay stacking level in the container | + +Rows stretch evenly across tall containers, preserving watermark coverage from top to bottom while using `gapY` as the minimum tile height. + +The default slot carries the protected content. H5 accepts consumer styles through `class`; the mini-program Registry SFC uses `className`. diff --git a/apps/docs/en/guide/installation.md b/apps/docs/en/guide/installation.md index ada98b36..26b3ff17 100644 --- a/apps/docs/en/guide/installation.md +++ b/apps/docs/en/guide/installation.md @@ -75,14 +75,6 @@ Copy-owned mini-program Registry components use native Wevu SFCs and consume Tai ## Preview mini-program artifacts in a browser -Start the standalone Web compatibility preview from the Varo repository root: - -```bash -pnpm --filter @varo/playground-weapp-preview dev -``` - -The development command builds the mini program first, then serves button, controlled-input, slot/lifecycle, and Agent scenarios at `http://127.0.0.1:5182`. After changing native examples, run `pnpm --filter @varo/playground-weapp-preview prepare:artifacts` to refresh their compiled artifacts. - The wx runtime now lives in the private `@varo/weapp-web` package: a Vite plugin compiles Wevu artifacts into `virtual:varo-native-artifacts`, and a replaceable harness owns `wx` APIs and native elements. The playground is only a sandbox consumer; the package is not published yet. The host runs Wevu-generated JS, JSON, WXML, and WXSS through glass-easel's DOM backend rather than substituting H5 business components. Narrow windows scale the presentation while preserving the selected native viewport width. **This is not a WeChat-client or device emulator.** Unsupported capabilities such as login and payment fail explicitly instead of returning fabricated success. Build and verify the production surface: diff --git a/apps/docs/en/primitives/accordion.md b/apps/docs/en/primitives/accordion.md index fd90c52c..b5592627 100644 --- a/apps/docs/en/primitives/accordion.md +++ b/apps/docs/en/primitives/accordion.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Multiple mode diff --git a/apps/docs/en/primitives/checkbox.md b/apps/docs/en/primitives/checkbox.md index ce792fed..cda00928 100644 --- a/apps/docs/en/primitives/checkbox.md +++ b/apps/docs/en/primitives/checkbox.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Disabled state diff --git a/apps/docs/en/primitives/collapsible.md b/apps/docs/en/primitives/collapsible.md index f518196f..47bbc68b 100644 --- a/apps/docs/en/primitives/collapsible.md +++ b/apps/docs/en/primitives/collapsible.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Controlled open diff --git a/apps/docs/en/primitives/index.md b/apps/docs/en/primitives/index.md index 48317158..9a494738 100644 --- a/apps/docs/en/primitives/index.md +++ b/apps/docs/en/primitives/index.md @@ -2,6 +2,8 @@ Primitives are not another UI kit inventory. They are Varo runtime contracts for state, triggers, overlays, positioning, and dismiss behavior so H5 and mini-program wrappers share the same interaction semantics. Presentation components stay in the component docs; this section keeps the behavior building blocks. + +
01 @@ -22,7 +24,7 @@ Primitives are not another UI kit inventory. They are Varo runtime contracts for ## Catalog -Browse the current 17 public primitives by capability. Every page includes an H5 live preview, a mini-program runtime contract, copyable code, and API reference. +Browse the current 17 public primitives by capability. Every page includes H5 and Weapp primitive previews, copyable code, and an API reference. @@ -53,7 +55,7 @@ This split keeps Base Kit source readable and editable. Teams can build their ow - H5 and mini-program share the same part names and state model. - Values inside one `TabsRoot` / `AccordionRoot` must stay unique. -- Mini-program docs never pretend a browser render is a real mini-program preview; they use a runtime contract table instead. +- The mini-program tab uses the Weapp primitive runtime and renders only the current documentation entry. - Build custom product UI upward from primitives, or continue with the [component docs](/en/components/button) and the upcoming Blocks authoring guide. ## Related docs diff --git a/apps/docs/en/primitives/popover.md b/apps/docs/en/primitives/popover.md index b85a1986..395349cc 100644 --- a/apps/docs/en/primitives/popover.md +++ b/apps/docs/en/primitives/popover.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Dismiss contract diff --git a/apps/docs/en/primitives/radio-group.md b/apps/docs/en/primitives/radio-group.md index 6833cdb9..307fd6c4 100644 --- a/apps/docs/en/primitives/radio-group.md +++ b/apps/docs/en/primitives/radio-group.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Disabled item diff --git a/apps/docs/en/primitives/select.md b/apps/docs/en/primitives/select.md index 515e02b6..4529a47d 100644 --- a/apps/docs/en/primitives/select.md +++ b/apps/docs/en/primitives/select.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Groups, Readonly, And Disabled diff --git a/apps/docs/en/primitives/switch.md b/apps/docs/en/primitives/switch.md index 3bea81d3..203ccabc 100644 --- a/apps/docs/en/primitives/switch.md +++ b/apps/docs/en/primitives/switch.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Loading diff --git a/apps/docs/en/primitives/tabs.md b/apps/docs/en/primitives/tabs.md index 02834090..1ab95f1f 100644 --- a/apps/docs/en/primitives/tabs.md +++ b/apps/docs/en/primitives/tabs.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## Basic usage -Use the Demo panel above to switch H5 live preview and mini-program runtime contract/code. +Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry. ## Controlled unique values @@ -71,7 +71,7 @@ Trigger/Content values must stay unique inside one `TabsRoot`; H5 automatic mode ## Platform notes - H5 can demonstrate keyboard behavior. -- Mini-program docs show a runtime contract, not a fake device preview. +- The mini-program tab uses the Weapp primitive runtime to render the current Tabs entry. ## Related docs diff --git a/apps/docs/guide/installation.md b/apps/docs/guide/installation.md index 11fde709..ef010b64 100644 --- a/apps/docs/guide/installation.md +++ b/apps/docs/guide/installation.md @@ -75,14 +75,6 @@ copy-owned 小程序 Registry 组件使用真正的 Wevu SFC，并通过 `styleI ## 在浏览器预览小程序产物 -在 Varo 仓库根目录启动独立的 Web 兼容预览： - -```bash -pnpm --filter @varo/playground-weapp-preview dev -``` - -开发服务先构建小程序，再在 `http://127.0.0.1:5182` 提供按钮、受控输入、插槽生命周期和 Agent 内容场景。修改原生示例后，可运行 `pnpm --filter @varo/playground-weapp-preview prepare:artifacts` 更新编译产物。 - wx 运行时已抽到私有包 `@varo/weapp-web`：Vite 插件负责把 Wevu 产物编进 `virtual:varo-native-artifacts`，运行时 harness 可替换 `wx` API 和原生元素。当前 playground 只是这个包的沙盒消费者；包暂不对外发布。该宿主使用 glass-easel 的 DOM 后端运行 Wevu 生成的 JS、JSON、WXML 和 WXSS，不会换成 H5 业务组件。窄窗口会缩放预览画面，但保留选定的原生视口宽度。**这不是微信客户端或真机模拟器**；登录、支付等未支持能力会失败，不会伪造成功结果。 生产构建与真实浏览器回归： diff --git a/apps/docs/primitives/accordion.md b/apps/docs/primitives/accordion.md index 6f3897c2..ae99fa38 100644 --- a/apps/docs/primitives/accordion.md +++ b/apps/docs/primitives/accordion.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## multiple 模式 diff --git a/apps/docs/primitives/checkbox.md b/apps/docs/primitives/checkbox.md index 67d68e85..b74c41d1 100644 --- a/apps/docs/primitives/checkbox.md +++ b/apps/docs/primitives/checkbox.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## 禁用态 diff --git a/apps/docs/primitives/collapsible.md b/apps/docs/primitives/collapsible.md index 27ef2695..acea0677 100644 --- a/apps/docs/primitives/collapsible.md +++ b/apps/docs/primitives/collapsible.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## 受控展开 diff --git a/apps/docs/primitives/index.md b/apps/docs/primitives/index.md index e5ca27b1..ea957088 100644 --- a/apps/docs/primitives/index.md +++ b/apps/docs/primitives/index.md @@ -2,6 +2,8 @@ Primitives 不是另一套 UI 组件清单，而是 Varo 的运行时契约：它们定义状态、触发器、遮罩、定位与关闭行为，让 H5 与小程序封装共享同一套交互语义。展示类组件继续留在组件文档；这里只保留会影响行为组合的底层能力。 + +
01 @@ -22,7 +24,7 @@ Primitives 不是另一套 UI 组件清单，而是 Varo 的运行时契约： ## 目录 -当前 17 个公开 primitives 按能力分组。每个页面都包含 H5 实时预览、小程序运行时契约、可复制代码与 API。 +当前 17 个公开 primitives 按能力分组。每个页面都包含 H5 与 Weapp primitive 预览、可复制代码与 API。 @@ -53,7 +55,7 @@ Primitives 不是另一套 UI 组件清单，而是 Varo 的运行时契约： - H5 与小程序使用同一套 part 名称与状态模型。 - 同一 `TabsRoot` / `AccordionRoot` 内的 value 必须唯一。 -- 小程序页不把浏览器渲染伪装成真实小程序预览；文档用「运行时契约」说明差异。 +- 小程序页签使用 Weapp primitive 运行时，并且只渲染当前文档条目。 - 自定义业务 UI 请从 primitives 向上封装，或参考 [组件文档](/components/button) 与后续 Blocks 作者指南。 ## 相关文档 diff --git a/apps/docs/primitives/popover.md b/apps/docs/primitives/popover.md index 0c714987..938968f7 100644 --- a/apps/docs/primitives/popover.md +++ b/apps/docs/primitives/popover.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## Dismiss 契约 diff --git a/apps/docs/primitives/radio-group.md b/apps/docs/primitives/radio-group.md index ed5440c8..bdf8a5a3 100644 --- a/apps/docs/primitives/radio-group.md +++ b/apps/docs/primitives/radio-group.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## 禁用选项 diff --git a/apps/docs/primitives/select.md b/apps/docs/primitives/select.md index ce6b9061..db0c5fdd 100644 --- a/apps/docs/primitives/select.md +++ b/apps/docs/primitives/select.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## 分组、只读与禁用 diff --git a/apps/docs/primitives/switch.md b/apps/docs/primitives/switch.md index b8c10333..1f0fcd19 100644 --- a/apps/docs/primitives/switch.md +++ b/apps/docs/primitives/switch.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## Loading diff --git a/apps/docs/primitives/tabs.md b/apps/docs/primitives/tabs.md index 15d02f6c..6bc9b37a 100644 --- a/apps/docs/primitives/tabs.md +++ b/apps/docs/primitives/tabs.md @@ -20,7 +20,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 基础用法 -通过上方演示面板切换 H5 实时预览，以及小程序运行时契约/代码。 +通过上方演示面板切换 H5 与 Weapp primitive 预览/代码；每个运行时只渲染当前条目。 ## 受控与唯一 value @@ -71,7 +71,7 @@ pnpm add @varo-ui/headless @varo-ui/weapp ## 平台说明 - H5 可演示键盘行为。 -- 小程序文档展示运行时契约，不伪装成真机预览。 +- 小程序页签使用 Weapp primitive 运行时渲染当前 Tabs 条目。 ## 相关文档 diff --git a/apps/docs/src/component-catalog.ts b/apps/docs/src/component-catalog.ts index d81da905..d1cb85e3 100644 --- a/apps/docs/src/component-catalog.ts +++ b/apps/docs/src/component-catalog.ts @@ -46,11 +46,12 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [ { id: 'calendar-card', name: 'CalendarCard', label: { zh: '日历卡片', en: 'Calendar Card' }, targets: h5Only }, { id: 'cascader', name: 'Cascader', label: { zh: '级联选择器', en: 'Cascader' }, targets: h5Only }, { id: 'checkbox', name: 'Checkbox', label: { zh: '复选按钮', en: 'Checkbox' }, targets: dualTarget }, + { id: 'date-field', name: 'DateField', label: { zh: '日期字段', en: 'Date Field' }, targets: dualTarget }, { id: 'date-picker', name: 'DatePicker', label: { zh: '日期选择器', en: 'Date Picker' }, targets: h5Only }, { id: 'form', name: 'Form', label: { zh: '表单', en: 'Form' }, targets: dualTarget }, { id: 'input-number', name: 'InputNumber', label: { zh: '数字输入框', en: 'Input Number' }, targets: dualTarget }, { id: 'number-keyboard', name: 'NumberKeyboard', label: { zh: '数字键盘', en: 'Number Keyboard' }, targets: h5Only }, - { id: 'picker', name: 'Picker', label: { zh: '选择器', en: 'Picker' }, targets: h5Only }, + { id: 'picker', name: 'Picker', label: { zh: '选择器', en: 'Picker' }, targets: dualTarget }, { id: 'radio', name: 'Radio', label: { zh: '单选按钮', en: 'Radio' }, targets: dualTarget }, { id: 'select', name: 'Select', label: { zh: '选择器', en: 'Select' }, targets: dualTarget }, { id: 'switch', name: 'Switch', label: { zh: '开关', en: 'Switch' }, targets: dualTarget }, @@ -70,6 +71,7 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [ { id: 'divider', name: 'Divider', label: { zh: '分割线', en: 'Divider' }, targets: dualTarget }, { id: 'grid', name: 'Grid', label: { zh: '宫格', en: 'Grid' }, targets: dualTarget }, { id: 'layout', name: 'Layout', label: { zh: '布局', en: 'Layout' }, targets: dualTarget }, + { id: 'list', name: 'List', label: { zh: '列表加载', en: 'List Loading' }, targets: dualTarget }, { id: 'space', name: 'Space', label: { zh: '间距', en: 'Space' }, targets: dualTarget }, { id: 'sticky', name: 'Sticky', label: { zh: '粘性布局', en: 'Sticky' }, targets: dualTarget }, ], @@ -99,7 +101,9 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [ { id: 'loading', name: 'Loading', label: { zh: '加载', en: 'Loading' }, targets: dualTarget }, { id: 'skeleton', name: 'Skeleton', label: { zh: '骨架屏', en: 'Skeleton' }, targets: dualTarget }, { id: 'overlay', name: 'Overlay', label: { zh: '遮罩层', en: 'Overlay' }, targets: dualTarget }, + { id: 'watermark', name: 'Watermark', label: { zh: '水印', en: 'Watermark' }, targets: dualTarget }, { id: 'popup', name: 'Popup', label: { zh: '弹出层', en: 'Popup' }, targets: dualTarget }, + { id: 'pull-refresh', name: 'PullRefresh', label: { zh: '下拉刷新', en: 'Pull Refresh' }, targets: dualTarget }, { id: 'toast', name: 'Toast', label: { zh: '轻提示', en: 'Toast' }, targets: dualTarget }, ], }, @@ -111,6 +115,7 @@ export const componentCatalog: readonly ComponentCatalogGroup[] = [ { id: 'popover', name: 'Popover', label: { zh: '气泡浮层', en: 'Popover' }, targets: dualTarget }, { id: 'dialog', name: 'Dialog', label: { zh: '对话框', en: 'Dialog' }, targets: dualTarget }, { id: 'region-picker', name: 'RegionPicker', label: { zh: '地区选择', en: 'Region Picker' }, targets: dualTarget }, + { id: 'signature', name: 'Signature', label: { zh: '签名', en: 'Signature' }, targets: dualTarget }, { id: 'map', name: 'Map', label: { zh: '小程序地图', en: 'Map' }, targets: weappOnly }, { id: 'robot-chat', name: 'RobotChat', label: { zh: '机器人对话', en: 'Robot Chat' }, targets: weappOnly }, ], diff --git a/apps/docs/src/components/DateFieldDemo.vue b/apps/docs/src/components/DateFieldDemo.vue new file mode 100644 index 00000000..2a24df96 --- /dev/null +++ b/apps/docs/src/components/DateFieldDemo.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/apps/docs/src/components/FormComponentDemo.test.ts b/apps/docs/src/components/FormComponentDemo.test.ts index 11857740..fb921315 100644 --- a/apps/docs/src/components/FormComponentDemo.test.ts +++ b/apps/docs/src/components/FormComponentDemo.test.ts @@ -512,19 +512,6 @@ describe('FormComponentDemo', () => { await switches[0]!.trigger('click') expect(switchDemo.get('.form-demo__control-head output').text()).toBe('已关闭') - const toast = mount(FormComponentDemo, { - global: { plugins: [themePlugin] }, - props: { example: 'toast', locale: 'zh' }, - }) - const toasts = toast.findAll('.varo-toast') - expect(toasts).toHaveLength(4) - expect(toasts.map(item => item.attributes('data-type'))).toEqual(['text', 'warning', 'danger', 'success']) - expect(toast.text()).toContain('信息已更新') - expect(toast.text()).toContain('请检查必填项') - expect(toast.text()).toContain('请求失败') - expect(toast.text()).toContain('保存成功') - expect(toast.find('.varo-toast__close').exists()).toBe(false) - const loading = mount(FormComponentDemo, { global: { plugins: [themePlugin] }, props: { example: 'loading', locale: 'en' }, diff --git a/apps/docs/src/components/FormComponentDemo.vue b/apps/docs/src/components/FormComponentDemo.vue index a9ccf098..88877611 100644 --- a/apps/docs/src/components/FormComponentDemo.vue +++ b/apps/docs/src/components/FormComponentDemo.vue @@ -24,7 +24,6 @@ import { VSkeleton as H5Skeleton, VSwitch as H5Switch, VTextarea as H5Textarea, - VToast as H5Toast, VUploader as H5Uploader, } from '@varo-ui/h5' import { @@ -52,7 +51,6 @@ import { VSkeleton as WeappSkeleton, VSwitch as WeappSwitch, VTextarea as WeappTextarea, - VToast as WeappToast, VUploader as WeappUploader, } from '@varo-ui/weapp' import { computed, onBeforeUnmount, reactive, ref, shallowRef, useId } from 'vue' @@ -79,7 +77,6 @@ type FormDemoKind | 'short-password' | 'switch' | 'textarea' - | 'toast' | 'uploader' type Locale = 'zh' | 'en' type Platform = 'h5' | 'weapp' @@ -120,7 +117,6 @@ const VSkeleton = computed(() => activePlatform.value === 'h5' ? H5Skeleton : We const VShortPassword = computed(() => activePlatform.value === 'h5' ? H5ShortPassword : WeappShortPassword) const VSwitch = computed(() => activePlatform.value === 'h5' ? H5Switch : WeappSwitch) const VTextarea = computed(() => activePlatform.value === 'h5' ? H5Textarea : WeappTextarea) -const VToast = computed(() => activePlatform.value === 'h5' ? H5Toast : WeappToast) const VUploader = computed(() => activePlatform.value === 'h5' ? H5Uploader : WeappUploader) const copyState = ref<'idle' | 'copied' | 'unsupported'>('idle') let copyFeedbackTimer: number | undefined @@ -142,12 +138,6 @@ const componentSearchResults = computed(() => { ) }) const textareaValue = shallowRef(props.locale === 'en' ? 'The confirmation button does not respond after selecting a date.' : '选择日期后点击确认按钮没有响应。') -const toastItems = computed(() => [ - { id: 'info', message: props.locale === 'en' ? 'Information updated' : '信息已更新', type: 'text' as const }, - { id: 'warning', message: props.locale === 'en' ? 'Check required fields' : '请检查必填项', type: 'warning' as const }, - { id: 'error', message: props.locale === 'en' ? 'Request failed' : '请求失败', type: 'danger' as const }, - { id: 'success', message: props.locale === 'en' ? 'Saved successfully' : '保存成功', type: 'success' as const }, -]) const formModel = reactive({ account: '', budget: 40, @@ -1201,23 +1191,6 @@ const marketingEnabled = shallowRef(true)
- - `.trim() - case 'toast': - return ` - + + + + diff --git a/apps/docs/src/components/PlatformTabsDemo.vue b/apps/docs/src/components/PlatformTabsDemo.vue index dc3be4ba..a98f0154 100644 --- a/apps/docs/src/components/PlatformTabsDemo.vue +++ b/apps/docs/src/components/PlatformTabsDemo.vue @@ -4789,8 +4789,7 @@ onBeforeUnmount(() => { } .platform-demo__trigger, -.platform-demo__dialog-close, -:deep(.varo-button) { +.platform-demo__dialog-close { display: inline-flex; gap: 8px; align-items: center; @@ -4804,59 +4803,12 @@ onBeforeUnmount(() => { border-radius: 16px; } -:deep(.varo-button[data-size='sm']) { - gap: 6px; - min-height: 36px; - padding: 0 12px; - font-size: 0.82rem; - border-radius: 12px; -} - -:deep(.varo-button[data-size='md']) { - min-height: 44px; - padding: 0 16px; - font-size: 0.92rem; - border-radius: 16px; -} - -:deep(.varo-button[data-size='lg']) { - gap: 10px; - min-height: 48px; - padding: 0 20px; - font-size: 1rem; - border-radius: 18px; -} - .platform-demo__trigger, .platform-demo__dialog-close { color: var(--varo-primary-foreground); background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2)); } -:deep(.varo-button[data-disabled='true']) { - cursor: not-allowed; - opacity: 0.72; -} - -:deep(.varo-button[data-variant='outline']) { - color: var(--vp-c-text-1); - background: transparent; - border-color: var(--vp-c-divider); -} - -:deep(.varo-button[data-variant='ghost']) { - color: var(--varo-foreground, var(--demo-brand)); - background: var(--varo-card-muted, color-mix(in srgb, var(--demo-brand) 10%, transparent)); -} - -:deep(.varo-button[data-shape='square']) { - border-radius: 6px; -} - -:deep(.varo-button[data-shape='round']) { - border-radius: 999px; -} - :deep(.varo-button[data-hairline='true']) { border-width: 0.5px; } @@ -4918,25 +4870,12 @@ onBeforeUnmount(() => { :deep(.varo-input__prefix), :deep(.varo-input__suffix), -:deep(.varo-input__clear), :deep(.varo-input__word-limit) { flex: none; font-size: 0.82rem; color: var(--vp-c-text-2); } -:deep(.varo-input__clear) { - display: inline-flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - cursor: pointer; - background: color-mix(in srgb, var(--varo-muted) 14%, transparent); - border: 0; - border-radius: 999px; -} - :deep(.varo-input[data-invalid='true'] .varo-input__body) { border-color: color-mix(in srgb, var(--varo-danger) 52%, transparent); } @@ -5963,64 +5902,6 @@ onBeforeUnmount(() => { padding-block: 12px; } -.platform-demo__input-case[data-case='textarea'] :deep(.varo-input__word-limit) { - align-self: flex-end; - margin-bottom: 14px; -} - -.platform-demo__input-sample :deep(.varo-input__clear) { - position: relative; - display: inline-flex; - flex: none; - align-items: center; - justify-content: center; - width: 44px; - height: 44px; - padding: 0; - font-size: 0; - color: transparent; - cursor: pointer; - background: transparent; - border: 0; - border-radius: 999px; -} - -.platform-demo__input-sample :deep(.varo-input__clear::before) { - display: inline-flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - font-size: 1rem; - line-height: 1; - color: var(--input-muted); - content: '×'; - background: transparent; - border-radius: 999px; - transition: - color 120ms cubic-bezier(0.16, 1, 0.3, 1), - background 120ms cubic-bezier(0.16, 1, 0.3, 1), - transform 80ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.platform-demo__input-sample :deep(.varo-input__clear:hover::before) { - color: var(--input-text); - background: var(--input-field-hover); -} - -.platform-demo__input-sample :deep(.varo-input__clear:focus-visible) { - outline: none; -} - -.platform-demo__input-sample :deep(.varo-input__clear:focus-visible::before) { - color: var(--input-accent); - box-shadow: 0 0 0 2px var(--input-accent); -} - -.platform-demo__input-sample :deep(.varo-input__clear:active::before) { - transform: scale(0.94); -} - .platform-demo__preview-content[data-example='input'] { display: block; } @@ -6098,7 +5979,7 @@ onBeforeUnmount(() => { } } -.platform-demo button:active:not(:disabled) { +.platform-demo button:not(.varo-button):active:not(:disabled) { transform: scale(0.97); } diff --git a/apps/docs/src/components/PrimitiveExample.vue b/apps/docs/src/components/PrimitiveExample.vue index 69cc3732..950117c9 100644 --- a/apps/docs/src/components/PrimitiveExample.vue +++ b/apps/docs/src/components/PrimitiveExample.vue @@ -1,6 +1,6 @@